Posted by: pixelero | June 24, 2008

Flash 10, testing graphics.drawPath()


actionscript 3.0, graphics.drawPath() -test

… you’ll need the Flash Player 10 Beta to view the demos correctly !

Here’s some results from testing the new methods in Flash 10 graphics:
method drawPath(commands:Vector, data:Vector, winding:String = “evenOdd”)
commands: Vector of Strings holding info like MOVE_TO, LINE_TO, CURVE_TO etc,
data: Vector of Numbers defining the x,y -coordinates for line graphics
In the demo I take two horizontal lines of the bitmap with perlinNoise, and create curves with y by pixels value.

Essential parts of the code:

	private var _commands:Vector.<int> = new Vector.<int>();
	private var _dataUint:Vector.<uint>;
	private	var _dataVector:Vector.<Number>;

	// ...

	// It's enough to define _commands once
	// The command serie starts with MOVE_TO,
	// All the following commands are LINE_TO
	_commands.push(GraphicsPathCommand.MOVE_TO);
	for (i=1 ; i!=n+n; i++) {
		_commands.push(GraphicsPathCommand.LINE_TO);
	}

	// ...

	// BitmapData.getVector returns the values as uints 0xHHHHHHHH
	_dataUint = perlinData.getVector(new Rectangle(0,0,n,2));

	_dataVector = new Vector.<Number>() ;

	// First the upper row from left to right
	// coordinates x = i, y = blue channel's value from bitmap
	for (i=0 ; i!=n; i++) {
		_dataVector.push( i, _dataUint[i] & 0xFF );
	}
	// Then the lower row from right to left
	for (i=n-1 ; i!=-1; i--) {
		_dataVector.push( i, _dataUint[n+i] & 0xFF );
	}

	// Draw the new graphics
	with (this.graphics) {
		clear();
		beginFill(0x00,1.0);
		lineStyle(1.0,0x00);
		drawPath(_commands, _dataVector);
		endFill();
	}

… source for flash10

In the demo you’ll see the 10-version above and 9-version below.
The reference says: This method sends commands to the renderer much faster than when using the lineTo() and curveTo() methods. However, this only matters if your code is bottlenecked in getting commands to the renderer. Otherwise using this method will not give a performance increase. Well, at least in this case there was difference: I did some further performance testing and, depending on the situation like here for a path with a length of 1024 points, seems to be 5 to 10 times faster than the old methods – running 100 times gave ~50ms for flash10 and ~470ms for flash9.
It not only spares you from using a for() -loop but also allows to easily repeat, why not also save and load, the same graphics. Generally, for visuality, drawPath() doesn’t offer anything new – only in a faster and more advanced way.

In case you don’t yet feel familiar with the new classes and methods, here’s for comparison the same written in flash9 actionscript:

	with (this.graphics) {
		clear();
		beginFill(0x00,1.0);
		lineStyle(1.0,0x00);

		moveTo(0,perlinData.getPixel(0,0) & 0xFF);

		// point's y-value is red from the bitmapdata
		// First the upper row from left to right
		for (i=0 ; i!=n; i++) {
			this.graphics.lineTo(i,perlinData.getPixel(i,0) & 0xFF);
		}

		// Then the lower row from right to left
		for (i=n-1 ; i!=-1; i--) {
			this.graphics.lineTo(i,perlinData.getPixel(i,1) & 0xFF);
		}
		endFill();
	}

… source for flash9


PerlinDancer … Another demo
with a bit different code: here both x- and y-coordinates are created by perlinNoise:

	_dataUint = perlinData.getVector(new Rectangle(0,0,2,n));
	_dataVector = new Vector.<Number>(2*n,false);

	i=0;
	for each (var value in _dataUint) {
		_dataVector[i++] = Number ( (value & 0xFF)<<1 );
	}

	with (this.graphics) {
		clear();
		beginFill(color,1.0);
		lineStyle(1.0,color);
		drawPath(_commands, _dataVector);
		endFill();
	}

Why always perlinNoise? I donno, at least it’s easily available and so often gives surprisingly nice and versatile results … PerlinMountainHigh

Advertisements

Responses

  1. […] 12, 2008 Continuing my earlier post … … you’ll need the Flash Player 10 Beta to view these demos correctly […]

  2. […] Part 1 […]

  3. Hi, could you please add the source for PerlinMountainHigh ? Great site btw!

  4. Excellent post!! I absolutely love PerlinMountainHigh!!!


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

Categories

%d bloggers like this: