Композиция: как собрать красивый кадр

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

Главная мысль урока: композиция — это не магия и не «врождённый вкус». Это несколько простых приёмов: оставлять поля, держать баланс, выбирать один акцент и подбирать цвета, которые дружат друг с другом. Сегодня ты соберёшь из них законченный кадр с CodeChick.

Зачем вообще думать про композицию

Открой ленту любимой соцсети и пролистни обложки треков, постеры к фильмам, превью на YouTube. Заметил? Лучшие из них ты понимаешь за полсекунды: глаз сразу цепляется за главное, ничего не давит по краям, цвета не дерутся между собой. А есть превью, на которые смотреть больно: всё налеплено в кучу, текст в самом углу, шесть кислотных цветов сразу. Разница между ними — не в том, что кто-то умеет рисовать, а кто-то нет. Разница в композиции: как объекты расставлены в кадре и как подобраны цвета. И вот что приятно: дизайнер потратил на хорошее превью те же десять минут, что и автор кислотной каши — на свою. Он просто знал несколько простых правил, а тот не знал. Сегодня ты узнаешь эти правила тоже.

Хорошая новость: композиции можно научиться, как приёмам в игре. Это набор понятных правил, а не загадочное чутьё. В прошлых уроках ты уже умеешь рисовать формы, заливать их цветом и складывать фон и слои в правильном порядке, а ещё разбираешься в моделях RGB и HSB и прозрачности. Сегодня мы не учим новых команд — мы учимся расставлять то, что уже умеем рисовать, так, чтобы кадр радовал глаз.

К концу урока у тебя будет законченная сцена: CodeChick стоит чуть в стороне от центра на спокойном небе, под ним полоска земли, рядом — пара зёрнышек, и весь кадр выглядит уравновешенным и цельным. Не «фигурки на холсте», а настоящая маленькая картина. Разберём по шагам, из чего она складывается.

Холст — это лист в скетчбуке

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

Когда объект прижат к краю, кадр выглядит так, будто персонаж сейчас вывалится за рамку или его обрезали. Глазу некомфортно. А если оставить вокруг свободное место, фигура «дышит», и сразу видно: это законченная композиция, а не случайный обрезок.

Давай посмотрим на разницу. Вот как делать не надо:

function setup() {
  createCanvas(400, 400);
  background(200, 230, 255);

  // цыплёнок вплотную к левому верхнему углу
  fill(255, 210, 60);
  ellipse(60, 70, 90, 90);   // голова почти в углу
  ellipse(60, 150, 120, 120); // тело
}

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

А теперь оставим поля и поставим его поспокойнее:

function setup() {
  createCanvas(400, 400);
  background(200, 230, 255);

  // цыплёнок ближе к центру, с воздухом вокруг
  fill(255, 210, 60);
  ellipse(200, 170, 100, 100); // голова
  ellipse(200, 270, 140, 140); // тело
}

Результат: тот же жёлтый цыплёнок теперь стоит ближе к середине холста, вокруг него со всех сторон — ровный голубой воздух. Кадр сразу выглядит спокойным и завершённым: герой не упирается в края, ему есть где «дышать».

Правило простое: держи между объектом и краем холста зазор. Хорошая отправная точка — отступ примерно в одну десятую от размера холста. На холсте 400×400 это около 40 пикселей. Не закон, но удобный ориентир, чтобы не лепить всё впритык.

Баланс: чтобы кадр не «заваливался»

Следующий приём — баланс. Представь холст как качели-весы с опорой посередине. Если весь «вес» картинки свалить на одну сторону, качели перекосятся, и кадр будет визуально заваливаться. Баланс — это когда вес распределён так, что глазу спокойно.

Важно: баланс не значит «всё ровно по центру и симметрично». Идеальная симметрия часто выглядит скучно, как паспортное фото. Гораздо живее работает асимметричный баланс: главный объект чуть смещён в сторону, а с другой стороны его уравновешивает что-то поменьше.

Откуда вообще берётся «вес» у фигуры, если она ничего не весит? Глаз считает тяжёлым то, что крупное, тёмное, яркое или насыщенное деталями. Маленькое, бледное и простое — лёгкое. Поэтому большой сочный цыплёнок слева «тянет» сильнее, чем крошечное бледное облачко справа, и чтобы их уравновесить, облачко достаточно отодвинуть подальше к краю — как лёгкий груз на длинном плече рычага перевешивает тяжёлый у самой опоры. Считать ничего не нужно: достаточно посмотреть на кадр прищурившись и честно спросить себя, не кренится ли он на одну сторону.

Правило третей

