views:

16

answers:

0

Hi, I recently started working on a photoshop-like hue-based color picker in Actionscript 3. Here's a link to the current state of the color-picker : http://dl.dropbox.com/u/4597114/color-picker.swf

Basically, I draw the colorBox (the box on the left) using a nested loop in order draw it pixel by pixel. I did so because I didn't find a way to properly draw it using beginGradientFill() instead of beginFill(). Its not really the main problem here, but if someone knows a proper way to draw it using the beginGradientFill() I would really appreciate it. Here's the code I use to draw it :

private function drawColorBox ():void {
    _colorBox = new Shape();

    var vSteps = 100 / _height; // brightness multiplyer for each pixel
    var hSteps = 100 / _width; // saturation multiplyer for each pixel

        // the HSB class is used to store a color's information
        // HSB(hue, saturation, brightness) between 0 and 360 for hue, between 0 and 100 for saturation/brightness
    var hsb:HSB = new HSB(0, 100, 100); // start color (pure red)

    for (var i:uint = _height; i > 0; i--) {
        // Change this row's brightness
        hsb.brightnessValue = (_height - i) * hSteps;

        // draw a rectangle for each pixel, forming the row
        for (var c:uint = 0; c < _width; c++) {
            // Change this pixel's saturation
            hsb.saturationValue = c * vSteps;

            // Draw the pixel
            _colorBox.graphics.beginFill(hsb.hexCode); // the hexCode property returns the color in the hexademical form
            _colorBox.graphics.drawRect(c, i, 1, 1);
            _colorBox.graphics.endFill();
        }

    }
    this.addChildAt(_colorBox, 0);
}

Now to the real problem : using the ColorMatrixFilter in order to modify the hue of the box. I've already succeeded in doing so, but the problem I have is that the colors seem to blend so that they do not result in the color they're supposed to (the color selected on the hue bar to the right). This problem is pretty visible in the demo I posted.

Finally, here's the code I use to modify the color of the box on the left :

internal function modifyCurrentColor (pHueValue:uint):void {
        // Converts hue from degrees to radians
        var convertedHue:Number = pHueValue*(Math.PI/180);
        var c:Number = Math.cos(convertedHue); // cosinus of hue
        var s:Number = Math.sin(convertedHue); // sinus of hue

        // Conversion constants for RGB -> Luminance conversion
        var f1:Number = 0.213; // Red
        var f2:Number = 0.715; // Green
        var f3:Number = 0.072; // Blue

        // Define and array containing the new color information
        var cm:Array = new Array( (f1 + (c * (1 - f1))) + (s * (-f1)), (f2 + (c * (-f2))) + (s * (-f2)), (f3 + (c * (-f3))) + (s * (1 - f3)), 0, 0, // Red
                                  (f1 + (c * (-f1))) + (s * 0.143), (f2 + (c * (1 - f2))) + (s * 0.14), (f3 + (c * (-f3))) + (s * -0.283), 0, 0, // Green
                                  (f1 + (c * (-f1))) + (s * (-(1 - f1))), (f2 + (c * (-f2))) + (s * f2), (f3 + (c * (1 - f3))) + (s * f3), 0, 0, // Blue
                                  0, 0, 0, 1, 0); // 100% alpha

        // Applies the filter to the box and overwrites any existing filter
        _colorBox.filters = new Array(new ColorMatrixFilter(cm)); 
    }

I would appreciated any suggestions that would get me closer to make color picker functional.