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
/*There is man at a camp fire telling ghost stories. The flashlight is the
trope of holding a flashlight under one's chin. A ghost then appears but cannot
move past the fire. The wind then blows out the fire and the screen goes dark.
The next part is up to the viewer's imagination.*/
function setup() {
createCanvas(480, 480);
createDiv("p5.dom.js library is loaded.");
frameRate(1);
useSound();
}
//loads all audio files before running the code
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");
}
//sets the volume for all the sounds
function soundSetup(){
ghostSound.setVolume(1);
fireCrackling.setVolume(1);
flashlightClick.setVolume(1);
windWoosh.setVolume(1);
}
function draw() {
background(26, 27, 71);
fill(0, 255, 0);
//creates the grass
rect(0, 200, 480, height-200);
translate(100, 100);
push();
//if frameCount is even it will display one fire, if odd it will display
//the other
//the secondary ifs make the fire stop when the wind blows past
if(frameCount % 2 == 0){
translate(115, 110);
scale(.8);
fill(255, 0, 0);
//One version of the fire
if(frameCount < 32){ //stops the fire when the wind blows by
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();
//pop();
}
}
else{
if(frameCount < 32){ //stops fire when the wind blows by
//Second version of the fire
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();
//downward sloping log under the fire
fill(165, 42, 42);
push();
translate(125, 150);
rotate(radians(25));
rect(0, 0, 80, 20);
pop();
//upward sloping log under the fire
push();
translate(125, 150);
rotate(radians(-25));
rect(-20, 30, 80, 20);
pop();
//if statement makes the face light up with the flashlight
if(frameCount>12){
fill(253, 217, 181);
}
else{
fill(0);
}
//head
circle(0, 5, 50);
//body
line(0, 30, 0, 100);
//legs
line(0, 100, -15, 150);
line(0, 100, 15, 150);
//arms
line(-15, 60, 15, 60);
line(15, 60, 0, 70);
//flashlight
fill(255);
rect(-2.5, 60, 5, 20);
quad(-2.5, 60, 2.5, 60, 7.5, 50, -7.5, 50)
//flashlight beam that lights up face
if(frameCount > 12){
push();
noStroke();
fill(255, 255, 0, 60);
quad(-7.5, 50, 7.5, 50, 25, 0, -25, 0);
pop();
}
//moves the ghost from right to left
push();
if(frameCount > 17 & frameCount < 27){
translate(frameCount*-5, 0);
ghost();
}
pop();
//wind
//if moves the wind from right to left
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();
}
//stops the animation and creates a black screen
if(frameCount > 32){
background(0);
noLoop();
}
//when the flashlight turns on, the sound is made
if(frameCount == 13){
flashlightClick.play();
}
//fire sounds starts at 5 and ends prior to the flashlight
else if(frameCount == 5){
fireCrackling.play();
if(frameCount == 10){
fireCrackling.stop();
}
}
//ghost sound starts when it is created
else if(frameCount == 18){
ghostSound.play();
}
//wind sound plays when the wind appears on screen
else if(frameCount == 28){
windWoosh.play();
}
}
//function to create the ghost
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();
}