Чашка Петри

Мини-игра-арт-объект: чёрно-белая пиксельная чашка Петри, в которой растёт плесень.

→ Играть

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

Штаммы

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

Интерфейс на английском.

Управление

клик внутри чашки	поставить спору (повторный клик по ней — убрать)
GROW / пробел	запустить рост
PAUSE / P / пробел	пауза и продолжение
BURN / R	выжечь чашку: огонь проходит по ней слева направо, остаётся чистый агар
PNG / S	сохранить кадр 1520×1556
SOUND	звук вкл/выкл (левый верхний угол)

Клавиши читаются по физическому положению, раскладка не важна.

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

Интерфейс набран растровым MS Sans Serif из Windows 95 (FontStruction «lou», CC BY-SA 3.0, конвертация из 98.css).

Как это устроено

Ванильный HTML + Canvas 2D. Ни сборки, ни зависимостей — index.html открывается двойным кликом с диска. Единственная картинка, которую читает код (атлас кадров пламени), вшита в assets/fire-frames.js как data-URI: с диска обычный <img> пятнает холст и getImageData бросает SecurityError.

Симуляция идёт в буфере 380×389 (пропорция исходной фотографии), который выводится на экран целочисленным масштабом с отключённым сглаживанием. Яркость квантуется в 8 уровней серого с упорядоченным дизерингом Bayer 4×4 — отсюда пиксельная фактура.

Рост

Гибрид клеточного фронта и агентов-кончиков. Морфология колонии — не отдельный алгоритм на каждый вид, а одна score-функция с разными весами:

S = wN·N + wD·D + wP·P + wR·R + wDrift·A − wC·C − wI·I − wB·B + η

где N — питательность клетки, D — лопастная анизотропия, P — поддержка своими соседями, R — кольцевой ритм, A — снос роста в одну сторону, C — теснота от чужих, I — ингибитор, B — штраф у стенки, η — связный шум. Дальше сигмоида превращает S в вероятность занять клетку.

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

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

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

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

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

Жёсткого лимита на размер колонии нет: она растёт, пока есть куда. Ограничивают её только съеденное питание, стенка чашки и соседи. Разброс территорий берётся из «жадности» генотипа, разного времени прорастания спор и неоднородного поля питания.

Звук

Включён сразу; браузер пускает его после первого касания страницы. Тумблер — в левом верхнем углу.

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

• суб-бас — две почти совпадающие частоты, медленное биение;
• пэд — пять голосов на пентатонике, у каждого свой период дыхания (7.3 / 11.1 / 13.9 / 17.3 / 23.7 с — фазы никогда не сходятся); изредка голос переползает на соседнюю ступень, и аккорд меняет окраску;
• воздух — шум через две плавающие полосы, слева и справа независимо;
• события роста — шум через резонансный фильтр плюс синусная опора, огибающая на косинусах, без щелчков.

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

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

Синтез процедурный, без сэмплов и библиотек: страница должна открываться с диска, а file:// не даёт подгружать аудио. Шины: сухая, свёрточный реверб 6 с (импульс синтезируется при старте) и ленточная задержка с фильтром в обратной связи и плаванием времени.

Голос принадлежит виду, а не колонии: колоний бывает больше сотни, и если каждая подаёт сигнал отдельно, пул голосов упирается в потолок и всё превращается в кашу.

Структура

index.html
css/style.css
assets/fonts/   растровый MS Sans Serif (woff2)
assets/fire-frames.js  атлас кадров пламени как data-URI (генерирует tools/extract-fire.py)
js/rng.js       детерминированный ГСЧ (mulberry32) и fBm-шум
js/palette.js   палитры и LUT квантования
js/dish.js      геометрия и графика чашки
js/fields.js    поля симуляции
js/growth.js    архетипы, score-функция, агенты-кончики
js/scene.js     композитинг биомассы и полупрозрачного слоя
js/render.js    дизеринг, квантование, апскейл
js/preview.js   превью штаммов для палитры — прогон той же симуляции
js/cursor.js    пинцет вместо курсора
js/burn.js      выжигание чашки: фронт, зола, наложение пламени
js/ui.js        палитра, кнопки, горячие клавиши
js/sound.js     процедурная озвучка: подклады, гранулы, реверб, задержка
js/main.js      игровой цикл и состояния
tools/          bake-fire.js (GIF-предпросмотр), extract-fire.py (атлас)

Референс

Геометрия чашки, палитра и композиция сняты замерами с фотографии чашки Петри: центр, четыре полосы обода, сетка миллиметровки под стеклом, подсветка снизу.