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

Автор: Анна Лысак Дата публикации: 20.10.2010

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

The Wilderness Downtow

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

The Wilderness Downtow

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

The Wilderness Downtow

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

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

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

  • при помощи 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-эксперимент и, соответственно, поддержка здесь максимальная.

Материалы