let secondsRadius;

let minutesRadius;

let hoursRadius;

let clockDiameter;

let detailY;

​

function setup() {

  createCanvas(500, 500, WEBGL);

  describe('a rotating white torus');

  //createCanvas(windowWidth, windowHeight);

  detailY = createSlider(3, 16, 3);

  detailY.position(10, height + 5);

  detailY.style('width', '80px');

  describe(

    'a rotating white torus with limited Y detail, with a slider that adjusts detailY'

  );

  //rectMode(CENTER);

  colorMode (HSB);

}

​

function draw() {

  background(frameCount%360,100,200);

  rotateX(frameCount * 100);

  rotateY(frameCount * 100);

  torus(30, 150);

  let rectWH = min(width, height/2);

  let cx = width/2;

  let cy = height/2;

  let bgColor = second()%200;

if (bgColor ==200){

background(20);

}else {

background(frameCount%360,50,50);

  rotateY(millis() / 1000);

  torus(30, mouseX, 16, detailY.value());

 rotateX(frameCount * 5);

  rotateY(frameCount * 5);

  torus(100, 105);

}

  stroke(frameCount%360,100,50);

  strokeWeight(10)

  fill(frameCount%360,150,10);

  rect(cx, cy, rectWH, rectWH);

}

function mousePressed() {

    let fs = fullscreen();

    fullscreen(!fs);

  }

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

}