title

Теория

Движение в коде создаётся через изменение параметров во времени. Это может быть простое линейное смещение, плавное колебание или более сложная система. Даже если на экране всего один объект, анимация делает сцену глубже и живее. В этом уроке ты сравнишь несколько способов создать движение и увидишь, как один и тот же эффект по-разному собирается в p5.js и Vanilla JS.

Чтобы объект двигался, нужно менять хотя бы один его параметр: положение, размер, угол или прозрачность. Эти изменения происходят кадр за кадром, поэтому зритель воспринимает их как непрерывное движение. В p5.js для этого уже есть цикл draw(), а в Vanilla JS движение чаще собирается через requestAnimationFrame() или через CSS-анимацию. Так одна и та же идея может быть реализована разными инструментами.

Движение может быть разным по характеру. Линейное выглядит механически и строго, а волнообразное или колебательное — мягче и органичнее. Это важно для креативного кодинга, потому что ощущение от сцены зависит не только от формы, но и от того, как она себя ведёт. Получается, что динамика тоже становится частью композиции.

let x = width / 2 + sin(frameCount * 0.05) * 120;

Здесь положение объекта вычисляется заново в каждом кадре. Функция sin() создаёт плавное колебание, а frameCount отвечает за движение во времени. Это один из самых удобных способов сделать анимацию мягкой и живой. Меняя множители, ты можешь управлять скоростью и амплитудой движения.

Ниже показана одна и та же задача: оживить круг. Сначала движение будет реализовано через p5.js, а потом — через Vanilla JS двумя способами. Это поможет увидеть не только разницу в синтаксисе, но и разницу в подходе.

Вариация

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

Здесь круг плавно движется из стороны в сторону по синусоиде. Его положение пересчитывается в каждом кадре, поэтому движение получается непрерывным. Это очень типичный способ анимировать объект в p5.js.

В Vanilla JS аналогичный эффект можно собрать вручную. Для этого нужно создать цикл обновления и в нём постоянно менять положение элемента.

Здесь создаётся DOM-элемент и запускается функция анимации. Она вызывает сама себя через requestAnimationFrame(), из-за чего сцена обновляется кадр за кадром. Положение круга тоже вычисляется через синус, поэтому эффект похож на вариант в p5.js.

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

Здесь анимация задаётся через @keyframes. Движение заранее описано в CSS, поэтому браузер сам управляет сменой состояний. Такой способ проще в настройке, но менее гибкий, чем ручной цикл.

Вывод

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

Задание

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