let circles = [];

function setup() {
  createCanvas(1920,880);
  background(51);
  dl = new drawline();
  lengthSlider = createSlider(1,150,10);
  sizeSlider = createSlider(1,300,100);
  clearButton = createButton("clear");
}

function draw() {
  const l = lengthSlider.value();
  const s = sizeSlider.value();

  background(51);

  dl.update(s, l);
  
  for (let p of circles) {
    p.show();
  }
  //print(clearButton.value());
  clearButton.mousePressed(cleararray);
}
function keyPressed() {
  if(keyCode===32){
  cleararray();
  //background(51);
}
  else
  print("not");
  return false; // prevent any default behaviour
}
function cleararray(){
  circles = [];
}

class drawline {
  constructor() {
    var dir = [1, 1, 1];
    var color = [142, 212, 111];
    this.update = function (size, length) {
      this.size = size;
      this.length = length;
      if (color[0] > 255)
        dir[0] = 0;
      if (color[0] < 50)
        dir[0] = 1;
      if (color[1] > 255)
        dir[1] = 0;
      if (color[1] < 50)
        dir[1] = 1;
      if (color[2] > 255)
        dir[2] = 0;
      if (color[2] < 50)
        dir[2] = 1;
      if (dir[0] == 1)
        color[0] += random(1, 5);
      else
        color[0] -= random(1, 5);
      if (dir[1] == 1)
        color[1] += random(1, 5);
      else
        color[1] -= random(1, 5);
      if (dir[2] == 1)
        color[2] += random(1, 5);
      else
        color[2] -= random(1, 5);

      //print(color[0] + ' ' + color[1] + ' ' + color[2]);
      
      stroke(255, 255, 255);
      //fill(color[0], color[1], color[2]);

      if ((mouseIsPressed)&&(mouseY<=880)){
        if(circles.length>=length){
          circles.shift();
          circles.push(new circle(size, size, color[0],color[1],color[2], mouseX, mouseY));
        }
        else{
          circles.push(new circle(size, size, color[0],color[1],color[2], mouseX, mouseY));
        }
      }
    };
  }
}

class circle{
  constructor(sizex, sizey, r, g, b, mx, my){
    this.sizex = sizex;
    this.sizey = sizey;
    this.r = r;
    this.g = g;
    this.b = b;
    this.mx = mx;
    this.my = my;
  }

  show(){
    fill(this.r,this.g,this.b);
    ellipse(this.mx,this.my,this.sizex,this.sizey);
  }
}