​

function setup() {

  createCanvas(600, 400); //why after taking this out, it doesn't draw?

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

  //   let x = random(width);

  //   let y = random(height);

  //   let r = random(5,50);

  //   bubbles[i] = new Bubble(x, y, r, 250, 10, 200);

  // }

}

​

function mouseDragged() {

  let r = random(5, 50);

  let colr = random(50, 200);

  let colg = random(0, 100);

  let colb = random(50, 255);

  let b = new Bubble(mouseX, mouseY, r, colr, colg, colb);

​

  bubbles.push(b); //why does the color of the first bubble keep changing?

}

​

function draw() {

  background(20);   //why does the error appears when I change "bubbles.length" to number?

  for (i = 0; i < bubbles.length; i++) {

    bubbles[i].move();

    bubbles[i].show();

    bubbles[i].col();

  }

}

​

class Bubble {

  constructor(_x, _y, _r, _colr, _colg, _colb) {

    this.x = _x;

    this.y = _y;

    this.r = _r;

    this.colr = _colr;

    this.colg = _colg;

    this.colb = _colb;

  }

​

  move() {

    this.x = this.x + random(-5, 5);

    this.y = this.y + random(-5, 5);

  }

​

  show() {

    noStroke();

    ellipse(this.x, this.y, this.r);

  }

​

  col() {

    fill(this.colr, this.colg, this.colb, 50);

    // this.colr = random(50, 200);

    // this.colg = random(0, 100);

    // this.colb = random(50, 255);

  }

​

}

​

function Heart(){

}