let bubbles = [];

// let bubble;

​

function setup() {

  createCanvas(400, 400);

  //for loops loops a bubble 5 times

}

​

//checked to see if mouse is pressed anywhere then goes inside the class to see if it's in the bubble

// function mousePressed() {

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

//     bubbles[i].clicked(mouseX,mouseY);

//   }

// }

​

// function mouseDragged() {

//   let radius = random(5, 65);

//   let s = 2.5;

//   let a = random(255);

//   let b = new Bubble(mouseX, mouseY, radius, radius, s, a);

//   bubble.push(b);

// }

​

//code to delete a bubble when you mouse press

function mouseDragged() {

  //i have to loop through the array defined above. iterating down from the array is best practice

​

  //set my variables

  // let x = random(width);

  // let y = random(height);

  let r = 60;

  //defines a new bubble from my class Bubble and passes my variables to the constructor

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

  //pushes a bubble to the end of the array that i made

  bubbles.push(b);

  // for (let i = 0; i < 700; i++) {

  //   // let x = random(0, 400);

  //   // let y = random(0, 400);

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

  //   // let s = 2.5;

  //   // let a = random(50);

  //   // bubble[i] = new Bubble(x, y, r, s, a);

  // }

  if (bubbles.length > 30) {

    bubbles.splice(0, 1);

  }

}

​

function mousePressed() {

  //i have to loop through the array defined above. iterating down from the array is best practice

  for (let i = bubbles.length - 1; i >= 0; i--) {

    if (bubbles[i].contains(mouseX, mouseY)) {

      //special code to delete an index from an array

      bubbles.splice(i, 1);

    }

  }

}

function draw() {

  background(0);

  // bubbles.move();

  // bubbles.show();

  //executes the contains and changeColor from the class, while looping through the bubbles array that I made up top

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

    if (bubbles[i].contains(mouseX, mouseY)) {

      bubbles[i].changeColor();

    } else {

      bubbles[i].changeBack();

    }

​

    //excutes the show and move from the class

    bubbles[i].move();

    bubbles[i].show();

  }

}

​

//let's make a class

class Bubble {

  //recieves the variables that I assigned as arguments in new Bubble()

  constructor(x, y, r) {

    //define my variables. make sure u remeber this.. Then I assigned my variables to the variable I assigned in setup to create synergy

    this.x = x;

    this.y = y;

    this.radius = r;

    this.brightness = 0;

    // this.s = s;

    // this.a = a;

  }

  //this just determines when my mouse is in a bubble. for the interactive portion

  contains(mx, my) {

    let d = dist(mx, my, this.x, this.y);

    if (d < this.radius - 30) {

      console.log("contained!");

      return true;

    } else {

      return false;

    }

  }

​

  // this sets the bubble fill to white when my mouse in in the bubble written in the above. but i could've passed a parameter through bubble.changecolor(fillColor)

  changeColor() {

    this.brightness = 255;

  }

​

  //sets bubble fill to black when mouse is outside a bubble

  changeBack() {

    this.brightness = 0;

  }

  //this is the animation stuff

  move() {

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

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

    // this.a += random(5, -5);

    // this.s += random(0.2, -0.2);

    if (

      this.x < 0 - this.radius ||

      this.x > 400 + this.radius

      // this.s > 4.5

    ) {

      this.x = 200;

      // this.s = 1;

    }

    if (this.y < 0 - this.radius || this.y > 400 + this.radius) {

      this.y = 200;

    }

  }

  //this is all the cosmetic stuff

  show() {

    stroke(255);

    // strokeWeight(this.s);

    fill(this.brightness, 100);

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

  }

}

​