![[OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice](wp-content/uploads/2021/08/cropped-notcurrentsemester.jpg){kind=small}
![[OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice](wp-content/uploads/2021/09/stop-banner.png)
For Project 10, I decided to create a collage based story inspired by the aesthetic of Vaporwave. My process began by creating background collages in Photoshop and displaying them in p5-js. Then, I added in the characters within p5-js so that they could be animated. Due to the surreal nature of the world I ended up creating with the collages, I decided to incorporate Alice from Alice in Wonderland as the main character of the story traveling through this “Vaporwave Land.”
My first sound was a piece of music I found that reminded me of startup sounds from old computers. The next sound I used was the error message sound to coincide with the error message character’s appearance. The third sound I used was an ominous drone sound I found to bring life to the All-Seeing-Eye character. The fourth sound I used was the Windows 95 shutdown sound to coincide with the end of the story and the Windows 95 logo character. The last sound was a piece of “80s” inspired music that I used as credit music.
sketch – CopyDownload
//Story Concept: Alice from Alice in Wonderland wakes up stuck in the glitched out world
//of Vaporwave. First, she wakes up in the MS Paint canvas and sees the marble bust from
//Macintosh Plus's Floral Shoppe album floating above her as startup music plays. Next,
//as she explores this new world trying to find a way out she discovers and incessant error
//message that blocks her path. Then, she visits the All-Seeing-Eye for guidance, but the
//eye just floats around aimlessly making an ominous drone. Finally, she arrives at the
//original frontier and manages to shut down the Windows 95 logo that runs this world.
var sceneOne;
var sceneTwo;
var sceneThree;
var sceneFour;
var error;
var alice;
var soundOne;
var blink = true; //helps make error message disappear and reappear
var soundError;
var eye;
var eyeDrone;
var windows;
var logoFlip = true;//helps flip and reflip Windows 95 logo
var vaporwave;
var sleepalice;
var sitalice;
var windowSound;
var marbleBust;
function preload() {
// call loadImage() and loadSound() for all media files here
sceneOne = loadImage("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/2-scaled.jpgmu.edu/15-104/f2020/wp-content/uploads/2020/11/1-scaled.jpg");
sceneTwo = loadImage("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/2-scaled.jpg");
sceneThree = loadImage("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/3-scaled.jpg");
sceneFour = loadImage("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/4-scaled.jpg");
//source: https://i.pinimg.com/originals/c8/0b/29/c80b290d6ea187abe624cd42c4b44014.png
windows = loadImage("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/windows.png")
//source: https://freshsparks.com/wp/wp-content/uploads/2015/06/generic-error-message-microsoft.jpg
error = loadImage("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/error.png");
//source: http://2.bp.blogspot.com/-cM30a7xxeMg/TplisvJ0QYI/AAAAAAAAABk/DUgdfkhhq0c/s320/Alice%2B2.gif
alice = loadImage("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/alice.gif");
//source: https://freesound.org/people/kjartan_abel/sounds/542453/
soundOne = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/japansky-1.wav");
//source: https://freesound.org/people/AbdrTar/sounds/519422/
soundError = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/error-1.wav");
//source: https://freemasoninformation.com/wp-content/uploads/2014/05/all-seeing-eye-of-god-796x1024.jpg
eye = loadImage("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/eye.png");
//source: https://freesound.org/people/pointparkcinema/sounds/407241/
eyeDrone = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/eyedrone-1.wav");
//source: https://freesound.org/people/Doctor_Dreamchip/sounds/523808/
vaporwave = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/vaporwave.wav");
//source: https://www.disneyclips.com/images/images/alice1small.gif
sleepalice = loadImage("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/sleepingalice.gif");
//source: https://www.disneyclips.com/images/images/alice-small.png
sitalice = loadImage("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/alicesit.png");
//source: https://www.myinstants.com/instant/windows-xp-shutdown/
windowSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/preview_4.mp3")
//source: https://ih0.redbubble.net/image.236642016.7494/ap,550x550,12x16,1,transparent,t.png
marbleBust = loadImage("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/floralshoppe.png");
}
function setup() {
createCanvas(400, 400);
useSound();
frameRate(1);
}
function soundSetup() { // setup for audio generation
soundOne.setVolume(.2);
soundError.setVolume(1);
eyeDrone.setVolume(.7);
vaporwave.setVolume(.5);
windowSound.setVolume(.5);
}
var soundplay = true;
var marbleAngle = 0;
function draw() {
var eyeX = random(0,3500);
var eyeY = random(220,500);
var marbleRadius = 600;
// you can replace any of this with your own code:
background(200);
text("p5.js 15104 fall 2019 v1", 10, 15);
print(soundplay);
if (frameCount < 27){
soundplay = true;
image(sceneOne,0,0,400,400);
push();
scale(.25,.25);
image(sitalice,90,775);
pop();
push();
imageMode(CENTER);
scale(.5,.5);
image(marbleBust,marbleRadius*cos(radians(marbleAngle)),250);
marbleAngle += 20;
pop();
stroke("black");
fill("black");
text("Chapter One: Alice Wakes Up in the Internet",5,390);
soundOne.play();
} else if (frameCount >= 27 & frameCount < 50){
soundOne.stop();
image(sceneTwo,0,0,400,400);
push();
scale(.1,.1);
drawAlice(3000,3000);
pop();
if (blink == true){ //makes error message appear and disappear
push();
scale(.8,.8);
drawError(0,height/4);
pop();
soundError.play();
} else if (blink == false){
soundError.stop();
background(0,0);
}
blink = !blink;
stroke("black");
fill("black");
text("Chapter Two: Alice Encounters an Error",5,390);
} else if (frameCount >= 50 & frameCount < 70) {
image(sceneThree,0,0,400,400);
push();
scale(.4,.4);
drawAlice(650,300);
pop();
push();
scale(.1,.1);
drawEye(eyeX,eyeY); //All-Seeing-Eye moves randomly on canvas
eyeDrone.play();
pop();
stroke(255);
fill(255);
text("Chapter Three: Alice Asks the All-Seeing-Eye for Help",5,390);
} else if (frameCount >= 70 & frameCount < 90){
eyeDrone.stop();
image(sceneFour,0,0,400,400);
push();
scale(.1,.1);
drawAlice(3300,3300);
pop();
push();
scale(.5,.5);
if (logoFlip == true){
drawLogo(width/2,height/2);
windowSound.play();
} else if (logoFlip == false){
windowSound.stop();
scale(-1,1);
drawLogo(-1.5*width,height/2);
}
pop();
logoFlip = !logoFlip;
stroke(120);
fill(120);
text("Chapter Four: Alice Faces the Original Frontier",10,390);
} else {
//text(frameCount,0,0);
if (soundplay == true){
vaporwave.play(); //Cheesy end credit music plays
soundplay = !soundplay; //prevents song from restarting each time draw loops
}
background(0);
push();
scale(3,3);
fill(255,255,0);
stroke(255,255,0);
text("Alice in Vaporwave Land",1,height/9 + 10);
if (frameCount> 95){
text("Click to Start Again",1,(height/9)+20);
}
pop();
push();
scale(.5,.5);
image(sleepalice, 400,400);
pop();
}
}
function mousePressed(){
if (frameCount > 95){ //restarts story
vaporwave.stop();
frameCount = 0;
}
}
function drawAlice(x,y){
image(alice,x,y);
}
function drawError(x,y){
image(error,x,y);
}
function drawEye(x,y){
image(eye,x,y);
}
function drawLogo(x,y){
image(windows,x,y);
}