This story began as an idea to create a city environment using ambient noise. Then I thought about making some kind of event occur to break that ambience, which ended up being an alien abduction. From there I developed the idea to create some kind of resolution, which became the superhero who flies off after the UFO. My sound effects were the city noise, ufo slowing down, ufo beam, ufo flying, singe scream, crowd scream, single shout, crowd cheer, and an outro theme.
Alien Abductionvar city;
var scream;
var ufoSlow;
var ufoBeam;
var ufoFly;
var crowdscream;
var yell;
var cheer;
function preload (){
city = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/busycity.wav"); //city noise
scream = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/screams.mp3") //abductee scream
crowdscream = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/crowdscream.wav"); //crowd screaming
ufoSlow = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/ufoslow.wav"); //ufo slowing down
ufoFly = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/ufowave.wav"); //ufo flying away
ufoBeam = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/ufowave.wav"); //ufo capture beam noise
yell = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/hey.wav"); //superhero yell
cheer = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/cheer.wav"); //crowd cheering noise
outro = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/outro.wav"); //outro music
}
function soundSetup(){
city.setVolume(0.3); //setting the volume for each noise
scream.setVolume(1);
ufoslow.setVolume(0.5);
ufoBeam.setVolume(0.7);
ufoFly.setVolume(2);
crowdscream.setVolume(.3);
yell.setVolume(1.5);
cheer.setVolume(1);
outro.setVolume(1);
}
var x = []; //x position of given person
var y = []; //y position of given person
var dx = []; //speed of given person
var cx = []; //x position of given car
var cy = []; //y position of given car
var cdx = []; //speed of given car
var skin = []; //skin color of given person
var shirt= []; //shirt color
var pants = []; //pants color
var carW = []; //width of car
var carH = []; //height of car
var h = []; //height of person
var w = []; //width of person
var ufoY = 0; //y position of ufo
var ufoX = 0; //x position of ufo
var aY = 300; //abductee y position
var sX = 0; //superhero x position
var sY = 170; //superhero y position
function setup() {
createCanvas(400, 300);
for (var i = 0; i < 20; i++) {
x[i] = random(25, width-25);
y[i] = height-25
dx[i] = random(-3, 3);
shirt[i] = color(random(0,255), random(0,255),random(0,255))
skin[i] = color(random(200,250),random(100,150),random(20,100))
pants[i] = color(random(0,255), random(0,255),random(0,255))
h[i] = random(15,20);
w[i] = random(5,8);
frameRate(10);
}
for (var c = 0; c < 5; c++) {
cx[c] = random(25, width-25);
cy[c] = height-15
carW[c] = random(20,40);
carH[c] = random(15,20);
cdx[c] = random(-5, 5);
}
}
function draw() {
if(frameCount<100){
city.play(); //play city sound until UFO comes
}
background(43,226,232); //light blue
push();
rectMode(CORNER);
fill(169,169,169,150); //gray
rect(width/2,height-height/4,100,height/4); //buildings
rect(width/6,height-height/4.5,75,height/4.5);
rect(width/6-25,height-height/7,25,height/5);
pop();
for (var c = 0; c < 5; c++) {
car(cx[c], cy[c],carW[c],carH[c],cdx[c],shirt[c]); //call car function
cx[c] += cdx[c]; //move car horizontally
if (cx[c] > width-25 || cx[c] < 25){ //turn around if hits edge
cdx[c] = -cdx[c];
}
}
for (var i = 0; i < 20; i++) {
person(x[i], y[i], dx[i], skin[i],shirt[i],pants[i],h[i],w[i]); //call person function
x[i] += dx[i];
if(frameCount>100){
x[i] += 2*dx[i]; //speed up in panic when UFO comes
}
if (x[i] > width-25 || x[i] < 25) { //turn around if hit edge
dx[i] = -dx[i];
}
}
push();
rectMode(CORNER);
fill(169,169,169); //gray
rect(0,height/2,50,height/2); //back buildings
rect(width-75,height-height/3,75,height/3);
pop();
if(frameCount>50){
push();
translate(ufoX,ufoY); //translate ufo shape
UFO(width/2,-300); //call ufo function to draw
pop();
ufoSlow.play(); //play ufo slow noise
}
if(frameCount>100){
city.stop(); //stop city noise
scream.play(); //start scream
ufoBeam.play(); //start beam noise
}
if(frameCount>100 & frameCount<115){
fill(21,249,36,150) //light green
triangle(width/2,height/2,width/2-50,height,width/2+50,height) //ufo beam
abductee(width/2,aY); //call function to draw person
aY-=11; //move abductee upwards
}
ufoY+=4; //move ufo down
if(frameCount>85){
ufoY-=4; //stop ufo
ufoSlow.stop(); //stop ufo sound
}
if(frameCount>115){
ufoY-=3; //move ufo up and right
ufoX+=10;
ufoBeam.stop(); //stop beam noise
scream.stop(); //stopscream noise
ufoFly.play(); //play ufo sound
crowdscream.play(); //play crowd scream noise
}
if(frameCount>135){
ufoFly.stop(); //stop ufo sound
}
if(frameCount>150){
push();
rotate(radians(50)); //turn diagonally
superhero(sX,sY); //call superhero function to draw
pop();
sX += 15 //move superhero diagonally(adjusted for rotation)
sY -=20
}
if(frameCount>152){
crowdscream.stop()
}
if(frameCount>152 & frameCount<154){ //as superhero flies he yells
yell.play();
}
if(frameCount>160){ //as superhero flies by, people cheer
cheer.play(); //play cheering
}
if(frameCount>200){
outro.play(); //play song
cheer.stop(); //stop cheering
push();
rectMode(CORNER);
fill(255,0,0); //red
rect(0,0,400,300); //red background
textSize(50);
fill(0); //black
text("THE END",100,150);
}
if(frameCount>500){
outro.stop(); //end song
}
}
function person(x,y,dx,skin,shirt,pants,h,w) {
fill(skin);
ellipse(x,y-5,5, 5); //head
rectMode(CENTER);
fill(shirt);
rect(x,y+10,w,h); //body
fill(pants);
rect(x,y+25,w,h); //legs
}
function abductee(x,y){
fill(219,150,30); //beige
ellipse(x,y-5,5,5); //head
rectMode(CENTER);
fill(0,255,0); //green
rect(x,y+10,5,15); //shirt
fill(0,0,255); //blue
rect(x,y+25,5,15); //pants
}
function car(cx,cy,carW,carH,cdx,shirt){
fill(shirt); //same as shirt, so just to save a variable
rect(cx,cy,carW,carH); //body of car
noStroke();
if (cdx < 0) { //if car turns around
rect(cx-17,cy+4,10,10); //front of car on left
} else {
rect(cx+17,cy+4,10,10); //front of car on right
}
fill(0); //black
ellipse(cx-10,cy+10,10,10); //wheels
ellipse(cx+10,cy+10,10,10);
}
function UFO(x,y){
push();
translate(x,y);
scale(2);
fill(152,152,152); //gray
ellipse(0,50,40,15); //ufo body
quad (-5,52,-15,60,-14,61,-4,53) //left landing leg
rect (-2,52,1.5,10) //middle landing leg
quad (1,52,11,61,12,60,4,53) //right landing leg
fill(175,238,170,200); //opaque green-blue
ellipse(0,45,25,15); //window dome
fill(255,0,0); //red
circle(-12,52,3); //left light
circle(12,52,3); //right light
fill(255,255,0); //yellow
circle(0,54.5,3); //middle light
pop();
}
function superhero(x,y){
fill(255,0,0); //red
quad(x+5,y+2,x-5,y+2,x-15,y+30,x+15,y+30); //cape
fill(219,150,30); //beige
ellipse(x,y-5,10,10); //head
rectMode(CENTER);
fill(0,0,255); //blue
rect(x,y+10,10,20); //body
fill(0,0,255)
rect(x,y+25,10,20); //legs
quad(x+2,y+5,x+8,y-10,x+10,y-8,x+5,y+6); //right arm
quad(x-2,y+2,x-8,y+17,x-10,y+15,x-5,y+4); //leftarm
fill(255,0,0); //red
rect(x,y+35,10,5); //boots
}