Как стать автором
Обновить

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

Разработка веб-сайтов
Перевод
Автор оригинала: Михаил Махемов
[подлинное зацикливание восьмибитного цвета при помощи HTML5]

Интерес к холсту (<canvas>), а равно и к мобильным приложениям, приводит к возрождению прежней художественной школы восьмибитных изображений. Joe Huckaby из Effect Games поигрался с зацикливанием цвета, что привело к несколько ошеломляющим результатам.
Помнит ли кто-нибудь зацикливание цвета в девяностых годах? Эта технология часто использовалась восьмибитными видеоиграми той эпохи для достижения интересных зрелищных эффектов методом зацикленного сдвига цветовой палитры. Тогда видеокарты могли показывать только 256 цветов за раз, так что использовалась палитра подобранных цветов. Но программист мог переменять эту палитру по своему усмотрению, и цвета на экране тотчас переменялись, подстраиваясь под неё. Это происходило быстро, и не требовало буквально никакой дополнительной памяти.
Здесь также происходит искусная оптимизация — вместо того, чтобы очищать и перерисовывать всю сцену в каждом кадре, Джо обновляет только те пикселы, которые изменяются:
Чтобы достигнуть во браузере быстрой смены кадров, мне пришлось устроить слегка безумную оптимизацию движка. Отображение картинки 640×480 с индексированным цветом на тридцатидвухбитном RGB-холсте означало бы обход и прорисовку 307200 пикселов в каждом кадре джаваскриптом. Это обход обширного массива, так что некоторые браузеры просто не в состоянии справиться с этим. Я преодолел их медлительность предварительной обработкою изображений, когда они впервые загружаются, и сбором тех пикселов, которые ссылаются на анимируемые цвета (то есть на цвета, входящие в зацикливаемые подмножества палитры). Координаты этих пикселов хранятся в отдельном (меньшем) массиве, и оттого одни только изменяемые пикселы обновляются на экране. Этот финт оптимизации сработал настолько превосходно, что анимация действительно крутится на весьма неплохой скорости в моём iPhone 3GS и iPad!
Теги:Ajaxian8bit8-bitвосьмибитные игрызацикливание цветаcanvasоптимизация программоптимизация процессовпредварительная записьiPhone 3GSiPad
Хабы: Разработка веб-сайтов
Всего голосов 215: ↑202 и ↓13 +189
Просмотры2.9K

Похожие публикации

Основы вёрстки сайтов
28 июня 202120 000 ₽Loftschool
Веб-дизайнер
28 июня 202183 000 ₽GeekBrains
Веб-разработчик
28 июня 202162 000 ₽Loftschool
Разработка приложений на Kotlin
7 июля 202124 900 ₽Нетология

Лучшие публикации за сутки