Хаб для лирик-видео к треку «Это всё сон, у тебя всё хорошо» живёт на shotacore.defenders08.tech. Внутри три (две) вещи:
- Интерактивная пиксельная Y2K-ОС
- Четыре рендера на Nokia 3310
Пиксельная ОС
Редактор на Canvas 2D. Дизайн-холст 540×960, финальный кадр апскейлится ×2 nearest-neighbour в 1080×1920: пиксели остаются пикселями, а не мылом.
Движок (app.js, ~52 КБ) умеет проигрывать таймлайн, писать webm через MediaRecorder, отдавать PNG-секвенцию и работать в режиме Sync. Но главное — файл scenes.js, где лежит единственный CONFIG. Это фактически API проекта: трек, палитра, шрифт, LRC-тайминги, список контактов и сценарий.
Сцена привязывается либо к строкам (lines: [a, b] — от начала строки a до конца строки b), либо к фиксированной длительности, либо к жёсткому времени. Зазоры меньше 0,4 с автоматически приклеиваются к предыдущей сцене, чтобы картинка не мигала. Одиннадцать блоков на 39 секунд трека — и порядок в массиве и есть порядок в видео. Чтобы переставить сцены, не нужно лезть в рендер.
Переходы — дизеринг-фейд по Байеру за 0,16 с в четыре уровня; печать текста 30 символов в секунду, курсор мигает каждые 1,6 с, бегущая строка едет со скоростью 60 px/с. Всё это в конфиге, а не в голове.
Шрифт пришлось собрать
Пиксельный шрифт с настоящей кириллицей и настоящими строчными — редкость: готовые «пиксельные» гарнитуры часто кириллицу просто дорисовывают квадратами. Поэтому tools/build_font.py берёт Handjet SemiBold, рендерит каждый глиф в PIL и выгружает JSON, где каждая буква — это массив строк из # и .:
{"cap": 10, "ascent": 13, "space": 4, "tracking": 1,
"glyphs": {"!": {"w": 1, "h": 10, "x0": 1, "y0": -10, "adv": 3,
"rows": ["#","#","#","#","#","#","#","#","#","#"]}}}Дальше движок просто рисует эти строки прямоугольниками. Побочный эффект: текст остаётся резким на любом экране и в любом масштабе, а не только на «родном» разрешении.