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;
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
@Martin I like it 🙂
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.
@Zach thnx, feel free to use it, and send link when you are finished 😉
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
thnx for feedback and good ideas Klas, these I really appreciate!