Forums » Code » Gradient Color Picker Plugin

I have been working on optimizing my game with Box2D v2.1a and found that relying on sprites and alpha blending to achieve the colors I wanted for my effects was not fast enough. So, I put together a plugin called color-picker.js that I use to generate arrays of Hex color code gradients that I can use with direct canvas rendering within ImpactJS.

The code is readily available on GitHub's gist and I am updating it regularly with tweaks, enhancements and bug fixes. Please provide feedback and suggestions, and of coarse fork it or report bugs. I want to do what I can to help.

It is also on PointOfImpact.

The current functions are as follows:

genMultiHexArray => input an array with any number of hex colors and number of steps, return array with 'steps' entries between each sequential pair of colors in the input array

genHexArray => input hex colors and a number of steps, return array with 'steps' entries fading from color1 to color2.

pickHex => input two hex colors and a ratio, return color that is equivalent to that fade between those two colors at the ratio point

hexToRGBstr & hexToRGBA => converter algorithms for browser compatibility and alpha fading

Using this plugin (especially the genMultiHexarray) has greatly improved my content pipeline and overall game performance. The genMultiHexarray is fantastic for generating more complex color gradients like the Matlab Jet gradient which is very useful.

PiSpace

Cheers!

Updated the plugin and created a repo on GitHub @ impactjs-color-picker

A simple canvas demo of the plugin in action can be found here: demo-color-picker
The 4th canvas is made up of 162000 unique colors, each represented by a single pixel.

I also posted on my blog about its usage and a breakdown of the code.

Hopefully someone else will find this as useful as I have.

Hi clok,

I thought you would be pleased to know that I use your Color Picker plugin in my game (wip).

It's a very cool tool, and thanks to the provided doc and PiSpace's source code, it was easy to add it in my game: thank you!