P5js Display recursion happening - recursion

Question

I was messing around with recursion in p5js and I was wondering if it is possible to show the recursion happening. For example, I will use the code that is provided on the p5js website:
function setup() {
createCanvas(720, 400);
noStroke();
noLoop();
}
function draw() {
drawCircle(width / 2, 280, 6);
}
function drawCircle(x, radius, level) {
const tt = (126 * level) / 4.0;
fill(tt);
ellipse(x, height / 2, radius * 2, radius * 2);
if (level > 1) {
level = level - 1;
drawCircle(x - radius / 2, radius / 2, level);
drawCircle(x + radius / 2, radius / 2, level);
}
}
It runs it and shows everything instantly. Is there a way I can change it so it show each individual circle forming?

Answer 1

You can try a more object-oriented approach by keeping a list of circles objects that you can iterate through.
A circle object will keep track of all of the relevant information to display itself, as well as a method to display itself.
Right before calling the next level of recursion, call redraw(), which will draw all of the saved circles.
In order to delay the next level for animation purposes, use setTimeout().
let Circle = function(x,radius,tt){
this.x=x;
this.radius=radius;
this.tt=tt;
this.display=function(){
fill(this.tt);
ellipse(this.x, height / 2, this.radius * 2, this.radius * 2);
}
}
let circles = [];
function setup() {
createCanvas(720, 400);
noStroke();
noLoop();
drawCircle(width / 2, 280, 8);
}
function draw() {
for(let circle of circles) {
circle.display();
}
}
function drawCircle(x, radius, level) {
const tt = (126 * level) / 4.0 - 35;
circles.push(new Circle(x,radius,tt));
redraw()
if (level > 1) {
level = level - 1;
setTimeout( function() {
drawCircle(x - radius / 2, radius / 2, level);
drawCircle(x + radius / 2, radius / 2, level);
},1500)
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.min.js"></script>

Answer 2

This might not be the cleanest way, but you can store each of the recursion steps as an anonymous function and iterate over those functions each time draw is called.
function setup() {
createCanvas(720, 400);
noStroke();
frameRate(1);
nextLevel=[];
nextLevel.push(() => drawCircle(width / 2, 280, 6));
}
function draw() {
thisLevel = [...nextLevel]
nextLevel = []
for(func of thisLevel){
func()
}
}
function drawCircle(x, radius, level) {
const tt = (126 * level) / 4.0;
fill(tt);
ellipse(x, height / 2, radius * 2, radius * 2);
if (level > 1) {
level = level - 1;
nextLevel.push(() => drawCircle(x - radius / 2, radius / 2, level));
nextLevel.push(() => drawCircle(x + radius / 2, radius / 2, level));
}
}
Which will result in this visualization:

Answer 3

Maybe the simplest is just to increment the level every so often and redraw. In the code below setInterval increments the step variable every 500 ms, and then the rest of your code stays the same.
let step = 1;
function setup() {
createCanvas(720, 400);
noStroke();
noLoop();
// increment step every half second
setInterval(() => {
if (++step == 7) step = 1;
draw();
}, 500);
}
function draw() {
drawCircle(width / 2, 280, step);
}
function drawCircle(x, radius, level) {
fill((126 * level) / 4.0);
ellipse(x, height / 2, radius * 2, radius * 2);
if (level-- > 1) {
drawCircle(x - radius / 2, radius / 2, level);
drawCircle(x + radius / 2, radius / 2, level);
}
}

Answer 4

One approach would be: instead of using your recursion to draw circles, use it to add those circles to an array as objects. Then, once the recursion is done, you can use the draw() function to draw the circles one at a time. That will cause them to appear in the same order as they were created in the recursion:
let circles = [];
let i = 0;
function setup() {
createCanvas(720, 400);
noStroke();
drawCircle(width / 2, 280, 6);
frameRate(5);
}
// draw the array of circles one at a time
function draw() {
let c = circles[i++];
fill(c.col);
circle(c.x, height/2, c.r);
if (i == circles.length)
noLoop();
}
function drawCircle(x, radius, level) {
const tt = (126 * level) / 4.0;
// push the circle object into the array
circles.push(new Circle(x, radius * 2, tt));
if (level > 1) {
level = level - 1;
drawCircle(x - radius / 2, radius / 2, level);
drawCircle(x + radius / 2, radius / 2, level);
}
}
class Circle {
constructor(x, r, col) {
this.x = x;
this.r = r;
this.col = col;
}
}