Не так давно проходила выставка в Смитсоновском музее американского искусства и на

20 февраля 2025 г.Будни разработчика

#проект дня

Не так давно проходила выставка в Смитсоновском музее американского искусства и на ней была представлена целая стена из ЭЛТ-телевизоров. Почему-то на это обратил внимание твиттер FPGA Gaming (я просто очень эмуляторы люблю).

И я подумал: «А чем я хуже?» Тем более, что лет 8 назад мы делали проект для одного энергетического напитка, в котором был буквально ровно похожая идея. И они решили повторить её и на своём сайте.

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

Итак, вашему вниманию совершенно бесполезная, но такая забавная, пирамида из телевизоров: https://bekharsky.github.io/tvs/

Что же понадобилось для сборки?

Первым делом, естественно, нужно собрать кадры аналоговых глюков воедино, чтобы получилось несколько видео. Их и будем запускать:

ffmpeg -f image2 -r 25 -pattern_type glob -i '*.png' -vcodec libx264 -crf 22 video.mp4

После чего подготовим наш список видео и подумаем: а что нужно сделать-то?

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

А лучше не просто рандомно, а ещё и сами видео на телевизорах менять!

И тут нам помогут вечные друзья: raf и ref.

В смысле, requestAnimationFrame и reference в React. А не то, что вы подумали.

С помощью requestAnimationFrame добиваемся рандомного запуска в пределах от секунды до трёх, а с помощью массива рефов — просто подменяем src видео в цикле.

Кстати, забавный трюк:

    <video

      ref={(el) => (videoRefs.current[i] = el)}

      className="video"

      key={`video-${i}`}

      src={name}

      loop

      muted

    />

Проп ref представлен в виде функции, ref callback:

ref={(el) => (videoRefs.current[i] = el)}

В этот момент React присваивает ссылку на ноду элементу массива. Это хорошо описано в документации и не только экономит число ссылок и использований useRef, но и позволяет динамически этим списком управлять.

Ну и осталось — а осталось только запустить несколько рандомных видео и вовремя остановить их.

Исходный код, как всегда, доступен: https://github.com/bekharsky/tvs

Кстати, чтобы сделать эффекты ещё более интересными, можно не в видео их собирать, а перебирать картинки на лету. Что даст абсолютный контроль над кадрами. Чем, наверное, и займёмся вскорости.

Задавайте ваши ответы, котаны :)

#react #art #ref

Ссылка на постВ канал