# How do I get my sketch to show the steps of a drawing
**URL:** https://discourse.processing.org/t/how-do-i-get-my-sketch-to-show-the-steps-of-a-drawing/13808
**Category:** Coding Questions
**Created:** [September 4, 2019, 10:42pm UTC](https://discourse.processing.org/t/how-do-i-get-my-sketch-to-show-the-steps-of-a-drawing/13808 "2019-09-04T22:42:15Z")
**Posts on this page:** 3
**Page:** 1
### Author:  [@rbytes](https://discourse.processing.org/u/rbytes)
#### Post date: [September 4, 2019, 10:42pm UTC](https://discourse.processing.org/t/how-do-i-get-my-sketch-to-show-the-steps-of-a-drawing/13808/1 "2019-09-04T22:42:15Z")
 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.
```auto
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;
}
}
}
```
---
### Author:  [@kll](https://discourse.processing.org/u/kll)
#### Post date: [September 4, 2019, 11:36pm UTC](https://discourse.processing.org/t/how-do-i-get-my-sketch-to-show-the-steps-of-a-drawing/13808/2 "2019-09-04T23:36:34Z")
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](https://editor.p5js.org/kll/sketches/WhM9ey7v9)
---
### Author:  [@rbytes](https://discourse.processing.org/u/rbytes)
#### Post date: [September 5, 2019, 1:04am UTC](https://discourse.processing.org/t/how-do-i-get-my-sketch-to-show-the-steps-of-a-drawing/13808/3 "2019-09-05T01:04:31Z")
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!