title

Теория

Вектор — это значение с направлением и длиной. Если обычное число говорит «сколько», то вектор говорит «куда и насколько сильно». Векторное поле — это набор таких направлений для многих точек: в каждой ячейке сетки, в каждой позиции частицы или в каждой точке 3D-пространства можно вычислить свой угол движения.

В креативном кодинге поле удобно воспринимать как невидимую карту ветра. Мы не рисуем ветер напрямую, но рисуем то, что он делает с формами: поворачивает стрелки, вытягивает линии, заставляет частицы обходить центр, закручивает поток или создаёт мягкую турбулентность. Поэтому поле часто используется для постеров, генеративных текстур, систем частиц и абстрактной 3D-графики.

Самый простой способ построить поле — взять координаты x и y, подставить их в формулу и получить угол. Например, sin() и cos() дают волновое поле, расстояние до центра даёт радиальное поле, а noise() даёт органичное поле без резких скачков. В 3D к этому добавляется координата z, поэтому направление может зависеть не только от плоскости, но и от глубины.

const angle = noise(x * scale, y * scale, time) * TWO_PI * 2;
const vx = cos(angle); // направление по x
const vy = sin(angle); // направление по y
position.add(createVector(vx, vy).mult(speed));

У поля есть несколько дизайнерских параметров. scale управляет крупностью: маленький масштаб создаёт широкие спокойные потоки, большой — дробную турбулентность. time делает поле живым. strength решает, насколько сильно объект слушается направления. А правило отображения решает, что мы видим: стрелки, следы частиц, линии, плитки или объёмные элементы.

1. Поле вычисляет направление из координат, а не хранит каждую стрелку вручную.
2. Частица читает направление в своей позиции и делает небольшой шаг по этому вектору.
3. Красота поля зависит от баланса: слишком слабое поле не видно, слишком сильное разрушает композицию.

Практика

Сначала сделаем два средних примера: один показывает поле на плоскости через стрелки p5.js, второй переносит ту же идею в Three.js и собирает 3D-решётку направлений. Здесь важнее увидеть структуру: поле — это не случайные повороты, а формула, которая повторяется во многих точках.

p5.js: среднее поле стрелок. Каждая ячейка получает угол из noise(), поэтому сетка выглядит как карта мягкого ветра.

В этом скетче поле видно напрямую: каждая короткая линия показывает локальное направление. Такой режим полезен как диагностика: прежде чем запускать частицы, можно проверить, куда их понесёт.

Three.js: среднее объёмное поле. Кубы и диски стоят в решётке, но каждый элемент поворачивается и поднимается по своему вектору.

В 3D поле можно читать не только как угол, но и как высоту, масштаб или поворот объекта. Так поле становится не линией поверх изображения, а самой геометрией сцены.

Практика: сложная

Теперь усложним визуальный результат. Вместо того чтобы просто показывать поле, дадим ему материал: частицы будут оставлять следы на p5.js, а в Three.js поле соберётся в слои объёмных линий и плиток. Код становится плотнее, но принцип остаётся тем же: точка читает направление и двигается.

p5.js: сложное поле частиц. Сотни точек читают noise-поле, оставляют следы и собирают живую графическую текстуру.

Частицы делают поле видимым через траекторию. Если стрелка показывает только одно направление в одной точке, то след частицы показывает, как направления связаны между собой во времени.

Three.js: сложное 3D-поле из слоёв. Линии, диски и глубина работают вместе, создавая ощущение объёмного потока.

В объёмной версии поле становится почти архитектурой: элементы не только поворачиваются, но и распределяются по глубине. Это хороший приём для сцен, где нужно показать движение без реалистичной симуляции жидкости.

Вывод

Векторное поле — это способ отделить поведение от формы. Сначала мы задаём невидимое правило направления, а потом решаем, чем его проявить: стрелками, частицами, плитками, линиями или 3D-объектами. Поэтому одно и то же поле может выглядеть как инфографика, текстура, постер или пространственная сцена.

Самые выразительные поля обычно не самые хаотичные. Они сохраняют композиционный контроль: белый фон, понятные поля, ограниченную палитру, центр или направление движения. Сложность появляется не из бесконечного количества параметров, а из того, что несколько параметров связаны между собой.

• createVector(x, y); // создаёт вектор в p5.js

  

• p5.Vector.fromAngle(angle); // вектор направления из угла

  

• noise(x * scale, y * scale, t); // плавное значение поля

  

• position.add(velocity); // частица делает шаг по вектору

  

• new THREE.Vector3(x, y, z); // вектор в Three.js

  

Задание

Собери свою серию flow-field постеров на p5.js. В коде подготовлены параметры поля, частиц и визуального следа. Меняй их по одному: так будет понятно, какой параметр отвечает за масштаб потока, какой — за плотность, а какой — за настроение изображения.

1. Начни с fieldScale: сделай крупный спокойный поток и дробную турбулентную версию.
2. Затем настрой particleCount и trailAlpha, чтобы сравнить лёгкую и плотную графику.
3. После этого выбери paletteMode: холодный, тёплый или смешанный вариант фирменной палитры.
4. В финале измени centerPull и найди баланс между свободным потоком и композицией вокруг центра.

Задание: p5.js flow-field постер. Управляй масштабом поля, количеством частиц, прозрачностью следа, палитрой и силой центра.