title

Теория

В p5.js ввод пользователя встроен в систему. Позиция мыши, клики и клавиши доступны напрямую через переменные. Это позволяет управлять графикой в реальном времени. Визуал перестаёт быть статичным и начинает реагировать на действия пользователя.

Например, переменные mouseX и mouseY всегда содержат текущую позицию курсора. Их можно использовать как параметры: позицию, размер, цвет или движение объектов.

Ниже ты сразу создашь интерактивную систему, где положение мыши управляет графикой.

Задача

Сделай систему, где круг следует за мышью, а его размер зависит от её положения по горизонтали.

Здесь создаётся холст, который перерисовывается в цикле. Позиция круга привязана к мыши, поэтому он движется вместе с ней. Размер вычисляется от значения mouseX, из-за чего круг меняется при движении по экрану.

Добавим реакцию на клавишу. При нажатии цвет круга меняется, что делает систему более интерактивной.

Вывод

1. Позиция мыши доступна напрямую через mouseX и mouseY
2. Эти значения можно использовать как параметры визуала
3. Клавиатура позволяет добавлять дополнительные состояния
4. Интерактивность возникает из связи ввода и визуала

Задание

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