Embedded Files
Here's my code that can be found in the p5.js "edit" sketch under the "My p5 Sketch" page on this website!
Here's my code that can be found in the p5.js "edit" sketch under the "My p5 Sketch" page on this website!
var mic;
var sceneIsPlaying = false;
var position = 0;
//DISCLAIMER:MUST be used with headphones or else the mic will pick up the sound of my recorded voice from the speakers
//DISCLAIMER:MUST be used with headphones or else the mic will pick up the sound of my recorded voice from the speakers
function preload() {
soundFormats('mp3', 'ogg');
song = loadSound('Together Kind.m4a');
//------> ALL OF MY IMAGES
NYC = loadImage('NYC.png');
pizza = loadImage('PIZZA-05.png');
world = loadImage('world-01.png');
worldQ = loadImage('worldQ-01.png');
USA = loadImage('USA-03.png');
cover = loadImage('BOOKCOVER.png');
BILL = loadImage('8bill-01.png');
confused = loadImage('confused.png');
potato = loadImage('potato-06.png');
zoom = loadImage('zoom-05.png');
hi = loadImage('hi.png');
welp = loadImage('worldinternet.png');
video = loadImage('VIDEO.png');
ZaGoog = loadImage('pizzaGoog.png');
za = loadImage('ZA-02.png');
hmTurt = loadImage('hmTurt.png');
turtle = loadImage('turtle.png');
sad = loadImage('sad-01.png');
spell = loadImage('spell-01.png');
caps = loadImage('caps-03.png');
cute = loadImage('cute-04.png');
comp = loadImage('compliment-05.png');
comp2 = loadImage('comp2-05.png');
fourb = loadImage('45-01.png');
megaSmile = loadImage('megasmile-02.png');
eight = loadImage('eight-04-1.png');
}
function setup() {
createCanvas(600, 400);
song.play();
//create a new Amplitude analyzer //you can add parameter to smooth 0-.999
analyzer = new p5.Amplitude(0.1);
// patch the input to an volume analyzer //send the program the song data that i loaded in...
analyzer.setInput(song);
//setup the microphone
mic = new p5.AudioIn()
mic.start()
}
function draw() {
var level = analyzer.getLevel();
analyzer.setInput(song);
//grab the currentTime (playback) of the song
var songCurrentTime = round(song.currentTime());
//can also use the "floor" function instead of "round" //both do the same thing (create whole #s or integer values)var micLevel = mic.getLevel();
//map the miclevel value to a new rangevar micLevelToShapeSize = map(micLevel,0,0.5,10,80);
//---------------> DEFAULT VISUAL
//---------------> DEFAULT VISUAL
noStroke();
visualState=0;
background(155, 198, 139);
//--------------------> LYRICS CODE
//put all of our lyric objects in a list //JSON data //--------------------> LYRICS CODE
var lyricData = [
{
"lyricText": "TOGETHER KIND",
"timeStart": 1,
"timeStop": 4.5,
"visualState":5
},
{
"lyricText": "How many people do you think",
"timeStart": 4.5,
"timeStop": 10,
"visualState":2
},
{
"lyricText": " are in the world?",
"timeStart": 10,
"timeStop": 12,
"visualState":3,
},
{
"lyricText": "There are over 8 million people",
"timeStart": 12,
"timeStop": 16,
"visualState":20,
},
{
"lyricText": "that live in New York City",
"timeStart": 16,
"timeStop": 19,
"visualState":20,
},
{
"lyricText": "There are over 300 million people",
"timeStart": 19,
"timeStop": 24,
"visualState":4,
},
{
"lyricText": "that live in the United States",
"timeStart": 24,
"timeStop": 28,
"visualState":4,
},
{
"lyricText": "There are almost 8 BILLION people",
"timeStart": 28,
"timeStop": 33,
"visualState":6,
},
{
"lyricText": "that live in the world",
"timeStart": 33,
"timeStop": 36,
"visualState":6,
},
{
"lyricText": "But how many people do you think",
"timeStart": 36,
"timeStop": 40,
"visualState":7,
},
{
"lyricText": "are on the INTERNET?",
"timeStart": 40,
"timeStop": 43,
"visualState":7,
},
{
"lyricText": "There are more than 4.5 BILLION human beings",
"timeStart": 43,
"timeStop": 48.5,
"visualState":10,
},
{
"lyricText": "on the INTERNET.",
"timeStart": 48.5,
"timeStop": 50,
"visualState":10,
},
{
"lyricText": "That means more than HALF",
"timeStart": 50,
"timeStop": 53.5,
"visualState":10,
},
{
"lyricText": "of the world is on the INTERNET!",
"timeStart": 53.5,
"timeStop": 58,
"visualState":10,
},
{
"lyricText": "Some people use the INTERNET",
"timeStart": 58,
"timeStop": 62,
"visualState":15,
},
{
"lyricText": "to watch videos",
"timeStart": 62,
"timeStop": 64,
"visualState":15,
},
{
"lyricText": "Or to find directions",
"timeStart": 64,
"timeStop": 67,
"visualState":16,
},
{
"lyricText": "to their favorite food place",
"timeStart": 67,
"timeStop": 70,
"visualState":17,
},
{
"lyricText": "Or to find the answers",
"timeStart": 70,
"timeStop": 73,
"visualState":18,
},
{
"lyricText": "to their questions",
"timeStart": 73,
"timeStop": 76,
"visualState":19,
},
{
"lyricText": "The INTERNET is full of possibility!",
"timeStart": 76,
"timeStop": 82,
"visualState":10,
},
{
"lyricText": "The INTERNET also lets us talk",
"timeStart": 82,
"timeStop": 86,
"visualState":11,
},
{
"lyricText": "with other people that we",
"timeStart": 86,
"timeStop": 88,
"visualState":11,
},
{
"lyricText": "might not be able to see in person",
"timeStart": 88,
"timeStop": 91,
"visualState":12,
},
{
"lyricText": "When talking to someone on the INTERNET,",
"timeStart": 91,
"timeStop": 95,
"visualState":12,
},
{
"lyricText": "you could say something not nice!",
"timeStart": 95,
"timeStop": 98,
"visualState":9,
},
{
"lyricText": "You could say something mean",
"timeStart": 98,
"timeStop": 101,
"visualState":9,
},
{
"lyricText": "about somebody’s dog",
"timeStart": 101,
"timeStop": 103,
"visualState":9,
},
{
"lyricText": "You could say things",
"timeStart": 103,
"timeStop": 106,
"visualState":21,
},
{
"lyricText": "about people’s appearance",
"timeStart": 106,
"timeStop": 108.5,
"visualState":21,
},
{
"lyricText": "You could point out",
"timeStart": 108.5,
"timeStop": 110.5,
"visualState":22,
},
{
"lyricText": "all the words they misspelled",
"timeStart": 110.5,
"timeStop": 113,
"visualState":22,
},
{
"lyricText": "You could type hurtful",
"timeStart": 113,
"timeStop": 115.5,
"visualState":23,
},
{
"lyricText": "comments in ALL CAPS",
"timeStart": 115.5,
"timeStop": 119,
"visualState":23,
},
{
"lyricText": "This way they know",
"timeStart": 119,
"timeStop": 121,
"visualState":23,
},
{
"lyricText": "it was meant to be mean",
"timeStart": 121,
"timeStop": 124,
"visualState":23,
},
{
"lyricText": "But you wouldn’t do this",
"timeStart": 124,
"timeStop": 127.5,
"visualState":24,
},
{
"lyricText": "And this I know",
"timeStart": 127.5,
"timeStop": 129.5,
"visualState":24,
},
{
"lyricText": "You’re one of those billions",
"timeStart": 129.5,
"timeStop": 131,
"visualState":6,
},
{
"lyricText": "contributing to a kinder & happier INTERNET",
"timeStart": 131,
"timeStop": 136,
"visualState":6,
},
{
"lyricText": "Today, you’ll share something wonderful!",
"timeStart": 136,
"timeStop": 140,
"visualState":25,
},
{
"lyricText": "Something kind",
"timeStart": 140,
"timeStop": 142,
"visualState":25,
},
{
"lyricText": "about somebody’s dog",
"timeStart": 142,
"timeStop": 146,
"visualState":25,
},
{
"lyricText": "Give someone a nice compliment",
"timeStart": 146,
"timeStop": 148,
"visualState":26,
},
{
"lyricText": "You will show all ",
"timeStart": 148,
"timeStop": 151,
"visualState":26,
},
{
"lyricText": "That we can be kind,",
"timeStart": 151,
"timeStop": 153,
"visualState":26,
},
{
"lyricText": "together & forever ",
"timeStart": 153,
"timeStop": 155,
"visualState":24,
},
{
"lyricText": "Always remember",
"timeStart": 155,
"timeStop": 158,
"visualState":24,
},
{
"lyricText": "There are 4.5 billion",
"timeStart": 158,
"timeStop": 162,
"visualState":27,
},
{
"lyricText": "very real people",
"timeStart": 162,
"timeStop": 164,
"visualState":27,
},
{
"lyricText": "With feelings here",//!!!!!!!!
"timeStart": 164,
"timeStop": 166,
"visualState":27,
},
{
"lyricText": "on the INTERNET",//!!!!!!!!
"timeStart": 166,
"timeStop": 168,
"visualState":27,
},
{
"lyricText": "THE END :) ",
"timeStart": 169,
"timeStop": 170,
"visualState":24,
},
];
//----------------------> TEXT CODE
//----------------------> TEXT CODE
var currentLyricToDisplay;
//gonna call this later after i create all the visuals... //need to call this last in order for my text to be displayed//loop through the list //i want to find the objects that match the timestamp from my JSON
for(var x=0; x<lyricData.length; x++){
//call lyricData.length so the loop runs through all my objects... //with this, i dont have to count how many objects are in my list //want to display the lyric WHEN... //time is between timeStart and timeStop so loop time
if(songCurrentTime >= lyricData[x].timeStart && songCurrentTime < lyricData[x].timeStop){
fill("white");
textFont("Futura");
textSize(10);
currentLyricToDisplay = lyricData[x].lyricText;
visualState = lyricData[x].visualState;
}
}
//----------------> VISUALIZATION CODE
//this handles the state or the mode of the visualization // (some) visuals are based on amplitude of the user's voice... //----------------> VISUALIZATION CODE
//creating a variable that will hold the mic volume //it will be betweeen 0 and 1
var micLevel = mic.getLevel();
var micLevelToShapeSize = map(micLevel,0,0.5,10,80);
if(visualState == 1){
//dull green background - easy/comfortable color to read?background(155, 198, 139);
imageMode(CENTER);
image(pizza, 300, height/2.5, pizza.width/1, pizza.height/1);
}
if(visualState == 2){
background(155, 198, 139);
imageMode(CENTER);
image(world, 300, height/2.5, world.width/1, world.height/1);
noFill();
stroke(74, 183, 255);
strokeWeight(4);
//wavearc(360, 65, micLevelToShapeSize*2, micLevelToShapeSize*2, PI + QUARTER_PI, TWO_PI);
arc(379, 65, micLevelToShapeSize*2, micLevelToShapeSize*2, PI + QUARTER_PI, TWO_PI);
arc(370, 190, micLevelToShapeSize*2, micLevelToShapeSize*2, PI + QUARTER_PI, TWO_PI);
arc(389, 190, micLevelToShapeSize*2, micLevelToShapeSize*2, PI + QUARTER_PI, TWO_PI);
//wave
arc(340, 150, micLevelToShapeSize*2, micLevelToShapeSize*2, PI + QUARTER_PI, TWO_PI);
arc(359, 150, micLevelToShapeSize*2, micLevelToShapeSize*2, PI + QUARTER_PI, TWO_PI);
arc(200, 153, micLevelToShapeSize*2, micLevelToShapeSize*2, PI + QUARTER_PI, TWO_PI);
arc(219, 153, micLevelToShapeSize*2, micLevelToShapeSize*2, PI + QUARTER_PI, TWO_PI);
//wave
arc(300, 193, micLevelToShapeSize*2, micLevelToShapeSize*2, PI + QUARTER_PI, TWO_PI);
arc(319, 193, micLevelToShapeSize*2, micLevelToShapeSize*2, PI + QUARTER_PI, TWO_PI);
//wave
arc(270, 270, micLevelToShapeSize*2, micLevelToShapeSize*2, PI + QUARTER_PI, TWO_PI);
arc(289, 270, micLevelToShapeSize*2, micLevelToShapeSize*2, PI + QUARTER_PI, TWO_PI);
//remove outline for text
noStroke();
}
if(visualState == 3){
background(155, 198, 139);
noStroke();
imageMode(CENTER);
image(worldQ, 300, height/2.5, worldQ.width/1.2, worldQ.height/1.2);
fill (252, 186, 3);
ellipse(300,277,micLevelToShapeSize*5,micLevelToShapeSize*5);
//this makes the visual change based on the amplitude of sound}
if(visualState == 4){
background(61, 155, 255);
imageMode(CENTER);
image(USA, 300, height/2.5, USA.width/1, USA.height/1);
}
if(visualState == 5){
// Displays the image at point (0, height/2) at half size
background(155, 198, 139);
imageMode(CENTER);
image(cover, 300, height/2.2, cover.width/.9, cover.height/.9);
}
if(visualState==6){
background(155, 198, 139);
imageMode(CENTER);
image(BILL, 300, height/2.5, BILL.width/1.5, BILL.height/1.5);
image(eight, 305, height/3.8, micLevelToShapeSize*15, micLevelToShapeSize*15);
}
if(visualState==7){
background(155, 198, 139);
imageMode(CENTER);
image(confused, 300, height/2, confused.width/1, confused.height/1);
}
if(visualState==9){
background(255, 148, 235);
imageMode(CENTER);
image(potato, 300, height/2, potato.width/1, potato.height/1);
}
if(visualState==10){
fill(181, 232, 255);
rect(0,0,600,400);
noStroke();
imageMode(CENTER);
position = position + 3;
image(welp, 300, height/2, welp.width/1, welp.height/1);
image(megaSmile, position, height / 2.5, megaSmile.width / 3, megaSmile.height / 3);
image(megaSmile, position*1.2, height / 2, megaSmile.width / 3, megaSmile.height / 3);
image(megaSmile, position*1.2, height / 6, megaSmile.width / 3, megaSmile.height / 3);
image(megaSmile, position*.7, height / 4.5, megaSmile.width / 3, megaSmile.height / 3);
image(megaSmile, position*.7, height / 1.3, megaSmile.width / 3, megaSmile.height / 3);
}
if(visualState==11){
background(155, 198, 139);
imageMode(CENTER);
image(zoom, 300, height/2, zoom.width/1, zoom.height/1);
}
if(visualState==12){
background(255, 148, 235);
imageMode(CENTER);
image(hi, 300, height/2, hi.width/1, hi.height/1);
}
if(visualState==13){
imageMode(CENTER);
image(silly, 300, height/3, silly.width, silly.height);
}
if(visualState==15){
background(155, 198, 139);
imageMode(CENTER);
image(video, 300, height/2, video.width/1, video.height/1);
}
if(visualState==16){
background(155, 198, 139);
imageMode(CENTER);
image(ZaGoog, 300, height/2, ZaGoog.width/1, ZaGoog.height/1);
}
if(visualState==17){
background(155, 198, 139);
noStroke();
imageMode(CENTER);
image(za, 300, height/2, za.width/1, za.height/1);
//white cheese zafill (255, 244, 214);
rect(320,277,micLevelToShapeSize*4,micLevelToShapeSize*1);
rect(420,297,micLevelToShapeSize*1,micLevelToShapeSize*4);
rect(370,217,micLevelToShapeSize*4,micLevelToShapeSize*1);
rect(390,257,micLevelToShapeSize*1,micLevelToShapeSize*4);
//redfill(191, 29, 29);
rect(220,77,micLevelToShapeSize*4,micLevelToShapeSize*1);
rect(220,107,micLevelToShapeSize*1,micLevelToShapeSize*4);
rect(160,117,micLevelToShapeSize*4,micLevelToShapeSize*1);
rect(260,157,micLevelToShapeSize*1,micLevelToShapeSize*4);
}
if(visualState==18){
background(155, 198, 139);
imageMode(CENTER);
image(hmTurt, 300, height/2, hmTurt.width/1, hmTurt.height/1);
}
if(visualState==19){
background(155, 198, 139);
noStroke();
imageMode(CENTER);
image(turtle, 300, height/2, turtle.width/1, turtle.height/1);
//turtle eyesfill (0, 117, 8);
ellipse(432,251,micLevelToShapeSize,micLevelToShapeSize);
ellipse(419,230,micLevelToShapeSize,micLevelToShapeSize);
}
if(visualState==20){
background(155, 198, 139);
noStroke();
imageMode(CENTER);
image(NYC, 300, height/2, NYC.width/1.3, NYC.height/1.3);
fill (235, 216, 52);
//building far rightellipse(422,201,micLevelToShapeSize*.5,micLevelToShapeSize*.5);
ellipse(419,220,micLevelToShapeSize*.5,micLevelToShapeSize*.5);
//building middleellipse(249,220,micLevelToShapeSize*.5,micLevelToShapeSize*.5);
ellipse(242,200,micLevelToShapeSize*.5,micLevelToShapeSize*.5);
ellipse(249,180,micLevelToShapeSize*.5,micLevelToShapeSize*.5);
//building leftellipse(199,200,micLevelToShapeSize*.5,micLevelToShapeSize*.5);
ellipse(192,180,micLevelToShapeSize*.5,micLevelToShapeSize*.5);
ellipse(198,190,micLevelToShapeSize*.5,micLevelToShapeSize*.5);
ellipse(203,160,micLevelToShapeSize*.5,micLevelToShapeSize*.5);
}
if(visualState==21){
background(155, 198, 139);
imageMode(CENTER);
image(sad, 300, height/2, sad.width/1.3, sad.height/1.3);
}
if(visualState==22){
background(155, 198, 139);
imageMode(CENTER);
image(spell, 300, height/2, spell.width/1.3, spell.height/1.3);
}
if(visualState==23){
background(155, 198, 139);
imageMode(CENTER);
image(caps, 300, height/2, caps.width/1.3, caps.height/1.3);
}
if(visualState==24){
background(155, 198, 139);
noStroke();
background(155, 198, 139);
imageMode(CENTER);
image(cute, 300, height/2, cute.width/1.3, cute.height/1.3);
fill (201, 87, 155);
//building far rightellipse(234,148,micLevelToShapeSize*.5,micLevelToShapeSize*.5);
ellipse(243,148,micLevelToShapeSize*.5,micLevelToShapeSize*.5);
}
if(visualState==25){
background(155, 198, 139);
imageMode(CENTER);
image(comp, 300, height/2, comp.width/1.3, comp.height/1.3);
}
if(visualState==26){
background(155, 198, 139);
imageMode(CENTER);
image(comp2, 300, height/2, comp2.width/1.3, comp2.height/1.3);
}
if(visualState==27){
background(155, 198, 139);
imageMode(CENTER);
image(fourb, 300, height/2.5, fourb.width/1.3, fourb.height/1.3);
}
//-----------DISPLAY(!!!) TEXT CODE
fill("white");
textAlign(CENTER);
textStyle(BOLD);
textSize(23);
text(currentLyricToDisplay,300,370);
}
Page updated
Google Sites
Report abuse