![[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 my sonic story, I decided to depict a short story of a girl who is waiting for the bus but unfortunately, the bus does not stop, and thundering starts. I used images of drawings for the girl and clouds while I coded the other “characters” (the bus stop, light post, and bus). For the sounds, I used the sound of a bus and the sound of thunder beginning. This story is a very familiar experience in my life (although, fortunately, I never got rained on immediately after missing the bus).
sketch
// story: girl is waiting for the bus but the bus skips over her and it begins to thunder.
var person;
var personFrowning;
var busSound;
var thunder;
var rain;
var clouds;
function preload() {
person = loadImage("https://i.imgur.com/hEZlRjK.png");
personFrowning = loadImage("https://i.imgur.com/5vGwTK1.png");
clouds = loadImage("https://i.imgur.com/xBxIA9K.png")
busSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/bus.wav");
thunder = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/thunder-3.wav");
}
function setup() {
createCanvas(400, 350);
useSound();
frameRate(60);
}
function soundSetup() {
busSound.setVolume(.5);
thunder.setVolume(.5);
}
var busPosition = 400;
function draw() {
// bus sound
busSound.playMode("untilDone");
busSound.play();
noStroke();
// sky
background(31, 35, 105);
image(clouds, 0, 0, width, 100);
// road
fill(150);
rect(0, 250, width, height);
// sidewalk
fill(200);
rect(0, 240, width, 30);
drawBusStop();
drawStreetLamp();
// person
if(busPosition > 80) { // happy person, waiting for bus, facing the bus (to the right)
push();
translate(400, 0);
scale(-1, 1);
image(person, 240, 180, 80, 80);
pop();
textSize(10);
fill(255);
text("yay! the bus is coming!", 100, 300);
}
else { // sad person because bus did not stop, facing the bus (to the left)
image(personFrowning, 80, 180, 80, 80);
// add captions based on bus position
if(busPosition < 70 & busPosition > -235) {
textSize(10);
fill(255);
text("what the heck? did he not see me...", 100, 300);
}
}
drawBus(busPosition);
busPosition -= 1;
// bus is gone
if(busPosition == - 235) {
busSound.stop();
// thunder starts
thunder.play();
noLoop();
}
}
// draw bus
function drawBus(x) {
// bus body
fill(145, 0, 15);
rect(x, 150, 230, 110);
// windows
fill(201, 228, 250);
rect(x, 160, 40, 40);
rect(x + 100, 160, 50, 40);
rect(x + 160, 160, 50, 40);
// wheels
fill(0);
circle(x + 20, 265, 30, 30);
circle(x + 60, 265, 30, 30);
circle(x + 170, 265, 30, 30);
circle(x + 210, 265, 30, 30);
}
// draw bus stop pole
function drawBusStop() {
// pole
fill(0);
rect(70, 105, 5, 140);
// sign
fill(213, 33, 33);
rect(60, 105, 25, 25);
}
// draw street lamp
function drawStreetLamp() {
// light reflection
fill(255, 233, 158, 50);
circle(355, 105, 50);
// pole
fill(0);
rect(350, 105, 10, 140);
// light
fill(255, 233, 158);
circle(355, 105, 25);
}
