Подборка интересных проектов из Google Chrome Experiments для тех, у кого творческий застой

google-chrome-experiments

Иногда работа веб-дизайнера может быть очень стрессовой.
Эта статья посвящена тем, у кого сейчас творческий застой.

Google Chrome Experiments помогут вам снять напряжение и восстановить ваши творческие способности, или просто развлечься. Запущенный в марте 2009 года официальный сайт Chrome Experiment изначально предназначался для проверки ограничений языка JavaScript, а также производительности и возможностей браузера Google Chrome. Его роль в демонстрации и экспериментальном исследовании последних веб-технологий с открытым исходным кодом (в основном, JavaScript, HTML5, WebGL, Canvas, SVG, CSS) наряду с ускоряющимся темпом прогресса довольно велика. Его цель состоит в том, чтобы вдохновить творческое сообщество программистов, а также любого человека, который заинтересован в экспериментальном творчестве в Интернете, и доказать, что программирование — это весело.

Wormz

Скриншот из Wormz

Скриншот из Wormz

Ссылка на демо

WormZ написана с использованием HTML5 и Canvas. Здесь Вы можете перетаскивать изображения (текст, векторы, силуэты) на экран, и он будет показывать цикличное слайд-шоу из загруженных изображений. А самое интересное — Ваши фотографии могут превратиться в миллион зеленых флуоресцентных червей! Было бы здорово поиграть на большом экране, в полной темноте и с громким звуком. Это можно сделать, например, в следующий Хэллоуин 😉


Heavenly Glory

Заставка Heavenly Glory

Заставка Heavenly Glory

Ссылка на демо

Вы когда-нибудь хотели, чтобы Ваше малейшее движение сопровождалось крутым звуком рассекаемого воздуха? Всегда хотели, чтобы Ваши удары руками и ногами создавали звуки ломающейся доски? Мастера боевых искусств тренируются в течение многих лет — часто десятилетий — чтобы освоить навыки, необходимые для создания этих удивительных звуковых эффектов. Благодаря мощности современной веб-платформы, вы можете испытать, каково это — иметь такие навыки!

В этом проекте использовались Google API, getUserMedia и Web Audio для реализации обнаружения простого движения, который вызывает воспроизведение звука. Поток с веб-камеры пользователя анализируется в режиме реального времени, и при обнаружении движения используется Web Audio API для обеспечения сопровождающих звуковых эффектов.


Stereographic Streetview

Скриншот из Stereographic Streetview

Скриншот из Stereographic Streetview

Ссылка на демо

Stereographic Streetview использует WebGL & JavaScript. Выберите любое место в мире, и вы сможете увидеть его в стереографической проекции или сферической панораме. Если вы знакомы с фотографией, то эффект данной программы сочетает в себе особенности круглых и дающих полноэкранное представление линз «рыбий глаз». Другими словами, это дает вам полусферическое представление полного кадра, которое можно получить при помощи фильтра в Photoshop.


Glass Shader

Скриншот из Glass Shader

Скриншот из Glass Shader

Ссылка на демо

Glass Shader также использует WebGL и JavaScript. Он обладает свойствами такими, как преломление, отражение, эффект Френеля и хроматическая дисперсия. Представьте себе, что находитесь в небе (небо — это предел, и мир у ваших ног, в буквальном смысле). Программа представляет собой окружающую среду в формате 3D со стеклянным черепом в центре экрана. С помощью мыши Вы можете осматриваться на 360 градусов.


CSS Zoetrope

Скриншот из CSS Zoetrope

Скриншот из CSS Zoetrope

Ссылка на демо

Первый анимационный проект, который был полностью создан с помощью CSS (ЗD-преобразования и анимации). CSS Zoetrope является симулятором старого механизма, вращающего черно-белые изображения. Установите черный фон, выключите свет, и воспользуйтесь опцией Steamboat Willie (среди других опций, доступных на сайте). Вы можете поиграть с периодами вращения и углами отображения, чтобы увидеть анимацию, существовавшую на рубеже веков.


