Color Picker Not Boring Anymore

For my next project, I needed some lightweight color picker that would be usable but not boring. Nice challenge. So I have created ColorCircle class that may work as a color picker while it dispatches all the necessary ColorCircleEvent-s. I made this class a little dynamic, so you can create custom color pickers on runtime using RGB palette, Black to White fade, solid color or current color with any defined radius (inner + outer) you want.

To create donut shapes I have used shape with lineStyle+drawCircle+cacheAsBitmap drawed over original graphics using BlendMode.ALPHA. To browse RGB pelette there is a paletteColor() method that crawls all color spectrum based on position (0 to 1).

Donut drawing:

var donut:Shape = new Shape();
donut.graphics.lineStyle(outerRadius - innerRadius, 0, 1);
donut.graphics.drawCircle(outerRadius, outerRadius, 
	(outerRadius + innerRadius) / 2);
donut.cacheAsBitmap = true;
bitmapData.draw(donut, null, null, BlendMode.ALPHA);

RGB palette by position (0..1) with light/shadow:

public static function paletteColor(position:Number, light:Number=0, dark:Number=0):uint
{
	var r:Number = Math.abs(.5 - position) * 6 - 1;
	r = r > 1 ? 1 : r < 0 ? 0 : r;
	r = (r + (1 - r) * light) * (1 - dark);
	
	var g:Number = (1 - Math.abs(1/3 - position)) * 6 - 4;
	g = g > 1 ? 1 : g < 0 ? 0 : g;
	g = (g + (1 - g) * light) * (1 - dark);
	
	var b:Number = (1 - Math.abs(2/3 - position)) * 6 - 4;
	b = b > 1 ? 1 : b < 0 ? 0 : b;
	b = (b + (1 - b) * light) * (1 - dark);
	
	return (r * 0xff) << 16 | (g * 0xff) << 8 | (b * 0xff);
}

Another RGB palette calculation (by radians):

var r:Number = (Math.sin(rad) + 1) / 2;
var g:Number = (Math.sin(rad + Math.PI / 2) + 1) / 2;
var b:Number = (Math.sin(rad + Math.PI) + 1) / 2;

6 comments so far

  1. Martin Rädlinger June 2, 2010 11:48
  2. Jozef Chúťka June 2, 2010 12:23

    @Martin I like it 🙂

  3. Zach June 2, 2010 20:23

    Once again, awesome post. The funny thing is I find myself almost making up a project to use this in 🙂 I didn’t realize I need a color wheel until I saw the post.

  4. Jozef Chúťka June 2, 2010 22:41

    @Zach thnx, feel free to use it, and send link when you are finished 😉

  5. Klas Lundberg June 24, 2010 10:28

    Really beautiful and useful color picker! Tried it in onBoard on a 19″ touchscreen device. You should add some feedback/delay when the color is picked. It was kind of hard to see which color that was chosen otherwise.

    More feedback about using onBoard on touch: Our device is only singletouch and has no keyboard, so we could not zoom out or rotate, but panning and drawing worked like a charm. =) You should also try to use mousedown on buttons to get more instant/natural touch interaction, otherwise the UI is great! Really cool experience! =)

    Keep up the good work!

    /Klas

  6. Jozef Chúťka June 24, 2010 11:13

    thnx for feedback and good ideas Klas, these I really appreciate!

Leave a comment

Please be polite and on topic. Your e-mail will never be published.