# Drawing polygons with common side

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

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?

``````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);
}
``````

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
``````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++;
}
``````

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

Hi

More common is the details tag.

Why not both? : P Double protection

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