Project 10 – Sonic Story

This story is about a magician who performs a couple of tricks in front of an audience. However, the ending does not go as planned, and the girl that he made disappear doesn’t come back.

sketch
var count = 0;
var stage;
var magician;
var smoke;
var bunny;
var girl;
var blanket;
var tear;
var walking;
var cheering;
var hop;
var clapping;
var gasping;
var poof;

var magicianX = 500;
var magicianY = 150;
var bunnyX = 110;
var bunnyY = 320;
var girlX = 500;
var girlY = 290;

function preload() {
    //Load images
    stage = loadImage("https://i.imgur.com/nboGOqA.jpg");
    magician = loadImage("https://i.imgur.com/eAj8gmY.png");
    smoke = loadImage("https://i.imgur.com/6QloW3v.png");
    bunny = loadImage("https://i.imgur.com/FVDd9HE.png");
    girl = loadImage("https://i.imgur.com/3umyhtS.png");
    blanket = loadImage("https://i.imgur.com/FIlojGn.png");
    tear = loadImage("https://i.imgur.com/ie45BVh.png");
    //Load sounds
    walking = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/walking.wav");
    cheering = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/cheering.wav");
    hop = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/hop.wav");
    clapping = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/clapping.wav")
    gasping = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/gasping.wav");
    poof = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/poof.wav");
}

function setup() {
    createCanvas(500, 400);
    useSound();
    frameRate(3);
}

function soundSetup() {
    cheering.setVolume(0.2);
    gasping.setVolume(0.2);
    walking.setVolume(0.3);
    poof.setVolume(0.5);
    hop.setVolume(0.2);
}

function draw() {
    background(200);
    //Stage
    image(stage, 0, 0, width, height);
    //Magician
    image(magician, magicianX, magicianY, width * 0.3, height * 0.5);
    //Magician enters as audience cheers
    if (count == 0) {
        cheering.play();
    }
    if (count < 8) {
        magicianX -= 40;
        walking.play();
    }
    //Bunny hops away
    if (count > 18 & count < 30) {
        image(bunny, bunnyX, bunnyY, width * 0.1, height * 0.1);
        bunnyX += 30;
        hop.play();
    }
    //Cloud of smoke before bunny appears
    if (count > 14 & count < 20) {
        image(smoke, 60, 270, width * 0.3, height * 0.3);
    }
    if (count == 15) {
        poof.play();
    }
    //Girl enters
    if (count < 65) {
        image(girl, girlX, girlY, width * 0.12, height * 0.2);
        if (count > 34 & count < 48) {
            girlX -= 10;
            walking.play();
        }
    }
    //Blanket makes girl disappear
    if (count > 58 & count < 66) {
        image(blanket, 350, 280, width * 0.2, height * 0.25);
    }
    if (count == 62) {
        poof.play();
    }
    if (count == 67) {
        clapping.play();
    }
    if (count > 75 & count < 83) {
        image(blanket, 350, 280, width * 0.2, height * 0.25);
    }
    if (count == 79) {
        poof.play();
    }
    if (count > 90 & count < 98) {
        image(blanket, 350, 280, width * 0.2, height * 0.25);
    }
    if (count == 94) {
        poof.play();
    }
    if (count > 100) {
        image(tear, 255, 225, width * 0.01, height * 0.03);
    }
    //Girl does not reappear and crowd gasps
    if (count == 99) {
        gasping.play();
    }
    count++;
}

The sound effects (cheering, clapping, walking, hopping, gasping, poofs) match each step that a character takes or a certain action that occurs.

Leave a Reply