```
p5.disableFriendlyErrors = true; // disables FES
let numTri = 182;
let x1, y1, x2, y2, x3, y3;
let hu = 0;
let cshift = .3;
let size = 22;
function setup() {
createCanvas(windowWidth, screen.availHeight);
background(0);
colorMode(HSB, 255);
x1 = width * .38;
y1 = height * .34; // center of figure
stroke(0, 50);
noLoop();
}
function draw() {
//ellipse(mouseX, mouseY, 20, 20);
let theta = 0;
for (t = 380; t > 10; t -= 20){
hu = 0;
size = 22 * t / 200;
// draw the triangles
for (i = numTri - 1; i > 0; i--){
radius = sqrt(i + 1);
let x2 = x1 + radius * cos(theta) * size;
let y2 = y1 + radius * sin(theta) * size;
radius = sqrt(i);
theta += atan2(1, radius) / 4;
let x3 = x1 + radius * cos(theta) * size;
let y3 = y1 + radius * sin(theta) * size
fill (hu, 255, 255);
triangle(x1, y1, x2, y2, x3, y3);
hu += 1.3;
}
}
}
```

# How do I get my sketch to show the steps of a drawing

When I run my sketch “Spiral of Theodore’s” on OpenProcessing, the entire drawing appears almost instantly. I would prefer that it appear triangle by triangle, so that other viewers could see the progress. I have been trying various approaches, but so far nothing works.

1 Like

you can take the for loops ( resp. the range of it ) out of the draw() loop,

and iterate.

the speed would be the frameRate.

https://editor.p5js.org/kll/sketches/WhM9ey7v9

3 Likes

I will use your changes as a model to remind me how to make graphic builds visible. I have posted the changed version (with a few tweaks) as OpenProcessing sketch 749670.

Once the drawing was slowed down, I was surprised to see that it was developing backwards to the way I had envisioned it. It still looks way cool, though!

Thanks vey much for sharing your knowledge!

1 Like