Tuesday, February 02, 2010

Generating a color-picker rainbow in 30 lines of JavaScript

Most color pickers, I find, aren't terribly helpful. Fortunately, though, it's relatively easy to create your own. All you have to do is generate a rainbow swatch and capture mousedowns or mousemoved events as the user hovers over the swatch, and sample the color under the mouse pointer. The trick is creating a good color swatch. The answer is a few lines of server-side JavaScript.

The swatch shown here (which has colors ranging from pure white at the top of the swatch, to 100 percent saturation at the bottom) was created by varying the red, green, and blue color channels sinusoidally, with each channel phase-shifted slightly. Code for this is shown below. To run the script, you can use the little ImageMunger app I gave code for in a previous post. (The app puts globals Image and Panel in scope. See previous post for details.) Just point the app at an image file of (say) dimensions 200 x 200 (or whatever), and let the script fill the image with colors. Be sure to use JDK6.

/* colorpicker.js
* Kas Thomas
* 02 February 2010
* Public domain.
*
* Run this file using ImageMunger:
* http://asserttrue.blogspot.com/2010/01/simple-java-class-for-running-scripts.html
*/


( function main() {

w = Image.getWidth();
h = Image.getHeight();
pixels = Image.getRGB(0, 0, w,h, null, 0,w);

var x,y,spanx,spany;
for (var i = 0; i < pixels.length; i++) {
x = i % w;
y = i / w;
spanx = x/w;
spany = y/h;
pixels[ i ] = rainbowPixel( spanx,spany );
}
Image.setRGB(0, 0, w,h, pixels, 0,w);
Panel.updatePanel();

function rainbowPixel( xspan, yspan ) {

blue = 255 - yspan*255 * ( 1.0 + Math.sin( 6.3*xspan ) )/2;
green = 255 - yspan*255 * ( 1.0 + Math.cos( 6.3*xspan ) )/2;
red = 255 - yspan*255 * ( 1.0 - Math.sin( 6.3*xspan ) )/2;

return (red << 16) + (green<<8) + blue;
}

})();
Note that this technique can be adapted to PDF image-maps quite easily (as shown here). It is also the basis of a (pure Java) plug-in for the National Institutes of Health's freeware ImageJ program.

Future projects:
  • Instead of sampling the color under the mouse pointer, retrieve the target color procedurally by back-calculating the color based on the x-y coordinates of the mouse.
  • Rewrite the rainbowPixel() method to space the color channels out by 120 degrees (2-pi-over-3 radians) instead of 90 or 180 degrees. (In the code shown above, blue and green channels are phased 90 degrees apart; blue and red are 180 degrees apart.)
  • Make it so that colors range from pure white at the top of the swatch to black at the bottom, with full saturation in the middle of the swatch.
  • Write a version in slider controls can be used to control the phase angles of the 3 color channels.

9 comments:

  1. Anonymous3:49 PM

    This is not a colorpicker in "30 lines of javascript". The other 138 lines of Java and the java virtual machine are a huge legacy

    ReplyDelete
  2. hey dude,
    amazing tips to get how to use web design with foraml way without any bugs. and read about full article of yous need bottom line of web design is much important and simply superb. do great things.
    School Logo Design UK

    ReplyDelete
  3. wonderful tips about web designing and much informative. its more helpful to get the how webdesigner makes them growing fast company for this field. i got some ideas from your point but not having clear idea about square space? will you explain about it?
    best GMAT coaching classes in chennai

    ReplyDelete
  4. The packer and movers in Hyderabad load and unload your household items using the necessary equipment and techniques depending on your specific requirements. Fragile household items are handled with extra care, and you can rest assured that you are leaving your irreplaceable assets in good hands.
    Movers and Packers in Gachibowli
    Movers and Packers in Kukatpally
    Movers and Packers in Chanda Nagar
    Movers and Packers in Manikonda

    ReplyDelete
  5. The packer and movers in Hyderabad load and unload your household items using the necessary equipment and techniques depending on your specific requirements. Fragile household items are handled with extra care, and you can rest assured that you are leaving your irreplaceable assets in good hands.
    Movers and Packers in Madhapur
    Movers and Packers in Gachibowli
    Movers and Packers in Chanda Nagar
    Movers and Packers in Nallagandla
    Movers and Packers in Kukatpally

    ReplyDelete
  6. Thanks for your stop at Indian Packers and Movers in Mumbai. We really know the intentions of the people who are moving their homes or offices in Mumbai. We are one of the best Packers And Movers in Mumbai that gives values to the suggestions and recommendations of the client. It is this heart reading and friendly packing and moving service that made us the most loved packers and movers in Mumbai to depend for professional local transport in Mumbai, courier services in Mumbai and relocation services Mumbai and more.
    Packers and Movers in Dombivli
    Packers and Movers in Thane West

    Movers and Packers in Mumbai
    Movers and Packers in Dadar
    Movers and Packers in Thane
    Movers and Packers in Panvel

    ReplyDelete
  7. Packers and Movers in Mumbai achieve conceit in offering great packing and moving services at reasonable costs. We deal all types of packing and moving services in Mumbai and other main cities of India.
    Please Visit Our Website : https://indianpackersmovers.in/
    Movers and packers in Grant Road
    Movers and packers in Mumbai Central
    Movers and packers in Mahalaxmi
    Movers and packers in Prabhadevi

    ReplyDelete
  8. Our company has well equipped machines and modern tools that ensure quality and fast production with the help of which we are able to manufacture more than 5,000 office chairs per year. And thus, we are able to meet the ever- growing demand of chairs. Among the many places where our products are supplied among those two biggest supplies are done in Mumbai, Pune in India.
    Chair Manufacturers in Mumbai
    Chair Supplier in Mumbai
    Office Chair Supplier in Mumbai
    Visitor Chair Supplier in Mumbai
    Chair Dealers in Mumbai

    ReplyDelete
  9. Nice article. It's very helpful to me. Thank you. Please check my hex to rgba.

    ReplyDelete

Add a comment. Registration required because trolls.