title

Теория

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

У каждой фигуры есть форма, позиция и размер. Например, круг можно нарисовать в определённой точке, а его диаметр задать числом. Если менять только один параметр, изображение уже начинает перестраиваться. Так код превращается в инструмент управления композицией.

Цвет в коде тоже задаётся как параметр. Он может быть постоянным, а может меняться от элемента к элементу. Когда ты сочетаешь цвет с повторением и изменением размера, появляется визуальный ритм. Именно из таких связей собирается ощущение баланса.

fill('#ff86db');
ellipse(x, y, 80);
rect(x, y, 60, 60);

Функция fill() задаёт цвет фигуры. ellipse() рисует круг или овал, а rect() — прямоугольник. Первые два значения внутри функции обычно отвечают за позицию, а следующие — за размер. Из этих простых команд и собирается визуальная сцена.

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

Практика

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

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

Теперь можно усложнить композицию. Если изменить форму и добавить второй цвет, изображение станет более динамичным. Сам принцип останется тем же, но визуальное впечатление изменится.

Здесь композиция строится уже из двух форм: прямоугольника и круга. Розовая форма создаёт основу, а голубой круг добавляет акцент в центр. За счёт наложения появляется более сложный визуальный ритм. Так даже простая сетка начинает выглядеть как собранная графическая система.

Вывод

1. Композиция может строиться из самых простых фигур
2. Цвет, размер и расположение напрямую влияют на визуальный баланс
3. Даже повторяющаяся сетка может выглядеть по-разному, если менять параметры

Задание

Теперь попробуй сам изменить композицию. В коде ниже уже подготовлены разные варианты — тебе нужно раскомментировать строки и посмотреть, как меняется результат. Обращай внимание не только на отдельные фигуры, но и на общее ощущение от сетки.

1. Раскомментируй rect(), чтобы заменить круги на квадраты
2. Раскомментируй строку с x / width, чтобы размер менялся по горизонтали
3. Раскомментируй строку с y / height, чтобы получить изменение по вертикали
4. Раскомментируй новый fill(), чтобы сменить цвет всей композиции