Sierpinski Triangle

Sierpinski Triangle

The Sierpinski Triangle is a famous fractal named after the mathematician who discovered it.

It is made up of nested triangles that get smaller and smaller. If you were to zoom in, you would see the same image (though it may be translated) and you could zoom forever and never find the end.

So, how do you create the Sierpinski Triangle in AS3?

First you have to know how to do recursion. Recursion is where a function calls itself over and over. This creates an infinite loop.

Because you have an infinte loop, you need a way to stop it. In order to stop it, you need to keep track of how many times you have called the function. The more you call it, more triangles will be in the fractal, it will take longer, and it will take more memory.

This is how it looks step by step:

Called Once

Called Twice

Called 3 Times

Called 4 Times

Called 5 Times

Called 6 Times

This is how the triangles look in the first six steps.

You can go as many steps as you want, but more steps means more time.

Ten steps creates a nice effect and doesn’t take too long.

Now how do you do this in as3?

package {
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;

[SWF(width=640, height=550, fps=30)]
public class SierpinskiTriangle extends Sprite {
private var maxN:int = 10;//max number of recursions
private var holder:Sprite;//holds the triangles
private var maxWidth:Number = 600;//width of the whole fractal

That sets up the class. maxN is the amount of recursions to complete. Holder holds all the triangles; maxWidth is the width of the original triangle.

public function SierpinskiTriangle(){
holder = new Sprite();
addChild(holder);
var s:Sprite = new Sprite();
s.graphics.lineStyle(0); //create the big triangle
s.graphics.beginFill(0);//fill this first one with black, all the others will be filled white
s.graphics.moveTo(0,maxWidth);//it must be equilateral
s.graphics.lineTo(maxWidth/2,0);
s.graphics.lineTo(maxWidth,maxWidth);
s.graphics.lineTo(0,maxWidth);
holder.addChild(s)
triangle(maxWidth/4,maxWidth/2,maxWidth*0.75,maxWidth/2,maxWidth/2,maxWidth,maxWidth/2,1);//start the fractal, shrink it by the rules
}

That draws the big triangle in black. All the other triangles added on top will be white.

private function
triangle(x1:Number,y1:Number,x2:Number,y2:Number,
x3:Number,y3:Number,size:Number,recursion:Number):void {
var s:Sprite = new Sprite();
holder.addChild(s)
s.graphics.lineStyle(0);
s.graphics.beginFill(0xFFFFFF);//fill it white
s.graphics.moveTo(x1,y1);
s.graphics.lineTo(x2,y2);//draw the triangle
s.graphics.lineTo(x3,y3);
s.graphics.lineTo(x1,y1);
if(recursion<maxN){//if you have not done too many recursions
triangle(x1 + (size/4), y1 - 0.5*(y3-y1), x2 - (size/4), y2 - 0.5*(y3-y1), x3, y1, 0.5*(x2-x1), recursion+1);//draw smaller, translated triangles
triangle(x1 - (size/4), y1 + 0.5*(y3-y1), x1 + (size/4), y2 + 0.5*(y3-y1), x1, y3, 0.5*(x2-x1), recursion+1);
triangle(x2 - (size/4), y1 + 0.5*(y3-y1), x2 + (size/4), y2 + 0.5*(y3-y1), x2, y3, 0.5*(x2-x1), recursion+1);
}
}

This is the big part. This does all the recursion. It transforms the triangles and creates three new ones.

]Click to watch it animate!

Be Sociable, Share!

•