assignment5-ink.js

var WATER_SURFACE = 100;
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)));
  }

  for (var i = 0; i < 10; i++) {
    ink.push(new Ink(random(width), WATER_SURFACE, random(0.1, 4), 255, 255, 255, 255));

  }

}


function draw() {
  background(255);

  // water
  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();
    }
    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, 0, 0 + 0.001 * frameCount);
      p.color2 = color(0, 0, 0, 0);

    } 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();
  }

  function keyPressed() {
    for (var i = 0; i < ink.length; i++) {
      ink[i].checkBoundaries();
      var gravity = createVector(0, GRAVITY_MAGNITUDE * ink[i].mass);
      ink[i].applyForce(gravity);
      ink[i].color1 = color(255);
      ink[i].vel.y = random(1.0, 2.0);
      ink[i].vel.x = random(-10, 10);
      ink[i].update();
      ink[i].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
    }
  }
}
"use strict";

class Ink {
  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();
  }
  
  
  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
    }
  }
}