----- Coding Tutorial by Patt Vira ----- 

Name: Breathing Jelly w GUI

Video Tutorial: https://youtu.be/YULQUdTSVkQ?si=Ki2j6qR15hc5W6XO

​

Connect with Patt: @pattvira

https://www.pattvira.com/

----------------------------------------

*/

​

// GUI variables

let rotX; let rotY; 

let num; let rez; 

let amp; let speed; 

let button;

​

let angle = 0; let play = true;

​

function setup() {

  createCanvas(600, 400, WEBGL);

  angleMode(DEGREES);

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

  rotY = new Slider("RotY:", 0, 360, 45, 10, 30);

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

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

  speed = new Slider("Speed:", 1, 10, 1, 10, 90);

  amp = new Slider("Amp:", 10, 200, 100, 10, 110);

  loadFont("Roboto-Black.ttf", drawText);

  button = createButton('Play');

  button.mouseClicked(playButton);

  button.position(10, 150);

}

​

function drawText(font) {

  textFont(font, 11);

  fill(255);

}

​

function draw() {

  background(0, 0, 100);

​

  rotX.display();

  rotY.display();

  num.display();

  rez.display();

  speed.display();

  amp.display();

  rotateX(rotX.val);

  rotateY(rotY.val);

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

    push();

    noFill();

    stroke(255, i/num.val*255);

    let depth = amp.val*sin(angle + i);

    translate(100, -50, depth);

    ellipse(0, 0, i, i);

    pop();

  }

  if (play == true) {

    angle += speed.val;

  }

}

​

function playButton() {

  play = !play;

}