bubbles

p5-bubbles.js

var system;

function setup() {
  createCanvas(windowWidth, windowHeight);
	frameRate(60);
	pixelDensity(1);
  system = new ParticleSystem(createVector(-20, height+80));
}

function draw() {
  background(255);
  system.addParticle(0.15);
  system.run();
}

// A simple Particle class
var Particle = function(position) {
  this.acceleration = createVector(0, -0.025);
  this.velocity = createVector(random(0, 0.5), random(-1, -0.5));
  this.position = position.copy();
  this.lifespan = 3000;
	this.size = random(20, 40);
	// red: 0, 35; yellow: 35, 50; green: 110, 120;
	// blue: 190, 215; magenta: 340, 355;
	this.ctable = [random(0, 35), random(35, 50), random(190, 215), random(340, 355)];
	this.cseed = 'hsla('+ floor(random(this.ctable)) +', 100%, 50%, 0.85)';
	this.color = color(this.cseed);
};

Particle.prototype.run = function() {
  this.update();
  this.display();
};

// Method to update position
Particle.prototype.update = function(){
  // this.velocity.add(this.acceleration);
	var mid = (windowHeight/16)*9;
	var midDist;
	if (mid > this.position.y) {
		midDist = mid - this.position.y;
	} else {
		midDist = this.position.y - mid;
	}
	midDist = norm(midDist, mid, 0);
	midDist = sq(midDist);
	
	var edgeDist;
	edgeDist = windowWidth - this.position.x;
	edgeDist = norm(edgeDist, windowWidth, 0);
	edgeDist = sq(edgeDist);
	
	var heightMod = createVector(midDist-edgeDist*0.3, midDist*0.75-edgeDist);
	var vec = this.velocity.copy();
	vec.add(heightMod);
  this.position.add(vec);
  this.lifespan -= 1;
};

// Method to display
Particle.prototype.display = function() {
	noStroke();
  fill(this.color);
  ellipse(this.position.x, this.position.y, this.size, this.size);
};

// Is the particle still useful?
Particle.prototype.isDead = function(){
  return this.lifespan < 0;
};

var ParticleSystem = function(position) {
  this.origin = position.copy();
  this.particles = [];
};

ParticleSystem.prototype.addParticle = function(chance) {
	if (random(0, 1) <= chance) {
		this.particles.push(new Particle(this.origin));
	}
};

ParticleSystem.prototype.run = function() {
  for (var i = this.particles.length-1; i >= 0; i--) {
    var p = this.particles[i];
    p.run();
    if (p.isDead()) {
      this.particles.splice(i, 1);
    }
  }
};