Looping color on canvas

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

Does anyone remember the color loop in the nineties? This technology was often used by eight-bit video games of that era to achieve interesting spectacular effects using the loop color shift method. At that time, video cards could only show 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.

Skillful optimization also takes place here - instead of clearing and redrawing the entire scene in each frame, Joe only updates the pixels that change:

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