Color looping on canvas

Interest in canvas (<canvas>) , as well as in mobile applications, leads to a revival of the former art school of eight-bit images. Joe Huckaby from Effect Games played with color loops, which led to some stunning results .

Does anyone remember color loops in the nineties? This technology was often used by eight-bit video games of that era to achieve interesting spectacular effects using a looped color palette. Then the video cards could only display 256 colors at a time, so a palette of selected colors was used. But the programmer could change this palette at his discretion, and the colors on the screen immediately changed, adjusting to it. This happened quickly, and literally did not require any additional memory.

This is also where skillful optimization happens - instead of clearing and redrawing the entire scene in each frame, Joe updates only those pixels that change:

In order to achieve a quick frame change in the browser, I had to arrange a slightly insane engine optimization. Displaying a 640 × 480 image with indexed color on a thirty - bit RGB canvas would mean traversing and drawing 307200 pixels in each frame in a javascript. This is a traversal of a vast array, so some browsers are simply not able to handle this. I overcame their slowness by pre-processing images when they were first loaded, and by collecting those pixels that refer to animated colors (that is, colors included in looped subsets of the palette). The coordinates of these pixels are stored in a separate (smaller) array, and therefore the variable pixels alone are updated on the screen. This optimization trick worked so well that the animation really spins at quite good speed in my iPhone 3GS and iPad!