Введение

В этом уроке вы узнаете, как создать динамичную и красочную геометрическую анимацию с помощью p5.js. Эта анимация символизирует идею о том, что «мир полон невероятных и невероятных людей, творящих чудеса». Фигуры будут хаотично перемещаться по холсту, меняя цвета и создавая визуально привлекательный эффект.

Шаг 1. Настройка среды

1. Загрузить p5.js:

   • Перейдите на сайт p5.js и загрузите последнюю версию p5.js.
   • В качестве альтернативы вы можете использовать онлайн-редактор p5.js editor.p5js.org, который позволяет писать и запускать код прямо в браузере.

2. Создать новый проект:

   • Если вы используете онлайн-редактор, создайте новый эскиз, нажав «Новый» в верхнем левом углу.
   • Если вы пишете код локально, создайте новый HTML-файл и подключите библиотеку p5.js.

Шаг 2: Написание базовой структуры

Давайте начнем с настройки базовой структуры нашего скетча p5.js. Сюда входит определение функций setup() и draw().

function setup() {
  createCanvas(windowWidth, windowHeight);
  noStroke();  // Disable stroke for the shapes
}

function draw() {
  background(30, 30, 60, 25);  // Dark background with transparency
}

Объяснение:

createCanvas(windowWidth, windowHeight);: устанавливает размер холста в соответствии с окном вашего браузера.
noStroke();: удаляет границу с фигур, которые мы создадим.
background(30, 30, 60, 25);: это устанавливает темно-синий цвет фона с некоторой прозрачностью, создавая эффект скольжения для фигур.

Шаг 3. Добавление динамических геометрических фигур

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

function draw() {
  background(30, 30, 60, 25); // Dark background with transparency

  for (let i = 0; i 



Объяснение:

• Случайные переменные:

  • x и y определяют положение каждой фигуры на холсте.
  • size управляет размером каждой фигуры.
  • colorR, colorG, colorB генерируют случайные значения для красного, зеленого и синего компонентов цвета заливки.
  • fill(colorR, colorG, colorB, 150);: устанавливает цвет заливки с небольшой прозрачностью.

• Типы фигур:

  • ellipse(x, y, size, size);: рисует круг или эллипс.
  • rect(x, y, size, size);: Рисует квадрат или прямоугольник.
  • треугольник(x, y, размер x, y, размер x / 2, y - размер);: Рисует треугольник.

Шаг 4. Создание адаптивной анимации

Чтобы убедиться, что размер холста изменяется вместе с окном, добавьте следующую функцию:

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

Шаг 5. Запуск эскиза

• Если вы используете онлайн-редактор p5.js, просто нажмите кнопку «Воспроизвести», чтобы просмотреть анимацию.
• Если вы пишете код локально, откройте HTML-файл в веб-браузере, чтобы просмотреть анимацию.