By Zevan | December 6, 2008
Actionscript:
-
var xp:Number=Math.random() * stage.stageWidth;
-
var yp:Number=Math.random() * stage.stageHeight;
-
graphics.lineStyle(0,0x000000);
-
graphics.moveTo(xp, yp);
-
addEventListener(Event.ENTER_FRAME, onLoop);
-
function onLoop(evt:Event):void {
-
xp+=Math.random()*10-5;
-
yp+=Math.random()*10-5;
-
graphics.lineTo(xp, yp);
-
}
Nothing special here, but its good to know that this technique has a name... and that it's NOT Brownian Motion... more here.
By Zevan | December 2, 2008
drawPath() is flash 10 player only
Actionscript:
-
[SWF(width=400,height=400,backgroundColor=0xEFEFEF,frameRate=30)]
-
-
const TWO_PI:Number = Math.PI * 2;
-
-
var resolution:Number = 50;
-
var step:Number = TWO_PI / resolution;
-
var maxIndex:int = 0;
-
-
var coords:Vector.<Number> = new Vector.<Number>();
-
var drawCommands:Vector.<int> = new Vector.<int>();
-
-
// populate vectors
-
for (var i:Number = 0; i <TWO_PI + step; i += step){
-
coords.push(100 * Math.cos(i));
-
coords.push(100 * Math.sin(i));
-
drawCommands.push(GraphicsPathCommand.LINE_TO);
-
}
-
-
var circleSegment:Shape = new Shape();
-
circleSegment.x = circleSegment.y = 200;
-
addChild(circleSegment);
-
-
addEventListener(Event.ENTER_FRAME, onLoop);
-
function onLoop(evt:Event):void {
-
with (circleSegment.graphics) {
-
clear();
-
beginFill(0x000000);
-
-
// count by two, up to coords.length (drawCommands is exactly half the length of coords)
-
maxIndex = Math.ceil((mouseX / stage.stageWidth) * drawCommands.length) * 2;
-
-
drawPath(drawCommands, coords.slice(0, maxIndex));
-
}
-
}
The new additions to the Drawing API are great. This is just a quick test done with drawPath() to create a circle segment - this technique could be used to draw a pie chart.
The old way would have required lots of calls to the Graphics.lineTo() method. Take a look:
Actionscript:
-
const TWO_PI:Number = Math.PI * 2;
-
-
var resolution:Number = 50;
-
var step:Number = TWO_PI / resolution;
-
var maxAngle:Number;
-
-
var circleSegment:Shape = new Shape();
-
circleSegment.x = circleSegment.y = 200;
-
addChild(circleSegment);
-
-
addEventListener(Event.ENTER_FRAME, onLoop);
-
function onLoop(evt:Event):void {
-
with (circleSegment.graphics) {
-
clear();
-
beginFill(0x000000);
-
-
// count up to (TWO_PI + step), we add step to close the circle
-
maxAngle = (TWO_PI + step) * (mouseX / stage.stageWidth);
-
-
for (var i:Number = 0; i <maxAngle; i += step) {
-
var xp:Number = 100 * Math.cos(i);
-
var yp:Number = 100 * Math.sin(i);
-
lineTo(xp, yp);
-
}
-
}
-
}
If your interested in learning more about the FP10 Drawing API features, you can read more here.
By Zevan | November 30, 2008
Actionscript:
-
stage.frameRate = 30;
-
-
for (var i:int = 0; i<100; i++){
-
makeBoxSegment(200, 200 - i, i * 2);
-
}
-
-
function makeBoxSegment(xp:Number, yp:Number, col:uint):Sprite {
-
var isoBox:Sprite = Sprite(addChild(new Sprite()));
-
with (isoBox) scaleY = .5, y = yp, x = xp;
-
var box:Shape = Shape(isoBox.addChild(new Shape()));
-
box.rotation = 45;
-
with (box.graphics) beginFill(col), drawRect(-50,-50,100,100);
-
isoBox.addEventListener(Event.ENTER_FRAME, onRotate);
-
return isoBox;
-
}
-
-
function onRotate(evt:Event):void {
-
evt.currentTarget.getChildAt(0).rotation = mouseX;
-
}
An isometric box that rotates with the mouseX.
By Zevan | November 27, 2008
Actionscript:
-
var branches:int = 0;
-
var maxBranches:int = 400;
-
-
graphics.lineStyle(0,0x000000);
-
-
makeBranch(300,350,100,-45,45);
-
-
function makeBranch(xp:Number, yp:Number, leng:Number, min:Number, max:Number):void {
-
-
var endX:Number, endY:Number;
-
var theta:Number = (min + Math.random()*(max-min) - 90) * Math.PI / 180;
-
-
endX = xp + leng * Math.cos(theta);
-
endY = yp + leng * Math.sin(theta);
-
-
graphics.moveTo(xp, yp);
-
graphics.lineTo(endX, endY);
-
-
if (branches <maxBranches) {
-
var newLength:Number = leng*.7;
-
setTimeout(makeBranch, 0, endX, endY, newLength, -90, 0);
-
setTimeout(makeBranch, 0, endX, endY, newLength, 0, 90);
-
}
-
branches+=2;
-
}
Draws a tree using recursion.