# Draw this Polygon using loops?

**URL:** https://discourse.processing.org/t/draw-this-polygon-using-loops/1588
**Category:** Coding Questions
**Created:** [July 8, 2018, 10:25am UTC](https://discourse.processing.org/t/draw-this-polygon-using-loops/1588 "2018-07-08T10:25:56Z")
**Posts on this page:** 19
**Page:** 1

<div class="post-metadata">

### Author: ![nerdboybi](https://avatars.discourse-cdn.com/v4/letter/n/a88e4f/32.png) [@nerdboybi](https://discourse.processing.org/u/nerdboybi)
#### Post date: [July 8, 2018, 10:25am UTC](https://discourse.processing.org/t/draw-this-polygon-using-loops/1588/1 "2018-07-08T10:25:56Z")

</div>

![HELP](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/1X/6552a561411ad778fa07e7fe8a4909dd935cf87e.PNG)

Its from a textbook and I just need a solution so I can get an idea on how to use loops

---

<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: [July 8, 2018, 11:17am UTC](https://discourse.processing.org/t/draw-this-polygon-using-loops/1588/2 "2018-07-08T11:17:02Z")

</div>

If you want to get an idea on how to use loops, check out the [processing reference](https://processing.org/reference/). You can find the section [on for loops](https://processing.org/reference/for.html) here. Also, post your attempt at your question first if you need more help.

---

<div class="post-metadata">

### Author: ![nerdboybi](https://avatars.discourse-cdn.com/v4/letter/n/a88e4f/32.png) [@nerdboybi](https://discourse.processing.org/u/nerdboybi)
#### Post date: [July 8, 2018, 11:31am UTC](https://discourse.processing.org/t/draw-this-polygon-using-loops/1588/3 "2018-07-08T11:31:24Z")

</div>

```auto
int points= 9; 
float radius = 50; 
float angle = 0;

void setup() {
  size(600, 600); 
  strokeWeight(3);
}

void draw() {
  background(0);
  for (int i = 0; i <= points; i++) {
    float x = cos(i*angle) * radius;
    float y = sin(i*angle) * radius;
    
 
}}

```

I suck at this i know

---

<div class="post-metadata">

### Author: ![DogeMastr](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/dogemastr/32/689_2.png) [@DogeMastr](https://discourse.processing.org/u/DogeMastr)
#### Post date: [July 8, 2018, 11:54am UTC](https://discourse.processing.org/t/draw-this-polygon-using-loops/1588/4 "2018-07-08T11:54:56Z")

</div>

to processsing, iangle isnt a thing yet. if you wanted to multiply i and angle, you would use `i*angle`  
you would then have to draw the point, (there is a `point()` you can check the [reference](https://processing.org/reference/point_.html) for that) then I (there are many ways of doing everything) would find a way to draw a `line()` [(reference page)](https://processing.org/reference/line_.html) to each of those points linking to another.  
Im not one for cos and sin as I haven’t learnt that in school yet  
Hopefully this helped

* * *

Doge

---

<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: [July 8, 2018, 12:44pm UTC](https://discourse.processing.org/t/draw-this-polygon-using-loops/1588/5 "2018-07-08T12:44:08Z")

</div>

Not at all. This is good. As doge mentioned, make sure you’re multiplying i \* angle. But `angle` right now is zero. If the full circle is 360 degrees or TWO\_PI radians, then angle should be a fraction of that. I’m sure you could do the math for that. (Processing sin() and cos() functions take in radian values)

Now when you figure out your `x` and `y` values, here’s a [hint on how to display it](https://processing.org/reference/beginShape_.html).

---

<div class="post-metadata">

### Author: ![nerdboybi](https://avatars.discourse-cdn.com/v4/letter/n/a88e4f/32.png) [@nerdboybi](https://discourse.processing.org/u/nerdboybi)
#### Post date: [July 8, 2018, 4:45pm UTC](https://discourse.processing.org/t/draw-this-polygon-using-loops/1588/6 "2018-07-08T16:45:07Z")

</div>

```auto
int points = 9; 
float radius = 100;  
float angle = TWO_PI / points;

void setup() {
  size(600, 600); 
  strokeWeight(3);
}

void draw() {
  background(0);
  noFill();
  stroke(255);

 

  
  beginShape();
  for (int i = 0; i <= points; i++) {
    float x = cos(i*angle) * radius;
    float y = sin(i*angle) * radius;
    vertex(x, y);
  }
  endShape();
}

```

Drawn the polygon but I dont get the mouse part

---

<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: [July 8, 2018, 4:59pm UTC](https://discourse.processing.org/t/draw-this-polygon-using-loops/1588/7 "2018-07-08T16:59:21Z")

</div>

Great. Before you move on to the mouse part, you haven’t moved the shape to the center of canvas yet. You can do that by adding `width/2` to x and `height/2` to y.

The mouse part is rather easy. It’s asking you to assign `points` inside `void draw(){}` to the value of `mouseX/20`. Try doing that and see what happens to the polygon as you move your mouse horizontally.

---

<div class="post-metadata">

### Author: ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)
#### Post date: [July 8, 2018, 8:23pm UTC](https://discourse.processing.org/t/draw-this-polygon-using-loops/1588/8 "2018-07-08T20:23:20Z")

</div>

You guys are all getting confused because this person isn’t posting their code using the forum’s code formatting tool. The asterisk between i and angle is being interpreted as “start using italics”!

```auto
Edit your post.
Select your code.
Press the </> button!

```

---

<div class="post-metadata">

### Author: ![DogeMastr](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/dogemastr/32/689_2.png) [@DogeMastr](https://discourse.processing.org/u/DogeMastr)
#### Post date: [July 8, 2018, 8:56pm UTC](https://discourse.processing.org/t/draw-this-polygon-using-loops/1588/9 "2018-07-08T20:56:52Z")

</div>

Im not getting confused but lol ok it is still a good practice to use the `</>`for typing code  
😛

---

<div class="post-metadata">

### Author: ![arsh](https://avatars.discourse-cdn.com/v4/letter/a/e495f1/32.png) [@arsh](https://discourse.processing.org/u/arsh)
#### Post date: [February 23, 2019, 7:49pm UTC](https://discourse.processing.org/t/draw-this-polygon-using-loops/1588/10 "2019-02-23T19:49:00Z")

</div>

**u get your answer or not???**

---

<div class="post-metadata">

### Author: ![arsh](https://avatars.discourse-cdn.com/v4/letter/a/e495f1/32.png) [@arsh](https://discourse.processing.org/u/arsh)
#### Post date: [February 23, 2019, 7:50pm UTC](https://discourse.processing.org/t/draw-this-polygon-using-loops/1588/11 "2019-02-23T19:50:05Z")

</div>

i have the same lab , i need help to done this

---

<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: [February 23, 2019, 11:10pm UTC](https://discourse.processing.org/t/draw-this-polygon-using-loops/1588/12 "2019-02-23T23:10:54Z")

</div>

How to draw regular polygons using loops is one of the standard examples on the Processing website. You can find it by looking at the Examples page and searching for “polygon.”

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

Notice that the approach may not be exactly the same as in your book, because there are several ways of approaching this problem. For example:

The example for loop increments by angle – but you could also use the for loop to count up by points, and compute each angle inside the loop.

For output, the example also uses beginShape / vertex / endShape, but you could instead draw points, or store the previous point and simply draw a series of point-point lines using line() in your loop.

---

<div class="post-metadata">

### Author: ![bryan](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/bryan/32/2538_2.png) [@bryan](https://discourse.processing.org/u/bryan)
#### Post date: [February 23, 2019, 8:01pm UTC](https://discourse.processing.org/t/draw-this-polygon-using-loops/1588/13 "2019-02-23T20:01:27Z")

</div>

Hi, the key here is use polar coordinates. I think this coding challenge ([https://www.youtube.com/watch?v=u2D4sxh3MTs](https://www.youtube.com/watch?v=u2D4sxh3MTs)) could be useful to you

---

<div class="post-metadata">

### Author: ![arsh](https://avatars.discourse-cdn.com/v4/letter/a/e495f1/32.png) [@arsh](https://discourse.processing.org/u/arsh)
#### Post date: [February 23, 2019, 8:07pm UTC](https://discourse.processing.org/t/draw-this-polygon-using-loops/1588/14 "2019-02-23T20:07:58Z")

</div>

Thx it can be helpful for me

---

<div class="post-metadata">

### Author: ![arsh](https://avatars.discourse-cdn.com/v4/letter/a/e495f1/32.png) [@arsh](https://discourse.processing.org/u/arsh)
#### Post date: [February 26, 2019, 3:54pm UTC](https://discourse.processing.org/t/draw-this-polygon-using-loops/1588/15 "2019-02-26T15:54:26Z")

</div>

```auto
void setup() {
  size(640, 360);
}

void draw() {
  background(102);
  
  pushMatrix();
  translate(width*0.2, height*0.5);
  rotate(frameCount / 200.0);
  polygon(0, 0, 82, 3); // Triangle
  popMatrix();
  
  pushMatrix();
  translate(width*0.5, height*0.5);
  rotate(frameCount / 50.0);
  polygon(0, 0, 80, 20); // Icosahedron
  popMatrix();
  
  pushMatrix();
  translate(width*0.8, height*0.5);
  rotate(frameCount / -100.0);
  polygon(0, 0, 70, 7); // Heptagon
  popMatrix();
}

void polygon(float x, float y, float radius, int npoints) {
  float angle = TWO_PI / npoints;
  beginShape();
  for (float a = 0; a < TWO_PI; a += angle) {
    float sx = x + cos(a) * radius;
    float sy = y + sin(a) * radius;
    vertex(sx, sy);
  }
  endShape(CLOSE);
}

```

---

<div class="post-metadata">

### Author: ![arsh](https://avatars.discourse-cdn.com/v4/letter/a/e495f1/32.png) [@arsh](https://discourse.processing.org/u/arsh)
#### Post date: [February 26, 2019, 3:54pm UTC](https://discourse.processing.org/t/draw-this-polygon-using-loops/1588/16 "2019-02-26T15:54:55Z")

</div>

how to add mouse movement in this/////???

---

<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: [February 26, 2019, 4:37pm UTC](https://discourse.processing.org/t/draw-this-polygon-using-loops/1588/17 "2019-02-26T16:37:45Z")

</div>

That’s just a cut-paste of the example from [Regular Polygon / Examples / Processing.org](https://processing.org/examples/regularpolygon.html) .

You haven’t even changed it by removing two of the shapes, or by adding more sides. Do you want to try editing the example first to make it do what you want?

> [@arsh](#):
>
> how to add mouse movement

You can move things with translate() – you can move them to the mouse location with mouseX, mouseY.

> **[translate() / Reference](https://processing.org/reference/translate_.html)**
>
> Specifies an amount to displace objects within the display window. The x parameter specifies left/right translation, the y parameter specifies up/down translation, and the z param…

> **[mouseX / Reference](https://processing.org/reference/mouseX.html)**
>
> The system variable mouseX always contains the current horizontal coordinate of the mouse. Note that Processing can only track the mouse position when the pointer is over the current…

---

<div class="post-metadata">

### Author: ![arsh](https://avatars.discourse-cdn.com/v4/letter/a/e495f1/32.png) [@arsh](https://discourse.processing.org/u/arsh)
#### Post date: [February 26, 2019, 3:50pm UTC](https://discourse.processing.org/t/draw-this-polygon-using-loops/1588/18 "2019-02-26T15:50:11Z")

</div>

```auto
int points=9;
void setup()
{
  size(600, 600);
  background(0);
}
 void draw()
{
  float radio=70;
  for (int k=points;k<points+1;k++)
  {
    int numberOfSides=k;
    float centerPositionX=(k-points+1)*2.2*radio-radio/2;
    float centerPositionY=height/2;
    drawPolygon(radio, centerPositionX, centerPositionY, numberOfSides);
  }
}
 
void drawPolygon(float radio, float centerPositionX, float centerPositionY, int numberOfSides)
{  

  float sideAngle=TWO_PI/numberOfSides;
  float halfSideLineLength=sin(sideAngle/2)*radio;
  float lineY=cos(sideAngle/2)*radio;
  strokeWeight(1);
  stroke(255); 
  for (int i=0;i<numberOfSides;i++)
  {    
    pushMatrix();
    translate(centerPositionX, centerPositionY);    
    rotate(i*sideAngle); 
    line(-halfSideLineLength, -lineY, halfSideLineLength, -lineY);    
    //line(0,0, halfSideLineLength, -lineY);
    popMatrix();
  }
  //fill(255);
  //ellipse(centerPositionX, centerPositionY,4,4);
  //noFill();
  //ellipse(centerPositionX, centerPositionY,2*radio,2*radio);
}

```

---

<div class="post-metadata">

### Author: ![arsh](https://avatars.discourse-cdn.com/v4/letter/a/e495f1/32.png) [@arsh](https://discourse.processing.org/u/arsh)
#### Post date: [February 26, 2019, 3:50pm UTC](https://discourse.processing.org/t/draw-this-polygon-using-loops/1588/19 "2019-02-26T15:50:35Z")

</div>

now tell me what to do
