​

let padding = 20;

let textPadding = 130; 

let textPaddingX = 170; let textPaddingY = padding + 13;

​

let rotX; let rotXSlider; let rotXText; 

let rotY; let rotYSlider; let rotYText; 

​

let speed; let speedSlider; let speedText;

let rez; let rezSlider; let rezText;

let depth; let depthSlider; let depthText;

let num; let numSlider; let numText;

​

let button; 

let moveAngle = true; 

​

function setup() {

  createCanvas(600, 400, WEBGL);

  angleMode(DEGREES);

  // Setting up sliders and buttons

  rotXSlider = createSlider(0, 360, 45);

  rotXSlider.position(padding, padding + 0*padding);

  rotXSlider.size(100);

  rotYSlider = createSlider(0, 360, 15);

  rotYSlider.position(padding, padding + 1*padding);

  rotYSlider.size(100);

  speedSlider = createSlider(0, 5, 1);

  speedSlider.position(padding, padding + 2*padding);

  speedSlider.size(100);

  rezSlider = createSlider(1, 10, 3);

  rezSlider.position(padding, padding + 3*padding);

  rezSlider.size(100);

  depthSlider = createSlider(0, 100, 50);

  depthSlider.position(padding, padding + 4*padding);

  depthSlider.size(100);

  numSlider = createSlider(1, 400, 300);

  numSlider.position(padding, padding + 5*padding);

  numSlider.size(100);

  button = createButton('Play');

  button.mouseClicked(playButton);

  button.position(padding, 8*padding);

  // Setting up text

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

}

​

function drawText(font) {

  textFont(font, 11);

  fill(255);

}

​

function draw() {

  background(0, 0, 100);

  rotX = rotXSlider.value();

  rotY = rotYSlider.value();

  speed = speedSlider.value();

  rez = rezSlider.value();

  depth = depthSlider.value();

  num = numSlider.value();

​

  text("RotX:", -width/2 + textPadding, -height/2 + textPaddingY + 0*padding);

  text("RotY:", -width/2 + textPadding, -height/2 + textPaddingY + 1*padding);

  text("Speed:", -width/2 + textPadding, -height/2 + textPaddingY + 2*padding);

  text("Rez:", -width/2 + textPadding, -height/2 + textPaddingY + 3*padding);

  text("Depth:", -width/2 + textPadding, -height/2 + textPaddingY + 4*padding);

  text("Num:", -width/2 + textPadding, -height/2 + textPaddingY + 5*padding);

  text(rotX, -width/2 + textPaddingX, -height/2 + textPaddingY + 0*padding);

  text(rotY, -width/2 + textPaddingX, -height/2 + textPaddingY + 1*padding);

  text(speed, -width/2 + textPaddingX, -height/2 + textPaddingY + 2*padding);

  text(rez, -width/2 + textPaddingX, -height/2 + textPaddingY + 3*padding);

  text(depth, -width/2 + textPaddingX, -height/2 + textPaddingY + 4*padding);

  text(num, -width/2 + textPaddingX, -height/2 + textPaddingY + 5*padding);

  rotateX(rotX);

  rotateY(rotY);

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

    stroke(255, i/360*255);

    push();

    noFill();

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

    let s = i/360 * 360; 

    ellipse(0, 0, s, s);

    pop();

  }

  if (moveAngle) {

    angle += speed;

  } 

//   console.log("RotX:", rotX, "RotY: ", rotY, "Speed:", speed, "Resolution: ", rez, "Depth:", depth, "Num: ", num);

}

​

function playButton() {

  moveAngle = !moveAngle;

}