Drawing polygons with common side

Processing Coding Questions
1

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

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

image
image598×598 24.8 KB

3

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

4

Hi

More common is the details tag.

5

Why not both? : P Double protection

6

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