let rotX; let rotY; 

let speed; let rez; 

let depth; let num; let button; 

​

// Movement

let moveAngle = true; 

let angle = 0;

​

function setup() {

  createCanvas(600, 400, WEBGL);

  angleMode(DEGREES);

  rotX = new Slider("RotX:", 0, 360, 45, 0);

  rotY = new Slider("RotY:", 0, 360, 15, 1);

  speed = new Slider("Speed:", 0, 5, 1, 2);

  rez = new Slider("Rez:", 1, 10, 3, 3);

  depth = new Slider("Depth:", 0, 100, 50, 4);

  num = new Slider("Num:", 1, 400, 300, 5);

  button = createButton('Play');

  button.mouseClicked(playButton);

  button.position(20, 160);

  // Setting up text

  loadFont('Kanit-Black.ttf', drawText);

}

​

function drawText(font) {

  textFont(font, 11);

  fill(255);

}

​

function draw() {

  background(0, 0, 100);

  // Drawing Sliders 

  rotX.display();

  rotY.display();

  speed.display();

  rez.display();

  depth.display();

  num.display();

  // Drawing Shape

  rotateX(rotX.val);

  rotateY(rotY.val);

  for (let i=0; i<num.val; i+=rez.val) {

    stroke(255, i/360*255);

    push();

    noFill();

    translate(100, -50, depth.val*sin(angle + i));

    ellipse(0, 0, i, i);

    pop();

  }

  if (moveAngle) {

    angle += speed.val;

  } 

}

​

function playButton() {

  moveAngle = !moveAngle;

}

​

​