For loops in for loops

Processing Coding Questions
1

Hi,

I have created this code to make a poster.
But I really want to make the code shorter, since it is the same for loop again and again only different placing and the amount of circles it creates.
But I don’t know how I can combine them, can someone help me?

The small circles in the corners make 8 circles and de bigger ones in the center of the edges makes 13.

Thankss

int a = 0;
final int MAX = 350;                      // max size big circles 
final int MAXs = 250;                     // max size small circles in corners 
int[] x = new int[250];                   // array x value fits 250 
int[] y = new int[250];                   // array y value fits 250



void setup() {

  
  size(800, 800);                        // size canvas
  colorMode(HSB, 255);                   // colormode such that there is a gradient

  // Loop for color gradient
  for (int c = 0; c < 799; c++) {        // for loop that creates gradient 
    line(0, c, width, c);
    stroke(150 + c/3.02/3, 255/6, 255);  // color transition from blue to purple to pink
  }

  // Loop for dots
  for (int s = 0; s < x.length; s++) {   // for loop that creates dots
    x[s] = (int)random(width);           // variable random x value
    y[s] = (int)random(height);          // variable random y value
  }
}




void draw() {
  
  // Loop for ellipses center
  for (int z = 0; z < 150; z = z+10) {   // for loop that creates ellips center horizontal
    strokeWeight(1);
    noFill();
    stroke(255);                         // color lines white
    ellipse(400, 400, 220+z, 100+z);
  }

  for (int z = 0; z < 150; z = z+10) {   // for loop that creates ellipse center vertical
    strokeWeight(1);
    noFill();
    stroke(255);                         // color lines white
    ellipse(400, 400, 100+z, 220+z);
  }

  for (int z = 0; z < 150; z = z+10) {   // for loop that creates ellips center horizontal rotated PI/4
    pushMatrix();
    translate(400, -170);                // translate to center 
    rotate(PI/4);                        // rotate PI/4, 45 degrees
    strokeWeight(1);
    noFill();
    stroke(255);                         // color lines white
    ellipse(400, 400, 220+z, 100+z); 
    popMatrix();
  }

  for (int z = 0; z < 150; z = z+10) {   // for loop that creates ellipse center vertical rotated PI/4
    pushMatrix();
    translate(400, -170);                // translate to center 
    rotate(PI/4);                        // rotate PI/4, 45 degrees
    strokeWeight(1);
    noFill();
    stroke(255);                         // color lines white
    ellipse(400, 400, 100+z, 220+z); 
    popMatrix();
  }


  // Loops for circles
  for (int p = 0; p < MAX; p = p+20) {  // for loop that creates circles left
    strokeWeight(3);
    noFill();
    stroke(255);                        // color lines white
    ellipse(0, 400, 100+p, 100+p);      // origin point and growth diameter
  }
  for (int k = 0; k < MAX; k = k+20) {  // for loop that creates circles right
    strokeWeight(3);
    noFill();
    stroke(255);                        // color lines white
    ellipse(800, 400, 100+k, 100+k);    // origin point and growth diameter
  }
  for (int l = 0; l < MAX; l = l+20) {  // for loop that creates circles tupper
    strokeWeight(3);
    noFill();
    stroke(255);                        // color lines white
    ellipse(400, 0, 100+l, 100+l);      // origin point and growth diameter
  }
  for (int m = 0; m < MAX; m = m+20) {  // for loop that creates circles lower
    strokeWeight(3);
    noFill();
    stroke(255);                        // color lines white
    ellipse(400, 800, 100+m, 100+m);    // origin point and growth diameter
  }
  for (int n = 0; n < MAXs; n = n+20) {  // for loop that creates circles left/upper corner
    strokeWeight(3);
    noFill();
    stroke(255);                        // color lines white
    ellipse(0, 0, 100+n, 100+n);        // origin point and growth diameter
  }
  for (int o = 0; o < MAXs; o = o+20) {  // for loop that creates circles right/upper corner
    strokeWeight(3);
    noFill();
    stroke(255);                        // color lines white
    ellipse(800, 0, 100+o, 100+o);      // origin point and growth diameter
  }
  for (int p = 0; p < MAXs; p = p+20) {  // for loop that creates circles left/lower corner
    strokeWeight(3);
    noFill();
    stroke(255);                        // color lines white
    ellipse(0, 800, 100+p, 100+p);      // origin point and growth diameter
  }
  for (int q = 0; q < MAXs; q = q+20) {  // for loop that creates circles right/lower corner
    strokeWeight(3);
    noFill();
    stroke(255);                        // color lines white
    ellipse(800, 800, 100+q, 100+q);    // origin point and growth diameter
  }

  // Loop for dots
  for (int s = 0; s < x.length; s++) {  // for loop that creates dots 
    ellipse(x[s], y[s], 2, 2);          // dots with diameter 2 and location x,y
  }
}
2

