Зацикливание цвета на холсте

Интерес к холсту (<canvas>), а равно и к мобильным приложениям, приводит к возрождению прежней художественной школы восьмибитных изображений. Joe Huckaby из Effect Games поигрался с зацикливанием цвета, что привело к несколько ошеломляющим результатам.

Помнит ли кто-нибудь зацикливание цвета в девяностых годах? Эта технология часто использовалась восьмибитными видеоиграми той эпохи для достижения интересных зрелищных эффектов методом зацикленного сдвига цветовой палитры. Тогда видеокарты могли показывать только 256 цветов за раз, так что использовалась палитра подобранных цветов. Но программист мог переменять эту палитру по своему усмотрению, и цвета на экране тотчас переменялись, подстраиваясь под неё. Это происходило быстро, и не требовало буквально никакой дополнительной памяти.

Здесь также происходит искусная оптимизация — вместо того, чтобы очищать и перерисовывать всю сцену в каждом кадре, Джо обновляет только те пикселы, которые изменяются:

Чтобы достигнуть во браузере быстрой смены кадров, мне пришлось устроить слегка безумную оптимизацию движка. Отображение картинки 640×480 с индексированным цветом на тридцатидвухбитном RGB-холсте означало бы обход и прорисовку 307200 пикселов в каждом кадре джаваскриптом. Это обход обширного массива, так что некоторые браузеры просто не в состоянии справиться с этим. Я преодолел их медлительность предварительной обработкою изображений, когда они впервые загружаются, и сбором тех пикселов, которые ссылаются на анимируемые цвета (то есть на цвета, входящие в зацикливаемые подмножества палитры). Координаты этих пикселов хранятся в отдельном (меньшем) массиве, и оттого одни только изменяемые пикселы обновляются на экране. Этот финт оптимизации сработал настолько превосходно, что анимация действительно крутится на весьма неплохой скорости в моём iPhone 3GS и iPad!