# 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:** 2

<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 30, 2020, 9:07pm UTC](https://discourse.processing.org/t/how-to-draw-a-polygon-when-x-is-getting-bigger-its-sides-getting-more/24987/21 "2020-10-30T21:07:43Z")

</div>

Now I can draw a chain, but how to make sure the end of chain is following the mouse?

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);  
for (int x=0; x\<=numbers; x++) {  
xOffSet=abs(anchorX-mouseX);  
yOffSet=abs(anchorX-mouseY);  
distance=sqrt(xOffSet_xOffSet+yOffSet_yOffSet);  
numbers=round(distance/TARGET\_SPACING);  
circle(anchorX+(TARGET\_SPACING_x_0.75), anchorY+(TARGET\_SPACING_x_0.75), CIRCLE\_DIAMETER);  
}  
}

---

<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 30, 2020, 9:14pm UTC](https://discourse.processing.org/t/how-to-draw-a-polygon-when-x-is-getting-bigger-its-sides-getting-more/24987/22 "2020-10-30T21:14:15Z")

</div>

please read again this:

> 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

besides, please format your code with `</>` sign in the forum command bar

```auto

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);
  for (int x=0; x<=numbers; x++) {
    xOffSet=abs(anchorX-mouseX);
    yOffSet=abs(anchorX-mouseY);
    distance=sqrt(xOffSet*xOffSet+yOffSet*yOffSet);
    numbers=round(distance/TARGET_SPACING);
    circle(anchorX+(TARGET_SPACING*x*0.75), anchorY+(TARGET_SPACING*x*0.75), 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 30, 2020, 9:34pm UTC](https://discourse.processing.org/t/how-to-draw-a-polygon-when-x-is-getting-bigger-its-sides-getting-more/24987/23 "2020-10-30T21:34:07Z")

</div>

yes, I calculated the distLinkX and distLinkY, it is:TARGET\_SPACING_x_0.75. Now when I move the mouse, the chain get longer and shorter, but it doest follow my mouse  
the distLinkX,Y; TARGET\_SPACING\*0.75  
the number of circle: 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 30, 2020, 9:39pm UTC](https://discourse.processing.org/t/how-to-draw-a-polygon-when-x-is-getting-bigger-its-sides-getting-more/24987/24 "2020-10-30T21:39:10Z")

</div>

> [@mengtong](#):
>
> TARGET\_SPACING _x_ 0.75

please format this with using `</>`

It doesn’t come out good, because `the *` is missing

---

<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 30, 2020, 9:42pm UTC](https://discourse.processing.org/t/how-to-draw-a-polygon-when-x-is-getting-bigger-its-sides-getting-more/24987/25 "2020-10-30T21:42:01Z")

</div>

> [@mengtong](#):
>
> it is:TARGET\_SPACING _x_ 0.75.

No it isn’t.

It is calculated before setup and hence cannot reflect the position of the mouse (mouseX,mouseY)

read this:

> [@Chrisir](#):
>
> What is the step from one link to the next? It’s like this: “L”. This is `distLinkX and distLinkY` .

So the L has TWO different Arms: | and \_

This is `distLinkX and distLinkY` .

You have to calculate them from the mouse (mouseX,mouseY)

Hint:

It looks like this without the abs()

```auto
    xOffSet=abs(anchorX-mouseX);
    yOffSet=abs(anchorX-mouseY);

```

---

<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 30, 2020, 9:49pm UTC](https://discourse.processing.org/t/how-to-draw-a-polygon-when-x-is-getting-bigger-its-sides-getting-more/24987/26 "2020-10-30T21:49:14Z")

</div>

Sorry, I never use \</\> before. I will try it this time

```auto
distLinkX=(anchorX-mouseX)/x;
distLinkY=(anchorY-mouseY)/x;

```

now it should be the distance between each circle  
But, when mouseX\>anchorX, I will get negative value

---

<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 30, 2020, 9:51pm UTC](https://discourse.processing.org/t/how-to-draw-a-polygon-when-x-is-getting-bigger-its-sides-getting-more/24987/27 "2020-10-30T21:51:05Z")

</div>

There is also a typo in the 2 lines

Check X and Y spelling

---

<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 30, 2020, 9:54pm UTC](https://discourse.processing.org/t/how-to-draw-a-polygon-when-x-is-getting-bigger-its-sides-getting-more/24987/28 "2020-10-30T21:54:29Z")

</div>

here is an example that is also wrong but also shows what I mean with “L”

```auto

final float CIRCLE_DIAMETER = 20;
float anchorX, anchorY;

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

void draw() {
  background(0);

  float xOffSet=(anchorX-mouseX);
  float yOffSet=(anchorY-mouseY);

  line(anchorX, anchorY, 
    anchorX+xOffSet, anchorY);

  line(anchorX+xOffSet, anchorY, 
    anchorX+xOffSet, anchorY+yOffSet);

  ellipse(anchorX, anchorY, CIRCLE_DIAMETER, 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 30, 2020, 10:15pm UTC](https://discourse.processing.org/t/how-to-draw-a-polygon-when-x-is-getting-bigger-its-sides-getting-more/24987/29 "2020-10-30T22:15:14Z")

</div>

haha, I GOT IT! Thank you!

```auto
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);
  for (int x=0; x<=numbers; x++) {
    xOffSet=(anchorX-mouseX);
    yOffSet=(anchorY-mouseY);
    distance=sqrt(xOffSet*xOffSet+yOffSet*yOffSet);
    numbers=round(distance/TARGET_SPACING);
  circle(anchorX,anchorY,CIRCLE_DIAMETER);
  circle(anchorX-x*(xOffSet/numbers),anchorY-x*(yOffSet/numbers),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 30, 2020, 10:19pm UTC](https://discourse.processing.org/t/how-to-draw-a-polygon-when-x-is-getting-bigger-its-sides-getting-more/24987/30 "2020-10-30T22:19:12Z")

</div>

Sorry, just one more question , when my mouse stay in the center of canvas, the circle is disappeared.

---

<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 30, 2020, 10:19pm UTC](https://discourse.processing.org/t/how-to-draw-a-polygon-when-x-is-getting-bigger-its-sides-getting-more/24987/31 "2020-10-30T22:19:23Z")

</div>

new version

especially, do as much as you can outside for loop

```auto

float anchorX, anchorY; 

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

void draw() {
  background(0);

  final float CIRCLE_DIAMETER = 20;
  final float TARGET_SPACING = CIRCLE_DIAMETER * 0.75;

  float xOffSet;
  float yOffSet;
  float distance;
  float numbers;

  xOffSet=anchorX-mouseX;
  yOffSet=anchorY-mouseY;

  distance=sqrt(xOffSet*xOffSet+yOffSet*yOffSet);
  numbers=round(distance/TARGET_SPACING);

  for (int x=0; x<=numbers; x++) {
    ellipse(anchorX-x*(xOffSet/numbers), anchorY-x*(yOffSet/numbers), CIRCLE_DIAMETER, CIRCLE_DIAMETER);
  }
}

```

---

<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 30, 2020, 10:20pm UTC](https://discourse.processing.org/t/how-to-draw-a-polygon-when-x-is-getting-bigger-its-sides-getting-more/24987/32 "2020-10-30T22:20:51Z")

</div>

> [@mengtong](#):
>
> when my mouse stay in the center of canvas, the circle is disappeared.

before the for loop say

ellipse(anchorX, anchorY, CIRCLE\_DIAMETER, 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 30, 2020, 10:22pm UTC](https://discourse.processing.org/t/how-to-draw-a-polygon-when-x-is-getting-bigger-its-sides-getting-more/24987/33 "2020-10-30T22:22:19Z")

</div>

Thank you very much, you really helped me a lot.

---

<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:** [November 4, 2020, 2:23am UTC](https://discourse.processing.org/t/how-to-draw-a-polygon-when-x-is-getting-bigger-its-sides-getting-more/24987/34 "2020-11-04T02:23:54Z")

</div>

Sorry , can I ask one more question.

```auto
final int BALL_SIZE=50;
int numbers;
size(530, 530);

numbers=height/BALL_SIZE;

for (int x=0; x<numbers; x++) {
  for (int j=0; j<=x; j++) {
    for (int z=0; z<=BALL_SIZE; z++) {
      noStroke();
      fill(255, 255/5*(z+1), 0);
      circle(BALL_SIZE/2+BALL_SIZE*j, BALL_SIZE/2+BALL_SIZE*x, BALL_SIZE/(z+1));
    }
  }
}

```

I think my code is right, the colour should change 50times. But it looks different.

 ![2](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/6/6bfdbb90366aa9f524fcb1d096ef96bc534f7ddc.png) ![1](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/f7dcffecea18ce7413513cc24f7217f33c1a7cc2.png)  
The left one is demo,right one is mine

---

<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:** [November 4, 2020, 3:38am UTC](https://discourse.processing.org/t/how-to-draw-a-polygon-when-x-is-getting-bigger-its-sides-getting-more/24987/35 "2020-11-04T03:38:32Z")

</div>

> [@mengtong](#):
>
> `255/5*(z+1),`

could be a rounding error

try `255.0/5.0*(z+1.0)`

same with diameter in the circle line

---

<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:** [November 4, 2020, 6:22pm UTC](https://discourse.processing.org/t/how-to-draw-a-polygon-when-x-is-getting-bigger-its-sides-getting-more/24987/36 "2020-11-04T18:22:47Z")

</div>

Sorry, I should not use “/”, should use “-”, now everything is good. I did a mistake.

```auto
final int BALL_SIZE=50;
int numbers;
size(530, 530);
numbers=height/BALL_SIZE;
for (int x=0; x<numbers; x++) {
  for (int j=0; j<=x; j++) {
    for (int z=0; z<=50; z++) {
      noStroke();
      fill(255, 0+z*5, 0);
      circle(BALL_SIZE/2+BALL_SIZE*j, BALL_SIZE/2+BALL_SIZE*x, BALL_SIZE-z);
 // println(BALL_SIZE-z);
// println(z*50);
  
  }
  }
}

```

---

<div class="post-metadata">

**Author:** ![DijaAngel](https://avatars.discourse-cdn.com/v4/letter/d/46a35a/32.png) [@DijaAngel](https://discourse.processing.org/u/DijaAngel)\
**Post date:** [November 4, 2020, 8:45pm UTC](https://discourse.processing.org/t/how-to-draw-a-polygon-when-x-is-getting-bigger-its-sides-getting-more/24987/37 "2020-11-04T20:45:15Z")

</div>

int x=0  
void setup(){  
size(300,300);  
}  
void draw(){  
//make x a little bit bigger  
x+=2;  
//draw a circle using x as the height and width of the circle  
ellipse(150,150,x);  
/\*if x is too big,we can’t see it in our window,so put it back  
\*/ to 0 and start over  
if(x\>300){  
x=0;  
}  
}  
My program won’t run please could you tell me where the problems are?

---

<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:** [November 5, 2020, 8:48am UTC](https://discourse.processing.org/t/how-to-draw-a-polygon-when-x-is-getting-bigger-its-sides-getting-more/24987/38 "2020-11-05T08:48:57Z")

</div>

Hello, and welcome to the forum!

Great to have you here!

You had one missing ; in the first line and the comment with `/* comment */` was wrong

**Explanation**

- The comment with // is for _one_ line (or the part right of the // sign). You write // at start of the line (or start of the comment): `.... // comment`
- The comment with `/* */` is _for a section_. So you have to write `/*` at start of a line (or section) and `*/` AFTER the comment / after the line: `/* comment */`  
I think that was your mistake.

This Sketch works:

```auto

int x=0; // missing ; sign here

void setup() {
  size(300, 300);
}

void draw() {
  //make x a little bit bigger
  x+=2;
  //draw a circle using x as the height and width of the circle
  ellipse(150, 150, x, x);
  /* here the signs for comments were a bit off; they must be like I show here (not at start of line)
   if x is too big,we can’t see it in our window,so put it back
   to 0 and start over */
  if (x>300) {
    x=0;
  }
}

```

Hint: you might want to use `background(110);` to delete the circles

Warm regards,

Chrisir

---

<div class="post-metadata">

**Author:** ![DijaAngel](https://avatars.discourse-cdn.com/v4/letter/d/46a35a/32.png) [@DijaAngel](https://discourse.processing.org/u/DijaAngel)\
**Post date:** [November 5, 2020, 11:48am UTC](https://discourse.processing.org/t/how-to-draw-a-polygon-when-x-is-getting-bigger-its-sides-getting-more/24987/39 "2020-11-05T11:48:05Z")

</div>

Thank you so much 🥰

---

<div class="post-metadata">

**Author:** ![DijaAngel](https://avatars.discourse-cdn.com/v4/letter/d/46a35a/32.png) [@DijaAngel](https://discourse.processing.org/u/DijaAngel)\
**Post date:** [November 15, 2020, 4:04pm UTC](https://discourse.processing.org/t/how-to-draw-a-polygon-when-x-is-getting-bigger-its-sides-getting-more/24987/40 "2020-11-15T16:04:49Z")

</div>

void setup(){  
size(480,480);

}  
void draw(){  
if(mousePressed){  
fill(0);  
}else{  
fill(255);  
}  
ellipse(mouseX,mouseY,80,120);//  
}  
Hi please could you explain what the fill else statement does to my ellipse.

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

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