IGraphicsData Example

// note the high framerate for testing purposes
[SWF(width = 800, height = 600, frameRate=60)]
// red, yellow, blue
var fills:Vector.<IGraphicsData> = Vector.<IGraphicsData>([new GraphicsSolidFill(0xFF0000),  new GraphicsSolidFill(0xFFCC00), new GraphicsSolidFill(0x0033FF)]);

var stroke:IGraphicsData = new GraphicsStroke();

var cmds:Vector.<int> = new Vector.<int>();
var ci:int = 0;
var dat:Vector.<Number> = new Vector.<Number>();
var di:int = 0;
var igraph:Vector.<IGraphicsData> = new Vector.<IGraphicsData>();
var ig:int  = 0;
var path:Vector.<GraphicsPath> = new Vector.<GraphicsPath>();
var boxNum:int = 1500;
var locX:Vector.<Number> = new Vector.<Number>(boxNum);
var locY:Vector.<Number> = new Vector.<Number>(boxNum);
var velX:Vector.<Number> = new Vector.<Number>(boxNum);
var velY:Vector.<Number> = new Vector.<Number>(boxNum);
var cols:int = 50;
for (var i:int = 0; i<boxNum; i++){
	path[i] = new GraphicsPath(new Vector.<int>(), new Vector.<Number>());
	path[i].winding = GraphicsPathWinding.NON_ZERO;
	var theta:Number = i * Math.PI/180;
	var sin:Number = Math.cos(theta);
	var cos:Number =  Math.sin(theta);
	var r:Number = Math.random()*100;
	var vr:Number = r * 0.05;
	velX[i] = vr * cos;
	velY[i] = vr * sin;
	locX[i] = 400 + r * cos;
    locY[i] = 300 + r * sin;
}

// box vars
var xp:Number, yp:Number, size:Number, hs:Number;
// corners
var x0:Number, y0:Number, x1:Number, y1:Number;

addEventListener(Event.ENTER_FRAME, onLoop);
function onLoop(evt:Event):void {
	graphics.clear();
	ig = 0;
	for (i= 0; i<boxNum; i++){
		// inline function:
		locX[i] += velX[i];
		locY[i] += velY[i];
		xp = locX[i];
		yp = locY[i];
		if (xp < 0 || xp > 800){
			velX[i] *= -1;
		}
		if (yp < 0 || yp > 600){
			velY[i] *= -1;
		}
		size = 10 + i % 10;
		hs = size * 0.5;
		x0 = xp - hs, y0 = yp - hs;
		x1 = xp + hs, y1 = yp + hs;
		ci = 0;
		di = 0;
		cmds = path[i].commands;
		dat = path[i].data;
		// GraphicsPathCommand.MOVE_TO
		cmds[ci++] = 1;
		dat[di++] = x0 , dat[di++] = y0;
		// GraphicsPathCommand.LINE_TO
		cmds[ci++] = 2;
		dat[di++] = x1 , dat[di++] = y0;
		// GraphicsPathCommand.LINE_TO
		cmds[ci++] = 2;
		dat[di++] = x1 , dat[di++] = y1;
		// GraphicsPathCommand.LINE_TO
		cmds[ci++] = 2;
		dat[di++] = x0 , dat[di++] = y1;
		// end inline function
		 
		path[i].commands = cmds;
		path[i].data = dat;
		igraph[ig++] = fills[i % 3];
		igraph[ig++] = path[i];
	}
	// everything is drawn with one function call
    graphics.drawGraphicsData(igraph);
}

I haven’t spent much time with IGraphicsData. It’s a very cool feature and I think its going to take me awhile to realize its full potential. Since I have to start somewhere I decided to write this snippet to show that it is rather fast. I also recalled reading some benchmark info for the new fp10 graphics stuff over at bytearray.org…. pretty nice info there…

This snippet is pretty optimized, there are a few areas (such as the recurring population of the cmds Vector) that could be optimized more but are left this way for SOME flexibility.

Leave a Reply

Your email address will not be published. Required fields are marked *