Что такое креативное кодирование и p5.js

Креативное кодирование — это когда ты пишешь не калькулятор и не сайт, а рисуешь картинку, анимацию или маленький мир прямо кодом.

p5.js — JavaScript-библиотека для творческого программирования: рисования, анимации и интерактива на холсте.

Зачем это вообще нужно

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

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

И вот что приятно: этим занимаются не только школьники для развлечения. Заставки на концертах, реактивные обложки альбомов, фоны для стримеров, визуализации музыки, которые «дышат» в такт басу, обложки книг и даже куски рекламы — всё это часто сделано именно креативным кодом. Целые художники зарабатывают тем, что продают генеративные картины: программа рисует тысячу вариантов, а коллекционеры покупают самые красивые. Так что навык, который ты начинаешь осваивать сейчас, — это и игра, и вполне реальное ремесло.

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

Что такое креативное кодирование своими словами

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

Хорошая метафора — скетчбук. Художник не рисует сразу шедевр: он делает наброски, пробует, зачёркивает, повторяет. Креативный кодер делает то же самое, только его «карандаш» — это строки кода. Поменял число — получил новый набросок. Не понравилось — откатил. Тебе не нужно уметь рисовать руками: за тебя это сделает машина, а ты лишь объясняешь ей правила.

Креативное кодирование — это рисование по инструкции, которую исполняет компьютер. Ты — режиссёр, код — кисть, холст — экран.

Чем это отличается от обычного программирования

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

Обычная программа	Креативный код
Результат — текст или число	Результат — картинка или анимация
Проверяешь логику в голове	Видишь результат глазами сразу
«Правильно / неправильно»	«Нравится / не нравится»

Где здесь p5.js

Рисовать картинку «с нуля», объясняя компьютеру каждый пиксель, — мучительно долго. Поэтому умные люди уже написали готовый набор инструментов, которым удобно пользоваться. Такой набор называется библиотекой. Подключаешь её — и получаешь короткие понятные команды вроде «нарисуй круг здесь» или «залей фон этим цветом».

Наша библиотека называется p5.js. Это p5.js — JavaScript-библиотека для творческого программирования: рисования, анимации и интерактива на холсте. Она работает прямо в браузере, ничего тяжёлого ставить не нужно, а команды у неё человеческие: circle рисует круг, fill задаёт цвет заливки, background заливает фон. Название p5 — наследник старого проекта Processing; «5» осталась от его версий, а буква «p» намекает на Processing. Запоминать это не обязательно — просто чтобы ты не пугался цифры в имени.

Почему именно p5.js, а не «настоящий взрослый» инструмент? Потому что она специально придумана для тех, кто только начинает. У неё дружелюбные названия команд, огромное сообщество, тонны примеров и бесплатный онлайн-редактор, где скетч запускается в один клик прямо в браузере — без установки программ, без настройки. Ты пишешь код в левой половине окна, жмёшь кнопку — и в правой половине сразу появляется твоя картинка. Это та самая быстрая обратная связь, ради которой и стоит начинать с креативного кода: между «написал» и «увидел» проходят секунды.

Важная оговорка про наши уроки: здесь, внутри статьи, код не запускается автоматически — мы читаем его глазами и представляем результат по описанию, которое идёт следом за каждым примером. Запускать свои скетчи по-настоящему ты будешь в отдельном редакторе p5.js. Поэтому привыкай к маленькой игре: посмотрел на код — попробуй сам мысленно «нарисовать» кадр, а потом сверься с блоком «Результат:».

Холст, на котором всё происходит

Любой рисунок p5.js живёт на холсте — это холст (canvas): прямоугольная область на странице, внутри которой p5.js рисует всё изображение. Думай о нём как о листе в скетчбуке: у него есть ширина и высота, и всё, что ты рисуешь, появляется внутри этих границ. За краями холста ничего не видно — как карандашные штрихи за краем бумаги.

Две главные функции: setup и draw

