Fractal Branch

by ilyas usal   | filed under Flash and ActionScript

The first thing we need for a recursive function is a function. A function that will draw a branch. I shall call that function makeBranch. I want that function to draw a branch at a given position, in a given direction, I want it to be of a given length, and of a certain diameter. All those requirements will be input as be parameters of the makeBranch function.

function makeBranch(start_x, start_y, length, angle, size) {
 this.lineStyle(size, 0x333333, 100);
 this.moveTo(start_x, start_y);
 var end_x = start_x+length*Math.cos(angle);
 var end_y = start_y+length*Math.sin(angle);
 this.lineTo(end_x, end_y);
}
makeBranch(0, 200, 50, 0, 10);
makeBranch(100, 200, 50, Math.PI/2, 10);
makeBranch(200, 200, 50, Math.PI, 10);
makeBranch(300, 200, 50, -Math.PI/2, 10);
makeBranch(400, 200, 50, Math.PI/4, 10);
makeBranch(500, 200, 50, -Math.PI/6, 10);

[ the makeBranch function: copy and paste into a frame's actions ]

The parameters we were talking about previously:

• start_x, start_y
  Starting position of the branch
   
• length
  Length of the branch
   
• angle
  Direction of the branch, in radians
   
• size
  Size of the branch

If you've forgotten how the drawing API works, please refer to the corresponding tutorial. For all the others, let's see how this works:

• this.lineStyle ( size, 0x333333, 100 )
First we define our lineStyle. The only thing that is a variable is the pen size, which we set to be equal to the size of the branch.
   
• this.moveTo ( start_x, start_y )
We move the virtual pen to the starting position of the branch.
   
• var end_x = start_x + length * Math.cos ( angle )
We calculate the position of the end of the branch. This is simple trigonometry, so you can either (1) believe me, or (2) read Senocular's very good trigonometry tutorial.
   
• this.lineTo ( end_x, end_y )
Last but not least, we draw a line from the starting point to the ending point of the branch.

If you preview your movie, you'll see a few branches, all of them starting from the _y position 200. The only thing we changed, apart from the _x position, is the direction. If you compare the angles and what Flash draws, you'll see that:

• Direction 0 means that the branch goes right.
• Direction Math.PI/2 means that the branch goes down.
• Direction Math.PI means that the branch goes left.
• Direction -Math.PI/2 means that the branch goes up.

If you wonder how this works, the trigonometry tutorial I mentioned before is your best friend. There are more tutorials similar to this, so be sure to check out the ones that follow this.

Ilyas Usal {Pictures 1 | 2}

Just a final word before we wrap up. What you've seen here is freshly baked content without added preservatives, artificial intelligence, ads, and algorithm-driven doodads. A huge thank you to all of you who buy kirupa's books, became a paid subscriber, watch the videos, and/or interact on the forums.

Your support keeps this site going! 😇