Как нарисовать очень грустную девочку, если вы программист

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

Вообще как художник я бездарность.

Объясняется это принципом RPG: вы либо качаете воина, либо мага, либо бесполезное существо (полувоин-полумаг, который бесполезен и как маг, и как воин). И я вкачал всё в программирование, поэтому с рисованием у меня примерно на уровне четвёртого класса.

Но иногда встречаются вещи, которые влетают мне прямо в душу (которой у меня нет) и переворачивают всё вверх дном. Увы, я ничего не умею, и в такие моменты я остро жалею, что не могу взять и накидать что-то на бумаге, может и не идеальное вовсе, но чтобы хоть как-то сохранить и передать эту эмоцию сквозь время.

А может, всё не так однозначно?

---

Входные параметры (я) накладывают жёсткие ограничения на тип рисунков: никаких градиентов, полутонов, игры света и чего там ещё придумали эти художники. Ещё не хотелось бы для разовых рисунков сильно раскошеливаться и покупать кисточки из хвоста единорога шерсти волка, специальную хлопковую бумагу и другие магические предметы из биолабораторий. Тем более никаких курсов по рисованию… Ничего лишнего! Человек просто хочет порисовать на выходных.

Подумав над всем этим, я усмехнулся про себя, ведь под мои критерии подходили только разве что наскальные рисунки… Так, стоп! Наскальные рисунки! Вот оно!

Да не это! Вот это:

Поэтому решено: это будет трафаретное граффити. Как раз для таких великих художников, как я.

Есть только одна проблема: граффити на самом деле граффити. Уж не знаю как вам, а меня это знатно подбешивало первое время, но потом я привык.

Рисование

Но давайте вернёмся к, собсна, рисованию.

Чтобы нарисовать очень грустную девочку, нужно найти любую девочку и сделать её грустной. Очень.

Как? Изи. Ну, например, убить её отца. За нас это уже сделали, поэтому украдём Софию прямо с панихиды и попробуем нарисовать.

Как говорил Боромир, «нельзя просто взять и нарисовать». Сначала нужно понять, в каких цветах мы это будем делать. А чтобы понять это, нужно вообще узнать, какие цвета есть в наличии.

Какие цвета есть в наличии

Варианта тут два: либо соскрапать какой-нибудь сайт с красками, либо пойти в ближайший магазин и соскрапать его глазами. Программисты — народ ленивый, поэтому выбираем первый вариант.

Мы могли бы использовать scrapy, но я его не очень люблю, поэтому напишем простой скрипт:

import json import re from pathlib import Path  import requests from bs4 import BeautifulSoup from pprintpp import pprint  session = requests.Session()  PRODUCT_URL = 'https://leonardo.ru/ishop/group_5040700859/' AVAILABLE_SKUS_FILE = Path('data/available_skus.json')  response = session.get(PRODUCT_URL, timeout=5) response.raise_for_status() html = response.content  soup = BeautifulSoup(html) options = soup.find('select', {'id': 'colorselection'}).find_all('option', {'class': 'instock'})   def parse_sku(text: str) -> str:     # кидней 4230 BLK -> 4230     match = re.match(r'.+ (\w+) BLK$', text)     assert match, text     return match[1]   available_skus = [parse_sku(option.text) for option in options] pprint(available_skus)  # ['9105', '6055', '4060', '5230', ...] print(len(available_skus))  # 23 - не густо!  with AVAILABLE_SKUS_FILE.open('w') as file:     json.dump(available_skus, file) 

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

