Вопрос в том, зачем выбирать p5.js вместо HTML5 Canvas, который встроен в javascript. Ответ довольно прост. P5.js более удобен в использовании и прост в изучении, а также внутренне использует HTML5 Canvas.

Давайте приступим к работе с p5.js!

p5js.org предоставляет нам редактор, или мы можем использовать текстовый редактор по нашему выбору. Я буду использовать мой любимый текстовый редактор VS code (надеюсь, ваш тоже), который имеет расширение под названием p5.vscode, которое упрощает нашу работу.

После установки расширения перейдите к палитре команд
и введите «Создать проект p5.js», который создаст проект со всеми
необходимыми файлами.

Теперь мы можем перейти к файлу sketch.js, где вы найдете две функции с именами setup () и draw (). Каждый рисунок, созданный с помощью p5.js, должен содержать эти две функции.

Функция setup () запускается первой и только один раз, за ​​ней следует функция draw (), которая выполняется непрерывно. Чтобы просмотреть вывод на веб-странице, нам нужна любая из этих функций.

Начнем с рисования простой линии, изменив файл sketch.js. Сначала мы создадим холст с помощью createCanvas (width, height), который принимает ширину и высоту в качестве параметров и создает холст заданного размера.

Если createCanvas () не используется, для окна будет задан размер по умолчанию 100x100 пикселей. Затем мы будем использовать line (x₁, y₁, x₂, y₂), чтобы нарисовать линию, которая принимает четыре параметра: начальные координаты (x₁, y₁) и конечные координаты (x₂, y₂). Мы также добавим фон, чтобы отличать холст от веб-страницы. Откройте файл index.html в браузере, чтобы просмотреть вывод, или вы также можете использовать расширение live server в VS Code.

Теперь давайте продолжим и создадим более сложные вещи.

Создание смайлика

Лицо

Первым делом нужно создать полотно необходимого размера. Затем мы создадим функцию smiley (), которая будет рисовать смайлик. Затем мы нарисуем круг, используя эллипс (x, y, ширина, высота). Функция stoke () дает черный цвет контуру, а fill (255,255,0) дает желтый цвет всему кругу. Параметры внутри заливки представляют собой желтый цветовой код RGB.

Улыбайтесь

Улыбка создается с помощью функции дуги arc (x, y, width, height, start, stop).

Глаза

Чтобы расположить глаза, мы создаем переменную, называемую смещением. Мы также используем функцию fill (), чтобы раскрасить их. Как и лицо, глаза также рисуются с помощью ellipse ().

Давайте углубимся в p5.js.

Маурер Роуз

Maurer Rose состоит из нескольких линий, соединяющих некоторые точки на кривой розы. Задумываетесь о том, что такое кривая розы?

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

Математическое определение выглядит следующим образом:

Давайте теперь посмотрим на необходимые функции перед запуском,

  • translate (x, y) используется для размещения объектов на холсте. Задает величину смещения объектов в окне отображения. Параметр x указывает горизонтальное перемещение, а параметр y указывает вертикальное перемещение.
  • vertex (x, y) представляет координаты точек на холсте.
  • beginShape () начинает рисовать указанные ниже точки vertex ().
  • endShape () останавливает рисование.
  • strokeWeight (n) регулирует толщину нарисованных линий.
  • angleMode (градусов) заставляет программу принимать углы в градусах вместо радиан, которые используются по умолчанию.

Давайте теперь перейдем к кодированию.
Сначала мы инициализируем переменные n и d, где n представляет количество лепестков. и d - угол в градусах. Функция setup () работает как обычно. Функция draw () начинает рисование, а цвет фона устанавливается на черный. Функция translate (width / 2, height / 2) позиционирует объект по центру.
Теперь идет beginShape (), которая начинает рисование.
Согласно определению, мы запускаем цикл 361 раз, который рисует требуемые точки, angle k = i * d (где i - счетчик цикла, который начинается с 0 и увеличивается до 361.) radius r = sin ( n * k)
Мы конвертируем r и k в декартову систему координат, чтобы использовать функцию vertex (). Первый for-loop рисует розовую кривую, а следующий for-loop рисует розовую кривую Маурера.

3D-объекты

p5.js использует WebGL для рендеринга трехмерных объектов. Он имеет набор встроенных форм, а также позволяет нам рисовать свои собственные.

Вот некоторые из распространенных форм:

Заключение

p5.js в основном используется для создания генеративного арта и анимации. В этой статье мы только что рассмотрели основы p5.js, и в ней есть намного больше. Как правило, в p5.js. есть два типа библиотек. Базовые библиотеки (p5.sound, p5.accessibility) являются частью дистрибутива p5.js, в то время как дополнительные библиотеки разрабатываются, принадлежат и поддерживаются членами сообщества p5.js. p5.js приветствует библиотеки, предоставленные другими!

Удачного кодирования!

Ссылки

Эта статья опубликована в рамках веб-среды JavaScripted в разделе Клуб исследований и разработки пауков, NIT Trichy!