let bubbles = [];

let flower;
let kittens = [];


// load new images: 

function preload() {
    flower     = loadImage('/uploads/codingtrain/flower.png'    );
 
    kittens[0] = loadImage('/uploads/codingtrain/kitten0.jpg'   );
    kittens[1] = loadImage('/uploads/starter/baby.1.png'        );
    kittens[2] = loadImage('/uploads/starter/ghost.3.png'       );
    kittens[3] = loadImage('/uploads/starter/green.alien.png'   );
    kittens[4] = loadImage('/uploads/starter/pacman.jpg'        );
}


// make some music 
    var music = new Audio ( "/uploads/starter/nursery.2.mp3" );
    music.play();
        
        
        

function setup() {
  createCanvas(600, 400);
  for (let i = 0; i < 10; i++) {
    let x = random(width);
    let y = random(height);
    let r = random(50, 150);
    // let kitten = random(kittens);
    let b = new Bubble(x, y, r);
    bubbles.push(b);
  }
}

function mousePressed() {
  for (let i = 0; i < bubbles.length; i++) {
    bubbles[i].clicked(mouseX, mouseY);
  }
}


function draw() {
  background(0);
  for (let i = 0; i < bubbles.length; i++) {
    bubbles[i].move();
    bubbles[i].show();
  }
}

class Bubble {
  constructor(x, y, r, img) {
    this.x = x;
    this.y = y;
    this.r = r;
    this.kitten = random(kittens);

  }

  clicked(px, py) {
    //let d = dist(px, py, this.x, this.y);
    //if (d < this.r) {
    if (px > this.x && px < this.x + this.r && py > this.y && py < this.y + this.r) {
      this.kitten = flower; //random(kittens);
    }
  }

  move() {
    this.x = this.x + random(-2, 2);
    this.y = this.y + random(-2, 2);
  }

  show() {
    image(this.kitten, this.x, this.y, this.r, this.r);
    // stroke(255);
    // strokeWeight(4);
    // fill(this.brightness, 125);
    // ellipse(this.x, this.y, this.r * 2);
  }
}