Archive | Algorithm RSS for this section

Pixas Showcase Updating: Uncle Big’s Adventure

This time I decided to make Uncle Big Stand up~

Check the details at here:
Many thanks to the cartoon author UncleBig2D


Pixas has been added to Libraries

Pixas has been added to online building Libraries, which means from now on you can import the pixas classes when building applications on
Cheers, thanks to mash and sugi!

Check how it behaves here:

This is an examle:

And here’s the code:

	import com.bit101.components.*;
	import com.risonhuang.pixas.dimensions.CubeDms;
	import com.risonhuang.pixas.colors.CubeColor;
	import com.risonhuang.pixas.objects.PixelObject;
	import com.risonhuang.pixas.objects.primitives.Cube;
    import flash.display.Sprite;
     * @author max.huang
     * @see
    public class Main extends Sprite 
        private var vBox:VBox;
        private var vBoxColor:VBox;
        private var vBoxBorder:VBox;
        private var sliX:HUISlider;
        private var sliY:HUISlider;
        private var sliZ:HUISlider;
        private var colorChooser:ColorChooser;
        private var cb:CheckBox;
		private var outPO:PixelObject;
        public function Main():void 
            outPO = new PixelObject();
            outPO.x = Math.floor(stage.stageWidth / 2);
            outPO.y = Math.floor(stage.stageHeight / 2);
            //control menu
            vBox = new VBox(this , 5, 4);
            var lableA:Label = new Label(vBox, 0, 0, "Cube dimension:");
            sliX = new HUISlider(vBox, 0, 0, "X", updateCube);
            sliY = new HUISlider(vBox, 0, 0, "Y", updateCube);
            sliZ = new HUISlider(vBox, 0, 0, "Z", updateCube);
            var s:HUISlider;
            for each(s in [sliX, sliY, sliZ])
                s.setSliderParams( 6, 220, 100);
                s.tick = 2;
                s.labelPrecision = 0;
            sliZ.tick = 1;            
            vBoxColor = new VBox(this , 5, 110);
            var lableB:Label = new Label(vBoxColor, 0, 0, "Cube top side color:");
            colorChooser = new ColorChooser(vBoxColor, 0, 0, 0xE6E8E9, updateCube);
            colorChooser.usePopup = true;
            vBoxBorder = new VBox(this , 5, 180);
            cb = new CheckBox(vBoxBorder, 0, 0, "Cube border", updateCube);
            cb.selected = true;
        private function updateCube(e:Event = null):void
            while (outPO.numChildren > 0)
			var dms:CubeDms = new CubeDms(sliX.value, sliY.value, sliZ.value);
			var color:CubeColor = CubeColor.getByHorizontalColor(colorChooser.value);
            var cube:Cube = new Cube(dms , color, cb.selected);
			outPO.addChild(new PixelObject(cube));

Moving Shell

Try it out – wonderfl build flash online

	 * @author max
    import Box2D.Common.Math.b2Vec2;
    import Box2D.Dynamics.b2Body;
    import com.actionsnippet.qbox.*;
    import flash.display.MovieClip;
	import flash.display.Sprite;
    [SWF(width=465, height=465, frameRate=60)]
    public class Main extends MovieClip 
        private var sim:QuickBox2D;
        private var center:QuickObject;
        public function Main():void 
			var bg:Sprite = new Sprite();;, 0, stage.stageWidth, stage.stageHeight);;
			var top:MovieClip = new MovieClip();
			sim = new QuickBox2D(top, { gravityY:0 } );
            sim.createStageWalls( {lineColor:0x111111, fillColor:0x111111} );

            addEventListener(Event.ENTER_FRAME, __onEnterFrame);
			var type:String = QuickBox2D.DISTANCE;
			var points:Array = [];
            var num : uint = 50;
            for (var i:uint = 0,angle:Number = 0,radius:uint = 150,step:Number = Math.PI*2 / num; i < num; i++)
                var cX:Number = stage.stageWidth / 2 + radius * Math.cos(angle);
                var cY:Number = stage.stageHeight / 2 + radius * Math.sin(angle);
				//box2d circle and joint
                points.push(sim.addCircle( {lineThickness:2,lineAlpha:0, fillAlpha:0,x:cX / 30, y:cY / 30, density:1,radius:0.2} ));
				i > 0?sim.addJoint( {lineThickness:2,lineColor:0xFFFFFF,type:type, a:points[i - 1].body, b:points[i].body } ):0;
				i == num - 1?sim.addJoint( {lineThickness:2,lineColor:0xFFFFFF,type:type, a:points[0].body, b:points[i].body } ):0;
                angle += step;
			center = sim.addCircle( {lineThickness:2,lineColor:0xFFFFFF,radius:2.4,fillAlpha:0, x:stage.stageWidth / 2 / 30, y:stage.stageHeight / 2 / 30 - 2.5, density:1 } );
			sim.addCircle( {lineThickness:2,lineColor:0xFFFFFF,radius:2,fillAlpha:0,  x:stage.stageWidth / 2 / 30-1, y:stage.stageHeight / 2 / 30, density:1 } );
			sim.addCircle( {lineThickness:2,lineColor:0xFFFFFF,radius:1.6,fillAlpha:0,  x:stage.stageWidth / 2 / 30+1, y:stage.stageHeight / 2 / 30, density:1 } );
        private function __onEnterFrame(e:Event = null):void 
            for (var body:b2Body = sim.w.m_bodyList; body ; body = body.GetNext())
                if (body == center.body) continue;
                var cp:b2Vec2 =  center.body.GetPosition();
                var f:b2Vec2 = cp.Copy();
				if(Math.random()>0.5){f = f.Negative();}
                body.ApplyForce(f, body.GetWorldCenter());