import json from pathlib import Path  import requests from bs4 import BeautifulSoup from pprintpp import pprint  session = requests.Session()   CATALOG_URL = 'https://www.montana-cans.com/en/spray-cans/montana-spray-paint/black-50ml-600ml-graffiti-paint/montana-black-400ml' SKU_TO_COLOR_FILE = Path('data/sku-to-color.json')  response = session.get(CATALOG_URL, timeout=5) response.raise_for_status() html = response.content  soup = BeautifulSoup(html) options = soup.find('form', {'id': 'sAddToBasket'}).find('ul', {'class': 'color-variant-list'}).find_all('li')   def parse_sku(text: str) -> str:     # BLK 5020 -> 5020     return text.removeprefix('BLK').strip()   sku_to_color = {} for option in options:     label = option.find('label')      title = label.find('span', {'class': 'color-code'}).text     sku = parse_sku(title)      sku_to_color[sku] = {         'rgb': json.loads(label['data-rgb']),         'cmyk': json.loads(label['data-cmyk']),         'hex': label['data-hex'],     }  pprint(sku_to_color) # '8250': { #     'cmyk': {'C': '39', 'K': '61', 'M': '81', 'Y': '93'}, #     'hex': '#5b2607', #     'rgb': {'B': '7', 'G': '38', 'R': '91'}, # }, with SKU_TO_COLOR_FILE.open('w') as file:     json.dump(sku_to_color, file) 

Среди сотен графических редакторов, доступных на linux, я выберу gimp. Полученный на предыдущем шаге ассортимент цветов я превращу в палитру gimp, чтобы прям в редакторе видеть, что у меня потенциально есть.

import json from logging import getLogger from pathlib import Path  log = getLogger(__name__)  AVAILABLE_SKUS_FILE = Path('data/available_skus.json') SKU_TO_COLOR_FILE = Path('data/sku-to-color.json') PALETTE_FILE = Path('~/.config/GIMP/2.10/palettes/graffiti-scraped.gpl')  with AVAILABLE_SKUS_FILE.open() as file:     available_skus = json.load(file)  with SKU_TO_COLOR_FILE.open() as file:     sku_to_color = json.load(file)   palette_content = """ GIMP Palette Name: Graffiti: scraped Columns: 0 # """.strip('\n') for sku in available_skus:     try:         color = sku_to_color[sku]     except KeyError:         log.warning(f'{sku=} not found, skipping')         continue      palette_content += '\n' + ' '.join(color['rgb'].values()) + f' {sku}'   PALETTE_FILE.expanduser().write_text(palette_content) 

Преобразуем картинку в палитру

Теперь из всех цветов нужно выбрать подмножество, если только мы не хотим скупить весь магазин. Я выбираю подмножество мощностью 1, или, если не выпендриваться, покупаю только чёрный цвет.

На самом деле тут хитрость: сама стена — уже светло-серый цвет, плюс чёрный я покупаю, плюс тёмно-серый, если красить несильно. Итого 3 цвета по цене одного! Я у мамы нищеброд маркетолог.

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

Теперь нужно превратить RGB палитру картины в нашу трёхцветную. Gimp это умеет, но можно сделать на питоне и потюнить параметры вручную. Не все знают, но подход «найти ближайший цвет из палитры при помощи евклидового расстояния rgb-координат» не работает. Дело в том, что ваш глаз плевал на то, что думает мозг насчёт монотонности координат (r, g, b), и машина понимает под «разными цветами» не то же, что мы с вами.

К счастью, есть не-rgb цветовые пространства, где уже учтено восприятие цветов человеком. Поэтому можно накидать код для перевода рисунка в палитру «на глаз»:

