let r; 

let points  = [];

let qty = 1; 

​

let slider;

let sliderNumber;

let buttonStop;

let buttonContinue;

let count = 0;

let table = 2;

let keepGoing = true;

​

​

function setup() {

  if(windowHeight <= windowWidth){

    width = windowHeight*0.8;  

  }

  else{

    width = windowWidth*0.8;  

  }

  r = width/2 - 20;

  let c = createCanvas(width, width);

  c.parent("#container");

  sliderVelocity = createSlider(0, 99, 98);

  sliderNumber = createSlider(0, 100, 2);

  buttonStop = createButton('Stop');

  buttonStop.mousePressed(stopAll);

  buttonResetNumber = createButton('Reset');

  buttonResetNumber.mousePressed(resetNumber);

  let sliders = createDiv().id("sliders");

  sliderVelocity.parent("#sliders");

  sliderNumber.parent("#sliders");

  sliders.parent("#container");

  let buttons = createDiv().id("buttons");

  buttonStop.parent("#buttons");

  buttonResetNumber.parent("#buttons");

  buttons.parent("#container");

}

​

function stopAll(){

  keepGoing = !keepGoing;

  if(keepGoing){

    buttonStop.html('Stop');  

  }

  else{

    buttonStop.html('Continue');  

  }

}

​

function resetNumber(){

  qty = 1;

}

​

​

function draw() {

​

    table = sliderNumber.value();

    count++;

    points = [];

    for(let i = 0; i < 2*PI; i+= 2*PI/qty){

      points.push(new Point(width/2 + cos(i)*r, width/2 + sin(i)*r, r));

    }

    background(0);

    stroke(200);

    noFill();

    strokeWeight(2)

    circle(width/2, width/2, r*2);

​

    strokeWeight(8);

    stroke(0, 200, 150);

    for(let i = 0; i < qty; i++){

      points[i].show();

    }

​

    strokeWeight(2)

    for(let i = 0; i < qty; i++){

      let result = (table*i)%qty;

      line(points[i%qty].x, points[i%qty].y, points[result].x, points[result].y);

    }

    if((count % (100-sliderVelocity.value()) == 0) && keepGoing){

      qty++; 

    }

​

    if(qty >= 150){    

      table++;

      count = 0;

      qty = 1;

      sliderNumber.value(table);

    }

    strokeWeight(1);

    textAlign(RIGHT);

    text(qty + ' points', 70, width-10);

    text(table + ' times table' , width-10, width-15);

}