var speedUp, speedUpScale;

​

​

function setup() {

    createCanvas(windowWidth, windowHeight);

  // slider to decide the speed 

  aSlider = createSlider(0.5, 5, 1, 0.1);

  aSlider.position(10, 1*windowHeight/20);

  aSlider.style("width", "200px");

    h = hour();

    m = minute();

    s = second(); 

   // https://p5js.org/reference/#/p5/second

}

​

function draw() {

    background(255);

  // Font display information

    fill(0);

    textSize(48);

    textAlign(CENTER)

    frameRate(1)

    text(nf(h,2,0) + ":" + nf(m,2,0) + ":" + nf(s,2,0), width/2 , height/2);

      let speedUpScale = aSlider.value()

        frameRate(speedUpScale);

        clockSpeedText =  speedUpScale + "x";

        s+=1;

        if (s >= 60) {

            s = 0;

        m++;

        }

        if (m >= 60) {

            m = 0;

            h++;

        }

        if (h >= 24) {

            h = 0;

        }

​

text(clockSpeedText, width/2 , height/2 - 100);

//  text(nf(h,2,0) + ":" + nf(m,2,0) + ":" + nf(s,2,0), width/2 , height/2);

}

​

​