Code of Music: Audio-Visual Musical Instrument

var rValue = 250;

var gValue = 145; 

var bValue = 1;

var system;

var note;

var blobs = [];

var gravity = 0.3;

​

function preload() {

  notea = loadSound("a.mp3");

  noteb = loadSound("sunbells.mp3");

  notec = loadSound("c.mp3");

  noted = loadSound("d.mp3");

  notee = loadSound("fluttering.mp3");

  notef = loadSound("f.mp3"); 

  noteg = loadSound("g.mp3");

  arpeggio = loadSound("arpeggio.mp3");

}

​

function setup() {

  background("225"); 

  createCanvas(windowWidth,windowHeight);

  textAlign(LEFT);

  textSize(32);

  noFill();

  strokeWeight(1.6);

  stroke(0.1);

  text("click the mouse to paint and play a sound", 50, 50);

  fill(rValue,gValue,bValue);

  text("press keys a, b, c, d, e, f & g to choose a sound and color", 50, 90);

  fill(16,205,255);

  text("press spacebar to throw an arpeggio", 50, 130);

  note = notea;

  //turn off some original sounds so you only hear delays

  noteb.disconnect(); 

  //add delay

    delay = new p5.Delay();

  delay.process(notea, .12, .7, 2300);

  delay.process(noteb, .12, .7, 2300);

  delay.process(notec, .12, .7, 2300);

  delay.process(notef, .12, .7, 2300);

  delay.process(noteg, .12, .7, 2300);

  delay.setType('pingPong'); // a stereo effect

​

  analyzer = new p5.Amplitude();

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

}

​

function draw() {

  system.run();

  noStroke(0);

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

    var disc = blobs[i];

    disc.moveY = disc.moveY + gravity

    fill(random(0,50),random(170,220),random(220,270),70);

    rect(disc.x,disc.y,50,50);

    disc.x = disc.x + disc.moveX;

    disc.y = disc.y + disc.moveY;

    if (disc.x > width){

    disc.moveX = disc.moveX*-1;

    }

    if (disc.x< 0){

    disc.moveX = disc.moveX*-1;

    }

    if (disc.y > height){

    disc.moveY = disc.moveY*-1;

    }

    if (disc.y<0){

    disc.moveY = disc.moveY*-1;

    }

  }

    if (mouseIsPressed) {

  fill(rValue,gValue,bValue);

    strokeWeight(1.6);

    stroke(0.1);

  text("click the mouse to paint and play a sound", 50, 50);

    }else{

  noFill();

  text("click the mouse to paint and play a sound", 50, 50);

    }

}

function mousePressed() {

  note.play();

  this.system = new ParticleSystem(createVector(mouseX, mouseY));

  system.addParticle();

  }

​

function keyReleased() {

  //A = ORANGE

  if (keyCode === 65) {

    rValue = 250;

    gValue = 145;

    bValue = 1;

    fill(rValue,gValue,bValue);

    strokeWeight(1.6);

    stroke(0.1);

    text("press keys a, b, c, d, e, f & g to choose a sound and color", 50, 90);

    note = notea;

    note.play();

  //B = LEMON

  } else if (keyCode === 66) {

    rValue = 255;

    gValue = 230;

    bValue = 9;

    fill(rValue,gValue,bValue);

    strokeWeight(1.6);

    stroke(0.1);

    text("press keys a, b, c, d, e, f & g to choose a sound and color", 50, 90);

    note = noteb;

    note.play();

  //C = GREEN

    } else if (keyCode === 67) {

    rValue = 37;

    gValue = 139;

    bValue = 1;

    fill(rValue,gValue,bValue);

    strokeWeight(1.6);

    stroke(0.1);

    text("press keys a, b, c, d, e, f & g to choose a sound and color", 50, 90);

    note = notec;

    // note.play();

  //D = BLUE

    } else if (keyCode === 68) {

    rValue = 44;

    gValue = 65;

    bValue = 232;

    fill(rValue,gValue,bValue);

    strokeWeight(1.6);

    stroke(0.1);

    text("press keys a, b, c, d, e, f & g to choose a sound and color", 50, 90);

    note = noted;

    note.play();

  //E = VIOLET

    } else if (keyCode === 69) {

    rValue = 144;

    gValue = 0;  

    bValue = 175;

    fill(rValue,gValue,bValue);

    strokeWeight(1.6);

    stroke(0.1);

    text("press keys a, b, c, d, e, f & g to choose a sound and color", 50, 90);

    note = notee;

    note.play();

  //F = MAGENTA

    } else if (keyCode === 70) {

    rValue = 211;

    gValue = 0;

    bValue = 255;

    fill(rValue,gValue,bValue);

    strokeWeight(1.6);

    stroke(0.1);

    text("press keys a, b, c, d, e, f & g to choose a sound and color", 50, 90);

    note = notef;

    note.play();

  //G = RED

    } else if (keyCode === 71){

    rValue = 244;

    gValue = 0;

    bValue = 4;

    fill(rValue,gValue,bValue);

    strokeWeight(1.6);

    stroke(0.1);

    text("press keys a, b, c, d, e, f & g to choose a sound and color", 50, 90);

    note = noteg;

    note.play();

  //SPACEBAR = AQUA

    } else if (keyCode === 32){

      var newdisc = { x: mouseX,

                  y: mouseY,

                  moveX: random(-5,5),

                  moveY: random(-5,5),

                }     

  blobs.push(newdisc); 

      arpeggio.play();

        strokeWeight(1.6);

        stroke(0.1);

        fill(16,205,255);

  text("press spacebar to throw an arpeggio", 50, 130);

}

  return false; // prevent default

}

​

​

// A simple Particle class

var Particle = function(position) {

  this.acceleration = createVector(0, 0.03);

  this.velocity = createVector(random(-1, 1), random(-1, 0));

  this.position = position.copy();

  this.lifespan = 500;

};

​

Particle.prototype.run = function() {

  this.update();

  this.display();

};

​

// Method to update position

Particle.prototype.update = function(){

  this.velocity.add(this.acceleration);

  this.position.add(this.velocity);

  this.lifespan -= 2;

};

​

// Method to display

Particle.prototype.display = function() {

  stroke(0, this.lifespan);

  strokeWeight(0);

  fill(rValue,gValue,bValue,70, this.lifespan);

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

};

​

// Is the particle still useful?

Particle.prototype.isDead = function(){

  return this.lifespan < 0;

};

​

var ParticleSystem = function(position) {

  this.origin = position.copy();

  this.particles = [];

};

​

ParticleSystem.prototype.addParticle = function() {

  this.particles.push(new Particle(this.origin));

};

​

ParticleSystem.prototype.run = function() {

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

    var p = this.particles[i];

    p.run();

    if (p.isDead()) {

      this.particles.splice(i, 1);

    }

  }

};