Color shifting

[Lexxon]

ok, what Im trying to do is create a function that takes any color you give it and shifts it lighter or darker and returns the new value.

Ex:

function receives 0x0000FF. It should then seperate it into its three colors, add a specified amount to each and retun it back in the same form. Any ideas on how I can do that?

[sasxa]

here's a little something from my library, function RGB() should take care of the 1st part (:

package com.sasxa.display.util {

	import flash.display.*;
	
	public class Color {
		
		public static function randomColor():Number {
			var color:Number;
			color = Math.round(Math.random()*0xFFFFFF);
			return color;
		}
		public static function averageColor(bitmap:Bitmap, precision:Number = 100):Number {
			var pixelCount:Number = bitmap.width*bitmap.height*precision/100;
			var average:Number = 0;
			for (var i:int=0; i<pixelCount; i++) {
				var pixelX:int = Math.round(Math.random()*bitmap.width);
				var pixelY:int = Math.round(Math.random()*bitmap.height);
				average += Number(bitmap.bitmapData.getPixel(pixelX, pixelY));
			}
			var value:Number = Math.round(average/pixelCount);
			return value;
		}
		public static function RGB(value:Number):Object {
			var result:Object = new Object();
				result.color = value;
				result.R = parseInt("0x" + value.toString(16).slice(0, 2));
				result.G = parseInt("0x" + value.toString(16).slice(2, 4));
				result.B = parseInt("0x" + value.toString(16).slice(4, 6));
			return result;
		}
	}
}

[sasxa]

actually here's whole code:

var RAmount:Number = 0;
var GAmount:Number = 0;
var BAmount:Number = 0;

var color:Number = 0xFFCCCC;
var rgb:Object = Color.RGB(color);
var newColor:Number = parseInt("0x"+(rgb.R+RAmount)+(rgb.G+GAmount)+(rgb.B+BAmount));

[TheCanadian]

It's AS2, but the math should help you:
http://www.kirupa.com/forum/showthread.php?t=223418

[Lexxon]

actually here's whole code:


ActionScript Code:

</p>
<p>var RAmount:Number = 0;</p>
<p>var GAmount:Number = 0;</p>
<p>var BAmount:Number = 0;</p>
<p>&nbsp;</p>
<p>var color:Number = 0xFFCCCC;</p>
<p>var rgb:Object = Color.RGB(color);</p>
<p>var newColor:Number = parseInt("0x"+(rgb.R+RAmount)+(rgb.G+GAmount)+(rgb.B+BAmount));</p>
<p>

Works nicely although it only returns darker colors never lighter. Even if I pass a shift amount of below 0 such as -10. It seems to disregard the negative sign and use only the absolute value. Any ideas?

[sasxa]