Pixas Tutorial Series Part 5: Dimension

This entry is part 5 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 the dimension assigning.

Actually if you have followed the preceding parts, you might already have the idea about how to define the dimension for primitives.

For Brick, SideX and SideY, you should pass two parameters to the constructor which represent the 2 dimensions in x-axis, y-axis or z-axis.
For Cube, you should pass three parameters to the constructor which represent the 3 dimensions in x-axis, y-axis or z-axis.
For Pyramid, the bottom must be a square, which means you just have to pass one parameter to the constructor.
As follows:

var xDms:uint = 20;
var yDms:uint = 30;
var zDms:uint = 40;

var brickDms:BrickDms = new BrickDms(xDms,yDms);
var sideXDms:SideXDms = new SideXDms(xDms, zDms);
var sideYDms:SideYDms = new SideYDms(yDms, zDms);

var cubeDms:CubeDms = new CubeDms (xDms, yDms, zDms);
var pyDms:PyramidDms = new PyramidDms(xDms);

For Pyramid, you might notice that it has another parameter, which means whether to generate a taller pyramid. In 3d pixel isometric projection, there are two types of pyramid.

Now we try to build a pyramid group, assign colors for them by PyramidColor.getByRightColor() mentioned in the previous part, if you run the code below, you will get this:

import com.risonhuang.pixas.colors.PyramidColor;
import com.risonhuang.pixas.dimensions.PyramidDms;
import com.risonhuang.pixas.objects.primitives.Pyramid;
import com.risonhuang.pixas.math.Coord3D;
import com.risonhuang.pixas.math.ColorPattern;
import com.risonhuang.pixas.objects.PixelObject;

var dms:uint = 30;

//out pixel object
var po_out:PixelObject = new PixelObject();

//tall pyramid
var pyTallColor:PyramidColor = PyramidColor.getByRightColor(ColorPattern.YELLOW);
var pyTallDms:PyramidDms = new PyramidDms(dms, true);
var pyTall:Pyramid = new Pyramid(pyTallDms, pyTallColor);
var po_pyTall:PixelObject = new PixelObject(pyTall);

//short pyramid
var pyColor:PyramidColor = PyramidColor.getByRightColor(ColorPattern.GRASS_GREEN);
var pyDms:PyramidDms = new PyramidDms(dms);
var py:Pyramid = new Pyramid(pyDms, pyColor);
var po_py:PixelObject = new PixelObject(py);
po_py.position = new Coord3D((dms - 2) * 2, dms - 2, 0);

//the other short pyramid
var py2Color:PyramidColor = PyramidColor.getByRightColor(ColorPattern.PINK);
var py2Dms:PyramidDms = new PyramidDms(dms);
var py2:Pyramid = new Pyramid(py2Dms, py2Color);
var po_py2:PixelObject = new PixelObject(py2);
po_py2.position = new Coord3D((dms - 2), (dms - 2) * 3);


po_out.x = 240;
po_out.y = 180;

So far, we’ve explored most of the Pixas engine, hope you find it interesting and would like to explore your own idea into it. Any comments, feel free to drop me a line.

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:


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.x = 240;
po_out.y = 180;

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