# How to create a random convex polygon?

**URL:** <https://discourse.processing.org/t/how-to-create-a-random-convex-polygon/76>\
**Category:** Project Guidance\
**Created:** [May 17, 2018, 4:43pm UTC](https://discourse.processing.org/t/how-to-create-a-random-convex-polygon/76 "2018-05-17T16:43:50Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![rioma7](https://avatars.discourse-cdn.com/v4/letter/r/3ec8ea/32.png) [@rioma7](https://discourse.processing.org/u/rioma7)\
**Post date:** [May 17, 2018, 4:43pm UTC](https://discourse.processing.org/t/how-to-create-a-random-convex-polygon/76/1 "2018-05-17T16:43:50Z")

</div>

Hello folks! I have a big question for you:

I am creating a code which when you press keyboard then processing creates a random convex polygon but I am really struggling finding the right way.

thanks

---

<div class="post-metadata">

**Author:** ![WakeMeAtThree](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/wakemeatthree/32/38_2.png) [@WakeMeAtThree](https://discourse.processing.org/u/WakeMeAtThree)\
**Post date:** [May 17, 2018, 4:56pm UTC](https://discourse.processing.org/t/how-to-create-a-random-convex-polygon/76/2 "2018-05-17T16:56:53Z")

</div>

Hi @rioma7!  
You can generate a random set of points using your preferred random generator ( `PVector.random2D`, `random()`, or `randomGaussian()` ) and apply [convex hull algorithm to the points](https://www.google.com/search?q=convex+hull+algorithm&safe=strict&source=lnms&tbm=isch&sa=X&ved=0ahUKEwjYpu-Xmo3bAhWGDewKHdZfB3IQ_AUICygC&biw=1024&bih=489). Check out the wikipedia entry for [QuickHull pseudocode](https://en.wikipedia.org/wiki/Quickhull).

If you just want a regular polygon function, check the example in processing under Basics \> Form \> Regular Polygon

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [May 17, 2018, 10:06pm UTC](https://discourse.processing.org/t/how-to-create-a-random-convex-polygon/76/3 "2018-05-17T22:06:52Z")

</div>

Passing parameters to create a regular polygon is one of the examples of creating your own function – `polygon()` – on the Processing website. You can see it here:

- [https://processing.org/examples/regularpolygon.html](https://processing.org/examples/regularpolygon.html)

---

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [May 18, 2018, 9:57am UTC](https://discourse.processing.org/t/how-to-create-a-random-convex-polygon/76/4 "2018-05-18T09:57:14Z")

</div>

In the code linked by @jeremydouglass the angles are evenly spaced, so you get regular polygons. If you would like irregular polygons do randomize the angles. Maybe like this:

- create an `array` containing 3 or more floats between 0 and TWO\_PI (the angles)
- sort that `array`
- iterate through the `array` of angles and add a vertex for each angle

If you do this on a frame by frame basis, the polygon will jitter, because you get a new random polygon in each frame. You can avoid the jitter by “storing” the generated polygon in a `PShape`, probably inside `setup`, and then drawing that `PShape` inside `draw`.

I made a small program to do this, but I better don’t spoil the exercise by posting the code 🙂

 ![2018-05-18-114425_600x600_scrot](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/1X/a16c3f8def60e0f19803c5598789124f3a0c4e80.png)

---

<div class="post-metadata">

**Author:** ![rioma7](https://avatars.discourse-cdn.com/v4/letter/r/3ec8ea/32.png) [@rioma7](https://discourse.processing.org/u/rioma7)\
**Post date:** [May 18, 2018, 1:12pm UTC](https://discourse.processing.org/t/how-to-create-a-random-convex-polygon/76/5 "2018-05-18T13:12:55Z")

</div>

@jeremydouglass / @hamoid thanks guys. Now I try to find out a solution otherwise I will ask you again 🙂

---

<div class="post-metadata">

**Author:** ![rioma7](https://avatars.discourse-cdn.com/v4/letter/r/3ec8ea/32.png) [@rioma7](https://discourse.processing.org/u/rioma7)\
**Post date:** [May 18, 2018, 1:13pm UTC](https://discourse.processing.org/t/how-to-create-a-random-convex-polygon/76/6 "2018-05-18T13:13:41Z")

</div>

thanks also to @WakeMeAtThree

---

<div class="post-metadata">

**Author:** ![rioma7](https://avatars.discourse-cdn.com/v4/letter/r/3ec8ea/32.png) [@rioma7](https://discourse.processing.org/u/rioma7)\
**Post date:** [May 19, 2018, 8:02pm UTC](https://discourse.processing.org/t/how-to-create-a-random-convex-polygon/76/7 "2018-05-19T20:02:59Z")

</div>

@hamoid I need your help 😧

I cannot find a solution, I have tried a lot of stuff but never finding a solution!!!

---

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [May 19, 2018, 10:14pm UTC](https://discourse.processing.org/t/how-to-create-a-random-convex-polygon/76/8 "2018-05-19T22:14:35Z")

</div>

This is the thing I wrote:

```auto
PShape shapes[] = new PShape[64];

void setup() {
  size(600, 600, P2D);
  noStroke();
  fill(70);

  for (int i=0; i<shapes.length; i++) {
    shapes[i] = polygon(30, (int)random(3, 10));
  }
}

void draw() {
  background(255);
  for (int i=0; i<shapes.length; i++) {
    pushMatrix();
    // put the polygons in a grid
    translate(map(i%8, 0, 7, 50, 550), map(i/8, 0, 7, 50, 550));
    // make them rotate at different speeds
    rotate(frameCount / (50.0 + 10 * i));
    shape(shapes[i]);
    popMatrix();
  }
}

PShape polygon(float radius, int npoints) {
  // create a random list of angles
  float angles[] = new float[npoints];
  for(int i=0; i<npoints; i++) {
    angles[i] = random(TWO_PI);
  }
  // sort the list
  angles = sort(angles);
  
  // create a shape with those angles
  PShape s = createShape();
  s.beginShape();
  for (float a : angles) {
    float sx = cos(a) * radius;
    float sy = sin(a) * radius;
    s.vertex(sx, sy);
  }
  s.endShape(CLOSE);
  return s;
}

```

---

<div class="post-metadata">

**Author:** ![rioma7](https://avatars.discourse-cdn.com/v4/letter/r/3ec8ea/32.png) [@rioma7](https://discourse.processing.org/u/rioma7)\
**Post date:** [May 20, 2018, 10:03am UTC](https://discourse.processing.org/t/how-to-create-a-random-convex-polygon/76/9 "2018-05-20T10:03:55Z")

</div>

thanks @hamoid

Now I was trying to create only one shape when I **KeyPressed();** but I don’t know how to do it because if I put everything inside

```auto
if(keyPressed){
for (int i=0; i<shapes.length; i++) {
    pushMatrix();
    translate(map(i%8, 0, 7, 50, 550), map(i/8, 0, 7, 50, 550));
    shape(shapes[i]);
    popMatrix();
  }

PShape polygon(float radius, int npoints) {
  // create a random list of angles
  float angles[] = new float[npoints];
  for(int i=0; i<npoints; i++) {
    angles[i] = random(TWO_PI);
  }
  // sort the list
  angles = sort(angles);
  
  // create a shape with those angles
  PShape s = createShape();
  s.beginShape();
  for (float a : angles) {
    float sx = cos(a) * radius;
    float sy = sin(a) * radius;
    s.vertex(sx, sy);
  }
  s.endShape(CLOSE);
  return s;
}

```

it doesn’t work and I also didn’t understand how can I move the polygon in the middle of the screen to export in PDF.

---

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [May 20, 2018, 7:38pm UTC](https://discourse.processing.org/t/how-to-create-a-random-convex-polygon/76/10 "2018-05-20T19:38:59Z")

</div>

The example above was creating an array of 64 shapes. If you only need one, you don’t need that array, and you don’t need the for loop to iterate 64 times creating and drawing all shapes. You just need one I assume.

You can keep the polygon function, which just returns a shape with a polygon. The following example creates and draws a polygon every time you press a key:

```auto
void setup() {
  size(600, 600, P2D);
  background(255);
}

void draw() {
}

void keyPressed() {
  noStroke();
  fill(random(255));
  PShape shp = polygon(200, (int)random(3, 10));
  translate(width * 0.5, height * 0.5); // move to the center of the screen
  rotate(random(TWO_PI)); // random rotation
  shape(shp); // draw the polygon
}

PShape polygon(float radius, int npoints) {
  // create a random list of angles
  float angles[] = new float[npoints];
  for (int i=0; i<npoints; i++) {
    angles[i] = random(TWO_PI);
  }
  // sort the list
  angles = sort(angles);

  // create a shape with those angles
  PShape s = createShape();
  s.beginShape();
  for (float a : angles) {
    float sx = cos(a) * radius;
    float sy = sin(a) * radius;
    s.vertex(sx, sy);
  }
  s.endShape(CLOSE);
  return s;
}

```

Notice that it assigns a random gray color to each polygon, this way you can notice the overlapping polygons. But of course you can change this.

Also notice that the polygon function takes two arguments: first, the radius of the polygon, and second, the number of points it should have.

---

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [May 21, 2018, 8:27am UTC](https://discourse.processing.org/t/how-to-create-a-random-convex-polygon/76/11 "2018-05-21T08:27:44Z")

</div>

An image to help understand what this polygon function does:

 ![convex-polygon](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/1X/085b39606b127d0ce19fd443b7090d6cd1af7b24.png)

The `polygon` function receives two arguments: a radius (to set how large the polygon should be) and a number of points. In the image you see 4 examples with 3, 4, 5 and 5 points.

The `polygon` function first creates an array of angles, each value in that array being between 0 and TWO\_PI.

```auto
float angles[] = new float[npoints];
for (int i=0; i<npoints; i++) {
  angles[i] = random(TWO_PI);
}

```

That range contains all possible angles in a circle, as you can see in this image in the outer ring of values that goes 0 0.1 0.2 0.3 … 6.0 6.1 6.2:  
 ![](https://yyz2.discourse-cdn.com/flex036/uploads/processingfoundation1/original/1X/91a315cce4ec5c3183a2fb45371919527f6252e7.png)

Let’s say we asked for a polygon with 5 points, and our `angles[]` array contains these random numbers:  
4.2 1.3 3.0 0.5 5.9. We will use the angles to find 2D points in a circle, by using `sin()` and `cos()`, and then connect those points.

The red shape in the image shows what can happen if you forget to sort the list of random angles: you may get a strange shape. By sorting the angles you make sure the angles are either clockwise or counterclockwise and avoid such strange shapes.

```
angles = sort(angles);

```

The second part of the `polygon` function creates a shape and adds one by one points using the sorted angles. To convert an angle to a 2D point we use `cos()` and `sin()`. Those two functions return numbers between -1 and +1, which would be a very small polygon. That’s why we multiply the values by radius, so the polygon can have coordinates between -radius and +radius.

```auto
  PShape s = createShape();
  s.beginShape();
  for (float a : angles) {
    float sx = cos(a) * radius;
    float sy = sin(a) * radius;
    s.vertex(sx, sy);
  }
  s.endShape(CLOSE);
  return s;

```

---

<div class="post-metadata">

**Author:** ![rioma7](https://avatars.discourse-cdn.com/v4/letter/r/3ec8ea/32.png) [@rioma7](https://discourse.processing.org/u/rioma7)\
**Post date:** [May 21, 2018, 8:45am UTC](https://discourse.processing.org/t/how-to-create-a-random-convex-polygon/76/12 "2018-05-21T08:45:57Z")

</div>

THANK YOU VERY MUCH! @hamoid

---

<div class="post-metadata">

**Author:** ![rioma7](https://avatars.discourse-cdn.com/v4/letter/r/3ec8ea/32.png) [@rioma7](https://discourse.processing.org/u/rioma7)\
**Post date:** [May 30, 2018, 7:24pm UTC](https://discourse.processing.org/t/how-to-create-a-random-convex-polygon/76/13 "2018-05-30T19:24:55Z")

</div>

Hallo guys!!! Unfortunately I need more help…  
my project is changed a bit and now basically is to create a shape using the data from the audio frequency!

So read the audio frequency (between 20Hz to 20kHz) and if [X is the read frequency by the microphone]

if **x \>= 9990Hz**  
draw a random polygon in a random position on the screen  
long and narrow  
with inside angles =\< 90°

if **x=\<9990Hz**  
draw a random polygon in a random position on the screen  
flat and wide  
with angles =\>90°

I only need how to draw the polygons…the polygon should be convex or concave

I hope you can help me!

---

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [May 30, 2018, 8:30pm UTC](https://discourse.processing.org/t/how-to-create-a-random-convex-polygon/76/14 "2018-05-30T20:30:39Z")

</div>

If concave polygons are ok, you can randomize the radius with something like this:

```auto
  for (float a : angles) {
    float r = radius * random(0.7, 1.3);
    float sx = cos(a) * r;
    float sy = sin(a) * r;
    s.vertex(sx, sy);
  }

```

That way they points no longer fall in a circle, some are farther from the center, others are closer.

One way to make long shapes would be to choose the angles in a way that they are near two opposing locations in a circle. 0 and `PI` are opposed (0 and 180 degrees). So you could randomly choose either 0 or `PI`, and then add some randomness around that:

```
angles[i] = int(random(2)) * PI + random(0.8);

```

`int(random(2))` gives either 0 or 1. Multiplied by `PI` you get either 0 or `PI`. Then add some randomness so you do NOT only get 0 or `PI`, but numbers around 0 and numbers around `PI`.

But there are maaaany ways to create shapes. I suggest you make some drawings and then think how they could be created, or post the drawings and people can suggest how to code them. I find it a very fun challenge 🙂

---

<div class="post-metadata">

**Author:** ![rioma7](https://avatars.discourse-cdn.com/v4/letter/r/3ec8ea/32.png) [@rioma7](https://discourse.processing.org/u/rioma7)\
**Post date:** [May 30, 2018, 9:06pm UTC](https://discourse.processing.org/t/how-to-create-a-random-convex-polygon/76/15 "2018-05-30T21:06:44Z")

</div>

So basically my code actual is:

> import ddf.minim._;  
> import ddf.minim.analysis._;  
> Minim minim;  
> FFT fft;  
> AudioInput in;  
> float amp = 20; // used to make signal stronger/weaker  
> float ampWave = 20\*amp;  
> float avgAudio; // store avg volume globally
> 
> float bass;  
> float high;
> 
> void setup(){  
> background(255);  
> size(500, 500);  
> noStroke();  
> smooth();
> 
> minim = new Minim(this); // initalize in setup  
> in = minim.getLineIn(Minim.STEREO, 512); // audio in + bufferSize 512 or 1024  
> fft = new FFT(in.bufferSize(), in.sampleRate());  
> fft.logAverages(22, 3); // 3 = 30, 4 = 40, slices of frequency  
> }
> 
> void draw(){
> 
> if(keyPressed) {  
> fft.forward(in.mix); // IMPORTANT! -update for FFT anaylsis  
> bass = fft.calcAvg(20,300)\*amp; // fft.calcAvg(minFreq, maxFreq)  
> high = fft.calcAvg(300,20000)\*amp;  
> }
> 
> if(bass \> high){  
> background(255);  
> fill(0,0,255);  
> ellipse(width/2, height/2, 50,50);  
> }
> 
> else if(high \> bass) {  
> background(255);  
> fill(255,0,0);  
> rect(width/2, height/2, 50,50);  
> }
> 
> println(bass+" / "+high);
> 
> }

and instead of the two background I would like to draw two “random” polygons… here on the sketch you can look at it easily:

 ![IMG_1746](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/1X/70b956e42c6535734a41fb8a0ee446cc87850bb3.jpg)

thanksssss

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [May 31, 2018, 3:47am UTC](https://discourse.processing.org/t/how-to-create-a-random-convex-polygon/76/16 "2018-05-31T03:47:59Z")

</div>

I think you need to do a lot more drawing to understand your concept – try making a series of images or an animatic.

For example, you suggest that each could have as few as three sides… that’s always a triangle, and it cannot meet the requirement “all angles \>= 90”. Similarly, there aren’t closed polygons higher than 4 sides with every angle “\<= 90” – for five and up, the average angle must be \> 90 … and to create small angles in a closed 5-plus-agon you must pair them with large angles (e.g. starburst).

---

<div class="post-metadata">

**Author:** ![rioma7](https://avatars.discourse-cdn.com/v4/letter/r/3ec8ea/32.png) [@rioma7](https://discourse.processing.org/u/rioma7)\
**Post date:** [June 5, 2018, 8:45am UTC](https://discourse.processing.org/t/how-to-create-a-random-convex-polygon/76/17 "2018-06-05T08:45:52Z")

</div>

I was wandering if can I code something like this:

beginShape();  
vertex(random(x), random(y));  
vertex(random(x),random(y));  
vertex(random(x),random(y));  
vertex(random(x),random(y));  
endShape(CLOSE);

Should I declare randomX and randomY? And can I say draw random vertex between 4 and 10?

thankssss

---

<div class="post-metadata">

**Author:** ![rioma7](https://avatars.discourse-cdn.com/v4/letter/r/3ec8ea/32.png) [@rioma7](https://discourse.processing.org/u/rioma7)\
**Post date:** [June 5, 2018, 9:32am UTC](https://discourse.processing.org/t/how-to-create-a-random-convex-polygon/76/18 "2018-06-05T09:32:50Z")

</div>

solved like this

```
background(255);
noStroke();
fill(255,0,0);

int n_vertex = int(random(3, 7));

beginShape();
for (int i = 0; i < n_vertex; i++) {
  vertex(random(width), random(height));
}
endShape(CLOSE);
```