Нетормозящий «визуализатор кода матрицы» на js?

habrmatrix.png


От нечего делать накидал в очередной раз визуализацию того самого зеленого кода из фильма Матрица на javascript. Столкнулся с проблемой тормозов в виду того, что для получения анимации кода аналогичной анимации из фильма нужно анимировать большое количество элементов сразу. В основном потому, что происходит изменение прозрачности затухающих символов. Писал в полседьмого утра в частичном анабиозе, о тормозах не думал. Пришел в себя днем — задумался. Итого:


Демо (лучше смотреть в хроме): oops.da.am/matrix.html (картинка сверху — скрин демы)

Что нужно получить:


Вдвое сжатые по ширине и развернутые слева-направо символы катаканы.

Падающие меняющиеся свето-зеленые символы, отпечатывающие себя каждый раз переходя на строку вниз.

Затухание уже отпечатанных темно-зеленых символов.

Переодическая смена небольшого процента темно-зеленых символов (так в фильме было на сколько я помню).

Работу скрипта на полный экран с минимальными тормозами.

Что есть:


Все перечисленное выше + дикие тормоза, по причине которых окно анимации пришлось в демке сделать небольшим.

Более менее приличная работа демки в хроме.

Что пробовал:


requestAnimationFrame — 0 эффекта

Работать не с символами обработанными css3, а с готовыми картинками — тормоза те же

Скрывать элементы потухших символов в dom — очень слабо помогло

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

Сопсно вопросы:


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

Зачем:


Хочу заставку себе такую на комп, существующие не нра или платные, хочу свою =)
  • Вопрос задан
  • 5725 просмотров
Решения вопроса 1
Самый простой и быстрый способ — это Canvas.
Принцип простой — у нас нет всех букв как объектов.
Каждый «тик» мы отрисовываем только новые буквы, после того как весь холст заливаем полупрозрачным фоном.
Тогда весь экран у нас будет словно «угасать». И вся производительность будет упираться только в возможность компа залить весь холст одним цветом.
Единственная проблема — остаются лёгкие следы, но это, имхо, даже хорошо — именно так ведь оно на лучевых мониторах и должно быть?
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
У вас прикольно получилось, но сильно уж быстро.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы