blog

Color Picker Not Boring Anymore at Jozef Chúťka's blog

June 2, 2010

black and white BlendMode color ColorCircle ColorPicker donut palette RGB

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).

ColorCircle – wonderfl build flash online

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;

You may Leave a comment or Subscribe to Comments RSS or Trackback this entry.

6 comments so far

Martin Rädlinger June 2, 2010 11:48 hey nice one … I’ve done some similar things a few weeks ago http://blog.formatlos.de/2010/03/27/hsb-color-wheel http://blog.formatlos.de/2010/03/30/as3-circle-gradient/ http://blog.formatlos.de/2010/03/30/as3-circle-color-spectrum/ cheers Martin

Jozef Chúťka June 2, 2010 12:23 @Martin I like it 🙂

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.

Jozef Chúťka June 2, 2010 22:41 @Zach thnx, feel free to use it, and send link when you are finished 😉

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

Jozef Chúťka June 24, 2010 11:13 thnx for feedback and good ideas Klas, these I really appreciate!

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