Pixas Tutorial Series Part 4: Color

This entry is part 4 of 5 in the Pixas tutorial series
part 1: building your first application
part 2: coordinate system
part 3: primitives
• part 4: color
part 5: dimension

In this part, we will learn how to assign color to all of these pixel objects.

Firstly let’s take a look at the ColorPattern Class. There is a set of bright or comfortable color value defined as the const variables of the Class, which means you can get a certain color value as follows:

ColorPattern.PURPLE;
ColorPattern.PINK;

Or get a random color value from all of the color const variables defined in the ColorPattern Class like this:

var random_color:uint = ColorPattern.getRandomComfortableColor();

For the primitive just having one side like Brick, SideX and SideY, we set color by assigning an instance of SideColor to the primitive constructor, like this:

var brickDms:BrickDms = new BrickDms(60,60);
var sideColor:SideColor = new SideColor(0x666666,0x33CCCCCC);
var brick:Brick = new Brick(brickDms, sideColor);	

The frist parameter represents the border color and the second represents the side color. You can also assign an aRGB color value to parameters if you want to get transparent. In the preceding code, 0x33 indicates the alpha value of the side inner color.

For the Cube primitive, we set color by assigning an instance of CubeColor to the primitive constructor, like this:

var cubeDms:CubeDms = new CubeDms(60, 60, 60);
var cubeColor:CubeColor = CubeColor.getByHorizontalColor(ColorPattern.PINK);
var cube:Cube = new Cube(cubeDms, cubeColor);	

Every cube has three sides,an out dark border and an inner highlight border, so normally we should have prepared for five color parameters. However, to simplify this procedure, the CubeColor.getByHorizontalColor(); static method helps you calculate values from light to dark automatically and returns an instance of CubeColor which contains the values set. To invoke this method,just one color value is needed(usually color value of the lightest horizontal side).

This approach is highly recommended, but still you are allowed to assign all of the colors to create a CubeColor instance totally by yourself, like this:

var cubeColor:CubeColor = new CubeColor(0x949698, 0xFFFFFF, 0xC9CFD0, 0xE6E8E9, 0xEEEFF0);

For the Pyramid, it looks quite similar to the Cube. The only difference is to obtain color set by calling: PyramidColor.getByRightColor();

var pyColor:PyramidColor = PyramidColor.getByRightColor(ColorPattern.YELLOW);
var pyDms:PyramidDms = new PyramidDms(xDms);
var py:Pyramid = new Pyramid(pyDms, pyColor);	

That’s all done, now let’s use 125 cubes to make a 5x5x5 cube block with random colors. Run the code below and you will receive this:

Here’s the code:

import com.risonhuang.pixas.math.Coord3D;
import com.risonhuang.pixas.math.ColorPattern;
import com.risonhuang.pixas.colors.CubeColor;
import com.risonhuang.pixas.dimensions.CubeDms;
import com.risonhuang.pixas.objects.primitives.Cube;
import com.risonhuang.pixas.objects.PixelObject;

var po_out:PixelObject = new PixelObject();
for (var i:uint = 0; i <= 4; i++ )
{
	for (var j:uint= 0; j <= 4; j++ )
	{
		for (var k:uint = 0; k <= 4; k++ )
		{
			var c3d:Coord3D = new Coord3D(30 * i, 30 * j, (32 +1)*k);
			var cubeDms:CubeDms = new CubeDms (30, 30, 32);
			var cubeColor:CubeColor = CubeColor.getByHorizontalColor( ColorPattern.getRandomComfortableColor() );
			var cube:Cube = new Cube(cubeDms, cubeColor,false);		
			var po_tmp:PixelObject = new PixelObject(cube,c3d);
			po_out.addChild(po_tmp);
		}
	}				
}

po_out.x = 240;
po_out.y = 180;
addChild(po_out);

In the next part, we will learn about the dimension of the primitive.

Advertisements

Trackbacks / Pingbacks

  1. Pixas part 3: Colour! | pixelDiff - 16/08/2012

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s