title

Теория

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

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

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

Задача

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

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

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

Вывод

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

Задание

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