For this project I decided to create the view of a campsite from sunrise to sunset with people, the bonfire, a tent, clouds stars and of course some singing! For the sounds I did try to make them overlap a little so that it sounds more interesting when played.
sketch
//Aadya Bhartia
//Section A
//abhartia@andrew.cmu.edu
/*Through my sonic story I wanted to show a view of a campsite where you hear
the birds in the morning and the the head comes to wake you up and then some
music and bonfire in the evening followed by a lullaby*/
//varibales for sounds
var bird;
var wakeUp;
var tent;
var guitar;
var bonfire;
var lullaby;
//to store the images
var Sceneimage = [];
function preload() {
// call loadImage() and loadSound() for all media files here
var filenames = [];
filenames[0] = "https://i.imgur.com/ITiizfB.png";
filenames[1] = "https://i.imgur.com/tuuMWhz.png";
filenames[2] = "https://i.imgur.com/jwZrzv0.png";
filenames[3] = "https://i.imgur.com/tpb0sAu.png";
filenames[4] = "https://i.imgur.com/ZFtXPrz.png";
filenames[5] = "https://i.imgur.com/IsF4NuT.png";
filenames[6] = "https://i.imgur.com/ttnjMNJ.png";
filenames[7] = "https://i.imgur.com/V0Lf0an.png";
filenames[8] = "https://i.imgur.com/vt9fZjI.png";
filenames[9] = "https://i.imgur.com/pji8Wnc.png";
//loading images into the array
for (var i = 0; i < filenames.length; i++) {
Sceneimage[i] = loadImage(filenames[i]);
}
//load sounds
bird = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/birds-1.wav");
wakeUp = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/wake-up.wav");
tent = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/tent.wav");
guitar = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/guitar-3.wav");
bonfire = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/bonfire.wav");
lullaby = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/lullaby.wav");
}
function setup() {
createCanvas(614, 345);
frameRate(1);
useSound();
}
function soundSetup() { // setup for audio generation, chnaging volumes
bird.setVolume(0.1);
wakeUp.setVolume(1);
guitar.setVolume(0.1);
lullaby.setVolume(0.2);
}
function draw() {
//sun rising
if(frameCount>=0 & frameCount< 4){
image(Sceneimage[0], 0,0, 614, 345);
bird.play();
}
//sun up and clouds come in
if(frameCount>=4 & frameCount< 8){
image(Sceneimage[1], 0,0, 614, 345);
//creating a cloud animation for the different frames
if(frameCount== 4){
image(Sceneimage[9], 0,0, 614, 345);
}
if(frameCount== 5){
image(Sceneimage[9], width/4,0, 614, 345);
}
if(frameCount== 6){
image(Sceneimage[9], width/2,0, 614, 345);
}
if(frameCount== 7){
image(Sceneimage[9], (3*width/4),0, 614, 345);
}
bird.play();
}
//head comes to wake up
if(frameCount>=9 & frameCount< 11){
image(Sceneimage[2], 0,0, 614, 345);
wakeUp.play();
}
//tent open and girls head pops out
if(frameCount>=11 & frameCount< 12){
image(Sceneimage[3], 0,0, 614, 345);
tent.play();
}
//couple playing the guitar
if(frameCount>=12 & frameCount< 17){
image(Sceneimage[4], 0,0, 614, 345);
guitar.play();
}
//fire lights up
if(frameCount>=17 & frameCount< 20){
image(Sceneimage[5], 0,0, 614, 345);
bonfire.play();
}
//fire becomes bigger
if(frameCount>=20 & frameCount< 25){
image(Sceneimage[6], 0,0, 614, 345);
guitar.play();
bonfire.play();
}
//head comes to say time to go to bed
if(frameCount>=25 & frameCount< 28){
image(Sceneimage[7], 0,0, 614, 345);
}
//lullaby and stars
if(frameCount>=28 & frameCount< 40){
image(Sceneimage[8], 0,0, 614, 345);
lullaby.play();
//creating jittering stars at night
star(random(0,width),random(0, height/2));
star(random(0,width),random(0, height/2));
star(random(0,width),random(0, height/2));
}
}
//star code from class lecture : 14
function star(a,b){
var x = [50, 61, 83, 69, 71, 50, 29, 31, 17, 39];
var y = [18, 37, 43, 60, 82, 73, 82, 60, 43, 37];
var nPoints = x.length;
fill(255, 255, 0);
translate(a,b);
scale(random(0.1,0.5));//scaling the stars at random
beginShape();
for (var i = 0; i < nPoints; i++) {
vertex( (x[i]) + random(-3,3), (y[i]) + random(-3,3) ); //random creates jitter effect
}
endShape(CLOSE);
}