Project 10: Animation

sketch

// gnmarino
// gia marino
// class section D

// the story is suppose to be up to your own interruptation.
// the main point is someone is trying to reach love and they can't so 
// a friend has to help them out. The concept is about how sometimes
// you need a friend's help even if it's a little thing

var rope; // rope swinging noise
var heart; // heart's voice
var char1; // 1st character's voice
var walking; // 2nd character's walking
var counter = 0; // counts the frames
var animationImages = []; // holds images for animation

function preload() {
    rope = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/Rope-Sound.wav");
    heart = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/Heart.wav");
    char1 = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/character1noise.wav");
    walking = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/walking.wav")

    var imageNames = [];
    imageNames[0] = "https://i.imgur.com/ZP19uwT.jpg";
    imageNames[1] = "https://i.imgur.com/4Bl2ivM.jpg"
    imageNames[2] = "https://i.imgur.com/VaO2Qof.jpg"
    imageNames[3] = "https://i.imgur.com/tpxAt2V.jpg"
    imageNames[4] = "https://i.imgur.com/nkNrX5Y.jpg"
    imageNames[5] = "https://i.imgur.com/HEE2XA5.jpg"
    imageNames[6] = "https://i.imgur.com/7vkRyqN.jpg"
    imageNames[7] = "https://i.imgur.com/FOvHPju.jpg"
    imageNames[8] = "https://i.imgur.com/22f630s.jpg"
    imageNames[9] = "https://i.imgur.com/7bbhlOa.jpg"
    imageNames[10] = "https://i.imgur.com/Ke1o6Gb.jpg"
    imageNames[11] = "https://i.imgur.com/hnSXa9y.jpg"
    imageNames[12] = "https://i.imgur.com/HPLomd1.jpg"
    imageNames[13] = "https://i.imgur.com/ifo5g3u.jpg"
    imageNames[14] = "https://i.imgur.com/cedp6AC.jpg"
    imageNames[15] = "https://i.imgur.com/6XxqZ1u.jpg"
    imageNames[16] = "https://i.imgur.com/rhEs6bx.jpg"
    imageNames[17] = "https://i.imgur.com/o5VujYT.jpg"
    imageNames[18] = "https://i.imgur.com/9nXwcuh.jpg"
    imageNames[19] = "https://i.imgur.com/07qlded.jpg"
    imageNames[20] = "https://i.imgur.com/wH2NFj7.jpg"
    imageNames[21] = "https://i.imgur.com/qB6Ayi0.jpg"
    imageNames[22] = "https://i.imgur.com/AM8eMi3.jpg"
    imageNames[23] = "https://i.imgur.com/uOzyybS.jpg"
    imageNames[24] = "https://i.imgur.com/vnEhu5u.jpg"
    imageNames[25] = "https://i.imgur.com/SEA3Z8z.jpg"

    for (var i = 0; i < imageNames.length; i++){
        animationImages[i] = loadImage(imageNames[i]);
    }
}

function setup() {
    createCanvas(400, 400);
    useSound();
    frameRate(1);
    background(200);
}

function soundSetup() { // setup for audio generation
    rope.setVolume(0.5);
    heart.setVolume(0.5);
    char1.setVolume(0.5);
    walking.setVolume(0.5);
}

function draw() {

    // displays an image every frame
    image(animationImages[counter], 0, 0, 400, 500);

    // all the if statements state what frame each noise will play
    if (counter == 1 || counter == 11 || counter == 24) {
        char1.play();
    }
    if ( counter == 4 || counter == 25) {
        heart.play();
    }
    if (counter == 6) {
        rope.play();
    }
    if (counter == 13 || counter == 15) {
        walking.play();
    }

    counter ++

    // ends animation
    if (counter == animationImages.length+1) {
        background(0);
        noLoop();
    }
}

For my project this week I wanted to story to be interrupted however you wanted. So the actual story is quite simple but you could get many different means out of the animation. My four sounds were the heart’s voice, the rope moving, character 1’s voice, and character 2’s footsteps.