I forgot that these (rgb.R+RAmount) are decimal values... so newColor is 0x255255255 (: replace that line with this:
ActionScript Code:

var newColor:Number = parseInt("0x"+(rgb.R+RAmount).toString(16)+(rgb.G+GAmount).toString(16)+(rgb.B+BAmount).toString(16));

it should work...

[Lexxon]

OK, here's the code I have thus far and unfortunately every shift value I pass from -255 to 255 seems to set this thing black. I'm not good with hex numbers so I'm not sure where the problem is.

var box2:Shape = new Shape();
            box2.graphics.beginFill( ColorUtil.Shift( color, -50 ) );
            box2.graphics.drawRect( 100, 50, 50, 50 );
            box2.graphics.endFill();

public static function Shift( color:Number, shift:Number ):Number
        {
            var colorObj:Object = HextoRGB( color );
            var newColor:Number = parseInt( "0x " + ( colorObj.R + shift ).toString( 16 ) + ( colorObj.G + shift ).toString( 16 ) + ( colorObj.B + shift ).toString( 16 ) );
            return newColor;
        }
        
        public static function HextoRGB( hex:Number ):Object
        {
            var colorObj:Object = new Object();
            colorObj.R = parseInt( "0x" + hex.toString( 16 ).slice( 0, 2 ) );
            colorObj.G = parseInt( "0x" + hex.toString( 16 ).slice( 2, 4 ) );
            colorObj.B = parseInt( "0x" + hex.toString( 16 ).slice( 4, 6 ) );
            return colorObj;
        }

[Lexxon]

Well, everything appears not to be working. It either goes straight to black or straight to white. I'm going to explain again exactly what I'm trying to do because my description probably wasn't that good the first time around.

So, I have a function that takes two parameters, color (base color) and shift (number from -255 to 255). The function takes the rgb values and converts each one to its hex equivalent (ie, 0x00CCFF becomes r=0, g=204, b=255). Now the shift amount is added to each of these individual values with all three never to exceed 255 or go below 0 for obvious reasons. Now, the three values are converted back to a single hex value that is returned.

Ex:
I pass 0x00CCFF and 10 to my function. 0x00CCFF is the base color and 10 is the shift amount. The base color is broken down to r=0, g=204, b=255. With the shift value added all three values now become r=10, g=214, b=255 respectively. The three values are combined to a single hex value of 010214255 (0x0AD6FF). This is the final value that is returned.

I suck with hex math so any help would be appreciated.

Thanks!

[sasxa]

I think that your math is ok. but there might be a problem with the way you apply color to the object. If you're trying to change color, you have to use colorTransform object.

[Lexxon]

I'm not actually applying the color to an object. I'm using the color in beginGradientFill which is why I need the value an not a colorTransform object.

[TheCanadian]

Why don't you take a look at the link I posted?

package {
	public class Colour extends Object {
		private var n:uint;
		public function Colour(n:uint = 0) {
			if(n > 0xFFFFFFFF) throw new RangeError("Colour cannot be represented by a value greater than 0xFFFFFFFF");
			this.n = n;
		}
		public function get alpha():uint {
			return (this.n >> 24) & 0xFF;
		}
		public function set alpha(n:uint):void {
			if(n > 255) throw new RangeError("Colour channel cannot exceed 255");
			this.n = n << 24 | this.red << 16 | this.green << 8 | this.blue;
		}
		public function get red():uint {
			return (this.n >> 16) & 0xFF;
		}
		public function set red(n:uint):void {
			if(n > 255) throw new RangeError("Colour channel cannot exceed 255");
			this.n = this.alpha << 24 | n << 16 | this.green << 8 | this.blue;
		}
		public function get green():uint {
			return (this.n >> 8) & 0xFF;
		}
		public function set green(n:uint):void {
			if(n > 255) throw new RangeError("Colour channel cannot exceed 255");
			this.n = this.alpha << 24 | this.red << 16 | n << 8 | this.blue;
		}
		public function get blue():uint {
			return this.n & 0xFF;
		}
		public function set blue(n:uint):void {
			if(n > 255) throw new RangeError("Colour channel cannot exceed 255");
			this.n = this.alpha << 24 | this.red << 16 | this.green << 8 | n;
		}		
		public function get hex():uint {
			return this.n;
		}
		public function set hex(n:uint):void {
			if(n > 0xFFFFFFFF) throw new RangeError("Colour cannot be represented by a value greater than 0xFFFFFFFF");
			this.n = n;
		}
		
		public function valueOf():uint {
			return this.n;
		}
		public function toString(radix:uint = 16):String {
			return this.n.toString(radix).toUpperCase();
		}
		
		public function offset(n:Number, a:Boolean):void {
			if(a) {
				var da:int = this.alpha + n;
				if(da > 255) this.alpha = 255;
				else if(da < 0) this.alpha = 0;
				else this.alpha = da;
			}
			var dr:int = this.red + n;
			if(dr > 255) this.red = 255;
			else if(dr < 0) this.red = 0;
			else this.red = dr;
			
			var dg:int = this.green + n;
			if(dg > 255) this.green = 255;
			else if(dg < 0) this.green = 0;
			else this.green = dg;
			
			var db:int = this.blue + n;
			if(db > 255) this.blue = 255;
			else if(db < 0) this.blue = 0;
			else this.blue = db;
		}
		
		public static function fromARGB(a:Number, r:Number, g:Number, b:Number):Colour {
			if(a > 255 || r > 255 || g > 255 || b > 255) throw new RangeError();
			var temp:Colour = new Colour();
			temp.alpha = a, temp.red = r, temp.green = g, temp.blue = b;
			return temp;
		}
	}
}

var c:Colour = new Colour(0xCCFF);

var before:Shape = this.addChild(new Shape()) as Shape;
before.graphics.beginGradientFill(GradientType.LINEAR, [0, c], [1, 1], [0, 255], new Matrix(0.06103515625, 0, 0, 0.01220703125, 50, 10));
before.graphics.drawRect(0, 0, 100, 20);

trace(c.red, c.green, c.blue); //0 204 255
c.offset(10, false);
trace(c.red, c.green, c.blue); //10 214 255
trace(c); //AD6FF

var after:Shape = this.addChild(new Shape()) as Shape;
after.graphics.beginGradientFill(GradientType.LINEAR, [0, c], [1, 1], [0, 255], new Matrix(0.06103515625, 0, 0, 0.01220703125, 50, 10));
after.graphics.drawRect(0, 0, 100, 20);
after.y = 20;

[Lexxon]

Beautiful!! I looked at it briefly the other day, but couldn't get the conversion to AS3 to work properly. This is actually a handy little class. I may find use for it in the future. Thanks sasxa and Canadian, you guys have been a big help.

[TheCanadian]

Glad to help