let def_img;

let shrek_img;

let frameCount;

let click_counter;

let click_bool;

let colors = [];

let note_names = ['C', 'D', 'E', 'F', 'G', 'A', 'B', 'C']

let sel;

let fr = 25; // Default frame rate

​

let C = [1, 0, 1, 0, 1, 0, 0, 1];

let D = [0, 1, 0, 0, 0, 1, 0, 0];

let F = [1, 0, 0, 1, 0, 1, 0, 0];

let G = [0, 1, 0, 0, 1, 0, 1, 0];

let A = [0, 0, 1, 0, 0, 1, 0, 0];

let Am =[1, 0, 1, 0, 0, 1, 0, 0];

let E7 =[0, 1, 1, 0, 0, 0, 1, 0];

let Em =[0, 0, 1, 0, 1, 0, 1, 0];

let Dm =[0, 1, 0, 1, 0, 1, 0, 0];

let pause = [0, 0, 0, 0, 0, 0, 0, 0];

​

let song0;

let song_name;

let beat;

​

function mySelectEvent() {

  let item = sel.value();

  background(200);

  print(item);

​

  if (item == 'Hallelujah') {

// Hallelujah

song_name = 'Hallelujah - Leonard Cohen'

song0 = [C, C, Am, Am, C, C, Am, Am,  F, F, G, G, C, C, G, G,

            C, C, F, G, Am, Am, F, F, G, G, E7, E7, Am, Am, Am, Am,

            F, F, F, F, Am, Am, Am, Am, F, F, F, F, C, C, G, G, C, C, G, G];

    fr = 25;

    back_ref = def_img;

  }

  else if (item=='Some Nights') {

​

// Some Nights

    song_name = 'Some Nights - fun.'

    song0 = [C, C,C,C, F, F, C, C, F, F, C, C, G, G, G, G,  

             C, C,C,C, F, F, C, C, F, F, C, C, G, G, G, G, 

             F, F, C, C, F, F, C, C, F, F, C, C, G, G, G, G, 

             F, F, C, C, F, F, C, C, Am, Am, Am, Am, G, G, G, G,

             F, F, C, C, F, F, C, C, F, F, C, C, G, G, G, G, 

             F, F, C, C, F, F, C, C, F, F, C, C, G, G, G, G, 

​

            ];

    back_ref = def_img;

    fr = 30;

  }

  else if (item=='Time After Time')

  {

// Time afer Time

   song_name = 'Time After Time - Cyndi Lauper'

   song0 = [Dm,Dm,C,C,Dm,Dm,C,C,Dm,Dm,C,C,Dm,Dm,C,C, 

             F,F,G,G,Em,Em,F,F,G,G,G,G,Em,Em,Em,Em,

             F,F,G,G,Em,Em,F,F,G,G,

             G,G,G,G,Am,Am,Am,Am,F,F,G,G,C,C,C,C,

             G,G,G,G,Am,Am,Am,Am,F,F,G,G,C,C,C,C

​

            ];

    back_ref = def_img;

      fr = 27;

  }

    else if (item=='All Star')

    {

// All Star

    song_name = 'All Star - Smash Mouth'

    song0 = [D,A,Em,G,D,A,Em,G,D,A,Em,G,D,A,Em,G,D,A,Em,

             G,D,A,Em,G,D,A,Em,G,D,A,Em,G,D,G,G,G,D,G,G,G,

             D,G,G,G,D,C,G,D,A,Em,G,D,A,Em,G,D,A,Em,G,

             D,A,Em,G,D,G,G,G,D,G,G,G,

             D,G,G,G,D,C,G];

      fr = 35;

      back_ref = shrek_img;

    }

​

  else if (item=='All the Small Things')

    {

// All the Small Things

    song_name = 'All the Small Things - Blink182'

    song0 = [C,C,C,C,F,F,F,F,G,G,G,G,pause,pause,F,F,

             C,C,C,C,F,F,F,F,G,G,G,G,pause,pause,F,F,

             C,C,C,C,G,G,G,G,F,F,F,F,G,G,G,G,

             C,C,C,C,G,G,G,G,F,F,F,F,G,G,G,G,

             C,C,C,C,G,G,G,G,F,F,F,F,G,G,G,G,

             C,C,C,C,G,G,G,G,F,F,F,F,G,G,G,G,

             C,C,C,C,C,C,C,C,G,G,G,G,F,F,F,F,

              C,C,C,C,C,C,C,C,G,G,G,G,F,F,F,F,

             C,C,C,C,F,F,F,F,G,G,G,G,pause,pause,F,F,

             C,C,C,C,G,G,G,G,F,F,F,F,G,G,G,G,

             C,C,C,C,G,G,G,G,F,F,F,F,G,G,G,G,

             C,C,C,C,C,C,C,C,G,G,G,G,F,F,F,F,

              C,C,C,C,C,C,C,C,G,G,G,G,F,F,F,F,

             C,C,C,C,F,F,F,F,G,G,G,G,pause,pause,F,F

            ];

      fr = 45;

      back_ref = def_img;

    }

​

  beat=0;

  system.clear();

  frameRate(fr);

}

