# 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:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![cuvner](https://avatars.discourse-cdn.com/v4/letter/c/8c91f0/32.png) [@cuvner](https://discourse.processing.org/u/cuvner)\
**Post date:** [May 3, 2020, 3:15pm UTC](https://discourse.processing.org/t/image-resize-animation-and-duplication-using-squareroot-size/20438/1 "2020-05-03T15:15:30Z")

</div>

Hi, I want to create an animation with images where the image divides by inverse square and more images loaded. Anyone done something like this? Any help much appreciated, even a starting point.

Chris

---

<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, 3:30pm UTC](https://discourse.processing.org/t/image-resize-animation-and-duplication-using-squareroot-size/20438/2 "2020-05-03T15:30:57Z")

</div>

Do you mean recursive?

What’s inverse square?

---

<div class="post-metadata">

**Author:** ![cuvner](https://avatars.discourse-cdn.com/v4/letter/c/8c91f0/32.png) [@cuvner](https://discourse.processing.org/u/cuvner)\
**Post date:** [May 3, 2020, 3:45pm UTC](https://discourse.processing.org/t/image-resize-animation-and-duplication-using-squareroot-size/20438/3 "2020-05-03T15:45:18Z")

</div>

![IMG_3606](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/8/8f4afc91ad16b08539fc729235dadc28f01d092b.jpeg)

Each object is a square, forgive my slightly out of proposition squares.

I’m trying to visualise images multiplying within a square size.  
Example, 1 image into 4, 4 into 16 and so on.

Ive mentioned inverse square but is just squaring each time. Inverse square is the measurement of light falloff.

---

<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, 3:52pm UTC](https://discourse.processing.org/t/image-resize-animation-and-duplication-using-squareroot-size/20438/4 "2020-05-03T15:52:29Z")

</div>

this is a recursive approach (to another task) and will maybe help you…

- pos stands for position
- w for width of the rectangle
- h for height of the rectangle

Welcome to the processing forum!

Great to have you here!

Warm regards,

Chrisir

```auto

void setup() {
  size(1600, 900) ;
  rectMode(CENTER);
}

void draw() {

  background (0); 

  fill(255, 0, 0);
  rectMy(width/3, height/3, 
    width/2, height/2, 
    5);

  noLoop();
}

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

// recursive function
void rectMy ( float posX, float posY, 
  float w, float h, 
  int depth) {

  // end recursion 
  if (depth<=0)
    return; 

  // draw
  rect(posX, posY, 
    w, h);

  // call recursivly I
  fill(255, 250, 0); // YELLOW
  rectMy(posX+w/4, posY+h/4, 
    w/2, h/2, 
    depth-1);

  // call recursivly II
  fill(0, 0, 250); // BLUE
  rectMy(posX+w/4, posY-h/4, 
    w/2, h/2, 
    depth-1);

  // call recursivly
  //rectMy(posX+w/4, posY-h/4, 
  // w/2, h/2, 
  // depth-1); 
  //
}//func 
//

```

---

<div class="post-metadata">

**Author:** ![cuvner](https://avatars.discourse-cdn.com/v4/letter/c/8c91f0/32.png) [@cuvner](https://discourse.processing.org/u/cuvner)\
**Post date:** [May 3, 2020, 3:56pm UTC](https://discourse.processing.org/t/image-resize-animation-and-duplication-using-squareroot-size/20438/5 "2020-05-03T15:56:27Z")

</div>

thanks for the speedy solution, I guess thats Processing, i’ll have to convert it over to p5, sorry I didn’t mention i was in P5.

---

<div class="post-metadata">

**Author:** ![cuvner](https://avatars.discourse-cdn.com/v4/letter/c/8c91f0/32.png) [@cuvner](https://discourse.processing.org/u/cuvner)\
**Post date:** [May 3, 2020, 3:58pm UTC](https://discourse.processing.org/t/image-resize-animation-and-duplication-using-squareroot-size/20438/6 "2020-05-03T15:58:21Z")

</div>

Found an example in p5js.

[https://p5js.org/examples/structure-recursion.html](https://p5js.org/examples/structure-recursion.html)

---

<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, 4:37pm UTC](https://discourse.processing.org/t/image-resize-animation-and-duplication-using-squareroot-size/20438/7 "2020-05-03T16:37:48Z")

</div>

Very nice!

Can you do this in 3D…?

That would be cool!

---

<div class="post-metadata">

**Author:** ![cuvner](https://avatars.discourse-cdn.com/v4/letter/c/8c91f0/32.png) [@cuvner](https://discourse.processing.org/u/cuvner)\
**Post date:** [May 3, 2020, 4:42pm UTC](https://discourse.processing.org/t/image-resize-animation-and-duplication-using-squareroot-size/20438/8 "2020-05-03T16:42:55Z")

</div>

have gotten this far, now just need to animate it to draw each square  
Cheers

```auto
function setup() {
  createCanvas(400, 400);
  noStroke();
  noLoop();
}

function draw() {

  drawSquare(400, 4);

  function drawSquare(square, level) {
    fill(0);
    stroke('rgb(100%,0%,10%)');
    strokeWeight(4);
    rectMode(CENTER);
    rect(square / 2, square / 2, square, square);
    square = square / 2;
    if (level > 1) {
      level = level - 1;
      drawSquare(square, level);
    }
  }

}

```

---

<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, 4:48pm UTC](https://discourse.processing.org/t/image-resize-animation-and-duplication-using-squareroot-size/20438/9 "2020-05-03T16:48:18Z")

</div>

Somehow your

```auto
function drawSquare

```

was inside your draw() function…

---

<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, 4:49pm UTC](https://discourse.processing.org/t/image-resize-animation-and-duplication-using-squareroot-size/20438/10 "2020-05-03T16:49:38Z")

</div>

processing version

```auto

void setup() {
  size(400, 400);
  noStroke();
  // noLoop();
}

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

void drawSquare(float square, int level) {
  fill(0);
  stroke(color(255, 0, 10) ) ;
  strokeWeight(4);
  rectMode(CENTER);
  rect(square / 2, square / 2, square, square);
  square = square / 2;
  if (level > 1) {
    level = level - 1;
    drawSquare(square, level);
  }
}
//

```

---

<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, 4:51pm UTC](https://discourse.processing.org/t/image-resize-animation-and-duplication-using-squareroot-size/20438/11 "2020-05-03T16:51:48Z")

</div>

> [@cuvner](#):
>
> now just need to animate it to draw each square

Yeah… unfortunately that’s not trivial… because draw() does update the screen only once at its end and not throughout. Therefore you can’t see anything that happens in the recursion.

🤪 🙄 🤕 ☹ 😢

---

<div class="post-metadata">

**Author:** ![cuvner](https://avatars.discourse-cdn.com/v4/letter/c/8c91f0/32.png) [@cuvner](https://discourse.processing.org/u/cuvner)\
**Post date:** [May 3, 2020, 5:01pm UTC](https://discourse.processing.org/t/image-resize-animation-and-duplication-using-squareroot-size/20438/12 "2020-05-03T17:01:01Z")

</div>

I was going to use the setInterval() to slow down the frame rate.

---

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

```

---

<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:58pm UTC](https://discourse.processing.org/t/image-resize-animation-and-duplication-using-squareroot-size/20438/14 "2020-05-03T17:58:48Z")

</div>

I changed the title to “Image resize animation and duplication using squareroot size”  
because you start with the biggest and the squares are getting smaller?

Chrisir