html,
body {
  margin: 0;
  padding: 0;
}
canvas {
  display: block;
}
function setup() {
  createCanvas(window.innerWidth, window.innerHeight);
  angleMode(DEGREES);
  dotSlider = createSlider(3, 300, 3, 1);
  dotSlider.style("width", width + "px");
}
let dots;
let r;
let x1;
let y1;
let x2;
let y2;
let perimeter;
let distance;

let x3;
let y3;
let x4;
let y4;
let Distance;
let Perimeter;
let largerPi;

function draw() {
  background("white");
  Strive.translate(width / 2, height / 2);
  fill("#0F1574");
  stroke("white");
  strokeWeight(1);
  circle(0, 0, width / 2);
  r = width / 4;
  dots = floor(map(mouseX, 0, width, 0, 50));
  fill("white");
  textSize(15);
  text(dots + " sides", -30, 0);
  for (let a = 0; a < dots; a = a + 1) {
    x1 = r * cos((360 / dots) * a);
    y1 = r * sin((360 / dots) * a);
    x2 = r * cos((360 / dots) * (a + 1));
    y2 = r * sin((360 / dots) * (a + 1));
    stroke("#B0EB33");
    strokeWeight(3);
    line(x1, y1, x2, y2);
    distance = sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);
    perimeter = distance * dots;
    stroke("black");
    strokeWeight(1);
    text("smaller perimeter = " + perimeter.toFixed(2), -30, 30);
    //line(x1,y1,x2,y2)
  }

  pi = perimeter / (2 * r);
  fill("blue");
  textSize(20);
  text("The minimum value of pi is " + pi.toFixed(6), -100, width / 4 + 50);

  R = r / cos(360 / (2 * dots));

  for (let b = 0; b < dots; b = b + 1) {
    x3 = R * cos((360 / dots) * b);
    y3 = R * sin((360 / dots) * b);
    x4 = R * cos((360 / dots) * (b + 1));
    y4 = R * sin((360 / dots) * (b + 1));
    stroke("#FF6635");
    strokeWeight(3);
    line(x3, y3, x4, y4);
    Distance = sqrt((x4 - x3) ** 2 + (y4 - y3) ** 2);
    Perimeter = Distance * dots;
    stroke("black");
    strokeWeight(1);
    fill("white");
    textSize(15);
    text("bigger perimeter = " + Perimeter.toFixed(2), -30, 50);
  }

  largerPi = Perimeter / (2 * r);
  fill("blue");
  textSize(20);
  text(
    "The maximum value of pi is " + largerPi.toFixed(6),
    -100,
    width / 4 + 80
  );

  //C = 2 * PI * R
  //Perimeter = C  = 2 * PI * R
  //PI

  // 2 * PI * R < Perimeter
  // PI  < P/2R
}
//0,60,120,180,240,300
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js
  2. https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js
  3. https://cdn.jsdelivr.net/gh/StriveMath/p5-teach/dist/Strive.iife.js