Бегущая строка с прыгающими буквами на JS (canvas)

Когда-то написал эту штуку под впечатлением от демки Lyra II еще на zx-spectrum.
Вот переписал на JS много лет спустя :) Ностальгия замучала :)

Строка бежит по закону синуса + случайном образом у нее подпрыгивают буквы

Демо

Canvas does't support by this browser...

Грубо, работает примерно так:
  • Есть смещение в пикселях позиции относительно начала строки, оно все время увеличивается и при достижении максимума снова начинается с начала - это собственно скроллинг.
  • Есть таблица с набором строк, где хранится номер символа и его смещение по вертикали. Спецальная подпрограмма занимается случайной генерацией этих позиций, производит их обсчет и при достижении конца анимации "подпрыгивания" уничтожает данную строку - это "подпрыгивания".
  • Есть основная процедура, которая используя смещение, а так-же ширину символов в строке вычисляет с какого элемента начинать отрисовывать строку по горизонтали и вогласно таблице "подпрыгиваний" по вертикали, отрисовывает эту бегущую строку, меняя текущую вычисленную высоту согласно закону sin от текущего смещения скроллинга

Как? Вы ничего не поняли? Тогда добро пожаловать в исходники :-)

Для отрисовки используется библиотека canvas.js

Скачать jline.zip

Все файлы демки одним архивом
скачать

05.10.2013, Protocoder
Написать комментарий