You are doing almost the same thing repeatedly so I have created a single custom function to create you oval shapes from. I also changed the way you generally go about drawing each set – best to translate to the origin of each set then run a loop of them. Hope this helps

void setup() {
  size(800, 800);
}

void draw() {
  background(0);
  // draw centre multiple ovals motif
  pushMatrix();
  translate(width/2, height/2); // move entire draw space to centre of canvas
  // draw wide ovals
  drawAthing(0, 150, 10, 0, 0, 220, 100); // note x and y parameters are set to 0 now
  //draw tall ovals
  drawAthing(0, 150, 10, 0, 0, 100, 220);
  
  // draw wide ovals rotated 45 degrees
  pushMatrix();
  rotate(PI/4);
  drawAthing(0, 150, 10, 0, 0, 220, 100);
  popMatrix();
  
  // draw wide ovals rotated 45 degrees
  pushMatrix();
  rotate(PI/4);
  drawAthing(0, 150, 10, 0, 0, 100, 220);
  popMatrix();
  
  popMatrix();
  // draw any other things you like from here...
  // remember to wrap in push and popMatrix()
  // and translate, then set x and y to 0
}

void drawAthing(int start, int end, int step, float x, float y, float w, float h) {
  for (int i = start; i < end; i+=step) {
    strokeWeight(1);
    noFill();
    stroke(255);
    ellipse(x, y, w+i, h+i);
  }
}
3

Here’s is a more elegant solution wrapping the transformations into the function:

void setup() {
  size(800, 800);
  colorMode(HSB, 255);
}

void draw() {
  background(0);
  drawAthing(0, 150, 10, 400, 400, 220, 100, 0);
  drawAthing(0, 150, 10, 400, 400, 100, 220, 0);
  drawAthing(0, 150, 10, 400, 400, 220, 100, PI/4);
  drawAthing(0, 150, 10, 400, 400, 100, 220, PI/4);
}

void drawAthing(int start, int end, int step, float x, float y, float w, float h, float r) {
  pushMatrix();
  translate(x, y);
  rotate(r);
  for (int i = start; i < end; i+=step) {
    strokeWeight(1);
    noFill();
    stroke(255);
    ellipse(0, 0, w+i, h+i);
  }
  popMatrix();
}
4

Thanks so much and how could I do the other circles on the sides?

5

See how it works? I just pass parameters to a generic custom function. I’ve added your other bits too

int a = 0;
int MAX = 350;                      // max size big circles 
int MAXs = 250;                     // max size small circles in corners 
int[] x = new int[250];                   // array x value fits 250 
int[] y = new int[250];                   // array y value fits 250

void setup() {
  size(800, 800);
  colorMode(HSB, 255);                   // colormode such that there is a gradient
  background(0);

  // Loop for color gradient
  for (int c = 0; c < 799; c++) {        // for loop that creates gradient 
    line(0, c, width, c);
    stroke(150 + c/3.02/3, 255/6, 255);  // color transition from blue to purple to pink
  }

  // Loop for dots
  for (int s = 0; s < x.length; s++) {   // for loop that creates dots
    x[s] = (int)random(width);           // variable random x value
    y[s] = (int)random(height);          // variable random y value
  }
}

void draw() {
  // centre motif
  drawAthing(0, 150, 10, 400, 400, 220, 100, 0);
  drawAthing(0, 150, 10, 400, 400, 100, 220, 0);
  drawAthing(0, 150, 10, 400, 400, 220, 100, PI/4);
  drawAthing(0, 150, 10, 400, 400, 100, 220, PI/4);
  // other circles
  drawAthing(0, MAX, 20, 0, 400, 100, 100, 0);
  drawAthing(0, MAX, 20, 800, 400, 100, 100, 0);
  drawAthing(0, MAX, 20, 400, 0, 100, 100, 0);
  drawAthing(0, MAX, 20, 400, 800, 100, 100, 0);
  drawAthing(0, MAXs, 20, 0, 0, 100, 100, 0);
  drawAthing(0, MAXs, 20, 800, 0, 100, 100, 0);
  drawAthing(0, MAXs, 20, 0, 800, 100, 100, 0);
  drawAthing(0, MAXs, 20, 800, 800, 100, 100, 0);
  // Loop for dots
  for (int s = 0; s < x.length; s++) {  // for loop that creates dots 
    ellipse(x[s], y[s], 2, 2);          // dots with diameter 2 and location x,y
  }
}

void drawAthing(int start, int end, int step, float x, float y, float w, float h, float r) {
  pushMatrix();
  translate(x, y);
  rotate(r);
  for (int i = start; i < end; i+=step) {
    strokeWeight(1);
    noFill();
    stroke(255);
    ellipse(0, 0, w+i, h+i);
  }
  popMatrix();
}
6

Thankssss its the same but better!

7

Whenever you see code which is modular and repeatable but with slight differences, create a custom function and pass parameters to it. Hope this helps