title

Теория

Для креативного кодинга не нужны сложные инструменты. В этом курсе весь код выполняется прямо в браузере. Это значит, что ты сразу видишь результат своих действий. Такой подход позволяет сосредоточиться на визуале, а не на настройке среды.

Код в этом учебнике запускается в отдельной области —canvas. Это специальная поверхность, на которой рисуется графика. Каждый раз, когда ты нажимаешь кнопку запуска, код выполняется заново. Это позволяет быстро проверять идеи и экспериментировать.

У тебя есть несколько базовых действий: запустить код, остановить его и изменить. Кнопкаrunзапускает выполнение, а stopостанавливает его. После изменений код можно запустить снова и сразу увидеть результат. Такой цикл — основа работы с креативным кодом.

Ниже ты можешь попробовать этот процесс на практике. Обрати внимание не только на картинку, но и на сам процесс: запуск, изменение и перезапуск.

Практика

Этот пример показывает простую анимацию. Круг движется по экрану, потому что его позиция меняется со временем. Попробуй запустить код, затем остановить и изменить параметры.

Переменнаяxотвечает за позицию круга. В каждом кадре она увеличивается, поэтому круг движется вправо. Так работает анимация: значения изменяются со временем. Функцияdraw()выполняется постоянно, создавая движение.

Теперь движение управляется переменнойspeed. Попробуй изменить её значение и перезапустить код. Это показывает, как параметры влияют на поведение системы. Ты управляешь не движением напрямую, а его скоростью.

Задание

Попробуй изменить поведение анимации. Ниже есть готовые варианты — раскомментируй строки и посмотри результат. Не забывай перезапускать код после изменений.

1. РаскомментируйmouseY, чтобы управлять движением мышью
2. Раскомментируйsin(), чтобы получить плавное колебание
3. Измениspeed, чтобы ускорить или замедлить движение
4. Попробуй комбинировать изменения

Вывод

1. Код выполняется прямо в браузере
2. Функцияdraw()создаёт анимацию
3. Изменение параметров влияет на поведение системы