// polygonanimator

​

const r = 300;

let detail = 1; // Start with a triangle

let MAX_CORNERS = 20;

let increasing = true;

​

function setup() {

  createCanvas(400, 400);

  frameRate(60); // Slow down animation for visibility

}

​

function draw() {

  background(220);

  centreCircle(r);

  drawNGon(r, detail);

​

  detail += increasing ? 0.05 : -0.05;

  increasing = detail <= 1 || (increasing && detail < MAX_CORNERS);

}

​

function drawNGon(r, detail){

  const angle = TWO_PI / detail;

  const x = 0;

  const y = 0;

  const radius = r/2;

  stroke(0);

  push();

  translate(width / 2, height / 2);

  fill(255, 0, 0, 100);

  // polygon(0, 0, r / 2, detail);

  //function polygon(x, y, radius, npoints) {

  let points = [];

  beginShape();

  for (let a = 0; a < TWO_PI; a += angle) {

    let sx = x + cos(a) * radius;

    let sy = y + sin(a) * radius;

    vertex(sx, sy);

    points.push(createVector(sx, sy))

  }

  endShape(CLOSE);

  let midpoints = [];

  for (const [i, v] of points.entries()){

    if (i==0)continue;

    const v2 = points[i-1];

    midpoints.push(  

      createVector(

        (v.x + v2.x)/2, 

        (v.y + v2.y)/2

    ));

  }

  pop();

}

​

function centreCircle(r){

  stroke(0);

  push();

  translate(width / 2, height / 2);

  fill(0, 0, 255, 100);

  circle(0, 0, r);

  pop();

}

​

​

​

​