Pronunciation Game

Скриншот из Pronunciation Game

Скриншот из Pronunciation Game

Ссылка на демо

Pronunciation Game использует JavaScript и HTML5 для улавливания речи. Слоган на этом сайте забавный: «Если Google может понять вас, то и любой сможет». Этот сайт использует технологию распознавания речи, так что все, что вам нужно делать, это говорить в микрофон и читать каждое слово, которое появляется. Вы получите 3 попытки для каждого слова. Некоторые из вас, наверняка, будут заинтригованы и станут говорить с глупым акцентом или бормотать на первых 2 попытках. Так вперед, попробуйте сами!


WebGL Water Simulation

Скриншот WebGL Water

Скриншот WebGL Water

Ссылка на демо

Вы когда-нибудь слышали поговорку, что вода приносит вам мир и спокойствие? Возможно, вы считаете, что, то вы можете просто запустить соответствующий музыкальный файл или сходить на речку. В WebGL Water Simulation вам, как ребенку, захочется плескаться и экспериментировать.

WebGL Water Simulation — это 3D модель бассейна с водой, реализованная с помощью WebGL, формирующим изображение с отражением, преломлением, каустикой (многократные отражения и преломления лучей света от поверхностей объектов сцены, используются в глобальной модели освещения. Каустика делает сцену более живой, т. к. это реальный оптический эффект, который мы наблюдаем в повседневной жизни) и окклюзией окружающей среды (Ambient occlusion (AO) — модель затенения, используемая в трёхмерной графике и позволяющая добавить реалистичности изображению за счёт вычисления интенсивности света, доходящего до точки поверхности. В отличие от локальных методов, как, например затенение по Фонгу, окклюзия окружающей среды является глобальным методом, то есть значение яркости каждой точке объекта зависит от других объектов сцены). Бассейн моделируется с помощью heightfield (также известная как Digital Elevation Model или DEM; heightfield – это битмап, пиксели которого рассматриваются как вертикальные проекции) и содержит сферу, которая может взаимодействовать с поверхностью воды. Вы можете создать рябь, перемещать мяч, вращать камеру, играть с направлением света, управлять гравитацией и т.д.

Эта демо-версия будет работать только на WebGL реализации с видеокартами, поддерживающими точки текстуры с плавающей запятой, с экранно-пространственными частными производными и выборками верхних текстур. В настоящее время (2015 год — прим. редактора) Google Chrome — это единственный браузер, который удовлетворяет вышеперечисленным требованиям.


FontBomb

Скришншот работы FontBomb

Скришншот работы FontBomb

Ссылка на демо

Для создания Font Bomb использовались JavaScript и CSS. Разве вам не хочется что-нибудь взорвать, когда вы находитесь в состоянии стресса? Этот сайт позволяет взорвать страницу (к сожалению, только визуально, но это лучше, чем ничего, не так ли?). Вы можете установить столько бомб, сколько хотите. Каждая из них имеет 3-секундный таймер.


Sticky Thing

Скриншот из Sticky Thing

Скриншот из Sticky Thing

Ссылка на демо

Вы можете бросать эту розовую клейкую штуковину по экрану монитора и отрегулируйте её кости, жесткость, размер и уровень гравитации. Sticky Thing использует JavaScript, Canvas и CSS3. Если вам нравятся подобные липкие игрушки, что медленно сползают вниз по стене, то этот сайт для вас!


P.S. Эту статью мы писали больше года назад, и, вероятно, с тех пор появилось много других классных проектов, достойных внимания. Если вы знаете интересные свежие (или просто не упомянутые здесь) проекты, достойные внимания, — смело пишите в комментарии! 🙂

Кстати, вот более свежие продолжения этой подборки: первая часть и вторая часть.

Пётр Соковых, транслятор двоичного кода в русский язык