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

p5.js Coding Questions
1

image
03AA7AEE-9140-486B-AABA-7B03579A5037.jpeg2048×1536 596 KB
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.

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;
	  }
		
  }
}
1 Like
2

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
3

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