title

Теория

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

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

В начале примера обычно используется строка app.innerHTML = "". Она очищает контейнер перед новым запуском. Это нужно для того, чтобы старый результат не накладывался на новый. Иначе после каждого перезапуска в области вывода оставались бы предыдущие элементы.

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

const app = document.getElementById("app");
app.innerHTML = "";

let size = 40;
if (x > 200) {
  size = 20;
}

Сначала код получает контейнер через document.getElementById("app"). Затем область вывода очищается, чтобы начать с чистого состояния. После этого можно объявлять переменные через let и добавлять условия через if. Такая структура делает пример управляемым и предсказуемым.

Ниже ты увидишь, как внутри контейнера app создаётся простая сцена. Сначала все элементы будут одинаковыми, а потом условие разделит их по правилу. Так ты увидишь, как переменные и условия меняют поведение системы.

Практика

Начнём с простой сетки. Здесь используется переменная для управления размером фигур. Пока всё выглядит одинаково, но это база для дальнейших изменений.

Сначала код получает контейнер app, очищает его и создаёт внутри холст. Затем переменная size задаёт размер всех кругов сразу. Если изменить её значение, изменится вся композиция. Это и есть главный смысл переменных — централизованный контроль над параметрами сцены.

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

Здесь всё так же начинается с контейнера app, но дальше добавляется условие if. Оно проверяет положение круга по оси X и в зависимости от этого меняет цвет. Так композиция делится на две части и становится более выразительной. Даже простое условие уже создаёт визуальное различие между элементами.

Вариация

Один и тот же результат можно получить разными способами. Ниже показана одна и та же задача — сетка кругов, реализованная через p5.js и через Vanilla JS. Сравни не только код, но и то, как ты ⁠о нём думаешь.

В p5.js многие вещи уже настроены заранее. Есть готовый холст, функции рисования и цикл отрисовки. Ты сразу работаешь с формами и координатами, почти не думая о DOM. Это делает вход быстрым и интуитивным.

В Vanilla JS ты сам создаёшь холст, получаешь контекст рисования и управляешь всем вручную. Здесь больше кода, но он прозрачнее — ты видишь, как именно всё устроено. Это даёт больше контроля, но требует лучше понимать структуру среды.

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

Оба подхода решают одну и ту же задачу, но по-разному. p5.js подходит для быстрых экспериментов и визуального поиска. Vanilla JS даёт полный контроль и лучше показывает, как работает код. Умение использовать оба подхода расширяет возможности в креативном кодинге.

Вывод

1. Переменные позволяют управлять параметрами всей сцены
2. Условия добавляют различия между элементами
3. Даже простая логика создаёт визуальную структуру

Задание

Попробуй изменить поведение элементов с помощью условий. В коде ниже есть несколько вариантов — раскомментируй их и посмотри, как меняется композиция. Старайся понять, какое правило стоит за каждым изменением.

1. Раскомментируй условие с y, чтобы разделить экран по горизонтали
2. Попробуй вариант с (x + y), чтобы получить шахматный паттерн
3. Измени размер фигур через условие справа