Художники и фотографы пользуются простым трюком — правилом третей. Мысленно дели холст на три равные части по горизонтали и по вертикали, как поле для крестиков-ноликов. Получается четыре точки пересечения линий. Если поставить главный объект не в центр, а на одну из этих точек, кадр почти всегда выглядит интереснее и живее, чем при центральной композиции.

На холсте 400×400 линии третей проходят примерно по 133 и 266 пикселям. Поставим цыплёнка на левую линию, а справа уравновесим его маленьким солнцем:

function setup() {
  createCanvas(400, 400);
  background(200, 230, 255);

  // солнце справа сверху — лёгкий противовес
  fill(255, 220, 120);
  noStroke();
  ellipse(310, 90, 70, 70);

  // цыплёнок на левой линии третей — главный герой
  fill(255, 210, 60);
  ellipse(150, 180, 90, 90);  // голова
  ellipse(150, 270, 120, 120); // тело
}

Результат: цыплёнок стоит в левой трети холста, а в правом верхнем углу светит небольшое бледно-жёлтое солнце. Герой смещён в сторону, но кадр не заваливается влево: солнце справа аккуратно его уравновешивает. Композиция выглядит живой, а не «по линеечке».

Разберём логику по шагам:

1. Главный объект — цыплёнок — стоит не по центру, а на левой линии третей (x ≈ 150). Это уже интереснее симметрии.
2. Слева кадр стал «тяжелее» — там большой герой. Чтобы качели не перекосились, справа нужен противовес.
3. Противовес — маленькое солнце. Оно меньше цыплёнка, и это правильно: иначе оно бы перетянуло внимание на себя. Маленький объект на отдалении уравновешивает большой, как лёгкий ребёнок на длинном конце качелей уравновешивает взрослого у опоры.

Акцент: один главный герой в кадре

Третий приём — акцент. В хорошем кадре всегда есть одно главное — то, за что глаз цепляется первым. Это как солист на сцене: остальные музыканты важны, но в центре внимания один. Если же всё в кадре кричит «смотри на меня!», глаз мечется и не знает, за что зацепиться, и кадр разваливается.

В нашей сцене главный герой очевиден — это CodeChick. Значит, всё остальное (небо, земля, зёрнышки, солнце) должно быть тише его: бледнее по цвету, меньше по размеру, спокойнее. Акцент создают контрастом: самый яркий и насыщенный цвет, самый чёткий контур или самый крупный размер достаётся главному объекту, а фон и мелочи делаются приглушённее.

function setup() {
  createCanvas(400, 400);
  background(205, 232, 255); // спокойное бледное небо — фон

  // зёрнышки — мелкие и неяркие, не спорят с героем
  fill(170, 140, 90);
  noStroke();
  ellipse(250, 330, 14, 9);
  ellipse(275, 340, 14, 9);

  // ЦЫПЛЁНОК — самый яркий и крупный объект, акцент
  fill(255, 205, 40);  // насыщенный жёлтый
  stroke(40);
  strokeWeight(2);
  ellipse(160, 200, 95, 95);   // голова
  ellipse(160, 290, 130, 130); // тело

  // клюв — оранжевый, тоже яркий, но маленький
  fill(255, 140, 30);
  triangle(205, 195, 235, 205, 205, 215);
}

Результат: на бледно-голубом небе слева стоит насыщенно-жёлтый цыплёнок с чётким тёмным контуром и ярким оранжевым клювиком — глаз цепляется за него сразу. Справа внизу лежат два маленьких блёклых коричневых зёрнышка, они заметны, но не спорят с героем за внимание. Главный в кадре однозначно цыплёнок.

Обрати внимание на приёмы акцента в этом коде:

• Насыщенность. У цыплёнка самый яркий жёлтый (255, 205, 40), а небо и зёрнышки — приглушённые. Яркое притягивает взгляд.
• Контур. Только у героя есть чёткая тёмная обводка stroke(40). Зёрнышки идут с noStroke() — они растворяются в фоне.
• Размер. Цыплёнок крупный, зёрнышки крошечные. Размер сам по себе кричит «я главный».

Цвета, которые дружат

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

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

Лёгкий приём: соседи по тону через HSB

Помнишь модель HSB из прошлого урока? Там цвет задаётся тоном, насыщенностью и яркостью. Это золотой ключ к подбору палитры. Цвета, у которых тон близкий (соседи на цветовом круге), почти всегда дружат между собой — это называют аналоговой палитрой. А цвет с противоположной стороны круга даёт яркий контрастный акцент.