​

function preload() {

  // preload() runs once

    click = loadSound('assets/drum.mp3');

  def_img = loadImage("assets/guitar_hero_stage1.jpg");

  shrek_img = loadImage("assets/shrek_donkey.jpg");

  click_counter = 0;

}

​

function setup() {

    createCanvas(1000, 600);

    system = new ParticleSystem(createVector(width / 2, 50));

​

    frameCount = 0;

    frameRate(fr);

​

    colors.push(color(255,0,0)); // C

    colors.push(color(255,137,0)); // D

    colors.push(color(255,248,12)); // E

    colors.push(color(146,208,80)); // F

    colors.push(color(75,154,122)); // G

    colors.push(color(120,18,172)); // A

    colors.push(color(234,0,150)); // B

    colors.push(color(255,0,0)); // C

​

    beat = 0;

​

​

  sel = createSelect();

  sel.position(width-180, 10);

  sel.option('Hallelujah');

  sel.option('Some Nights');

  sel.option('Time After Time');

  sel.option('All Star');

  sel.option('All the Small Things');

  sel.changed(mySelectEvent);

​

  mySelectEvent();

​

}

​

function draw() {

    background(back_ref);

​

    if (frameCount%15==7) {

        system.addParticle(song0[beat%song0.length]);

        beat += 1;

    click.play();

​

    }

    system.run();

​

    frameCount = frameCount += 1;

​

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

        stroke(255);

        fill(255);

        textSize(32);

        text(note_names[i], 40+ (i*80), height-70);

    }

​

        stroke(255);

        fill(255);

        textSize(32);

        text(song_name, 40, 30);

​

}

​

​

// A simple Particle class

let Particle = function(position, particle_color) {

    this.velocity = createVector(0, 5);

    this.position = position.copy();

    this.lifespan = 255;

    this.color = particle_color;

};

​

Particle.prototype.run = function() {

    this.update();

    this.display();

};

​

// Method to update position

Particle.prototype.update = function(){

    this.position.add(this.velocity);

    this.lifespan -= 1;

};

​

// Method to display

Particle.prototype.display = function() {

    stroke(200, 255);

    strokeWeight(2);

​

    //fill(127, 255);

    fill(this.color);

    r = 20;

    if (this.position.y>(height-100)) {

      r = 50;

      click_bool = true;

    }

    ellipse(this.position.x, this.position.y, r, r);

};

​

// Is the particle still useful?

Particle.prototype.isDead = function(){

    return this.position.y > height;

};

​

let ParticleSystem = function(position) {

    this.origin = position.copy();

    this.particles = [];

};

​

ParticleSystem.prototype.addParticle = function(which_notes) {

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

        if (which_notes[i]) {

            var o = createVector(50 + i*80,0);

            this.particles.push(new Particle(o, colors[i]));

        }

    }

};

​

ParticleSystem.prototype.run = function() {

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

        let p = this.particles[i];

        p.run();

        if (p.isDead()) {

            this.particles.splice(i, 1);

        }

    }

};

​

​

ParticleSystem.prototype.clear = function() {

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

        let p = this.particles[i];

            this.particles.splice(i, 1);

    }

};