Browse the notebook

Category: Graphics

Gradient Glow

By Zevan
var colors:Array = [0xFF0000, 0x666699, 0x223322, 0xCCCCDD, 0xFFEEFF];
var alphas:Array = [0, 1, 1, 1, 1];
var ratios:Array = [0, 50, 100, 200, 255]
var filter:GradientGlowFilter = new GradientGlowFilter(0, 0, colors, alphas, ratios, 30, 30, 1, 2, "full", true);
 
var circles:Shape = new Shape();

 for (var i:int = 0; i<30; i++){
  with(circles.graphics) beginFill(0xFF0000), drawCircle(Math.random()*500, Math.random()*400,10+Math.random()*40);
 }
 addChild(circles);
 
 circles.filters = [filter];

I don’t see GradientGlowFilter used much. But with some tweaking you can probably get some decent stuff out of it.

Read snippet: Gradient Glow

Draw Spiral

By Zevan
stage.frameRate = 30;
var xp:Number = 0;
var yp:Number = 0;
var counter:Number = 0;
graphics.lineStyle(0,0x999999);
graphics.moveTo(200,200);
addEventListener(Event.ENTER_FRAME, onLoop);
function onLoop(evt:Event):void {
	for (var i:int = 0; i < 20; i++) {
		counter += .05;
		xp=200 + counter * Math.cos(counter);
		yp=200 + counter * Math.sin(counter);
		graphics.lineTo(xp, yp);
	}
	if (counter > 400) {
		removeEventListener(Event.ENTER_FRAME, onLoop);
	}
}

Draws a spiral over time.

Read snippet: Draw Spiral

Random Walk

By Zevan
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.

Read snippet: Random Walk

drawPath() Circle Segment

By Zevan

drawPath() is flash 10 player only

[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:


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.

Read snippet: drawPath() Circle Segment

Isometric Box

By Zevan
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.

Read snippet: Isometric Box

Recursive Tree

By Zevan
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.

Read snippet: Recursive Tree

Multiple Graphics Class Calls

By Zevan
// draw red circle
with (graphics) beginFill(0xFF0000), drawCircle(200,100,30);

// draw 100 gray circles
with (graphics) for (var i:int = 0; i<100; i++) beginFill(0x666666), drawCircle(Math.random()*200, Math.random()*200, Math.random()*10), endFill();

// draw a few lines
with (graphics) lineStyle(0, 0x000000), moveTo(10,210), lineTo(20,300), lineTo(30,210), lineTo(40,300), lineTo(50,210), lineTo(60,300);

Sometimes it’s tedious to write lines and lines of Graphics class method calls. Using a with statement you can reduce these calls into one long (not very readable) line of code.

More readable example:

with(graphics) {
	beginFill(0xFF0000);
	drawRect(0,0,100,100);
	endFill();
	beginFill(0xFFFF00);
    drawRect(10,10,80,80);
	endFill();
	beginFill(0x0000FF);
	drawCircle(50,50,40);
}
Read snippet: Multiple Graphics Class Calls

2D Array Map

By Zevan
var col:Array = [0x000000, 0xCCCCCC, 0xFF0000, 0xCCCC00, 0x000055, 0x00CCCC];

var map:Array = new Array();
map[0] = [0,0,0,0,0,0,0,0,0,0];
map[1] = [0,0,0,0,0,0,0,0,0,0];
map[2] = [0,5,4,5,4,5,4,5,4,0];
map[3] = [0,4,4,4,4,4,4,4,4,0];
map[4] = [0,4,0,0,0,0,0,0,4,0];
map[5] = [0,3,2,3,2,3,2,3,2,0];
map[6] = [1,1,1,1,1,1,1,1,1,1];
map[7] = [0,2,2,2,2,2,2,2,2,0];
map[8] = [1,1,1,1,1,1,1,1,1,1];

for (var i:int = 0; i<map.length; i++){
	for (var j:int = 0; j<map[i].length; j++){
		graphics.beginFill(col[map[i][j]]);
		graphics.drawRect(j * 10, i * 10, 10, 10);
	}
}

Use a 2D array to draw a map of colored rectangles. Lots of stuff you can do with this – like adding game tiles instead of drawing colored rects:

// add clip with multiple frames - each containing a tile graphic
var tile:MovieClip = TileClip();
tile.gotoAndStop(map[i][j]+1);
addChild(tile);
Read snippet: 2D Array Map

Rect vs Ellipse

By Zevan
for (var i:int = 0; i<100; i++){
	graphics.lineStyle(0,0);
	graphics[["drawEllipse", "drawRect"][int(Math.random()*2)]](Math.random()*400, Math.random()*300, Math.random()*100,Math.random()*100)
}

/*
WARNING: This code was written for fun. Use at your own risk. 
*/

And a more readable version:

var methodChoices:Array = ["drawEllipse", "drawRect"];
var method:String;
var xp:Number, yp:Number, w:Number, h:Number;
for (var i:int = 0; i<100; i++){
	method = methodChoices[int(Math.random()*methodChoices.length)];
	graphics.lineStyle(0,0);
	xp = Math.random()*400;
	yp = Math.random()*300;
	w = Math.random()*100; 
	h = Math.random()*100;
	graphics[method](xp, yp, w, h)
}

/*
WARNING: This code was written for fun. Use at your own risk. 
*/

Here I use yesterdays associative array function call technique to do something different. Not really all that useful, but interesting….

Read snippet: Rect vs Ellipse