#проект дня

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

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

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

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

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

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

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

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