Польові зони: Градієнтний шум + частинки

Невидима вісна карта

Поле потоку призначає напрямок θ(x, y) кожній точці на монітор – невидиму вітрову карту, яка вказує, куди потрібно повернути частинці, що проходять повз. Якщо випустити достатньо частинок у цей вітер і дозволити їм побігти, сукупність їхніх шляхів розкриває структуру поля: спіралі, гребені, скручені струмки. Ця техніка, популяризована генеративними художниками, такими як Тайлер Хоббс на Processing/p5.js, така що її можна побудувати з нуля в Canvas 2D за менш ніж годину. Вона виглядає органічно, а не випадково, тому що вона базується на безперервному, просторово-корельованому шумі: близькі точки отримують схожі кути, тому частинки, які починають близько один до одного, з часом будуть плисти разом, перш ніж поле розлучить їх – та сама якісна поведінка, яку ви бачите в диму, піску, що дме вітром, або лініях течії річки.

Від Перлінського шуму до векторного поля

Кут функцію необхідно змінювати плавно у просторі, тому Перлінський шум – безперервний, приблизно в межах [-1, 1], без артефактів сітки – є класичним вибором. Його масштабують у діапазон поворотів: θ(x, y, t) = noise(x·s, y·s, t·s_t) · 2π · n, де s – просторовий масштаб шуму, s_t – часовий масштаб, а n – кількість повних обертів, до яких відображається діапазон шуму. Додавання часового члена означає, що поле само по собі повільно змінюється, тому частинка, яка б інакше осіла в замкнену петлю, продовжує відкривати нові території – без цього анімація застигає статичною картинкою протягом секунд. Кожна частинка рухається з x += cos(кут)·швидкість, y += sin(кут)·швидкість що кадр, обертаючись або відроджуючись, коли вона виходить за межі екрану.

θ(x, y, t) = noise(x·s, y·s, t·s_t) · 2π · n
x += cos(θ) · speed;  y += sin(θ) · speed
Trail fade: ctx.fillStyle = "rgba(10,10,20,0.03)"; ctx.fillRect(0,0,w,h)

Основний трюк поля – не очищати канву повністю

Характерний вигляд досягається завдяки тому, що не повністю очищують полотно кожного кадру: замість ctx.clearRect(), малюють майже прозомий прямокутник поверх усього полотна перед малювання нових позицій частинок. Низьке значення альфа (0,01–0,02) створює довгі примарні смуги; вище значення альфа (0,08–0,15) дає короткі хвости комет, які більш чітко показують миттєву форму поля – цей єдиний параметр є найбільшим візуальним рушієм у всьому ескізі. Колір зазвичай виводиться з кута місцевого поля, яке відображається на відтінок (відтінок = кут/(2π)·360), буквально роблячи видимим векторне поле; 3000–5000 частинок при частоті 60 кадрів за секунду комфортні для Canvas 2D на більшості ноутбуків, а шумний масштаб, час масштабування, кількість частинок, альфа смуги та швидкість кожним по черзі обмінюються щільністю, життєздатністю та частотою кадрів.

Frequently asked questions

Спробуйте наживо

Усе, що вище, працює прямо у вашому браузері — відкрийте the simulation і змінюйте параметри під час роботи. Нічого не встановлюється, нічого не завантажується на сервер, уся модель живе в одній вкладці.