Не так давно проходила выставка в Смитсоновском музее американского искусства и на ней была представлена целая стена из ЭЛТ-телевизоров. Почему-то на это обратил внимание твиттер 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