let xMotion = 0;

let yMotion = 0;

let colors = [0,0,0];

let colorsCircle = [0,0,0];

let paramsA = [0,0,0,0];

let paramsB = [0,0,0,0];

let counter = 0;

let toggleLeft = 10;

let toggleRight = 10;

let factor = 1/2;

​

let angle = [];

​

function setup() {

  createCanvas(600, 600);

  for(let i = 0; i < 3; i++){

    colors[i] = random(0,255);

  }

  for(let j = 0; j < 100; j++){

    angle.push(j);

  }

}

​

function draw() {

  if(onOff > 0)

    drawTrue();

  else{

    drawPaused();

  }

  button = circle(300,300,10);

}

​

function mouseClicked(){

  if(dist(mouseX, mouseY, 300, 300) <= 10)

    onOff *= -1;

  else if(dist(mouseX, mouseY, 110,400) <= 20 && toggleLeft > 1){

    toggleLeft--;

    console.log(toggleLeft);

  }

  else if(dist(mouseX, mouseY, 160,400) <= 20 && toggleLeft < 10){

    toggleLeft++;

    console.log(toggleLeft);

  }

  else if(dist(mouseX, mouseY, 420,400) <= 20 && toggleRight > 1){

    toggleRight--;

    console.log(toggleRight);

  }

  else if(dist(mouseX, mouseY, 510,400) <= 20 && toggleRight < 10){

    toggleRight++;

    console.log(toggleRight);

  }

  else if(dist(mouseX, mouseY, 100,525) <= 25){

    factor = 1/2;

  }

  else if(dist(mouseX, mouseY, 300,525) <= 25){

    factor = 1;

  }

  else if(dist(mouseX, mouseY, 500,525) <= 25){

    factor = 2;

  }

}

​

function drawPaused(){

  background(255);

  textSize(100);

  fill(0);

  text('Paused', 150, 200);

  triangle(100, 400, 120, 380, 120, 420);

  triangle(170, 400, 150, 380, 150, 420);

  triangle(430, 400, 450, 380, 450, 420);

  triangle(500, 400, 480, 380, 480, 420);

  fill(255);

  rect(75, 500, 50,50);

  rect(275, 500, 50,50);

  rect(475, 500, 50,50);

  textSize(25);

  fill(0);

  text('1/2', 80, 525);

  text('1', 290, 525);

  text('2', 480, 525);

  text("Toggle Left", 75, 350);

  text("Toggle Right", 400, 350);

  text("Sin Factor", 250, 470);

}

​

function drawTrue(){

  background(colors[0], colors[1], colors[2]);

  fill(colors[0],colors[1],colors[2])

  stroke(colors[0]);

  strokeWeight(10);

  if(xMotion < 610 && yMotion > -10){

    xMotion ++;

    yMotion --;

  }

  else{

    xMotion = -10;

    yMotion = 610;

    paramsA = [0,0,0,0];

    paramsB = [0,0,0,0];

  }

  if(counter == 10){

    randomColor(colors);

    counter = 0;

    randomParam(paramsA);

    randomParam(paramsB);

  }

  drawBezierX(xMotion, paramsA);

  drawBezierY(yMotion, paramsB);

  counter++;

  for(let i = 0; i < 100; i++){

    let x1 = 0;

    let y1 = 0;

    strokeWeight(1);

    if(i % 2 == 0){

      x1 = 300 + toggleLeft * i * sin(angle[i]);

      y1 = 300 + toggleLeft * i * cos(angle[i]);

    }

    else{

      x1 = 300 + toggleRight * i  * cos(angle[i]);

      y1 = 300 + toggleRight * i * factor * sin(angle[i]);

    }

    randomColor(colorsCircle);

    fill(colorsCircle[0], colorsCircle[1], colorsCircle[2])

    circle(x1, y1, i * 1);

    circle(y1, x1, i * 1);

  }

  for(let j = 0; j < 100; j++){

    angle[j] += 0.0314 + (j * 0.001);

  }

}

​

function randomColor(colorsArr){

  for(let i = 0; i < 3; i++){

    colorsArr[i] += random(-15,15);

  }

}

​

function drawBezierX(dirX, param){

  bezier(dirX + param[0], dirX + param[0], dirX + 10, dirX + 10 + param[1], dirX + 20, dirX + 20 + param[2], dirX + 30,dirX + 30 + param[3]);

}

function drawBezierY(dirY, param){

  bezier(dirY + param[0], dirY + param[0], dirY + 10, dirY + 10 + param[1], dirY + 20, dirY + 20 + param[2], dirY + 30, dirY + 30 + param[3]);

}

​

function randomParam(param){

  for(let i = 0; i < 4; i++){

    param[i] += random(-30,30);

  }

}

​