html,
body {
  margin: 0;
  padding: 0;
}
canvas {
  display: block;
}

let ax, ay;
let bx, by;
let cx, cy;
let x, y;
let numPoints = 5;
let angleIncrement = 360 / numPoints;
let slider

function setup() {
  colorMode(HSB)
  createCanvas(windowWidth, windowHeight);
  ax = width / 2;
  ay = 0;
  bx = 0;
  by = height;
  cx = width;
  cy = height;
  x = random(width);
  y = random(height);
  background(0);
  stroke(255);
  strokeWeight(3);
  //point(ax, ay);
  //point(bx, by);
  //point(cx, cy);
  
  slider = createSlider(1, 50, 5,1);
  sliderlerp = createSlider(0, 1,0.5,0.1);
  slider.input(clearScreen);
  slider.position(10, 10);
  sliderlerp.position(140,10);
  sliderlerp.input(clearScreen);
  slider.style('width', '120px');

  angleMode(DEGREES);
}

let newx = 600;
let newy = 600;
let pointDrawnx
let pointDrawny
let randomx;
let randomy;

function draw() {
  
  
  
  numPoints= slider.value();
 
  angleIncrement = 360 / numPoints;
  translate(width / 2, height / 2);
  
  //text(numPoints, 0,1)

  let randomnumber;
  let startAngle = 0;

  for (let k = 0; k < numPoints; k++) {
    x = 300 * cos(startAngle);
    y = 300 * sin(startAngle);

    push()
    stroke(dist(x,y,0,0)-50,100,100)
    point(x, y);
    pop()

    startAngle += angleIncrement;
  }

  for (let k = 0; k < 10; k++) {
    randomnumber = floor(random(numPoints));
    randomx = 300 * cos(angleIncrement * randomnumber);
    randomy = 300 * sin(angleIncrement * randomnumber);

    newx = lerp(newx, randomx, sliderlerp.value());
    newy = lerp(newy, randomy, sliderlerp.value());
    pointDrawnx=randomx
    pointDrawny=randomy
    push()
   
    stroke(dist(newx,newy,0,0)-50,100,100)
    point(newx, newy);
    pop()

  }
 
  push()
  textSize(20)
  stroke("white")
  strokeWeight(0.1)
  textFont('Georgia');
  fill("white")
  text("No. of Points",-width/2+10,-height/2+50)
  text("Ratio",-width/2+180,-height/2+50)
  
  //text("Number of Points",0,0)

  textSize(20)
  text(numPoints,-width/2+10,-height/2+80)
    text(sliderlerp.value(),-width/2+180,-height/2+80)
  pop()
}
   

function clearScreen(){
background("black")
}

//when we used 3 points then we lerped to 1/2
//when we used 4 points then the best lerp was 2/3
//when we used 5 points then the best lerp was 3/4