# Image resize animation and duplication using squareroot size

**URL:** <https://discourse.processing.org/t/image-resize-animation-and-duplication-using-squareroot-size/20438>\
**Category:** Coding Questions\
**Created:** [May 3, 2020, 3:15pm UTC](https://discourse.processing.org/t/image-resize-animation-and-duplication-using-squareroot-size/20438 "2020-05-03T15:15:30Z")\
**Posts on this page:** 1\
**Showing post:** 13

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [May 3, 2020, 5:16pm UTC](https://discourse.processing.org/t/image-resize-animation-and-duplication-using-squareroot-size/20438/13 "2020-05-03T17:16:32Z")

</div>

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](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

```auto
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 
//

```

---

_[View the full topic](https://discourse.processing.org/t/image-resize-animation-and-duplication-using-squareroot-size/20438)._