The Matlab HSV colormap rendered using 162,000 different colors generated by color-picker.js
The other day I set out to make a quick way to eliminate the need for sprites when rendering very simple entities with ImpactJS. For example the particle effects, paddles and puck in PiSpace. These entities are now rendered using direct canvas methods and constructed on the fly from input verticies. This allows for a more dynamic nature in the game and much better performance with Box2D v2.1a. More on that in a later post.
Along with using raw verticies to render the odjects, I wanted to be able to change the color on any entity in the game based on different conditions. Also, I wanted to produce a smooth gradient fade effect between any set of input colors. A direct example of this in PiSpace is the “HEAT” bar that changes from Green -> Yellow -> Red dependent on how long you have used your boost. Previously, in order to obtain the color fading I would like I used the ImpactJS sprite animation engine to select a frame from a supplied asset. This required that I have an art asset that had a frame with the color I wanted to use available for each effect I wanted to create. I am not much an artist, so my asset pipeline is slow moving for these types of things. Fading from green to red is boring and bland, but throw yellow in there and you get a more interesting effect. So, I put together a color-picker.js plugin for ImpactJS that allows me to quickly generate an array of colors in any gradient combination that I want. Click here for a demo. Below is a sample of a few different combinations:
CW starting in the upper left: 1) 2 color fade with 400 steps. 2) 6 color fade (Jet) with 480 steps. 3) 7 color fade (HSV) with 420 steps. 4) 7 color fade (HSV) with 162,000 steps.
