Google и Arcade Fire: как соединить технологии и искусство

Умные и творческие люди из Google объединились со своими единомышленниками и представили в конце августа этого года новый проект — The Wilderness Downtown — из серии Chrome-экспериментов. Основная цель проекта — показать возможности технологий с открытым кодом и то, в какую красоту они могут превратится в умелых руках. Но это не просто какая-нибудь бессмысленная страничка с анимированными элементами, а интересная и приятная глазу вещь — интерактивная интерпретация песни «We Used To Wait» («Мы привыкли ждать») канадской рок-группы Arcade Fire.

Продукт безусловно необычен и главная изюминка в том, что он требует активного участия пользователя, ведь ему предлагают совершить «путешествие в свою память» при помощи веб-технологий. Сперва нужно ввести название родного или любого другого города (правда, нужно учитывать, что доступны только те места, для которых есть хорошие спутниковые карты в Google maps) и в основном окне главный герой клипа начинает свой бег по хорошо знакомым вам улицам.

На заднем плане попеременно сменяют друг друга 7 сцен с птицами, пролетающими над домами, кафе, магазинами и улицами. И вот в конце, на фоне последних сцен клипа, дается возможность написать послание самому себе в прошлое. Буквы письма постепенно превращаются в деревья и их ветви разрастаются, пока не заполняют собой весь лист, а после завершения рисунка на такие «веточки» букв слетаются птицы.

Создатели проекта во главе с режиссером Крисом Милком (Chris Milk) поставили перед собой весьма сложную задачу и не только с технической точки зрения : «одна из самых сложных задач для режиссера — заставить зрителя слиться с персонажем и событиями. При помощи Google Maps и технологии Street View мы можем привязать реальность к любому человеку. Это совершенно новый вид эмоционального вовлечения — повествовательный, и, в то же время, очень личный». Следующий уровень развития проекта ожидается в течении ближайших месяцев, когда пользователи смогут анонимно общаться посланиями из фильмов и это выведет эксперимент на новый уровень социального взаимодействия.

Все же для нас самое интересное в The Wilderness Downtown — это его техническая начинка. И один из создателей — Рикардо Кабельо (Ricardo Cabello), более известный как Mr. Doob — постарался раскрыть основные тонкости создания такой красоты. В The Wilderness Downtown есть, кажется, все или почти все: динамические окна, музыка, 3D объекты, карты, возможность рисовать. И все реализовано при помощи HTML5 и JavaScript. Кстати, недавно на просторах интернета попался интересный проект Эфириум (ETH), новости про Биткоин (BTC) и Ethereum (ETH). Читать полностью.

А теперь слегка подробнее:

• при помощи HTML5 Canvas 3D генерируются движения парящих птиц, реагирующих на движения мыши и музыку;
• HTML5 audio проигрывает музыку и отслеживает тайм код (индекс видеокадра, прописываемый в файле для точного позиционирования этого видеокадра с целью монтажа. Как правило представляет собой четыре группы по две цифры разделенные двоеточиями, запятыми или буквами: час, минута, секунда или фрейм);
• система последовательности управляет и синхронизирует эффекта и окна c тайм кодом;
• HTML5 video проигрывает отрывки фильма в установленных пользователем размерах;
• динамические окна появляются согласно ритмам музыки и, благодаря HTML5, выглядят достаточно гибкими, потому как не привязаны к флеш-плееру — пользователь может менять размер окна по диагонали, а также перемещать его по всему полю интерфейса без особой нагрузки на трафик и производительность системы на своем компьютере;
• фрагменты карты появляются, масштабируются и вращаются с использованием 3D-сценария;
• анимированные спрайты составлены непосредственно при помощи карт и Street View;
• 3D купол неба используется, чтобы представить информацию службы Street View согласно заданному сценарию управления камерой;
• процедурный инструмент для рисования позволяет пользователю быстро создавать эффект «ветвей»;
• также задействован SVG path reader, который позволяет пользователю создавать анимированные рисунки;
• Google Maps API используется для составления динамических маршрутов до места назначения и синхронизации с Street View по точкам маршрута;
• применяется коррекция цвета путем применения режима смешивания для увеличения контрастности и яркости картинки;

Перечень интересных «фишек» действительно немалый и, благодаря таким новшествам, даже ничего не знающий о технической стороне дела пользователь почувствует разницу. Активное использование формата HTML5 в этом проекте позволило компании Google показать, какими будут пользовательские интерфейсы буквально через год-два.

The Wilderness Downtown доступен почти во всех последних версиях браузеров (за исключением IE), но чтобы сполна все распробовать, лучше использовать Google Chrome — здесь меньше всего тормозов ну и, все-таки, это Chrome-эксперимент и, соответственно, поддержка здесь максимальная.

Материалы

• The Wilderness Downtown — сайт thewildernessdowntown.com
• Блог Mr. Doob — сайт mrdoob.com
• Google and Arcade Fire Get All HTML5y — сайт webmonkey.com