// for this project, you can move cuijian's head to his body and his rap music "blue bones" will play.  

​

let head1, head2, head3, bkgrd;

let blueBones;

var head1X = 0, head1Y = 0;

​

const fireworks = [];

let gravity;

​

​

function preload() {

  bkgrd = loadImage('assets/background.png');

  head1 = loadImage('assets/head1.jpg');

  blueBones = loadSound('assets/blue_bones.mp3');

}

​

function mouseDragged() {

  if ((mouseX > head1X - 100) && (mouseX < head1X + 100) && (mouseY >= head1Y - 75) && (mouseY < head1Y + 75)) {

      head1X = mouseX;

      head1Y = mouseY;

  }

}

​

function setup() {

  createCanvas(400, 500);

  background(0);

  gravity = createVector(0, 0.2);

  stroke(255);

  strokeWeight(4);

}

​

​

​

function draw() {

  colorMode(RGB);

  background('#900000');

  image(bkgrd, 0, 0, width, height);

  image(head1, head1X, head1Y, 125, 100);

  if ((head1X > 80) && (head1X < 160) && (head1Y > 0) && (head1Y < 40)) {

      if(!blueBones.isPlaying()) {

        blueBones.play();

      }

  } else {

    blueBones.stop();

  }

  if(blueBones.isPlaying()) {

    if (random(1) < 0.04) {

      fireworks.push(new Firework());

    }

    for (let i = fireworks.length - 1; i >= 0; i--) {

      fireworks[i].update();

      fireworks[i].show();

​

      if (fireworks[i].done()) {

        fireworks.splice(i, 1);

      }

    }

  }

}

​

class Firework {

  constructor() {

    this.hu = random(255);

    this.firework = new Particle(random(width), height, this.hu, true);

    this.exploded = false;

    this.particles = [];

  }

​

  done() {

    if (this.exploded && this.particles.length === 0) {

      return true;

    } else {

      return false;

    }

  }

​

  update() {

    if (!this.exploded) {

      this.firework.applyForce(gravity);

      this.firework.update();

​

      if (this.firework.vel.y >= 0) {

        this.exploded = true;

        this.explode();

      }

    }

​

    for (let i = this.particles.length - 1; i >= 0; i--) {

      this.particles[i].applyForce(gravity);

      this.particles[i].update();

​

      if (this.particles[i].done()) {

        this.particles.splice(i, 1);

      }

    }

  }

​

  explode() {

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

      const p = new Particle(this.firework.pos.x, this.firework.pos.y, this.hu, false);

      this.particles.push(p);

    }

  }

​

  show() {

    if (!this.exploded) {

      this.firework.show();

    }

​

    for (var i = 0; i < this.particles.length; i++) {

      this.particles[i].show();

    }

  }

}

​

class Particle {

  constructor(x, y, hu, firework) {

    this.pos = createVector(x, y);

    this.firework = firework;

    this.lifespan = 255;

    this.hu = hu;

    this.acc = createVector(0, 0);

    if (this.firework) {

      this.vel = createVector(0, random(-12, -8));

    } else {

      this.vel = p5.Vector.random2D();

      this.vel.mult(random(2, 10));

    }

  }

​

  applyForce(force) {

    this.acc.add(force);

  }

​

  update() {

    if (!this.firework) {

      this.vel.mult(0.9);

      this.lifespan -= 4;

    }

    this.vel.add(this.acc);

    this.pos.add(this.vel);

    this.acc.mult(0);

  }

​

  done() {

    if (this.lifespan < 0) {

      return true;

    } else {

      return false;

    }

  }

​

  show() {

    colorMode(HSB);

​

    if (!this.firework) {

      strokeWeight(2);

      stroke(this.hu, 255, 255, this.lifespan);

    } else {

      strokeWeight(4);

      stroke(this.hu, 255, 255);

    }

​

    point(this.pos.x, this.pos.y);

  }

}