# Drawing polygons with common side

**URL:** https://discourse.processing.org/t/drawing-polygons-with-common-side/26550
**Category:** Coding Questions
**Created:** [December 28, 2020, 8:01am UTC](https://discourse.processing.org/t/drawing-polygons-with-common-side/26550 "2020-12-28T08:01:32Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![ssdesign](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ssdesign/32/7221_2.png) [@ssdesign](https://discourse.processing.org/u/ssdesign)
#### Post date: [December 28, 2020, 8:01am UTC](https://discourse.processing.org/t/drawing-polygons-with-common-side/26550/1 "2020-12-28T08:01:32Z")

</div>

I am trying to create multiple polygons with common sides as shown in this video

[![](https://img.youtube.com/vi/XO-B3o9vfmA/maxresdefault.jpg "How to draw regular polygons knowing the length of one side - Compilation") ](https://www.youtube.com/watch?v=XO-B3o9vfmA)

Somehow, if I follow the principle of first drawing a hexagon and then dividing the radius into 6 parts to get the offset dimension, I end up drawing the polygons by an offset of a few pixels.

Any idea what I might be doing wrong here?

```auto
int octagon = 8;
int septagon = 7;
int hexagon = 6;
int pentagon = 5;
float c1r = 150;
float shift;
float angle;
void setup(){
  noFill();
  size(400,400);
  shift = 150/6;
  translate(width/2, height/2);
  strokeWeight(4);
  
  //Draw Hexagon first
  angle = TWO_PI/(float)hexagon;
  rotate(-angle/2); // rotate half angle to get straight base
  strokeWeight(1);
  
  beginShape();
  for(int i=0; i<hexagon; i++){
    vertex(c1r*sin(angle*i), c1r*cos(angle*i));
  }
  endShape(CLOSE);

  // Now draw a Septagon (shift up)
  rotate(angle/2); // rotate back to original position
  translate(0,-shift); // shift the center point
  float angle1 = TWO_PI/(float)septagon;
  rotate(-angle1/2); // rotate half angle to get straight base

  beginShape();
  for(int i=0; i<septagon; i++){
    strokeWeight(1);
    vertex((c1r+shift)*sin(angle1*i), (c1r+shift)*cos(angle1*i));
  }
  endShape(CLOSE);
  
  // Now draw a pentagon (shift down)
  rotate(angle1/2); // rotate back to original position
  translate(0,shift*2); // shift the center point
  float angle2 = TWO_PI/(float)pentagon;
  rotate(-angle2/2); // rotate half angle to get straight base

  beginShape();
  for(int i=0; i<pentagon; i++){
    strokeWeight(1);
    vertex((c1r-shift)*sin(angle2*i), (c1r-shift)*cos(angle2*i));
  }
  endShape(CLOSE);
}

```

---

<div class="post-metadata">

### Author: ![CodeMasterX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codemasterx/32/2942_2.png) [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)
#### Post date: [December 28, 2020, 12:16pm UTC](https://discourse.processing.org/t/drawing-polygons-with-common-side/26550/2 "2020-12-28T12:16:59Z")

</div>

here is my take on the problem. I am not really good at reading through other peoples code (I blured it if you don’t want to see it). I define start X and start Y so it always starts there

> **Summary**
>
> ```auto
> float stepSize = 100, cx, cy = 550;
> int n = 5, sn = n;
> 
> void setup() {
> size(600, 600);
> cx = width/2-stepSize/2;
> background(0);
> frameRate(5);
> }
> 
> void draw() {
> stroke(255);
> background(0);
> for (int j = sn; j < n; j++) {
> float a = TWO_PI/j;
> float px = cx, py = cy, x = px, y = py;
> for (int i = 0; i < j; i++) {
> x += cos(-a*i)*stepSize;
> y += sin(-a*i)*stepSize;
> line(px, py, x, y);
> px = x;
> py = y;
> }
> }
> n++;
> }
> 
> ```

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

---

<div class="post-metadata">

### Author: ![CodeMasterX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codemasterx/32/2942_2.png) [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)
#### Post date: [December 28, 2020, 12:18pm UTC](https://discourse.processing.org/t/drawing-polygons-with-common-side/26550/3 "2020-12-28T12:18:47Z")

</div>

My guess is that the inaccuracies stack up. I haven’t read through your code carefully yet so I may be wrong

---

<div class="post-metadata">

### Author: ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)
#### Post date: [December 28, 2020, 12:46pm UTC](https://discourse.processing.org/t/drawing-polygons-with-common-side/26550/4 "2020-12-28T12:46:24Z")

</div>

> [@CodeMasterX](#):
>
> (I blured it if you don’t want to see it).

Hi

More common is the details tag.

---

<div class="post-metadata">

### Author: ![CodeMasterX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codemasterx/32/2942_2.png) [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)
#### Post date: [December 28, 2020, 12:47pm UTC](https://discourse.processing.org/t/drawing-polygons-with-common-side/26550/5 "2020-12-28T12:47:47Z")

</div>

Why not both? : P Double protection

---

<div class="post-metadata">

### Author: ![ssdesign](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ssdesign/32/7221_2.png) [@ssdesign](https://discourse.processing.org/u/ssdesign)
#### Post date: [December 28, 2020, 7:27pm UTC](https://discourse.processing.org/t/drawing-polygons-with-common-side/26550/6 "2020-12-28T19:27:24Z")

</div>

> [@CodeMasterX](#):
>
> m. I am not really good at reading through other peoples code (I blured it if you don’t want to see it). I de

Thanks a lot for sharing your approach.  
Appreciate it.  
Looks like I can try this approach.