The Black Experience

//GLOBAL VARIABLE SPACE

let cool;

let march;

let long;

let img;

let hands;

let spiral;

var diamond;

let diamond2;

let soultrain;

let selma; 

​

//TRACKING 

let songNumber;

​

//SOUND LIBRARY

  let amp;//amplitude height of sound wave

  let level;// volume level

//3d canvas

​

​

​

​

//PRE LOAD FUNCTION

  function preload(){

  cool=loadSound('cool.mp3')

    march=loadSound('march.mp3')

    long=loadSound('long.mp3')

   spiral=loadImage('spiral.gif')

    hands=loadImage('hands.jpg')

   diamond=loadModel('Diamond.obj')

    diamond2=loadImage('blue diamond.jpg')

    soultrain=loadImage('soultrain.JPG')

    selma=loadImage('selma.JPG')

  }

​

//MAIN FUNCTIONS

  function setup() {

    createCanvas(400, 400);

    amp= new p5.Amplitude();//capture the amplitude of sketch audio

   level=amp.getLevel();//volume level

    rectMode(CENTER);

    //canvas

    createCanvas(400,400,WEBGL);

    canvas2=createGraphics(400,400);

  }

​

  function draw() {

    background(225);  level=amp.getLevel();//volumelevel

    //TRACKING VARIABLE

  if (songNumber ==1){

     drawSong1();

   }

    if(songNumber==2){

    drawSong2();

    }

    if(songNumber==3){

      drawSong3();

    }

  }

​

//INTERACTIVE FUNCTIONS

    function mousePressed(){}

    function keyPressed(){

      if( key==1){

        songNumber=1;

        march.stop();

        long.stop();

        cool.play();

      }

      if(key==2){

        songNumber=2;

        cool.stop();

        long.stop();

        long.stop();

        march.play();

      }

        if(key==3){

          songNumber=3;

          cool.stop();

          march.stop();

          long.stop();

          long.play();

        }

​

      }

​

    // CUSTOM FUNCTIONS

function drawIntro(){

  background(125, 219, 245);

}

function drawSong1(){ //3d 

  push();

  background(255);

  noStroke();

translate(0,100,-100);

  scale(2.5);

  texture(hands);

  plane(200);

pop();

push()

 stroke(255);

  strokeWeight(2)

  translate(0,20);

  rotateY(frameCount* .05);

  rotate(PI)

  texture(diamond2);

  scale(120);

   model(diamond);

 pop()

}

function drawSong2(){  // user interaction 

imageMode(CENTER);

​

image(spiral,0 ,0,400,400);

 image (selma, mouseX,mouseY);

image(canvas2,0,0);

​

​

​

}

function drawSong3(){// audio reactive 

​

​

  imageMode(CENTER);

    image(soultrain,0,0);

​

  fill(255, 112, 3)//orange

  circle(200,level*50,200);

stroke(255, 255, 250)

strokeWeight(2); 

  fill(235, 211, 0);//yellow

  circle(200,level*50,140); 

fill(0, 174, 255);//teal

  circle(200, level*50,100);

 fill(133, 100, 12);//brown

circle(200,level*50,60); 

​

​

}

​