Как создать интерактивную арт-инсталляцию на Orange Pi Zero

Представьте: вы делаете арт-проект, где зритель смотрит бесконечный поток видео и постепенно 'сходит с ума'. И всё это работает на одноплатнике за 15 долларов. В этой статье мы разберём, как создать такую инсталляцию на примере BrainRot TV — проекта для выставки TIAT 'Slop Epistemologies'. Вы узнаете, как оптимизировать видео, аудио и графику для слабого железа, чтобы всё летало даже на Orange Pi Zero.

Архитектура проекта и ключевые компоненты

BrainRot TV — это веб-приложение на HTML5, CSS3 и JavaScript, которое запускается в Docker-контейнере на Google Cloud Run. Основная идея: зритель нажимает кнопку 'LOCK IN' и смотрит бесконечную ленту видео, а система отслеживает его 'психологическое разложение'.

Сборка плейлиста и воспроизведение

Мы собрали плейлист из 120+ MP4-видео, размещённых на Google Cloud Storage. При старте плейлист перемешивается алгоритмом Фишера-Йетса, и видео начинают переключаться вертикальными свайпами, как в TikTok.

Генеративное аудио через Web Audio API

Вместо статического аудиофайла мы создали процедурный эмбиент. Два расстроенных синусоидальных осциллятора создают 'жуткую' квинту, а LFO модулирует высоту тона. Когда в видео есть звук, громкость эмбиента автоматически уменьшается:

// Уменьшение громкости эмбиента при наличии звука в видео
function checkVideoAudio() {
  const player = dom.videoPlayer;
  const hasAudio = player.mozHasAudio ||
    Boolean(player.webkitAudioDecodedByteCount) ||
    Boolean(player.audioTracks && player.audioTracks.length);
  if (hasAudio) {
    setAmbientVolume(0.06);
  } else {
    setAmbientVolume(0.35);
  }
}

Метр 'психологического разложения'

По мере просмотра у зрителя растёт счётчик 'гниения'. Он проходит 9 стадий — от 'FRESH' до 'THE ENTERTAINMENT'. UI показывает сублиминальные команды ('CONSUME', 'OBEY'), а при 100% начинается 'критический сбой': экран трясётся, кнопка выхода блокируется, и в итоге появляется 'синий экран смерти'.

Подключение физического интерфейса

В галерее неудобно использовать клавиатуру, поэтому мы взяли беспроводной USB-презентер (слайдер). Он эмулирует нажатия клавиш PageDown, ArrowRight и т.д. Мы написали обработчик, который преобразует эти сигналы в действия:

const FORWARD_KEYS = new Set(['PageDown', 'ArrowRight', 'ArrowDown', 'Enter', ' ']);
const BACK_KEYS = new Set(['PageUp', 'ArrowLeft', 'ArrowUp', 'Escape', 'Backspace']);

document.addEventListener('keydown', (e) => {
  if (FORWARD_KEYS.has(e.key)) {
    e.preventDefault();
    if (state.screen === 'landing') lockIn();
    else if (state.screen === 'viewing') playNextVideo();
    else if (state.screen === 'crash' || state.screen === 'exit') lockIn();
  } else if (BACK_KEYS.has(e.key)) {
    e.preventDefault();
    if (state.screen === 'viewing' && !dom.btnTouchGrass.disabled) {
      touchGrass();
    }
  }
});

Оптимизация для Orange Pi Zero

Orange Pi Zero — одноплатник с ARM-процессором, 512 МБ RAM и слабым GPU. Запустить на нём тяжёлые видео и CSS-фильтры — задача нетривиальная. Вот как мы решили проблему.

Автоопределение слабого железа

Приложение проверяет характеристики браузера и автоматически включает режим низкого энергопотребления:

const LOW_POWER = new URLSearchParams(window.location.search).get('lowpower') === '1' ||
  (navigator.deviceMemory && navigator.deviceMemory <= 2) ||
  (navigator.hardwareConcurrency && navigator.hardwareConcurrency <= 2);

Глубокая предзагрузка видео

В обычном режиме следующее видео загружается только после нажатия 'Skip'. На слабом железе это вызывает чёрные паузы. Мы увеличили очередь предзагрузки до 4 скрытых элементов video с preload='auto', чтобы переключение было мгновенным.

Отключение тяжёлых CSS-фильтров

Изначально по мере 'гниения' применялись CSS-фильтры: hue-rotate, saturate, blur. На Orange Pi blur заставлял CPU рендерить всё программно. В режиме LOW_POWER мы полностью отключаем CSS-фильтры и наложения, оставляя только лёгкие изменения прозрачности.

Троттлинг canvas-шума

Приложение рисует аналоговый ТВ-шум на canvas. При 60 FPS это потребляло 40% CPU. Мы уменьшили разрешение canvas в 8 раз и ограничили FPS до 8:

const STATIC_FRAME_INTERVAL = LOW_POWER ? 125 : 0; // 125ms = ~8 FPS
const STATIC_RESOLUTION_DIVISOR = LOW_POWER ? 8 : 4;

Типографика для 640×480

На маленьком экране веб-шрифты выглядели ужасно. Пришлось использовать системные шрифты, увеличить размеры (заголовки до 72–110px), убрать тени и эмодзи (заменили на ASCII-символы).

Практический вывод

Теперь вы знаете, как создать интерактивную инсталляцию на дешёвом одноплатнике. Главные уроки: всегда проверяйте производительность на целевом железе, отключайте всё лишнее, предзагружайте данные. Попробуйте сами: возьмите Orange Pi Zero, установите браузер в киоск-режиме и запустите своё веб-приложение. Удачи!

Как создать интерактивную арт-инсталляцию на Orange Pi Zero