I wanted to create a story that was fun and easy to understand. I took a typical camping scary story and turned it into a visual piece of code. I left the story open ended where the viewer can guess what happens next.
sketchDownload
function setup() {
createCanvas(480, 480);
createDiv("p5.dom.js library is loaded.");
frameRate(1);
useSound();
}
function preload(){
ghostSound=loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/Ghost.wav");
fireCrackling=loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/Fire.wav");
flashlightClick=loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/Flashlight.wav");
windWoosh=loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/Wind.wav");
}
function soundSetup(){
ghostSound.setVolume(1);
fireCrackling.setVolume(1);
flashlightClick.setVolume(1);
windWoosh.setVolume(1);
}
function draw() {
background(26, 27, 71);
fill(0, 255, 0);
rect(0, 200, 480, height-200);
translate(100, 100);
push();
if(frameCount % 2 == 0){
translate(115, 110);
scale(.8);
fill(255, 0, 0);
if(frameCount < 32){ beginShape();
curveVertex(84, 70);
curveVertex(84, 70);
curveVertex(95, 19);
curveVertex(87, 5);
curveVertex(75, 25);
curveVertex(60, -30);
curveVertex(40, 25);
curveVertex(32, -10);
curveVertex(21, 17);
curveVertex(32, 70);
curveVertex(84, 70);
curveVertex(84, 70);
endShape();
}
}
else{
if(frameCount < 32){ push();
translate(115, 110);
scale(.8);
fill(255, 0, 0);
beginShape();
curveVertex(84, 70);
curveVertex(84, 70);
curveVertex(32, 70);
curveVertex(21, 17);
curveVertex(32, 0);
curveVertex(40, 25);
curveVertex(50, -25);
curveVertex(75, 25);
curveVertex(80, 5);
curveVertex(90, -5);
curveVertex(84, 70);
curveVertex(84, 70);
endShape();
}
}
pop();
fill(165, 42, 42);
push();
translate(125, 150);
rotate(radians(25));
rect(0, 0, 80, 20);
pop();
push();
translate(125, 150);
rotate(radians(-25));
rect(-20, 30, 80, 20);
pop();
if(frameCount>12){
fill(253, 217, 181);
}
else{
fill(0);
}
circle(0, 5, 50);
line(0, 30, 0, 100);
line(0, 100, -15, 150);
line(0, 100, 15, 150);
line(-15, 60, 15, 60);
line(15, 60, 0, 70);
fill(255);
rect(-2.5, 60, 5, 20);
quad(-2.5, 60, 2.5, 60, 7.5, 50, -7.5, 50)
if(frameCount > 12){
push();
noStroke();
fill(255, 255, 0, 60);
quad(-7.5, 50, 7.5, 50, 25, 0, -25, 0);
pop();
}
push();
if(frameCount > 17 & frameCount < 27){
translate(frameCount*-5, 0);
ghost();
}
pop();
if(frameCount > 27){
push();
translate(200+frameCount*-10, 0);
stroke(255);
line(250, 50, 300, 50);
line(275, 70, 325, 70);
line(290, 30, 340, 30);
pop();
}
if(frameCount > 32){
background(0);
noLoop();
}
if(frameCount == 13){
flashlightClick.play();
}
else if(frameCount == 5){
fireCrackling.play();
if(frameCount == 10){
fireCrackling.stop();
}
}
else if(frameCount == 18){
ghostSound.play();
}
else if(frameCount == 28){
windWoosh.play();
}
}function ghost(){
push();
beginShape();
noStroke();
arc(300, 50, 40, 100, PI, 0);
triangle(300, 50, 305, 65, 310, 50);
triangle(310, 50, 315, 65, 320, 50);
triangle(290, 50, 295, 65, 300, 50);
triangle(280, 50, 285, 65, 290, 50);
fill(0);
ellipse(295, 20, 5, 10);
ellipse(305, 20, 5, 10);
pop();
}