# Image resize animation and duplication using squareroot size

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

Do you mean recursive?

Whatâ€™s inverse square?

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.

• 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

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

Found an example in p5js.

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

2 Likes

Very nice!

Can you do this in 3Dâ€¦?

That would be cool!

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

Somehow your

``````function drawSquare
``````

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

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.

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

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)

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

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

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