I need to zoom in fluidly (and back out) through a sequence of 7 images, each one detailing about 6% of the image containing it, like zooming in from ‘planet’, all the way to ‘pebble’, while maintaining a high level of focus/detail. Each image is about 3 meg (2500x2500) and
circular (.png’s with transparent backgrounds).
Below is an app that shows the size and location relationships between each image:
each diameter is 75% smaller than the one containing it
and each center is 15% above the previous center
As I zoom everything together I also need to gradually move the center so that each circle ends up filling the the screen from bottom to top before the perimeter starts zooming past view. I do need to keep drawing (and zooming and moving) the outer circles until the next inner circle almost completely fills both the height and width of the screen.
I’ve made a few runs at this using image() with width,height parameters, and with scale()/translate(). I could scale & translate fluidly if they were all concentric, but I’m really struggling to get bothj sizes and locations just right and to do things like ignore images when they’re either too small or too large to draw.
Any help getting this in motion would be greatly appreciated!
public void setup() {
size(800, 600);
smooth();
}
float scale = 1;
public void draw() {
background(128);
if (scale > 1 && scale < 3.5)
scale += 0.01;
float diameter = scale * height * 0.98;
float y = map(scale, 1, 3.5, height / 2, height);
for (int i=0; i<7; i++) {
myEllipse(color(255, 128), width/2, y, diameter);
y -= diameter * 0.15; // move up based on last diameter
diameter *= 0.25; // shrink to next smaller diameter
}
}
void myEllipse(color c, float x, float y, float d) {
fill(c);
ellipse(x, y, d, d);
}
void keyPressed() {
scale = 1.01;
}
EDIT: Added a little bit of scaling to the script to show gradual zooming in onto the first nested circle.