# For loops in for loops

**URL:** <https://discourse.processing.org/t/for-loops-in-for-loops/16957>\
**Category:** Coding Questions\
**Created:** [January 8, 2020, 4:15pm UTC](https://discourse.processing.org/t/for-loops-in-for-loops/16957 "2020-01-08T16:15:54Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Clay1](https://avatars.discourse-cdn.com/v4/letter/c/e47774/32.png) [@Clay1](https://discourse.processing.org/u/Clay1)\
**Post date:** [January 8, 2020, 4:15pm UTC](https://discourse.processing.org/t/for-loops-in-for-loops/16957/1 "2020-01-08T16:15:54Z")

</div>

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

```auto
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
  }
}

```

---

<div class="post-metadata">

**Author:** ![GSA\_IxD](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gsa_ixd/32/7554_2.png) [@GSA\_IxD](https://discourse.processing.org/u/GSA_IxD)\
**Post date:** [January 8, 2020, 4:49pm UTC](https://discourse.processing.org/t/for-loops-in-for-loops/16957/2 "2020-01-08T16:49:07Z")

</div>

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

```auto
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);
  }
}

```

---

<div class="post-metadata">

**Author:** ![GSA\_IxD](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gsa_ixd/32/7554_2.png) [@GSA\_IxD](https://discourse.processing.org/u/GSA_IxD)\
**Post date:** [January 8, 2020, 5:33pm UTC](https://discourse.processing.org/t/for-loops-in-for-loops/16957/3 "2020-01-08T17:33:20Z")

</div>

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

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

```

---

<div class="post-metadata">

**Author:** ![Clay1](https://avatars.discourse-cdn.com/v4/letter/c/e47774/32.png) [@Clay1](https://discourse.processing.org/u/Clay1)\
**Post date:** [January 8, 2020, 5:38pm UTC](https://discourse.processing.org/t/for-loops-in-for-loops/16957/4 "2020-01-08T17:38:52Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![GSA\_IxD](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gsa_ixd/32/7554_2.png) [@GSA\_IxD](https://discourse.processing.org/u/GSA_IxD)\
**Post date:** [January 8, 2020, 5:58pm UTC](https://discourse.processing.org/t/for-loops-in-for-loops/16957/5 "2020-01-08T17:58:26Z")

</div>

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

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

```

---

<div class="post-metadata">

**Author:** ![Clay1](https://avatars.discourse-cdn.com/v4/letter/c/e47774/32.png) [@Clay1](https://discourse.processing.org/u/Clay1)\
**Post date:** [January 8, 2020, 7:38pm UTC](https://discourse.processing.org/t/for-loops-in-for-loops/16957/6 "2020-01-08T19:38:29Z")

</div>

Thankssss its the same but better!

---

<div class="post-metadata">

**Author:** ![GSA\_IxD](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gsa_ixd/32/7554_2.png) [@GSA\_IxD](https://discourse.processing.org/u/GSA_IxD)\
**Post date:** [January 8, 2020, 7:40pm UTC](https://discourse.processing.org/t/for-loops-in-for-loops/16957/7 "2020-01-08T19:40:09Z")

</div>

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