Image resize animation and duplication using squareroot size

p5.js Coding Questions
13

Yeah. Try it. But speed is not the issue here imho.

Instead, the screen just updates at the end of draw and not during the recursion (no matter how slow)

Solution

Here is a complicate work-around with a separate thread for the recursion. The recursion (secondary thread) fills a PGraphics slowly and the function draw() (primary thread) displays this PGraphics throughout.

(Wikipedia: Thread (computing): a sequence of instructions that may execute in parallel with others)

https://www.processing.org/reference/thread_.html

Explanation

Don’t ask me why this works. It’s Dark Magic. I picked it up here on the forum.
Basically because the recursion can update the PGraphics throughout and NOT only at its end. The function draw() displays the PGraphics.

Additionally the timers avoid that all happens too fast (because the secondary thread doesn’t obey frameRate() command I think).

Warm regards,

Chrisir

PGraphics pg1; 
int timer; 
int waitTime=1900;

void  setup() {
  size(500, 500);

  pg1 = createGraphics(width, height);
  noStroke();
  thread("drawSquare_Helper");
}

void draw() {
  // wait 
  int timer=millis(); 
  while (millis() - timer < 900) {
    // ignore
  }

  // show pg1 
  image(pg1, 
    0, 0);
}

// ------------------------------------------------------------------

void drawSquare_Helper() {
  drawSquare(400, 4);
}

void drawSquare(float square, int level) {
  pg1.beginDraw();
  pg1.fill(0);
  pg1.stroke(color(255, 0, 10) ) ;
  pg1.strokeWeight(4);
  pg1.rectMode(CENTER);
  pg1.rect(square / 2, square / 2, 
    square, square);
  pg1.endDraw();

  // wait 
  int timer2=millis(); 
  while (millis() - timer2 < waitTime) {
    // ignore
  }
  waitTime=900; 

  square = square / 2;

  if (level > 1) {
    level = level - 1;
    drawSquare(square, level);
  }//if
}//func 
//
2 Likes