Изучите основы p5.js

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

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

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

Настройте HTML

Мы создадим основу для веб-страницы и больше никогда не будем касаться HTML. Наш HTML должен делать две вещи. Сначала необходимо связать все файлы, необходимые для нашего проекта - библиотеку p5.js, наш JS-скрипт и таблицу стилей. Затем ему также необходимо настроить разделение, на которое мы позже смонтируем холст (запомните идентификатор «shape» на будущее).

Примечание. Я решил импортировать p5.js через CDN, но вы можете свободно загрузить его на свой компьютер и использовать локально.

Стиль веб-страницы (необязательно)

Если вы хотите, чтобы ваша страница выглядела немного лучше и не хотите, чтобы ваш последний холст располагался в верхнем левом углу экрана, вам нужно добавить к нему некоторый стиль. Я встраиваю сюда свой стиль, но, конечно, вы можете подобрать его по своему вкусу.

Создайте холст

Теперь мы готовы подключить холст к разделу HTML, который мы создали ранее. Для этого нам нужно настроить новый объект эскиза и передать этот объект конструктору p5 для создания нового экземпляра p5.

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

Я знаю, что это звучит немного сложно, но давайте посмотрим код, а затем разберем, что происходит.

Сначала мы получаем высоту div, на которой мы хотим установить холст. Затем мы создаем функцию, которая принимает экземпляр p5 (здесь называется p) в качестве параметра и присоединяет к нему метод setup. В этой настройке мы напишем весь код, который хотим запустить, как только загрузится веб-страница. На данный момент все, что мы делаем, - это создаем холст с точно такими же размерами, как у нашего HTML-блока.

Примечание. Здесь мы предполагаем, что div представляет собой квадрат. Если мы хотим разрешить прямоугольные части, нам нужно получить как высоту, так и ширину разделения и передать их в метод createCanvas () соответственно.

Наконец, мы создаем новый экземпляр p5 и передаем функцию sketch как обратный вызов, а id div как точку монтирования. На нашей странице пока ничего не отображается, потому что мы ничего не добавляли на холст. Давай поработаем над этим сейчас.

Добавить фигуру на холст

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

Обратите внимание, как заливка используется перед созданием эллипса, чтобы указать цвет эллипса. В приведенном выше примере я использовал целое число, которое соответствует цветовой схеме 0–255, но fill также принимает RGB или шестнадцатеричные цветовые строки, как мы увидим позже.

Чтобы разместить эллипс в центре, мы передали половину размера холста как координаты x и y центра эллипса. Ось координат для холста центрируется в самом верхнем левом углу, где x увеличивается вправо, а y увеличивается вниз.

Случайное расположение и размер

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

Вместо того, чтобы передавать предустановленные значения методу ellipse (), мы теперь генерируем случайные координаты x, y для местоположения и случайную ширину и высоту для размера. Так фигуры будут интереснее смотреться на холсте.

Рефакторинг создания форм

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

Обратите внимание, что p.ellipse теперь вызывается из функции drawEllipse, а не из p.setup. drawEllipse также заботится о случайном изменении размера эллипса. В настройке мы создали массив функций, которые рисуют наши формы, и для каждой из этих функций мы сгенерировали случайный цвет для заливки формы. Мы также выбрали случайное место на холсте, а затем вызвали вспомогательную функцию для фактического рендеринга формы.

Добавить больше фигур

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

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

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

Альтернативный способ рисования этих фигур - использовать p.random (информация в документации) для выбора случайной функции рисования на каждой итерации. Тогда у нас будет разное количество каждой формы на холсте. Я оставляю это в качестве упражнения для читателя. Пожалуйста, поделитесь тем, что у вас получилось!

Вы сделали это!

Поздравляем, теперь в вашем распоряжении фантастический инструмент для создания красивой графики с использованием JavaScript. Надеюсь, эта статья дала вам общее представление о библиотеке p5. Спасибо, что до сих пор следили за мной.

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

Еще раз спасибо за чтение!