Shattering Pieces 3.0

var pieces = []; // ---> array of shattering pieces

var travelSpeed = 500;

var speed;

var k = 0;

var block;

var maxDepth = 5;

var shatter = false;

var start = 0;

var duration = 2000;

​

// ---> load sound file

function preload() {

  soundFormats('mp3', 'ogg');

  song = loadSound('ambient.mp3');

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  block = new Bk(createVector(-2,-2), createVector(windowWidth+2, -2), createVector(windowWidth+2,windowHeight+2), createVector(-2, windowHeight+2), 0);

  stroke(0,255,255);

  strokeWeight(1);

  fill(0);

  smooth();

}

​

function mousePressed() {

  if (song.isPlaying()) { // ---> .isPlaying() returns a boolean

    song.stop();

  } 

  else {

    song.play();

    block.drop();

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

     pieces[i] = new Piece();

    }

  }

}

​

function draw() {

  // ---> run the shattering function once

  if(shatter){

    var p = ((millis() - start) / duration);

    if (p >= 1) {

      background(255);

      block = new Bk(createVector(-2,-2), createVector(windowWidth+2, -2), createVector(windowWidth,windowHeight), createVector(-2, windowHeight), 0);

      shatter = false;

    } 

  } else {

    background(255 - abs(mouseX-windowWidth/2)/2 - abs(mouseY-windowHeight/2)/2);

  }

  block.draw();

  speed = map(travelSpeed - abs(mouseX-windowWidth/2)/2 - abs(mouseY-windowHeight/2)/2, 0, width, 0, 150);

  translate(mouseX, mouseY); //move about the mouse

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

    strokeWeight(1.5);

    // ---> draw the rays

    if (k == 1){    

      stroke(random(3, 20), random(142, 229), random(23, 49), 20); //random color from bright syan to blue

      line(0, 0, random(-width, width), random(-height, height));

    }

    else if (k == 2){

      stroke(random(251, 229), random(167, 108), random(4, 0), 15); //random transparent color from  to

      line(0, 0, random(-width, width), random(-height, height));

    }

    else if (k == 3){

      stroke(random(0, 37), random(253, 10), random(244, 237), 30);

      line(0, 0, random(-width, width), random(-height, height));

      line(0, 0, random(-width, width), random(-height, height));

    }

    else if (k == 4){

      stroke(237, 10, 10, 15); //random transparent grayscale color from black to white

      line(0, 0, random(-width, width), random(-height, height));

    }

    else if (k == 5){

      k = 0;

    }

    k++;

    pieces[i].update();

    pieces[i].display();

  }

}

​

// ---> shattering effect

function Bk(posA, posB, posC, posD, depth){

  this.x = 0;

  this.y = 0;

  this.yv = 0;

  this.a = 0;

  this.av = random(-0.1, 0.1);

  this.gravity = random(2.5, 3); // ---> speed of dropping

  var avgX = (posA.x + posB.x + posC.x + posD.x)/4;

  var avgY = (posA.y + posB.y + posC.y + posD.y)/4;

  this.centerPos = createVector(avgX, avgY);

  this.posA = posA;

  this.posB = posB;

  this.posC = posC;

  this.posD = posD;

  this.depth = depth;

​

  var r = random(0.3, 0.9);

  var startX = ((posD.x - posA.x) * r) + posA.x;

  var startY = ((posD.y - posA.y) * r) + posA.y;

  this.lineStart = createVector(startX, startY);

  r = random(0.3, 0.7);

  var endX = ((posC.x - posB.x) * r) + posB.x;

  var endY = ((posC.y - posB.y) * r) + posB.y;

  this.lineEndTarget = createVector(endX, endY);

  this.lineEnd = this.lineStart.copy();

  this.children = [];

  this.drawing = false;

  if(this.depth < maxDepth){

    this.drawing = true;

  }

  this.drawingDuration = random(500,2000);

  this.drawingStart = millis();

  this.dropping = false;

  this.dead = false;

}

​

Bk.prototype = {

  constructor:Bk,

​

  draw:function(){

    // ---> draw a line from a random point on the left edge to a random point on the right edge

    this.handleDrawing();

    if(this.children.length == 0){

      // ---> draw the block given the four points provided

      push();

      translate(this.x, this.y);

      translate(this.centerPos.x, this.centerPos.y);

      rotate(this.a);

      translate(0-this.centerPos.x, 0-this.centerPos.y);

      beginShape();

      vertex(this.posA.x, this.posA.y);

      vertex(this.posB.x, this.posB.y);

      vertex(this.posC.x, this.posC.y);

      vertex(this.posD.x, this.posD.y);

      endShape(CLOSE);

      pop();

      if (!this.dropping) {

        line(this.lineStart.x, this.lineStart.y, this.lineEnd.x, this.lineEnd.y);

      } else {

        if (this.y > 1000) {

          this.dead = true;

        }

      }

    } else {

      var bothdead = true;

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

        this.children[i].draw();

        if (!this.children[i].dead) {

          bothdead = false;

        }

      }

      if (bothdead) {

        this.dead = true;

      }

    }

​

    if (this.dropping) {

      this.a += this.av;

      this.yv += this.gravity;

      this.y += this.yv;

    }

  },

​

  drop:function(){

    this.drawing = false;

    this.dropping = true;

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

      this.children[i].drop();

    }

  },

​

  handleDrawing:function(){

    if (this.drawing) {

      var p = (millis() - this.drawingStart) / this.drawingDuration;

      if (p >= 1) {

        this.drawing = false;

        this.lineEnd = this.lineEndTarget.copy();

        // ---> create two new blocks on either side of the line and draw those instead.

        var blockA = new Bk(this.posB, this.lineEnd, this.lineStart, this.posA, this.depth+1);

        var blockB = new Bk(this.lineEnd, this.posC, this.posD, this.lineStart, this.depth+1);

        this.children.push(blockA);

        this.children.push(blockB);

      } else {

        this.lineEnd.x = ((this.lineEndTarget.x - this.lineStart.x) * this.sinProgress(p)) + this.lineStart.x;

        this.lineEnd.y = ((this.lineEndTarget.y - this.lineStart.y) * this.sinProgress(p)) + this.lineStart.y;

      }

    }

  },

​

  sinProgress:function(p){

    return -0.5 * (cos(PI*p) - 1);

  }

}

​

​

// ---> create pieces + movement of the pieces

function Piece() {

  this.x = random(-width, width);

  this.y = random(-height, height);

  this.z = random(width);

  this.pz = this.z;

  this.update = function() {

    this.z -= speed;

    if (this.z < 1) {

      this.z = width;

      this.x = random(-width, width);

      this.y = random(-height, height);

      this.pz = this.z;

  }

  this.display = function() {

​

    var sx = map(this.x/this.z, 0, 1, 0, width);

    var sy = map(this.y/this.z, 0, 1, 0, height);

    var px = map(this.x/this.pz, 0, 1, 0, width);

    var py = map(this.y/this.pz, 0, 1, 0, height);

​

    this.pz = this.z;

    stroke(random(0,100), random(50,200), random(100,250));

    strokeWeight(12);

    quad(px, py, sx, sy);  

  }

 }    

​

}