Может быть, вы слышали термин поле потока и, возможно, видели какие-нибудь изящные картинки или анимации с прикрепленным термином. В этой статье я расскажу, что такое поле потока, покажу, как его создать, и приведу несколько примеров экспериментов с ними. Поля потока также известны как векторные поля. Https://en.wikipedia.org/wiki/Vector_field

Предыгровое шоу

В этой статье я буду использовать HTML5, JavaScript и Canvas, но эти концепции будут применяться к Processing, p5js, WebGL или практически к любой другой платформе графического программирования. В таком случае я постараюсь сосредоточиться меньше на конкретных материалах холста и больше на основных концепциях.

Но чтобы просто заложить основу, я собираюсь просмотреть файлы, которые мы используем. Все будет очень просто. Файл HTML и файл JavaScript. Вот HTML:

Немного CSS, моя панель QuickSettings, которая в конечном итоге может пригодиться, элемент холста и ссылка на основной скрипт. Сценарий будет начинаться так:

Все, что мы здесь делаем, это получаем ссылку на холст и его контекст, затем изменяем размер холста, чтобы он заполнял окно браузера, сохраняя значения ширины и высоты для дальнейшего использования. Некоторые элементы CSS в файле HTML помогают сделать все это в полной мере возможным.

Главное событие: поля потока

Итак, что такое поле течения? Что ж, вы можете думать о поле как о двухмерной области. Конечно, у вас может быть трехмерное поле потока, но давайте оставим это на другой день. Вы также можете думать о магнитном поле.

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

По сути, это то, что мы хотим сделать - создать двухмерную область, где каждая точка имеет разное значение. Но это не просто случайные значения. Определенная точка имеет определенное значение, и по мере того, как вы перемещаетесь от этой точки к соседним точкам, вы получаете похожие, но постепенно меняющиеся значения. В полях потока эти значения обычно интерпретируются как направления. Поэтому, если вы сопоставите свои значения так, чтобы они находились в диапазоне от 0 до 360, их можно напрямую использовать как градусы направления. Конечно, мы, вероятно, сопоставим их между 0 и 2 радианами Пи, потому что компьютеру это больше нравится.

Когда у нас есть значения для каждой точки, мы можем графически отобразить каждую на основе ее значения. Например, мы можем нарисовать линию, указывающую в направлении, связанном с этим значением.

Итак, это подводит нас к двум разным задачам - как придумать разные значения для поля и как отобразить разные значения в поле. Самое замечательное, что нет правильных ответов ни на один из этих вопросов. На самом деле существует почти бесконечное количество способов сделать любой из них, так что вы можете изучить эту технику довольно долго.

Давайте начнем с простого, чтобы понять, что происходит. Я просто прохожу через каждые 10 пикселей слева направо и сверху вниз. Значение для этой точки в сетке будет просто (x + y) * 0.01 % Math.PI * 2. Просто сложите x и y вместе, уменьшите масштаб и измените его на 360 градусов (PI * 2 радиана). Затем мы визуализируем это значение, переводя его в эту точку, вращая по значению и рисуя короткую линию в точке.

Как бы все это ни было, у нас уже есть начало чего-то интересного.

Теперь вы можете понять, почему это становится тем, что вы называете «полем потока». Следуя указаниям линий, вы начинаете замечать очень направленное движение.

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

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

Я произвольно определил значение 20 000 для количества точек для рендеринга. Просто повторяйте это много раз, выбирая случайную точку, находя ее значение и визуализируя. Я также изменил несколько других значений, таких как длина линии и значение шкалы, на которое умножается (x + y). Теперь мы получаем что-то более естественное.

На этом этапе мы можем просто начать возиться с формулой, которую используем для получения значения. Как правило, вам нужно как-то использовать входы x и y, но на самом деле просто делайте здесь все, что хотите. Вот несколько интересный вопрос, который я придумал.

Просто возьмите синус x и y и сложите их вместе. Некоторые изменения рендеринга также: уменьшена ширина линии и изменена длина линии в каждой точке. Но всего лишь с этими небольшими изменениями, мы получили что-то действительно волосатое.

Теперь я мог бы потратить целый день на повторение этого - разные формулы, разные параметры линий, которые он рисует, и т. Д. Я знаю, что могу потратить на это весь день, потому что в прошлом я тратил на это целые дни. Но перейдем к другому.

Ранее я упоминал идею о том, что вы можете представить себе объект, движущийся через поле потока и находящийся под влиянием этих потоков. Давайте смоделируем это. Я начну с одной случайной точки. Назовите это частицей. Эта частица на самом деле будет объектом не только с положением, но и со скоростью по осям x и y. Первоначально они будут установлены на ноль. На каждой итерации, где бы ни находилась частица, мы получаем значение в этом месте - помните, это направление - и используем это значение, чтобы влиять на скорость частицы. Затем мы добавим эту скорость к позиции, чтобы получить новую позицию. И повторить.

Надеюсь, комментарии немного подробнее объясняют, что здесь происходит. Это дает нам следующее:

В данном случае интересно то, что мы больше не видим поле. Мы видим только результат, который поле оказывает на движение частицы.

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

Сделаем еще один для этой статьи. Там, где одна частица была интересной, больше частиц… веселее.

Здесь я просто создал массив частиц и расположил их в левой части экрана. Для алгоритма я использовал странный аттрактор под названием Аттрактор Клиффорда, опубликованный Полом Бурком и приписываемый Клиффорду Пиковеру. Вы можете увидеть код для этого здесь: http://paulbourke.net/fractals/clifford/ Это дает вам очень сложное поле. Параметры a-d рандомизированы вверху файла, поэтому каждый раз вы будете получать разные шаблоны.

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

ОК, хватит на одну статью. Во второй части мы рассмотрим некоторые другие способы создания полей и другие способы их визуализации. Если вы хотите поиграть с самим кодом, вы можете либо взять суть, которую я встроил здесь, либо просто проверить полное репозиторий учебника на https://github.com/bit101/tutorials

Кроме того, если вы ищете другие подобные руководства по программированию, посетите мой основной сайт по адресу http://www.bit-101.com.