Image resize animation and duplication using squareroot size

p5.js Coding Questions
1

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

1 Like
2

Do you mean recursive?

What’s inverse square?

3

IMG_3606
IMG_36063024Ă—3283 2.03 MB

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.

4

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



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 
//
1 Like
5

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.

1 Like
6

Found an example in p5js.

https://p5js.org/examples/structure-recursion.html

2 Likes
7

Very nice!

Can you do this in 3D…?

That would be cool!

8

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

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);
    }
  }

}
1 Like
9

Somehow your

function drawSquare

was inside your draw() function…

10

processing version



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);
  }
}
//
1 Like
11

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.

:crazy_face: :roll_eyes: :face_with_head_bandage: :frowning_face: :cry:

12

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

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
14

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

1 Like