from functools import lru_cache from itertools import product from operator import itemgetter from pathlib import Path from typing import Tuple  from colormath.color_conversions import convert_color from colormath.color_diff import delta_e_cie2000 from colormath.color_objects import LabColor, sRGBColor from PIL import Image from tqdm import tqdm  IMAGE_FILE_PATH = Path('data/original.jpg') PALETTE_COLORS = [     [135] * 3,  # light gray     [52] * 3,  # dark gray     [0] * 3,  # black ] OUTPUT_FILE_PATH = Path('data/colors-reduced.png')   def get_distance(rgb1: Tuple[int, int, int], rgb2: Tuple[int, int, int]) -> float:     color1 = sRGBColor(*(color / 255 for color in rgb1))     color2 = sRGBColor(*(color / 255 for color in rgb2))      return delta_e_cie2000(         convert_color(color1, LabColor),         convert_color(color2, LabColor),     )   @lru_cache(maxsize=None) def translate_color(color: Tuple[int, int, int]) -> Tuple[int, int, int]:     diffs = (         (get_distance(color, palette_color), palette_color)         for palette_color in PALETTE_COLORS     )     translated_color = sorted(diffs, key=itemgetter(0))[0][1]     return tuple(translated_color)   image = Image.open(str(IMAGE_FILE_PATH)) image = image.convert('RGB')  width, height = image.size  # обрабатывать вот так в цикле - достаточно тупая идея, # обычно нужно использовать batch processing; # уверен, в PIL это есть, но я заленился :( # меня спасает только то, что я кэширую # translate_color, и оно понемногу ускоряется for xy in tqdm(     product(range(width), range(height)),     total=width * height, ):     color = image.getpixel(xy)     image.putpixel(xy, translate_color(color))  image.show() image.save(str(OUTPUT_FILE_PATH))

Немного теории

Далее начинается самое сложное.

1. Если вы смотрели на трафарет, вы заметили, что у букв типа О или В есть перемычки, потому что внутренние области не умеют висеть в воздухе. Поэтому первый главный вывод: никаких висящих областей быть не должно. Конечно, их можно смоделировать при помощи всяких трюков с маскированием (например, бывают маскирующая жидкость и малярный скотч ). Но это сложно и долго (в основном из-за позиционирования), поэтому будем юзать лайфхаки.

2. Трафарет — дело небыстрое, если у вас нет Гарри Плоттера. У меня нет. Поэтому чем проще, тем проще… В смысле, чем проще рисунок, чем грубее линии, тем проще вырезать. Но при этом важно не увлекаться, иначе всё превратится в какую-то абстракцию.

3. Важные детали грубыми делать нельзя! Наоборот, добавляйте как можно больше деталей туда, куда нужно смотреть. Например, на лица. Поможет вам в этом следующий пункт.

4. Чем больше полотно — тем проще вырезать. Это играет на руку, когда у вас много мелких деталей на трафарете. Но такой трафарет сложнее нести. Так что палка о двух концах.

Вот, в общем-то, и всё: нужно удалить и упростить максимальное количество областей, сохранив при этом самое важное.

Ассистент, скальпель!

Режем по живому

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

Далее выделяем всё, кроме лица. Для выделения лиц можно использовать computer vision или human hands. В гимпе я использую инструмент «лассо», но можно заставить питона поработать:

import cv2 from pathlib import Path   IMAGE_FILE_PATH = Path('data/colors-reduced.png') OUTPUT_PATH = Path('data/face-detected.png')  image = cv2.imread(str(IMAGE_FILE_PATH)) gray = cv2.cvtColor(image, cv2.COLOR_BGR2GRAY) faceCascade = cv2.CascadeClassifier(cv2.data.haarcascades + "haarcascade_profileface.xml") faces = faceCascade.detectMultiScale(         gray,         scaleFactor=1.3,         minNeighbors=3,         minSize=(30, 30) )  for (x, y, w, h) in faces:     cv2.rectangle(image, (x, y), (x + w, y + h), (0, 255, 0), 2)  cv2.imwrite(str(OUTPUT_PATH), image)

Ээээээ… Ладно, сегодня у программиста день рук. Наверно, классификатор не обучали на грустных девочках ¯_(ツ)_/¯

Далее «загрубляем» рисунок. Нужно избавиться от всех островков и пикселей — всё равно от них никакого толка.

Для этого юзаем комбинацию erode+dilate. Erode — это эрозия, она откусывает сколько-то пикселей от границы области. Так как мелкие кусочки имеют очень маленькую площадь, то erode откусывает их целиком, и они исчезают. Но теперь нужно вернуть границы на место, и мы юзаем dilate — это расширение границы. Всё это мы проделаем на всех областях, кроме лица.

В gimp есть специальный фильтр под эти штуки, но можно и попитонить:

import cv2 from pathlib import Path import numpy as np   IMAGE_FILE_PATH = Path('data/colors-reduced.png') OUTPUT_PATH = Path('data/erode-dilate.png')  image = cv2.imread(str(IMAGE_FILE_PATH))  kernel = np.ones((4, 4), np.uint8) image = cv2.erode(image, kernel, iterations=1) image = cv2.dilate(image, kernel, iterations=1) cv2.imwrite(str(OUTPUT_PATH), image)

Я подрисовываю слезу, чтобы передать трагичность, но тут же стираю. Отбрасываю и банальную идею дорисовать где-то там вверху висящее распятие. Это всё только испортит, сделает каким-то не настоящим, а я хочу нарисовать так, как было, голую правду, чтоб она прям резала: и слёз нет — то ли сильная такая (я проверил — нет), то ли выплакала уже всё, — и неясно, есть ли там сверху бог или нет.

Добавляю только одну вещь: третью свечку. Почему-то мне кажется, что так нужно.

Граница важна

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

Вот такие слои получаются. Чёрный будем красить поверх тёмно-серого.

Я тут ещё добавил белое пламя свечей — только потому что у меня был лишний белый акрил под рукой. Не удержался, хоть и смоет его, наверно, с первым дождём. Ну что ж, свечи в реале тоже гаснут.

Гравитация, мать её

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

from pathlib import Path from PIL import Image, ImageDraw   IMAGE_FILE_PATH = Path('data/erode-dilate-with-border.png') OUTPUT_FILE_PATH = Path('data/dangling-detected.png')  image = Image.open(str(IMAGE_FILE_PATH))  start_coords = 0, 0 fill_color = 255, 0, 0  ImageDraw.floodfill(image, start_coords, fill_color, thresh=0)  image.show() image.save(str(OUTPUT_FILE_PATH))

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

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

Вырезаем людей и присоединяем

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

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

Ожидание vs реальность

Одна из моих любимых фраз: «даже самый великолепный план не выдерживает встречи с реальностью». Как вы понимаете, мой план «о, серая стена, нарисую-ка я на ней» был достаточно далёк от великолепного. И я мог бы напридумывать, как здорово я всё сделал, и что сам Бэнкси вылез из кустов, чтобы пожать мне руку, но реальность, мне кажется, интереснее.

У меня нихрена не получилось. И вот почему.

Граффити должно быть видно

Ну тут как бы всё понятно: если граффити будет непонятно где, то его никто и не увидит. И даже если оно будет где надо, но слишком мелким или под неправильным углом, то его всё равно никто не увидит.

Поверхность должна быть идеальной

Сама стена оказалась неонородной, с подтёками и неровностями (это прям моя школа ремонта). Для трафарета это смерти подобно, поэтому подбирать поверхность нужно очень тщательно — от этого зависит всё. У меня не только шаблон неплотно прилегал к стене, но и проблемые части очень плохо клеились к ней из-за пыли и рельефности последней.

Короче, моя серая стена меня подвела. Не доверяйте серым стенам.

Шаблон должен быть крепким

Мой шаблон был «связным» — ну то есть не было висячих областей. Но я не учёл, что этого недостаточно. Если из шаблона вырезать всё больше и больше областей, то он становится всё более и более хрупким и гнущимся и перестаёт сохранять форму. Это не проблема, если шаблон из пластика, но у меня был из плотной -недостаточно плотной — бумаги, и он был похож на паутину, когда я пытался его присобачить к стене.

В общем, я, конечно, нарисовал на стене что-то, но показывать вам это мне стыдно. Но…

Дорогу осилит идущий

Жизнь научила меня одному классному правилу: если действительно хочешь чего-то добиться — страйся до последнего и никогда не опускай руки. Иди до конца.

У меня были неиспользованные листы, и я перенёс рисунок на них. Так как листы — не серая стена, и лежат они горизонтально — то все три проблемы из плана «А» были нивелированы, и, наконец-то, у меня получилось!

Да, косячно, но уже немного лучше, чем член на заборе! И главное: нарисовано это тем, кто вообще не умеет рисовать. Ну а то, что не на стене.. это только пока.

К чему всё это

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

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

Может, потому что не могут молчать?

---

Садитесь в мой философский пароход, билет бесплатный.