This week in Creators we looked at a brand new concept – functions that actually call themselves – also known as recursion.

Though this seems at first glance like a really silly thing to do, we were quickly able to use it to generate some pretty effects.

The main things to remember about the recursion are:

1. Make sure to give it something that will let it exit – a function calling itself forever will not work and the browser will crash or throw an error.  For us, we passed a value as a parameter and made it smaller each time, exiting when it fell below a certain value.

2. Do the math! Recursion leads to big numbers of operations very quickly and can slow down or crash a browser easily.  Make sure to save often and think about the amount of times your function will run.

Recursion is really handy for cases where there are lots of operations that are similar.

Circle Pattern Project

In this project, we wrote a function which draws a shape (we picked a circle) before calling itself three times to draw the shape to the left, right and below.  The code is below:

function drawShape(x, y, size){
if(size > 5){
stroke(random(255), random(255), random(255));
fill(size, 50);
ellipse(x, y, size, size);
drawShape(x+size/2, y, size/2);
drawShape(x-size/2, y, size/2);
drawShape(x, y+size/2, size/2);
}
}

Notice the If statement?  This means that it will not bother drawing circles smaller than 5 pixels in diameter – this allows the code to work.

This simple code generated the following pretty fractal:

Fractal Tree

For the next project, we used very similar code to create a beautiful fractal tree.  In this case we wrote a “drawBranch” function which can draw a branch at a given angle and length.

We added a little code to allow us to change the angle that the branches fan at – the fanangle – dynamically.  Depending on the variables, we could slow down our computer quite easily – the trick is to think about how many lines your computer will need to draw.

Each function called itself to draw a pair of smaller branches off of it.  The tree is shown below – just before I checked the code in, I added a little if statement to color the branched brown if the length is > 50.  The result is below:

This looks quite pretty and is fun to play with if you have a pretty fast computer – play with it here:

https://coderdojoathenry.github.io/creators2017/week16-tree/index.html

As usual, all of our code is on the Creators 2017 github repository.