Drawing many image thumbnails in expanding circle

Processing Coding Questions
1

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
2

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).

These references can help you to better understand these functions:

1 Like
3 


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.
Also the radius add decreases once. This could be improved.

2000 images is a lot though.



float angle=0 ; 

float r = 14; 
float add = 6.2; 

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;
    r+=add;

    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) {
      add=1.91;
    }
  }
  noLoop();
}
3 Likes
4

new version: not a spiral but just nested circles

concentric circles



float angle  = 0; 
float radius = 40; 
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 
    radius=map(i_number_of_circle, 0, 200, 40, 40*200);
    // 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
5

Thanks JSGauthier and Chrisir

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

2 Likes