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в коде. Затем попробуй изменить скорость, изменив шаг времени. Так ты увидишь, как параметры влияют на характер анимации.