# Multiple polygons with a loop

**URL:** <https://discourse.processing.org/t/multiple-polygons-with-a-loop/32260>\
**Category:** Coding Questions\
**Created:** [September 14, 2021, 8:38pm UTC](https://discourse.processing.org/t/multiple-polygons-with-a-loop/32260 "2021-09-14T20:38:44Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [September 14, 2021, 8:38pm UTC](https://discourse.processing.org/t/multiple-polygons-with-a-loop/32260/1 "2021-09-14T20:38:44Z")

</div>

Hi there!

I have made a function to create a random polygon, could you please help me to create, for example, 30 polygons like this? Thank you so much

```auto
void setup(){
  

  size(1000,1000);
  float x1 = random(width);
  float x2 = random(width);
  float x3 = random(width);
  float x4 = random(width);
  float y1 = random(height);
  float y2 = random(height);
  float y3 = random(height);
  float y4 = random(height);
  for(int i=0; i<30; i++){
  drawQuad(x1,y1,x2,y2,x3,y3,x4,y4);
  
 
}
}

void drawQuad(float x1, float y1, float x2, float y2, float x3, float y3, float x4, float y4){
fill(255,0,255);
quad(x1,y1,x2,y2,x3,y3,x4,y4);
}

```

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [September 14, 2021, 9:11pm UTC](https://discourse.processing.org/t/multiple-polygons-with-a-loop/32260/2 "2021-09-14T21:11:39Z")

</div>

Hi @humano,

Few things on your code:

- Writing a function is fine but your `drawQuad` function always draw a quad with a pink color with the provided coordinates. This is the same as calling `quad` directly after setting the fill color.

- You want to do something multiple times. You guessed right: you have to use a loop.  
The thing is that in your `for` loop, you are only calling your `drawQuad` function and therefore the `x1`, `x2`… coordinates never change, they are the same as the first time you assigned them to a random value.

Hope it helps 😉

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [September 14, 2021, 9:32pm UTC](https://discourse.processing.org/t/multiple-polygons-with-a-loop/32260/3 "2021-09-14T21:32:47Z")

</div>

Thank you so much! You mean something like this:

```auto

 size(1000,1000);
 noStroke();
 for(int i=0; i<30; i = i + 1){
 float x1 = random(width);
 float y1 = random(height);
 float x2 = random(width);
 float y2 = random(height);
 float x3 = random(width);
 float y3 = random(height);
 float x4 = random(width);
 float y4 = random(height);
 noStroke();
 fill(random(255),random(255),random(255));
 quad(x1,y1,x2,y2,x3,y3,x4,y4); 
 }

```

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [September 14, 2021, 9:49pm UTC](https://discourse.processing.org/t/multiple-polygons-with-a-loop/32260/4 "2021-09-14T21:49:32Z")

</div>

You nailed it! 😜

Pro tip: press `Ctrl+T` to auto format your code in the Processing editor

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [September 15, 2021, 1:30pm UTC](https://discourse.processing.org/t/multiple-polygons-with-a-loop/32260/5 "2021-09-15T13:30:16Z")

</div>

I have seen that some of this quads are twisted, do you know how could I avoid It? I can’t imagine the way to do that easily

 ![IMG_20210915_100049](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/d/dc9d91bc833f9b8c49d59c46f06a9c14c10816be.jpeg)

---

<div class="post-metadata">

**Author:** ![rapatski](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/rapatski/32/5164_2.png) [@rapatski](https://discourse.processing.org/u/rapatski)\
**Post date:** [September 15, 2021, 9:47pm UTC](https://discourse.processing.org/t/multiple-polygons-with-a-loop/32260/6 "2021-09-15T21:47:31Z")

</div>

Think we answered that question in your other post: [Polygons Distribution with loops - #4 by rapatski](https://discourse.processing.org/t/polygons-distribution-with-loops/32270/4)

Try not to double/cross post if you can?

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [September 16, 2021, 9:33pm UTC](https://discourse.processing.org/t/multiple-polygons-with-a-loop/32260/7 "2021-09-16T21:33:50Z")

</div>

You are right, in other post about positions they gave me a solution for shapes, but actually I am talking about another thing. Maybe I should open another chat to explain It better.

---

<div class="post-metadata">

**Author:** ![rapatski](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/rapatski/32/5164_2.png) [@rapatski](https://discourse.processing.org/u/rapatski)\
**Post date:** [September 17, 2021, 6:33pm UTC](https://discourse.processing.org/t/multiple-polygons-with-a-loop/32260/8 "2021-09-17T18:33:45Z")

</div>

The reason they cross is because of the order of vertices its expecting. When you look up quad() or beginShape() you’ll see that they are expecting the points (vertex/vertices) of the polygon to come in a certain order, namely clockwise or anticlockwise:

![01376_1_Vertex_Order](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/e/ea7e105d3082e0c55e9abed1672936784095c629.jpeg)

---

<div class="post-metadata">

**Author:** ![rapatski](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/rapatski/32/5164_2.png) [@rapatski](https://discourse.processing.org/u/rapatski)\
**Post date:** [September 17, 2021, 7:05pm UTC](https://discourse.processing.org/t/multiple-polygons-with-a-loop/32260/9 "2021-09-17T19:05:57Z")

</div>

It was the reason for example to use the trigonometry approach in the other thread, increasing the angle to find the x and y coordinates of the 4 corners using cos/sin. If you do it that way, the four corner vertices will always be in the right (counter) clockwise order.

 ![1200px-Sinus_und_Kosinus_am_Einheitskreis_1.svg](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/7688c67bf31af2fb5b6de5287accd0ad3808660b.png)