My process for this project was too make a nature story, I started with a buzzing bee that flies through the screen, a chirping bird that gets sad from not finding any friends, a sun that gives off an angelic sound, and a rising moon that brings out nighttime bugs.
sketch
var bee={x:0,y:100,h:20,w:40,dx:83,r:255,g:255,b:0};
var tree={x:75,y:150,w:25,h:250,lw:155,lh:75,r:210,g:105,b:30,gg:255,z:0};
var robin={x:-5,y:-5,dx:15,dy:28,c:255,z:0,r:212,g:124,b:47,
rr:48,gg:46,bb:59,r3:105,g3:107,b3:102};
var sun={x:-50,y:200,w:100,dx:50,dy:-28,c:255,z:0}
var moon={x:450,y:200,w:100,dx:-50,dy:-28,c:0,r:203,g:234,b:246,
c1:20,c2:20,c3:25,c4:40}
//objects
function setup() {
createCanvas(400, 400);
useSound();
frameRate(1);
}
function preload(){ //preloading the sounds
buzz=loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/bee-3.wav");
chirp=loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/birdsound-1.wav");
ahh=loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/sunsound-1.wav");
moonsounds=loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/nightsounds-1.wav");
}
function soundSetup(){ //setting up sounds
buzz.setVolume(0.25);
chirp.setVolume(0.75);
ahh.setVolume(0.8);
moonsounds.setVolume(0.8);
}
function draw() {
background(0,155,255);
if(frameCount>23){ //have the sun rise
movingsun();
}
if(frameCount>23 & frameCount<30){ //story
text('The sun comes up',250,250);
}
if(frameCount==28){ //sun stops
sun.dx=0;
sun.dy=0;
}
if(frameCount==30){ //sounds plays
ahh.play();
}
if(frameCount>=30 & frameCount<=34){ //story
text('And shines its light',250,250);
}
if(frameCount>34 & frameCount<=38){ //sun sets and story
sun.dx=50;
sun.dy=28;
sun.x+=sun.dx;
sun.y+=sun.dy;
text('And then sets',250,250);
}
if(frameCount>=39){ //it becomes night time
background(0);
movingmoon();
}
if(frameCount>=39 & frameCount<43){ //story
text('The moon rises',250,250);
}
if(frameCount>=43 & frameCount<50){ //moon stops and story
moon.dx=0;
moon.dy=0;
moonsounds.play(); //sound plays
text('And the creatures come out',250,250);
}
if(frameCount>50 & frameCount<55){ //moon sets, sound stops and story
moon.dx=-50;
moon.dy=28;
moon.x+=moon.dx;
moon.y+=moon.dy;
moonsounds.stop();
text('The moon then sets',250,250);
}
if(frameCount>=55){ //story ends
text('Goodnight!',250,250);
}
bark(); //call tree
flyingbee(); //call bee
bird(); //call bird
print(frameCount);
if(frameCount>0 & frameCount<=3.1){ //play bee sound
buzz.play();
}
if(frameCount<=8.1){ //story
text('The bee flew by the tree',250,250);
}
if(frameCount>=8){ //brid lands on tree
robin.dx=0;
robin.dy=0;
}
if(frameCount>9 & frameCount<13){ //bird song
chirp.play();
}
if(frameCount>9 & frameCount<18){ //story
text('The bird calls for a friend',250,250);
}
if(frameCount>18 & frameCount<23){ //bird flies away and story
robin.dx=15;
robin.dy=-28;
robin.x+=robin.dx;
robin.y+=robin.dy;
text('He gets sad and leaves',250,250);
}
}
function flyingbee(){ //bee helper function
fill(bee.r,bee.g,bee.b);
ellipse(bee.x,bee.y,bee.w,bee.h);
stroke(0);
push();
strokeWeight(5);
line(bee.x-5,bee.y-7,bee.x-5,bee.y+7);
line(bee.x+5,bee.y-7,bee.x+5,bee.y+7);
pop();
bee.x+=bee.dx;
}
function bark(){ //tree helper function
fill(tree.r,tree.g,tree.b);
rect(tree.x,tree.y,tree.w,tree.h);
fill(tree.z,tree.gg,tree.z);
ellipse(tree.x+tree.w/2,tree.y,tree.lw,tree.lh);
}
function bird(){ //bird helper function
fill(robin.r,robin.g,robin.b);
circle(robin.x,robin.y,50);
fill(robin.rr,robin.gg,robin.bb);
circle(robin.x+25,robin.y-13,25);
fill(robin.r3,robin.g3,robin.b3);
triangle(robin.x-35,robin.y-5,robin.x+5,
robin.y-5,robin.x-25,robin.y+25);
fill(robin.c,robin.c,robin.z);
triangle(robin.x+25,robin.y-13,robin.x+30,
robin.y-13,robin.x+25,robin.y-8);
robin.x+=robin.dx;
robin.y+=robin.dy;
}
function movingsun(){ //sun helper function
fill(sun.c,sun.c,sun.z);
circle(sun.x,sun.y,sun.w);
sun.x+=sun.dx;
sun.y+=sun.dy;
}
function movingmoon(){ //moon helper function
push();
fill(moon.r,moon.g,moon.b); //moon
circle(moon.x,moon.y,moon.w);
fill(moon.c);
circle(moon.x-5,moon.y-5,moon.c1); //moon craters
circle(moon.x-30,moon.y+7,moon.c2);
circle(moon.x+25,moon.y+25,moon.c3);
circle(moon.x-4,moon.y-20,moon.c4);
moon.x+=moon.dx;
moon.y+=moon.dy;
pop();
}