function setup() {
  createCanvas(400, 400);
  colorMode(HSB, 360, 100, 100);

  // фон и земля — соседние тёплые тона (соседи на круге)
  background(45, 25, 100);    // очень бледный тёплый фон
  noStroke();
  fill(40, 45, 85);           // песочная земля, тон рядом
  rect(0, 320, 400, 80);

  // цыплёнок — насыщенный жёлтый из той же тёплой зоны
  fill(48, 85, 100);
  ellipse(180, 200, 95, 95);
  ellipse(180, 290, 130, 130);

  // клюв — контрастный акцент с другой стороны круга
  fill(25, 90, 100);          // оранжево-красный
  triangle(225, 195, 255, 205, 225, 215);
}

Результат: весь кадр выдержан в тёплой гамме — бледно-кремовое небо, песочная земля и насыщенно-жёлтый цыплёнок выглядят как одна семья оттенков. Единственное яркое пятно другого тона — оранжево-красный клюв, который притягивает взгляд к лицу героя. Картинка смотрится цельной и продуманной.

Что здесь сделано:

1. Фон, земля и тело цыплёнка взяты из узкой зоны тона (40–48) — это соседи на цветовом круге, поэтому они автоматически гармонируют.
2. Различаем их не тоном, а насыщенностью и яркостью: фон бледный (низкая насыщенность), цыплёнок сочный (высокая). Так фон отступает на задний план, а герой выходит вперёд.
3. Клюв — единственный «чужак» по тону (25). Один контрастный акцент на спокойном фоне работает в сто раз сильнее, чем десять ярких пятен.

Частые ошибки и подводные камни

Вот грабли, на которые наступают почти все, когда впервые собирают свой кадр.

1. Лепить всё в центр и впритык

Самая частая ошибка — поставить объект ровно по центру и без полей. Получается статично и зажато. Попробуй сместить героя на линию третей и оставить вокруг воздух — кадр сразу оживёт.

2. Несколько акцентов сразу

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

3. Слишком много цветов

Шесть-семь насыщенных цветов превращают кадр в кашу. Ограничь себя тремя-четырьмя оттенками. Если хочется разнообразия — меняй не тон, а насыщенность и яркость одного и того же цвета.

4. Противовес тяжелее главного героя

Если объект-«противовес» сделать крупным и ярким, он перетянет внимание на себя, и непонятно, кто в кадре главный. Противовес должен быть легче акцента: меньше, бледнее, дальше от центра.

5. Забыть про порядок слоёв

Можно идеально подобрать композицию, но нарисовать землю после цыплёнка — и она закрасит ему ноги. Помни про порядок: сначала фон, потом дальние объекты, в конце — главный герой и его детали. Это мы разбирали в уроке про фон и наслоение.

Мини-практика: собери свой кадр

Теперь твоя очередь стать режиссёром кадра. Возьми последний пример с HSB-палитрой за основу и доведи сцену до ума:

• Поставь героя по третям. Сдвинь цыплёнка на одну из линий третей (около x = 133 или x = 266) и проверь: кадр стал живее, чем при центральном расположении?
• Добавь противовес. С противоположной стороны от цыплёнка нарисуй что-нибудь маленькое и спокойное — облачко, солнце или одинокое зёрнышко. Следи, чтобы оно было легче героя.
• Собери палитру из трёх цветов. Выбери узкую зону тона в HSB и сделай в ней фон, землю и тело. Один контрастный цвет оставь только для самой важной детали — клюва или глаза.
• Проверь поля. Убедись, что ни один объект не упирается в край холста. Оставь со всех сторон воздух хотя бы в 40 пикселей.
• Эксперимент со взглядом. Поменяй насыщенность фона: сделай его то бледнее, то ярче. Замечаешь, как при бледном фоне цыплёнок выходит вперёд, а при ярком — наоборот, теряется? Найди вариант, при котором герой читается лучше всего.

Не бойся двигать объекты туда-сюда — именно так и работают художники: ставят, отходят, смотрят, поправляют. Поменял число, кадр поехал — верни обратно или подбери новое. Композиция собирается маленькими шагами.

Итоги

Сегодня ты получил четыре приёма, которые превращают набор фигурок в красивый кадр:

• Поля. Оставляй воздух между объектами и краем холста — фигура должна «дышать».
• Баланс и правило третей. Смещай главный объект на линию третей и уравновешивай его лёгким противовесом с другой стороны.
• Акцент. Выбери одного главного героя и сделай его самым ярким, чётким и крупным, а остальное — тише.
• Палитра. Держи три-четыре цвета из узкой зоны тона, а различай объекты насыщенностью и яркостью; один контрастный цвет оставь для акцента.

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

До сих пор наш цыплёнок стоял неподвижно. В следующем разделе мы вдохнём в него жизнь: научимся функции draw() рисовать новые кадры много раз в секунду, и CodeChick наконец начнёт двигаться — прыгать, отскакивать и оживать прямо на холсте. Готовься превратить картину в анимацию. До встречи на холсте!