​

function setup() { 

 createCanvas(600, 600);

  for (let i = 0; i < 10; i++){

  let x;

  let y;

  let r;

  bubbles[i] = new Bubble(x,y,r);

  }

} 

​

function draw() { 

    background(0,0,255,150);

    for (var i=0; i<height; i++){

        stroke(i/height * 250 - 30);

        line(0,i,width,i);

    }

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

        bubbles[i].move();

      bubbles[i].show();

       if (bubbles[i].fill <= 0) {

     bubbles.splice(i,1);

       }

    }

}

class Bubble {

  constructor(x, y, r, _xdir, _ydir){

    this.x = x;

  this.y = y;

  this.r = r;

  this.xdir = _xdir;

  this.ydir = _ydir;

  this.fill = random(200,255);

  this.fade = 255;

  }

  move() {

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

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

    this.x += this.xdir; 

    this.y += this.ydir;

    if (this.y > height || this.y < 0) {

        this.ydir *= -1; 

    }

    if (this.x > height || this.x < 0) {

        this.xdir *= -1; // change direction so blooms out ... 

                                     // for now gravity ... no gravity in final

    }

  }

 show() {

    noStroke();

    fill(this.fill,this.fade);

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

    this.fill = this.fill - 0.4;

    this.fade = this.fade - 0.7;

  }

}

​

function mouseDragged(){

  let r = random(10,30);

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

  bubbles.push(b);

    }

​

function mousePressed(){

  var r = random(10,30);

  var b = new Bubble(mouseX,mouseY,r,0,-1);

  bubbles.push(b);

    }