# Drawing many image thumbnails in expanding circle

I have loaded array of PImages (2,000 20x20 jpgs)
`PImage[] images;`
That I wish to arrange in a circle manner from the center of the display.

I can do this easily in a grid with a column, row nested for loop, however my math understanding breaks down if instead of a grid I’d like to arrange these images in a circle. So the first element of the array would be near the center of the screen, and each subsequent image draw would expand the circumference by placing another non-overlapping image till all images are used

I’ve a rough idea that it can be accomplished in this manner but can anyone offer guidance? Thanks

``````void draw() {
for(float r = 0; r < 100; r+= step) {
float c = 2*PI*r;
for(float a = 0; a < 360; a += 360/segmentSize) {
pushMatrix();
image(img, 0, 0, 20, 20);
popMatrix();
}
}
}
``````
2 Likes

Greetings,

In essence I think you will still be using a nested loop.

Consider each nested loop for each concentric ring (like the rings of a tree) from a central point. You will draw a ring of images around the circle until the circle has been filled with images. Once the first rotation is complete translate a specific distance (the height of the image) away for the center and begin a new concentric circle instead of per row/column.

In these loops you will need to translate and rotate the images origins to make them draw in the positions that correspond to each ring of the expanding circle.

You may also wish to consider if you use rectMode(CENTER) or rectMode(CORNER).

1 Like
``````

float angle=0 ;
float r = 200;

void setup() {
size(660, 660);
background(0);
}

void draw() {
background(0);

angle=0;
for (int i=0; i<12; i++) {

float x=r*cos(angle) + width/2;
float y=r*sin(angle) + height/2;

fill(255);
rect(x, y, 12, 12);

angle += TWO_PI / 12;
}
}

``````

and then spiral

Same for loop but radius r increases.

With a while loop to have a more flexible next angle.

2000 images is a lot though.

``````

float angle=0 ;

float r = 14;

void setup() {
size(1660, 660);
background(0);
}

void draw() {
background(0);

angle=0;
r = 14;
for (int i=0; i<112; i++) {

float x=r*cos(angle) + width/2;
float y=r*sin(angle) + height/2;

fill(255);
rect(x, y, 20, 20);

//angle += TWO_PI / 12;

float x2;
float y2;
x2=r*cos(angle) + width/2;
y2=r*sin(angle) + height/2;
while (dist(x, y, x2, y2) < 30) {
x2=r*cos(angle) + width/2;
y2=r*sin(angle) + height/2;
angle += 0.021;
}
if (i>11) {
}
}
noLoop();
}

``````
3 Likes

new version: not a spiral but just nested circles

concentric circles

``````

float angle  = 0;
float TWO_PI_angle_divider = 12.0;

void setup() {
size(1660, 960);
background(0);
}

void draw() {
background(0);

for (int i_number_of_circle = 0; i_number_of_circle < 200; i_number_of_circle += 1) {

// reset angle for next circle
angle=0.0;
// calc radius for next circle
// random color
fill(random(256), random(256), random(256));

// draw one circle
for (int i_images_in_circle=0; i_images_in_circle < TWO_PI_angle_divider; i_images_in_circle++) {
float x = radius*cos(angle) + width/2;
float y = radius*sin(angle) + height/2;

rect(x, y, 12, 12);

angle += (float) TWO_PI / (float) TWO_PI_angle_divider;
}//for

if (i_number_of_circle%2==0) {
TWO_PI_angle_divider+=10.0;
print(TWO_PI_angle_divider, " ");
}//if
}//for

noLoop();
}

``````
2 Likes

Thanks JSGauthier and Chrisir

The nested circles concept and example is the idea I struggled to express!

2 Likes