title

Теория

В p5.js всё строится вокруг цикла draw(). Он постоянно перерисовывает сцену, создавая поток кадров. Это и есть основа анимации: изображение обновляется много раз в секунду. В этом уроке ты сравнишь два подхода: автоматический цикл в p5 и ручное управление в Vanilla JS.

Встроенный цикл draw() у p5.js запускается примерно 60 раз в секунду и каждый раз заново рисует сцену. Это удобно: тебе не нужно думать о таймерах или обновлении кадров. Достаточно описать, что должно происходить в каждом кадре.

В обычном JavaScript такого цикла нет. Чтобы создать анимацию, нужно запускать обновление вручную. Чаще всего используется requestAnimationFrame(). Это даёт больше контроля, но требует явного управления временем.

Получается два разных подхода. В p5 цикл уже встроен и работает автоматически. В Vanilla JS ты сам создаёшь этот цикл. Но в основе в обоих случаях лежит одно и то же: постоянная перерисовка сцены.

Ниже ты увидишь одну и ту же задачу: нарисовать фигуру и оживить её. Сначала это будет сделано через p5.js, затем — через Vanilla JS разными способами.

Вариация

В p5.js достаточно описать сцену внутри draw(). Библиотека сама будет перерисовывать её много раз в секунду.

Здесь создаётся холст, и в каждом кадре сцена очищается. Круг рисуется в позиции, зависящей от времени, поэтому он движется. Всё происходит внутри draw(), который запускается автоматически.

В Vanilla JS нужно самому создать цикл отрисовки. Для этого используется requestAnimationFrame().

Здесь создаётся элемент и запускается функция, которая вызывает сама себя. Это и есть цикл отрисовки. На каждом шаге обновляется позиция элемента, создавая движение.

Анимацию можно сделать и без JavaScript-цикла — через CSS. В этом случае браузер сам управляет движением.

Здесь движение задаётся через keyframes. JavaScript только создаёт элемент, а анимация происходит за счёт CSS. Это другой подход: не перерисовка, а заранее описанное поведение.

Вывод

1. В p5.js цикл draw() уже встроен и работает автоматически
2. В Vanilla JS цикл нужно создавать вручную через requestAnimationFrame()
3. Альтернативно можно использовать CSS-анимации без JavaScript-цикла
4. Во всех случаях анимация — это обновление состояния во времени

Задание

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