title

Теория

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

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

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

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

Практика

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

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

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

Задание

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

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

Вывод

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