# How to draw a polygon, when x is getting bigger, its sides getting more

**URL:** <https://discourse.processing.org/t/how-to-draw-a-polygon-when-x-is-getting-bigger-its-sides-getting-more/24987>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [October 28, 2020, 9:31pm UTC](https://discourse.processing.org/t/how-to-draw-a-polygon-when-x-is-getting-bigger-its-sides-getting-more/24987 "2020-10-28T21:31:08Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![mengtong](https://avatars.discourse-cdn.com/v4/letter/m/3ab097/32.png) [@mengtong](https://discourse.processing.org/u/mengtong)\
**Post date:** [October 28, 2020, 9:31pm UTC](https://discourse.processing.org/t/how-to-draw-a-polygon-when-x-is-getting-bigger-its-sides-getting-more/24987/1 "2020-10-28T21:31:08Z")

</div>

Here is my code. I wang polygon’s sided gets more when x gets bigger. But it looks incorrect. Can someone help me check it.

int points;  
int radius=100;

void setup() {  
size(500, 500);  
points=mouseX/20;  
}

void draw() {  
drawPolygon();

}

void drawPolygon() {

float angleRange = TWO\_PI / points;

for (int i = 0; i \< points; i++) {  
// First angle  
float angle = i \* angleRange;  
// Next angle  
float nextAngle = (i + 1) \* angleRange;

```
line(width/2+cos(angle) * radius, height/2+ sin(angle) * radius, width/2+ cos(nextAngle) * radius, height/2+ sin(nextAngle) * radius);

```

}  
}

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [October 28, 2020, 9:47pm UTC](https://discourse.processing.org/t/how-to-draw-a-polygon-when-x-is-getting-bigger-its-sides-getting-more/24987/2 "2020-10-28T21:47:33Z")

</div>

please don’t start a new discussion with the same code---------------------------------

**Remark**

` points=mouseX/20;`

won’t work in setup()

place it in draw() instead

**Remark**

I got a good feeling about this.

Format your code nicely:

```auto
    line(
      width/2 + cos(angle) * radius, 
      height/2 + sin(angle) * radius, 
      width/2 + cos(nextAngle) * radius, 
      height/2 + sin(nextAngle) * radius
      );

```

---

<div class="post-metadata">

**Author:** ![mengtong](https://avatars.discourse-cdn.com/v4/letter/m/3ab097/32.png) [@mengtong](https://discourse.processing.org/u/mengtong)\
**Post date:** [October 28, 2020, 10:48pm UTC](https://discourse.processing.org/t/how-to-draw-a-polygon-when-x-is-getting-bigger-its-sides-getting-more/24987/3 "2020-10-28T22:48:08Z")

</div>

Thank you very much. I will pay attention next time.

---

<div class="post-metadata">

**Author:** ![mengtong](https://avatars.discourse-cdn.com/v4/letter/m/3ab097/32.png) [@mengtong](https://discourse.processing.org/u/mengtong)\
**Post date:** [October 29, 2020, 12:03am UTC](https://discourse.processing.org/t/how-to-draw-a-polygon-when-x-is-getting-bigger-its-sides-getting-more/24987/4 "2020-10-29T00:03:11Z")

</div>

Can I ask one more question? Now I want to draw a chained mouse, but I dont know how to calculate the distance from the canvas’s center to the mouseX, mouseY;here is my code, I just wrote a little, also I want the circle follow the mouse:

 ![demo](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/3b162ef68ab1fa4877fb3865925a4925bfb57810.png)

final float CIRCLE\_DIAMETER = 20;  
final float TARGET\_SPACING = CIRCLE\_DIAMETER \* 0.75;  
float anchorX, anchorY;

void setup() {  
size(500,500);  
anchorX = width/2;  
anchorY = height/2;  
strokeWeight(2);  
stroke(255);  
noFill();  
}

void draw() {

}

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [October 29, 2020, 12:05am UTC](https://discourse.processing.org/t/how-to-draw-a-polygon-when-x-is-getting-bigger-its-sides-getting-more/24987/5 "2020-10-29T00:05:53Z")

</div>

Mouse position is mouseX,mouseY

For a chain look at the lerp command in the reference

---

<div class="post-metadata">

**Author:** ![mengtong](https://avatars.discourse-cdn.com/v4/letter/m/3ab097/32.png) [@mengtong](https://discourse.processing.org/u/mengtong)\
**Post date:** [October 29, 2020, 12:08am UTC](https://discourse.processing.org/t/how-to-draw-a-polygon-when-x-is-getting-bigger-its-sides-getting-more/24987/6 "2020-10-29T00:08:07Z")

</div>

use “for” loop to draw a chain. The end circle position is mouseX and mouseY

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [October 29, 2020, 12:24am UTC](https://discourse.processing.org/t/how-to-draw-a-polygon-when-x-is-getting-bigger-its-sides-getting-more/24987/7 "2020-10-29T00:24:50Z")

</div>

Yes. Use for loop with lerp

See reference under lerp()

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [October 29, 2020, 8:09am UTC](https://discourse.processing.org/t/how-to-draw-a-polygon-when-x-is-getting-bigger-its-sides-getting-more/24987/8 "2020-10-29T08:09:20Z")

</div>

2nd example here: [https://www.processing.org/reference/lerp\_.html](https://www.processing.org/reference/lerp_.html)

---

<div class="post-metadata">

**Author:** ![mengtong](https://avatars.discourse-cdn.com/v4/letter/m/3ab097/32.png) [@mengtong](https://discourse.processing.org/u/mengtong)\
**Post date:** [October 29, 2020, 5:16pm UTC](https://discourse.processing.org/t/how-to-draw-a-polygon-when-x-is-getting-bigger-its-sides-getting-more/24987/9 "2020-10-29T17:16:16Z")

</div>

Here is my new code, I calculate the distance between mouse and the center of canvas, but now I only can draw one circle on the canvas, how to draw a chain?

final float CIRCLE\_DIAMETER = 20;  
final float TARGET\_SPACING = CIRCLE\_DIAMETER \* 0.75;  
float anchorX, anchorY;  
float xOffSet;  
float yOffSet;  
float distance;  
float numbers;

void setup() {  
size(500,500);  
anchorX = width/2;  
anchorY = height/2;  
strokeWeight(2);  
stroke(255);  
noFill();  
}

void draw() {  
background(0);  
xOffSet=abs(anchorX-mouseX);  
yOffSet=abs(anchorX-mouseY);  
distance=sqrt(xOffSet_xOffSet+yOffSet_yOffSet);  
// println(distance);

numbers=round(distance/TARGET\_SPACING);  
// println(numbers);  
for(int x=0;x\<=numbers;x++);  
circle(anchorX,anchorY,CIRCLE\_DIAMETER);  
}

---

<div class="post-metadata">

**Author:** ![mengtong](https://avatars.discourse-cdn.com/v4/letter/m/3ab097/32.png) [@mengtong](https://discourse.processing.org/u/mengtong)\
**Post date:** [October 29, 2020, 5:17pm UTC](https://discourse.processing.org/t/how-to-draw-a-polygon-when-x-is-getting-bigger-its-sides-getting-more/24987/10 "2020-10-29T17:17:31Z")

</div>

I can understand lerp, but I am not allowed to use this in this program

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [October 29, 2020, 5:19pm UTC](https://discourse.processing.org/t/how-to-draw-a-polygon-when-x-is-getting-bigger-its-sides-getting-more/24987/11 "2020-10-29T17:19:21Z")

</div>

> [@mengtong](#):
>
> for(int x=0;x\<=numbers;x++);  
> circle(anchorX,anchorY,CIRCLE\_DIAMETER);

No ; sign allowed after x++) !!!

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [October 29, 2020, 5:23pm UTC](https://discourse.processing.org/t/how-to-draw-a-polygon-when-x-is-getting-bigger-its-sides-getting-more/24987/12 "2020-10-29T17:23:26Z")

</div>

> [@mengtong](#):
>
> for(int x=0;x\<=numbers;x++);  
> circle(anchorX,anchorY,CIRCLE\_DIAMETER);

you need to have

```auto
for(int x=0;x<=numbers;x++); { // error here 
     // calculate anchorX,anchorY here!!!
     circle(anchorX,anchorY,CIRCLE_DIAMETER);
} // end of for-loop

```

Chrisir

---

<div class="post-metadata">

**Author:** ![mengtong](https://avatars.discourse-cdn.com/v4/letter/m/3ab097/32.png) [@mengtong](https://discourse.processing.org/u/mengtong)\
**Post date:** [October 29, 2020, 5:26pm UTC](https://discourse.processing.org/t/how-to-draw-a-polygon-when-x-is-getting-bigger-its-sides-getting-more/24987/13 "2020-10-29T17:26:15Z")

</div>

the anchorX and anchorY is the center of canvas, the first circle, I dont need to calculate.

---

<div class="post-metadata">

**Author:** ![mengtong](https://avatars.discourse-cdn.com/v4/letter/m/3ab097/32.png) [@mengtong](https://discourse.processing.org/u/mengtong)\
**Post date:** [October 29, 2020, 5:28pm UTC](https://discourse.processing.org/t/how-to-draw-a-polygon-when-x-is-getting-bigger-its-sides-getting-more/24987/14 "2020-10-29T17:28:47Z")

</div>

I need to calculate how many circle I need to draw and I did. the problem is I cant keep drawing circles

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [October 29, 2020, 5:29pm UTC](https://discourse.processing.org/t/how-to-draw-a-polygon-when-x-is-getting-bigger-its-sides-getting-more/24987/15 "2020-10-29T17:29:55Z")

</div>

> [@mengtong](#):
>
> the anchorX and anchorY is the center of canvas, the first circle, I dont need to calculate.

ah, anchorX and anchorY is the start of the chain.

Where you click with the mouse is the end of the chain.

Store the end of the chain as targetX and targetY

The chain consists of links.

The link have certain distance to the next link (distLinkX and distLinkY you can call them)

in the for-loop :

- Calculate the position for each link and display them. How can you do this?

---

<div class="post-metadata">

**Author:** ![mengtong](https://avatars.discourse-cdn.com/v4/letter/m/3ab097/32.png) [@mengtong](https://discourse.processing.org/u/mengtong)\
**Post date:** [October 29, 2020, 5:34pm UTC](https://discourse.processing.org/t/how-to-draw-a-polygon-when-x-is-getting-bigger-its-sides-getting-more/24987/16 "2020-10-29T17:34:18Z")

</div>

the end of the chain is mouseX and mouseY, I have calculated the distance between beginning and end .  
xOffSet=abs(anchorX-mouseX);  
yOffSet=abs(anchorX-mouseY);  
distance=sqrt(xOffSet_xOffSet+yOffSet_yOffSet);

And the number of circles is  
numbers=round(distance/TARGET\_SPACING);

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [October 29, 2020, 5:35pm UTC](https://discourse.processing.org/t/how-to-draw-a-polygon-when-x-is-getting-bigger-its-sides-getting-more/24987/17 "2020-10-29T17:35:00Z")

</div>

> [@Chrisir](#):
>
> distLinkX and distLinkY

How much is this?

Chrisir

---

<div class="post-metadata">

**Author:** ![mengtong](https://avatars.discourse-cdn.com/v4/letter/m/3ab097/32.png) [@mengtong](https://discourse.processing.org/u/mengtong)\
**Post date:** [October 29, 2020, 5:36pm UTC](https://discourse.processing.org/t/how-to-draw-a-polygon-when-x-is-getting-bigger-its-sides-getting-more/24987/18 "2020-10-29T17:36:39Z")

</div>

CIRCLE\_DIAMETER \* 0.25?  
is it correct?

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [October 29, 2020, 5:37pm UTC](https://discourse.processing.org/t/how-to-draw-a-polygon-when-x-is-getting-bigger-its-sides-getting-more/24987/19 "2020-10-29T17:37:00Z")

</div>

```auto

anchor 
        x
          x
            x
              x
                x
                 Mouse

```

This is the chain with the links.

What is the step from one link to the next? It’s like this: “L”. This is `distLinkX and distLinkY`.

You calculate this in your for-loop please

Chrisir

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [October 29, 2020, 5:37pm UTC](https://discourse.processing.org/t/how-to-draw-a-polygon-when-x-is-getting-bigger-its-sides-getting-more/24987/20 "2020-10-29T17:37:22Z")

</div>

> [@mengtong](#):
>
> CIRCLE\_DIAMETER \* 0.25?  
> is it correct?

I don’t know. Test it.

[Next page](https://discourse.processing.org/t/how-to-draw-a-polygon-when-x-is-getting-bigger-its-sides-getting-more/24987.md?page=2)