assignment5-bubble.js

var WATER_SURFACE = 200;
var GRAVITY_MAGNITUDE = 3;


var particles = [];
var ink = [];


function setup() {
  createCanvas(500, 600);
  background(255);
  for (var i = 0; i < 60; i++) {
    particles.push(new Particle(random(width), random(WATER_SURFACE, height), random(0.1, 4), 0, 0, 255, random(200)));
  }


}


function draw() {
  background(255);

  // water

  noStroke();
  fill(0, 0, 100);
  rect(0, WATER_SURFACE, width, height - WATER_SURFACE);




  for (var i = 0; i < particles.length; i++) {
    var p = particles[i];
    p.checkBoundaries();
    //gravity
    var gravity = createVector(0, GRAVITY_MAGNITUDE * p.mass);
    p.applyForce(gravity);
    //stir
    if (mouseIsPressed) {
      p.stir();
      stroke(255, 50);
      fill(0, 0, 100, 100);
      ellipse(width / 2, (height + WATER_SURFACE) * 0.75, random(width * 0.9), random((height - WATER_SURFACE) / 2));
    }
    var friction = p5.Vector.mult(p.vel, -1);
    // resistance
    if (p.pos.y < WATER_SURFACE + p.rad) {
      p.pos.y = WATER_SURFACE;
      p.color1 = color(0, 0, 200 - frameCount * 0.1);
      p.color2 = color(255);
      p.rad = 1;
      // for (var i = 0; i < 5; i++) {
      //   particles.push(new Particle(random(width), WATER_SURFACE, random(0.1, 4), 0, 0, 255, random(200)));
      //   particles[i].update;
      //   particles[i].display;
      // }

      friction.mult(-1);
      friction.add(random(-0.1, 0.1), random(0.2, 1));

    } else if (p.pos.y > WATER_SURFACE + p.rad && p.pos.y < height) {
      // liquid resistance
      friction.mult(0.95);
      // buoyancy
      var buoyancy = createVector(0, -20 / p.rad);
      p.applyForce(buoyancy);
      p.color1 = color(255, 255, 255, 100);
      p.color2 = color(0, 0, 200, 100);

    } else if (p.pos.y = height) {
      p.color1 = color(0, 0, 200);
      p.color2 = color(0, 0, 200, 255 - 0.01 * frameCount);

    }
    p.applyForce(friction);

    // update
    p.update();

    // display
    p.display();
  }

}
"use strict";

class Particle {
  constructor(x, y, m, r, g, b, a) {
    this.pos = createVector(x, y);
    this.vel = createVector(0, 0);
    this.acc = createVector(0, 0);
    this.mass = m;
    this.rad = random(2, 10);
    this.color1 = color(r, g, b, a);
    this.color2 = color(r, g, b, a);


  }
  applyForce(f) {
    f.div(this.mass);
    this.acc.add(f);
  }
  update() {
    this.vel.add(this.acc); // vel = vel + acc;
    this.pos.add(this.vel); // pos = pos + vel;
    this.acc.mult(0); // acceleration has to be reset after being applied! ***
  }
  display() {
    push();
    translate(this.pos.x, this.pos.y);
    stroke(this.color1);
    fill(this.color2);
    ellipse(0, 0, this.rad * 2, this.rad * 2);
    pop();
  }
  blowUp(r, g, b) {
    this.redValue = 0;
    this.greenValue = 0;
    this.blueValue = 0;
  }
  stir() {
    var stirVec = createVector(random(width), random(height - 100, height));

    this.acc = p5.Vector.sub(stirVec, this.pos);
    this.acc.mult(random(0.1, 0.98));
    this.vel.add(this.acc);
    this.vel.mult(random(0.1, 0.98));
    this.pos.add(this.vel);
  }
  
  checkBoundaries() {
    // x
    if (this.pos.x < 0) {
      this.pos.x = 0;
      this.vel.x = -this.vel.x;
      this.vel.mult(0.5); // restitution
    } else if (this.pos.x > width) {
      this.pos.x = width;
      this.vel.x = -this.vel.x;
      this.vel.mult(0.5); // restitution
    }
    // y
    if (this.pos.y < 0) {

      this.vel.mult(0.7); // restitution
    } else if (this.pos.y > height) {
      this.pos.y = height;
      this.vel.y = -this.vel.y;
      //this.vel.mult(0.7); // restitution
    }
  }
}