// Dragging mouse creates Soap Bubbles

// Hovering over bubbels makes center Grey

// Clicking bubble Pops (hides the bubble)

// At 3 x Diameter the Bubble Pops

// All popped Bubbles are removed (spliced) from the Array

// By Bas Vogel

// URI: https://basvogel.nl

​

let WID, HIG, DIS;

let Bubbles = [];

let i;

​

function setup() {

  WID = windowWidth;

  HIG = windowHeight;

  createCanvas(WID,HIG);

}

​

function draw() {

  background(10);  // Nice and Dark

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

    Bubbles[i].isOver(mouseX,mouseY);

    Bubbles[i].show();

    Bubbles[i].move();

    if (Bubbles[i].Show != true) {

      Bubbles.splice(i,1); // Remove Bubble when Show not 1

    }

  }

//  print(i);  // Show number of living Bubbles

}

​

function mouseDragged() {

  let b = new Bubble(30);

  Bubbles.push(b);

}

​

function mousePressed() {

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

    Bubbles[i].isClicked(mouseX,mouseY);

  }

}

​

class Bubble {

  constructor(){

    this.x = mouseX;

    this.y = mouseY;

    this.d = random(2,70); // Diameter

    this.R = random(220);  // Border Red

    this.G = random(220);  // Border Green

    this.B = random(220);  // Border Blue

    this.S = random(220);  // Border Alpla

    this.FA = 0; // Alpha = doorzichtig / geen invulling

    this.Show = 1;

  }

  move() {

    this.x = this.x + random(-3,4);  // The Bubbles Jiggle a little

    this.y = this.y + random(-2,0);           // But always move up

                                          // At the Edges turn back

    if (this.x > WID - 2 * this.d) {this.x = WID - 2 * this.d;}

    if (this.x < 2 * this.d) {this.x = 2 * this.d;}

  }

  isClicked(mX,mY){                            // Popp when Clicked

    DIS = dist(this.x,this.y,mX,mY);

      if (DIS <= this.d) {this.Show = false; }    // Let it Ploppen

  }

​

  isOver(mX,mY){                                         // On Over

    DIS = dist(this.x,this.y,mX,mY);

    if (DIS <= this.d) {

      this.FA = 200; 

    } else { 

      this.FA = 0;

    }

  } 

​

  show() {                                       // The Real Drawing

    stroke(this.R,this.G,this.B,this.S);

    strokeWeight(2);

    fill(100,100,120,this.FA);    // Dark Blueish. FA based on Hover

    if (this.Show == true) {

      if (this.y > 3 * this.d)  {

            // The regular Size when Distance more than 3 x Diameter

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

      } else if (this.y > 2.6 * this.d){

                        // Increase Size a littel more near the Edge

        ellipse(this.x, this.y, 1.4 * this.d);      

      } else {

                                // Hide the Bubble (Pop) at the Edge 

        this.Show = false;

      }

    }

  }

}

​