Почти любой скетч на p5.js держится на двух функциях. Сначала про сам термин: скетч (sketch) — это одна программа на p5.js, отдельный набросок, который рисует и анимирует картинку.

setup() — функция p5.js, которая выполняется один раз в начале и настраивает скетч (например, создаёт холст). Это как разложить лист на столе и приготовить краски — делаешь один раз.
draw() — функция p5.js, которая повторяется много раз в секунду и отрисовывает каждый новый кадр. Это как рука художника, которая снова и снова проходится по бумаге.

Каждое отдельное изображение, которое рисует draw(), называется кадр (frame) — одно изображение анимации; draw() рисует кадры подряд, создавая иллюзию движения. Совсем как страницы флипбука: пролистываешь быстро — и кажется, что человечек на полях тетради бежит.

Разбираем на примерах

Пример 1. Первый холст и герой-точка

Начнём с самого начала жизни нашего цыплёнка: пока он — просто точка на холсте.

function setup() {
  createCanvas(400, 400); // холст 400 на 400 точек
}

function draw() {
  background(135, 206, 235); // небо: голубая заливка
  circle(200, 200, 20);      // цыплёнок-точка в центре
}

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

Разберём по строчкам. В setup() мы один раз создаём холст командой createCanvas(400, 400) — первое число это ширина, второе высота. В draw() сначала заливаем фон голубым через background(135, 206, 235) (три числа — это доли красного, зелёного и синего, об этом будет отдельный урок про цвет). Потом рисуем круг: circle(200, 200, 20) ставит его в точку с координатами 200 по горизонтали и 200 по вертикали, а 20 — это диаметр.

Заметь две вещи. Первая: function — это просто способ сказать «вот блок команд с именем». p5.js сама знает имена setup и draw и вызовет их в нужный момент — тебе не нужно запускать их вручную. Вторая: всё, что после //, — это комментарий, заметка для человека. Компьютер их игнорирует, а тебе они помогают не запутаться. Привыкай оставлять такие пометки в своём коде, через неделю спасибо себе скажешь.

Пример 2. Координаты — как клетки в тетради

Чтобы понять, почему центр это (200, 200), нужна система координат — способ задавать точку на холсте парой чисел (x, y), где начало (0, 0) находится в левом верхнем углу. Представь клетчатую тетрадь, но отсчёт клеток идёт от левого верхнего угла, а не от нижнего, как на уроках математики. X растёт вправо, Y растёт вниз. Это часто путает новичков, поэтому запомни сразу.

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(135, 206, 235);
  circle(100, 100, 30); // ближе к левому верхнему углу
  circle(300, 300, 30); // ближе к правому нижнему углу
}

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

Поиграй мысленно: если поставить circle(0, 0, 30), кружок прижмётся к самому левому верхнему углу и наполовину «выедет» за край. А circle(400, 400, 30) уедет в правый нижний угол. Поменяй числа — и предскажи, куда переедет фигура. Это лучший способ почувствовать координаты.

Пример 3. Цыплёнок из пары кружков

Теперь соберём из нескольких фигур узнаваемого героя — тело и голову. Тут впервые появляются термины заливка (fill) — цвет, которым закрашивается внутренняя площадь фигуры, и обводка (stroke) — цвет и линия контура фигуры.

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(135, 206, 235); // небо
  noStroke();                // убираем контур у фигур
  fill(255, 221, 51);        // жёлтая заливка
  circle(200, 240, 120);     // тело
  circle(200, 150, 80);      // голова
  fill(255, 140, 0);         // оранжевый
  triangle(200, 150, 230, 165, 200, 175); // клюв
}

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

Что здесь важно: команды выполняются сверху вниз, как слои краски. Сначала легло небо, потом тело, потом голова поверх. fill(255, 221, 51) задаёт жёлтый цвет, и он действует на все фигуры после себя, пока не сменишь его на оранжевый. noStroke() убирает чёрную обводку, чтобы цыплёнок выглядел мягко. Не пугайся точных чисел координат клюва — позже мы научимся ставить такие точки осознанно.

