Pi_Day27

let n=3,r=0.5;
function setup() {
  createCanvas(400, 400);
  strokeWeight(0.2);
  textSize(16);
  makeButton();
}

function draw() {
  translate(width/2,width/2)
  background(220,230,250);
  fill(255);
  circle(0,0,300);
  fill(230);
  polygon(0,0,150,n);
  line(150,0,0,0);
  fill(0);
  text(r,30,20);
  perimeter=(n*r*2*sin(PI/n));
  apothem=r*cos(PI/n);
  area=0.5*perimeter*apothem;
  text('Perimeter: '+perimeter,-100,width/2-30);
  text('Area: '+area,-100,width/2-10);
  text("Number of Sides: "+n,-width/2+30,-width/2 +30);
  
}
function polygon(x, y, radius, npoints) {
  let angle = TWO_PI / npoints;
  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);
  }
  endShape(CLOSE);
}

function mousePressed(){
  n = n+1;
  nSlider.value(n);
  valueDisp1.html("Number of Sides = " + n);
}

function makeButton(){
  nSlider = createSlider(3, 500, n, 1);
  nSlider.position(20, 420);
  nSlider.size(400,20);
  rSlider = createSlider(0.5, 100, r, 0.5);
  rSlider.position(20, 470);
  rSlider.size(400,20);
  valueDisp1 = createP();
  valueDisp1.position(20, 390);
  valueDisp1.html("Number of Sides = " + n);
  valueDisp2 = createP();
  valueDisp2.position(20, 440);
  valueDisp2.html("Radius " + r) ; 
  nSlider.input(sliderChange1);
  rSlider.input(sliderChange2);
  
}
function sliderChange1(){
    n = nSlider.value();
    valueDisp1.html("Number of Sides = " + n)
  } 
function sliderChange2(){
    r = rSlider.value();
    valueDisp2.html("Radius " + r)
  }