Удивительный JavaScript. Графические эффекты

Скорее всего, в демонстрации графических эффектов нет никакой практической пользы. Однако все они являются прекрасной демонстрацией возможностей JavaScript. Никакого Flash, только использование операторов языка программирования и функций. Впечатляющие перспективы использования JavaScript, которые открывают дорогу для новых, ранее недоступных для веб-проектов, сфер использования. Кажется невероятным тот факт, что еще несколько лет назад создание таких графических приложений было невозможным на JavaScript.

Итак — смотрим! Лучше всего для просмотра демонстраций использовать браузер Chrome, потому что он обладает наилучшим на сегодняшний день механизмом интерпретации JavaScript.

Canopy

Canopy  — это масштабируемый фрактал в векторном стиле. Нажмите «play» чтобы начать путешествие, нажатие на кнопку мыши ускоряет процесс. Использование опций «Mutation» (мутация) и «Bloom» (цветок) превращает дерево в странную структуру.

Ball Pool

Вначале появляются шары в случайном порядке. Вы можете создать новые шары (нажав кнопку мыши в пустом месте), перемещать те, что уже есть, (перетаскивая мышью) и обновлять экран (двойное нажатие кнопки мыши).

Starfield

Простое звездное поле (512 звезд).

Floating cube

Плавающие кубики составляют фразу «Chrome Experiment».

3D Model Viewer

Приложение 3d Model Viewer реализовано на Javascript и с использованием элемента canvas (HTML 5). Возможно просматривать 3D-модели (динозавр, корабль, вертолет), вращать их, изменять цвет и прозрачность, добавлять эффект «motion blur«.

 

Many Lines

Рисуются линии вслед за движением курсора мыши.

Depth of Field

300 шаров сначала располагаются на плоскости, затем собираются в куб, затем собираются в модель вселенной, затем становятся сферой и исчезают. Можно менять угол обзора процесса.

Fish

Несколько рыбок собираются в косяк, чтобы обмануть хищника. Курсор мыши — хищник для них, и они будут избегать его. Напугайте их, но они все равно будут возвращаться.

Liquid Particles

Поиграйте с частицами и их движением в жидкости. Перемещайте курсор мыши сквозь скопления частиц, нажимайте на кнопку мыши или просто удерживайте ее.

Orange Tunnel

Классический эффект туннеля в стиле демо сцен.

Colors Cube

Colorscube — простое воспроизведение цветового пространства RGB в 3D. Используются установки прозрачности.

Kaleidoscope

Для изображения детского калейдоскопа используются заполненные круги с установками прозрачности. Все параметры выставляются случайным образом, схема постоянно меняется.

 

Конечно, представленные графические эффекты, скорее всего, не имеют практического применения. Но такая демонстрация возможностей чрезвычайна полезна для инициации воображения разработчика и генерации новых проектов с набором ранее недоступных функций.

_____________________

Евгений Попов – автор ряда видеокурсов по сайтостроению. В том числе и видеокурса «Javascript + jQuery для начинающих в видеоформате».