Этот принцип слоёв — один из самых полезных в рисовании кодом. Представь, что ты клеишь аппликацию: сначала кладёшь фоновый лист, потом крупные детали, потом мелкие сверху. Если перепутать порядок, мелкая деталь спрячется под крупной. В p5.js точно так же: то, что нарисовано позже, ложится поверх. Поэтому фон почти всегда идёт первым, а глаза, клюв и блики — последними. Держи эту картинку «стопки наклеек» в голове, и половина странных багов с «пропавшими» фигурами отпадёт сама.

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

Что ещё умеет p5.js

Чтобы ты понимал масштаб, вот лишь часть того, что мы сделаем на этом курсе с тем же цыплёнком:

Анимация: цыплёнок прыгает по холсту и отскакивает от стенок.
Случайность: вокруг него разлетаются перья в случайных местах.
Циклы: один цыплёнок превращается в целую стаю.
Интерактив: он бегает за курсором мыши и реагирует на клавиши.
Частицы: над ним вспыхивает фейерверк из сотен искр.

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

Эти грабли ловят почти всех в самом начале. Прочитай заранее — сэкономишь себе час нервов.

Думать, что Y растёт вверх. На холсте всё наоборот: чем больше Y, тем ниже фигура. Если объект «уехал не туда» по вертикали — почти всегда дело в этом.
Забыть createCanvas в setup. Без холста рисовать просто негде, и фигуры либо не появятся, либо лягут на крошечный стандартный квадратик. Холст создаётся один раз, именно в setup().
Вызывать background один раз, а ждать чистый кадр. Если ты рисуешь анимацию и не заливаешь фон в начале каждого draw(), старые кадры остаются на холсте и за объектом тянется «хвост». Иногда это красиво, но если не задумано — ставь background(...) первой строкой в draw().
Путать порядок: сначала фигура, потом фон. Команды рисуют слоями сверху вниз. Если background(...) стоит после цыплёнка, фон закрасит его целиком, и ты увидишь пустое небо. Фон — всегда первым.
Помечать p5-код как обычный JavaScript и удивляться, что «не запускается». p5.js рисует на холсте в браузере, и в наших уроках код не исполняется в раннере — мы читаем его и представляем результат по описанию. Запускать свои скетчи ты будешь в отдельном онлайн-редакторе, о котором расскажем дальше.

Мини-практика

Возьми мысленно (или в онлайн-редакторе p5.js, если уже нашёл его) код из примера 3 и доведи цыплёнка до ума:

Добавь цыплёнку глаз: маленький чёрный круг на голове. Подбери координаты так, чтобы он оказался на голове, а не в небе. Подсказка: голова в (200, 150), значит глаз где-то рядом, например (220, 140).
Сделай фон закатным: поменяй три числа в background(...) на тёплые — например, оранжево-розовые. Просто попробуй разные значения от 0 до 255 и смотри, что выходит.
Сдвинь всего цыплёнка правее: добавь ко всем X-координатам фигур одно и то же число, скажем 60. Цыплёнок должен целиком переехать к правому краю, не развалившись.

Не бойся ломать: в креативном коде «сломал» часто значит «нашёл неожиданно красивое». Меняй по одному числу за раз — так понятно, что на что влияет.

Итоги

Сегодня ты узнал главное, с чего начинается весь курс:

Креативное кодирование — это программирование ради картинки, анимации и ощущения, а не ради ответа в консоли.
p5.js — библиотека, которая даёт простые команды для рисования прямо в браузере.
Любой скетч держится на setup() (настроить один раз) и draw() (рисовать кадр за кадром).
Фигуры ставятся по системе координат: (0, 0) в левом верхнем углу, X вправо, Y вниз.
Наш герой CodeChick начал путь как точка и пара кружков — и будет расти с каждым уроком.

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