merlebac Final Project

Rwanda Animation

var ImageN = 81; // Creates a global variable for the number of images

var diameter = 30; // Determines the diameter for the circles

var ImageX = []; // Creates an empty array for the x-coordinate of the images
var ImageY = []; // Creates an empty array for the y-coordinate of the images

var ImageWidth = []; // Creates an empty array for the width of the images
var ImageHeight = []; // Creates an empty array for the height of the images

var AdelineAudio; // Creates a variable for the audio of Adeline
var HelenAudio; // Creates a variable for the audio of Helen
var TeddyAudio; // Creates a variable for the audio of Teddy

var AdelineX = 225; // Creates the x-coordinate for the Adeline icon
var AdelineY = 235; // Creates the y-coordinate for the Adeline icon

var HelenX = 350; // Creates the x-coordinate for the Helen icon
var HelenY = 150; // Creates the y-coordinate for the Helen icon

var TeddyX = 150; // Creates the x-coordinate for the Teddy icon
var TeddyY = 320; // Creates the y-coordinate for the Teddy icon

var AdelineStart = false; // The state that triggers the animation for Adeline
var HelenStart = false; // The state that triggers the animation for Helen
var TeddyStart = false; // The state that triggers the animation for Teddy

var ImageAnimation = []; // This creates an array to store the images

var StarterImage = 0; // Determines what value the images will start at

function preload() {
    mapRwanda = loadImage("https://upload.wikimedia.org/wikipedia/commons/0/04/Rwanda_location_map.svg");
    // Loads the image of the map

    var filenames1 = []; // Creates an array to load the images into

    // Preloads the images in the animation
    filenames1[0] = loadImage("https://i.imgur.com/Xt3gDqm.jpg");
    filenames1[1] = loadImage("https://i.imgur.com/aNZUiSs.jpg");
    filenames1[2] = loadImage("https://i.imgur.com/gOFPrGM.jpg");
    filenames1[3] = loadImage("https://i.imgur.com/Ic3Hh8v.jpg");
    filenames1[4] = loadImage("https://i.imgur.com/jYC0NH1.jpg");
    filenames1[5] = loadImage("https://i.imgur.com/WAqwQTz.jpg");
    filenames1[6] = loadImage("https://i.imgur.com/Am7j6ZZ.jpg");
    filenames1[7] = loadImage("https://i.imgur.com/GFyMdUP.jpg");
    filenames1[8] = loadImage("https://i.imgur.com/GFyMdUP.jpg");
    filenames1[9] = loadImage("https://i.imgur.com/gkgnugY.jpg");
    filenames1[10] = loadImage("https://i.imgur.com/sICGMTJ.jpg");
    filenames1[11] = loadImage("https://i.imgur.com/iHqguHk.jpg");
    filenames1[12] = loadImage("https://i.imgur.com/cBuPUKt.jpg");
    filenames1[13] = loadImage("https://i.imgur.com/p6JMhb5.jpg");
    filenames1[14] = loadImage("https://i.imgur.com/Khc6B7j.jpg");
    filenames1[15] = loadImage("https://i.imgur.com/gDo4pij.jpg");
    filenames1[16] = loadImage("https://i.imgur.com/kBEHLxL.jpg");
    filenames1[17] = loadImage("https://i.imgur.com/YH505J9.jpg");
    filenames1[18] = loadImage("https://i.imgur.com/dg5jH5Q.jpg");
    filenames1[19] = loadImage("https://i.imgur.com/8UNZ6wd.jpg");
    filenames1[20] = loadImage("https://i.imgur.com/NQrlsmd.jpg");
    filenames1[21] = loadImage("https://i.imgur.com/kUGPt3r.jpg");
    filenames1[22] = loadImage("https://i.imgur.com/jedzdQJ.jpg");
    filenames1[23] = loadImage("https://i.imgur.com/1SB8VWa.jpg");
    filenames1[24] = loadImage("https://i.imgur.com/YxKw9wy.jpg");
    filenames1[25] = loadImage("https://i.imgur.com/EtFlQRR.jpg");
    filenames1[26] = loadImage("https://i.imgur.com/ueL8zi0.jpg");
    // Stores the Adeline images in a local array
    filenames1[27] = loadImage("https://i.imgur.com/SsolDPA.jpg");
    filenames1[28] = loadImage("https://i.imgur.com/hpPgQ7o.jpg");
    filenames1[29] = loadImage("https://i.imgur.com/47dWUGt.jpg");
    filenames1[30] = loadImage("https://i.imgur.com/uLMP5Rf.jpg");
    filenames1[31] = loadImage("https://i.imgur.com/XKZ4XUX.jpg");
    filenames1[32] = loadImage("https://i.imgur.com/sOFGz2P.jpg");
    filenames1[33] = loadImage("https://i.imgur.com/Lkp1T2v.jpg");
    filenames1[34] = loadImage("https://i.imgur.com/oH9vodk.jpg");
    filenames1[35] = loadImage("https://i.imgur.com/MqUKLwm.jpg");
    filenames1[36] = loadImage("https://i.imgur.com/786JyXJ.jpg");
    filenames1[37] = loadImage("https://i.imgur.com/1sPhMmn.jpg");
    filenames1[38] = loadImage("https://i.imgur.com/UmJs8Iv.jpg");
    filenames1[39] = loadImage("https://i.imgur.com/DH8w2l8.jpg");
    filenames1[40] = loadImage("https://i.imgur.com/mnZLn35.jpg");
    filenames1[41] = loadImage("https://i.imgur.com/gcepiH6.jpg");
    filenames1[42] = loadImage("https://i.imgur.com/oHh4KdS.jpg");
    filenames1[43] = loadImage("https://i.imgur.com/PjUGPdb.jpg");
    filenames1[44] = loadImage("https://i.imgur.com/xrnJEfl.jpg");
    filenames1[45] = loadImage("https://i.imgur.com/1N6GpHO.jpg");
    filenames1[46] = loadImage("https://i.imgur.com/bEWtlW8.jpg");
    filenames1[47] = loadImage("https://i.imgur.com/DS4qtcF.jpg");
    filenames1[48] = loadImage("https://i.imgur.com/Dzx5Ul6.jpg");
    filenames1[49] = loadImage("https://i.imgur.com/cCaVVVj.jpg");
    filenames1[50] = loadImage("https://i.imgur.com/0l3369g.jpg");
    filenames1[51] = loadImage("https://i.imgur.com/2ddOYo1.jpg");
    filenames1[52] = loadImage("https://i.imgur.com/ho9OszF.jpg");
    filenames1[53] = loadImage("https://i.imgur.com/6Qc27oG.jpg");
    filenames1[54] = loadImage("https://i.imgur.com/SsolDPA.jpg");
    // Stores the Helen images in a local array
    filenames1[55] = loadImage("https://i.imgur.com/qo2L1rH.jpg");
    filenames1[56] = loadImage("https://i.imgur.com/5U3v4v5.jpg");
    filenames1[57] = loadImage("https://i.imgur.com/v5S7VFh.jpg");
    filenames1[58] = loadImage("https://i.imgur.com/lpbOQtX.jpg");
    filenames1[59] = loadImage("https://i.imgur.com/x5MgUep.jpg");
    filenames1[60] = loadImage("https://i.imgur.com/4yIHLh5.jpg");
    filenames1[61] = loadImage("https://i.imgur.com/CWntA53.jpg");
    filenames1[62] = loadImage("https://i.imgur.com/DCOiLSl.jpg");
    filenames1[63] = loadImage("https://i.imgur.com/1xi8u1b.jpg");
    filenames1[64] = loadImage("https://i.imgur.com/g2OVV0K.jpg");
    filenames1[65] = loadImage("https://i.imgur.com/1KiO1hf.jpg");
    filenames1[66] = loadImage("https://i.imgur.com/g4G1rUs.jpg");
    filenames1[67] = loadImage("https://i.imgur.com/HzGsbXl.jpg");
    filenames1[68] = loadImage("https://i.imgur.com/bYq0mBM.jpg");
    filenames1[69] = loadImage("https://i.imgur.com/7QigKZk.gif");
    filenames1[70] = loadImage("https://i.imgur.com/fgkHSYK.jpg");
    filenames1[71] = loadImage("https://i.imgur.com/zC1kELS.jpg");
    filenames1[72] = loadImage("https://i.imgur.com/YYjX72S.jpg");
    filenames1[73] = loadImage("https://i.imgur.com/2aUJJtq.jpg");
    filenames1[74] = loadImage("https://i.imgur.com/VnHBFlX.jpg");
    filenames1[75] = loadImage("https://i.imgur.com/zK7wB45.jpg");
    filenames1[76] = loadImage("https://i.imgur.com/2aVbY6o.jpg");
    filenames1[77] = loadImage("https://i.imgur.com/agfG6di.jpg");
    filenames1[78] = loadImage("https://i.imgur.com/iRTZlIH.jpg");
    filenames1[79] = loadImage("https://i.imgur.com/1q460zU.jpg");
    filenames1[80] = loadImage("https://i.imgur.com/fGFJEdn.jpg");
    // Stores the Teddy images in a local array

    for (var i = 0; i < ImageN; i++) {
        ImageAnimation[i] = filenames1[i];
        // Stores the images in a global array
    }

    AdelineAudio = loadSound("Adeline.mp3"); // Stores the Adeline audio
    AdelineAudio.setVolume(0.5); // Sets volume of Adeline audio

    HelenAudio = loadSound("Helen.mp3"); // Stores the Helen audio
    HelenAudio.setVolume(0.5); // Sets volume of Helen audio

    TeddyAudio = loadSound("Teddy.mp3"); // Stores the Teddy audio
    TeddyAudio.setVolume(0.5); // Sets volume of Teddy audio
}

function setup() {
    createCanvas(1000, 875 / 2); // Creates the canvas
    frameRate(30); // Sets the framerate at 30

    for (var i = 0; i < ImageN; i += 9) {
        // For loop for storing values in the empty arrays
        ImageX[i] = 500;
        ImageX[i + 1] = 1000;
        ImageX[i + 2] = 500;
        ImageX[i + 3] = 750;
        ImageX[i + 4] = 1000;
        ImageX[i + 5] = 500;
        ImageX[i + 6] = 500;
        ImageX[i + 7] = 500;
        ImageX[i + 8] = 500;
        // Stores the ImageX array with x-coordinates
        ImageY[i + 0] = -500;
        ImageY[i + 1] = 0;
        ImageY[i + 2] = 0;
        ImageY[i + 3] = 875 / 4;
        ImageY[i + 4] = -500;
        ImageY[i + 5] = 0;
        ImageY[i + 6] = 0;
        ImageY[i + 7] = 0;
        ImageY[i + 8] = 0;
        // Stores the ImageY array with y-coordinates
        ImageWidth[i] = 500;
        ImageWidth[i + 1] = 500;
        ImageWidth[i + 2] = 1;
        ImageWidth[i + 3] = 1;
        ImageWidth[i + 4] = 500;
        ImageWidth[i + 5] = 1;
        ImageWidth[i + 6] = 1;
        ImageWidth[i + 7] = 1;
        ImageWidth[i + 8] = 1;
        // Stores the ImageWidth array with widths
        ImageHeight[i] = 875 / 2;
        ImageHeight[i + 1] = 875 / 2;
        ImageHeight[i + 2] = 0.875;
        ImageHeight[i + 3] = 0.875;
        ImageHeight[i + 4] = 875;
        ImageHeight[i + 5] = 0.875;
        ImageHeight[i + 6] = 0.875;
        ImageHeight[i + 7] = 0.875;
        ImageHeight[i + 8] = 0.875;
        // Stores the ImageHeight array with heights
    }
}

function playAdeline() {
    HelenAudio.stop();
    TeddyAudio.stop();
    AdelineAudio.stop();
    // Resets and stops all audio if an icon is pressed when audio is playing

    for (var i = 0; i < ImageN; i += 9) {
        // For lopp resets images so they don't overlap
        ImageX[i] = 500;
        ImageX[i + 1] = 1000;
        ImageX[i + 2] = 500;
        ImageX[i + 3] = 750;
        ImageX[i + 4] = 1000;
        ImageX[i + 5] = 500;
        ImageX[i + 6] = 500;
        ImageX[i + 7] = 500;
        ImageX[i + 8] = 500;
        // Ressets the x-coordinates of all images
        ImageY[i + 0] = -500;
        ImageY[i + 1] = 0;
        ImageY[i + 2] = 0;
        ImageY[i + 3] = 875 / 4;
        ImageY[i + 4] = -875 / 2;
        ImageY[i + 5] = 0;
        ImageY[i + 6] = 0;
        ImageY[i + 7] = 0;
        ImageY[i + 8] = 0;
        // Resets the y-coordinates of all images
        ImageWidth[i] = 500;
        ImageWidth[i + 1] = 500;
        ImageWidth[i + 2] = 1;
        ImageWidth[i + 3] = 1;
        ImageWidth[i + 4] = 500;
        ImageWidth[i + 5] = 1;
        ImageWidth[i + 6] = 1;
        ImageWidth[i + 7] = 1;
        ImageWidth[i + 8] = 1;
        // Resets the widths of all images
        ImageHeight[i] = 875 / 2;
        ImageHeight[i + 1] = 875 / 2;
        ImageHeight[i + 2] = 0.875;
        ImageHeight[i + 3] = 0.875;
        ImageHeight[i + 4] = 875 / 4;
        ImageHeight[i + 5] = 0.875;
        ImageHeight[i + 6] = 0.875;
        ImageHeight[i + 7] = 0.875;
        ImageHeight[i + 8] = 0.875;
        // Resets the heights of all images
    }

    AdelineAudio.play(); // Starts the Adeline audio
    AdelineStart = true; // Starts the Adeline animation
    HelenStart = false; // Prevents the Helen animation from restarting
    TeddyStart = false; // Prevents the Teddy animation from restarting
}

function playHelen() {
    HelenAudio.stop();
    TeddyAudio.stop();
    AdelineAudio.stop();
    // Resets and stops all audio if an icon is pressed when audio is playing

    for (var i = 0; i < ImageN; i += 9) {
        // For loop resets images so they don't overlap
        ImageX[i] = 500;
        ImageX[i + 1] = 1000;
        ImageX[i + 2] = 500;
        ImageX[i + 3] = 750;
        ImageX[i + 4] = 1000;
        ImageX[i + 5] = 500;
        ImageX[i + 6] = 500;
        ImageX[i + 7] = 500;
        ImageX[i + 8] = 500;
        // Resets the x-coordinates of all images
        ImageY[i + 0] = -500;
        ImageY[i + 1] = 0;
        ImageY[i + 2] = 0;
        ImageY[i + 3] = 875 / 4;
        ImageY[i + 4] = -875;
        ImageY[i + 5] = 0;
        ImageY[i + 6] = 0;
        ImageY[i + 7] = 0;
        ImageY[i + 8] = 0;
        // Resets the y-coordinates of all images
        ImageWidth[i] = 500;
        ImageWidth[i + 1] = 500;
        ImageWidth[i + 2] = 1;
        ImageWidth[i + 3] = 1;
        ImageWidth[i + 4] = 500;
        ImageWidth[i + 5] = 1;
        ImageWidth[i + 6] = 1;
        ImageWidth[i + 7] = 1;
        ImageWidth[i + 8] = 1;
        // Resets the widths of all images
        ImageHeight[i] = 875 / 2;
        ImageHeight[i + 1] = 875 / 2;
        ImageHeight[i + 2] = 0.875;
        ImageHeight[i + 3] = 0.875;
        ImageHeight[i + 4] = 437.5;
        ImageHeight[i + 5] = 0.875;
        ImageHeight[i + 6] = 0.875;
        ImageHeight[i + 7] = 0.875;
        ImageHeight[i + 8] = 0.875;
        // Resets the heights of all images
    }

    HelenAudio.play(); // Starts the Helen Audio
    AdelineStart = false; // Prevents the Adeline animation from restarting
    HelenStart = true; // Starts the Helen animation from restarting
    TeddyStart = false; // Prevents the Teddy animation from restarting
}

function playTeddy() {
    HelenAudio.stop();
    TeddyAudio.stop();
    AdelineAudio.stop();
    // Resets all audio if an icon is pressed when audio is playing

    for (var i = 0; i < ImageN; i += 9) {
        // For loop resets images so they don't overlap
        ImageX[i] = 500;
        ImageX[i + 1] = 1000;
        ImageX[i + 2] = 500;
        ImageX[i + 3] = 750;
        ImageX[i + 4] = 1000;
        ImageX[i + 5] = 500;
        ImageX[i + 6] = 500;
        ImageX[i + 7] = 500;
        ImageX[i + 8] = 500;
        // Resets the x-coordinates of all images
        ImageY[i + 0] = -500;
        ImageY[i + 1] = 0;
        ImageY[i + 2] = 0;
        ImageY[i + 3] = 875 / 4;
        ImageY[i + 4] = -875;
        ImageY[i + 5] = 0;
        ImageY[i + 6] = 0;
        ImageY[i + 7] = 0;
        ImageY[i + 8] = 0;
        // Resets the y-coordinates of all images
        ImageWidth[i] = 500;
        ImageWidth[i + 1] = 500;
        ImageWidth[i + 2] = 1;
        ImageWidth[i + 3] = 1;
        ImageWidth[i + 4] = 500;
        ImageWidth[i + 5] = 1;
        ImageWidth[i + 6] = 1;
        ImageWidth[i + 7] = 1;
        ImageWidth[i + 8] = 1;
        // Resets the widths of all images
        ImageHeight[i] = 875 / 2;
        ImageHeight[i + 1] = 875 / 2;
        ImageHeight[i + 2] = 0.875;
        ImageHeight[i + 3] = 0.875;
        ImageHeight[i + 4] = 437.5;
        ImageHeight[i + 5] = 0.875;
        ImageHeight[i + 6] = 0.875;
        ImageHeight[i + 7] = 0.875;
        ImageHeight[i + 8] = 0.875;
        // Resets the heights of all images
    }

    TeddyAudio.play(); // Starts the Teddy audio
    AdelineStart = false; // Prevents the Adeline animation from restarting
    HelenStart = false; // Prevents the Adeline animation from restarting
    TeddyStart = true; // Starts the Teddy animation
}

function draw() {
    background(255);
    scale(0.48, 0.48);
    imageMode(CORNER);
    // Makes the corner the pivot point of the image
    image(mapRwanda, 0, 0, width / 2, height);
    // Displays map on canvas

    fill(255, 0, 0); // Makes circles and text red
    textAlign(CENTER); // Centers the text
    textSize(18); // Sets the text size to 18
    ellipse(AdelineX, AdelineY, diameter); // Creates marker for Adeline story
    text("Adeline", AdelineX, AdelineY + 45);
    ellipse(HelenX, HelenY, diameter); // Creates marker for Teddy story
    text("Helen", HelenX, HelenY + 45);
    ellipse(TeddyX, TeddyY, diameter); // Creates marker for Teddy story
    text("Teddy", TeddyX, TeddyY + 45);
    // Click one of the red circles to start audio and animation

    if (AdelineStart == true &
        HelenStart == false &&
        TeddyStart == false) {
        StarterImage = 0; 
        // Gives StarterImage a value which displays the Adeline images
    } else if (AdelineStart == false &
        HelenStart == true &&
        TeddyStart == false) {
        StarterImage = 27;
        // Gives StarterImage a value which displays the Helen images
    } else if (AdelineStart == false &
        HelenStart == false &&
        TeddyStart == true) {
        StarterImage = 54;
        // Gives StarterImage a value which display the Teddy images
    } else {
        StarterImage = 0;
        // I included this so that I could code using an if else statement
    }

    if (AdelineStart == true || HelenStart == true|| TeddyStart == true) {
        // Occurs when one of the icons are clicked
        ImageY[StarterImage + 0] += 2;
        // Moves the 0th image of each series down
    }

    if (ImageY[StarterImage + 0] >= 0) {
        // Occurs when 1st image is fully on the screen
        ImageY[StarterImage + 0] = 0;
        // Stops the 1st image from moving down more
        ImageX[StarterImage + 1] -= 2;
        // Moves the 1st image in each series to the left
    }

    if (ImageX[StarterImage + 1] < width / 2) {
        // Occurs when the 2nd image is fully on screen
        ImageX[StarterImage + 1] = width / 2;
        // Stops the 2nd image from moving more to the left
    }

    if (ImageX[StarterImage + 1] == width / 2) {
        // Occurs when the 2nd image stops moving to the left
        ImageWidth[StarterImage + 2] += 2;
        // Increases the width of the 2nd image in each series
        ImageHeight[StarterImage + 2] += 1.75;
        // Increases the height of the 2nd image in each series
    }

    if (ImageWidth[StarterImage + 2] >= width / 2 ||
        ImageHeight[StarterImage + 2] >= height) {
        // Occurs when the 2nd image is equal to half the width
        // or half the height
        ImageWidth[StarterImage + 2] = width / 2;
        // Sets the width equal to half the width
        ImageHeight[StarterImage + 2] = height;
        // Sets the height equal to half the height
    }

    if (ImageWidth[StarterImage + 2] == width / 2 ||
        ImageHeight[StarterImage + 2] == height) {
        // Occurs when the width of the 2nd image equals half the width of
        // the canvas or when the height equals half the height of the canvas
        ImageWidth[StarterImage + 3] += 3;
        // Increases the width of the 3rd image in each series
        ImageHeight[StarterImage + 3] += 2.625;
        // Increases the height of the 3rd image in each series 
    }

    if (ImageWidth[StarterImage + 3] >= width / 2 ||
        ImageHeight[StarterImage + 3] >= height) {
        // Occurs when the width of the 3rd image equals half the width of
        // the canvas or when height equals half the height of the canvas
        ImageWidth[StarterImage + 3] = width / 2;
        // Sets the width of the 3rd image to half the width of the canvas
        ImageHeight[StarterImage + 3] = height;
        // Sets the height of the 3rd image to half the height of the canvas
        ImageX[StarterImage + 4] -= 2;
        // Moves the 4th image in the series to the left
        ImageY[StarterImage + 4] += 1.75;
        // Moves the 4th image in the series down
    }

    if (ImageX[StarterImage + 4] <= width / 2 ||
        ImageY[StarterImage + 4] >= 0) {
        // Occurs when the x-coordinate of the 4th image is equal to half the
        // width or when the y-coordinate is equal to 0
        ImageX[StarterImage + 4] = width / 2;
        // Locks the x-coordinate of the 4th image at half the width
        ImageY[StarterImage + 4] = 0;
        // Loocks the y-coordinate of the 4th image at 0
        ImageWidth[StarterImage + 5] += 6;
        // Increases the width of the 5th Adeline image
    }

    if (ImageWidth[StarterImage + 5] >= width / 2) {
        // Occurs if the width of the 5th image equals half the canvas width
        ImageWidth[StarterImage + 5] = width / 2;
        // Sets the width of the 5th image equal to half the canvas
        ImageHeight[StarterImage + 5] += 2;
        // Increases the height of the 5th image
    }

    if (ImageHeight[StarterImage + 5] >= height) {
        // Occurs if the height of the 5th image is equal to the canvas height
        ImageHeight[StarterImage + 5] = height;
        // Sets the height of the 5th image equal to the height
        ImageWidth[StarterImage + 6] += 2;
        // Increases the width of the 6th image
        ImageHeight[StarterImage + 6] += 1.75;
        // Increases the height of the seveth image
    }

    if (ImageWidth[StarterImage + 6] >= width / 2 ||
        ImageHeight[StarterImage + 6] >= height) {
        // Occurs when the width of the 6th image equals half the canvas
        // width or when the height equals the height of the canvas
        ImageWidth[StarterImage + 6] = width / 2;
        // Sets the width of the 6th image equal to half the canvas width
        ImageHeight[StarterImage + 6] = height;
        // Sets the height of the 6th image equal to the canvas height
    }
    if (ImageWidth[StarterImage + 6] >= width / 2 ||
        ImageHeight[StarterImage + 6] >= height) {
        // Occurs when the width of the 6th image equals half the canvas
        // width or when the height equals the height of the canvas
        ImageHeight[StarterImage + 7] += 4;
        // Increases the height of the 7th image
    }

    if (ImageHeight[StarterImage + 7] >= height) {
        // Occurs when the height of the 7th image equals the canvas height
        ImageHeight[StarterImage + 7] = height;
        // Sets the height of the 7th image equal to the canvas height
        ImageWidth[StarterImage + 7] += 2;
        // Increases the width of the 6th image
    }

    if (ImageWidth[StarterImage + 7] >= width / 2) {
        // Occurs when the width of the 7th image is half the canvas width
        ImageWidth[StarterImage + 7] = width / 2;
        // Sets the width of the 7th image equal to half the canvas width
    }

    if (ImageWidth[StarterImage + 7] == width / 2) {
        // Occurs when the width of the 8th image equals half the width of
        // the canvas
        ImageWidth[StarterImage + 8] += 3;
        // Increases the width of the 8th image
        ImageHeight[StarterImage + 8] += 2.625;
        // Increases the height of the 8th image
    }

    if (ImageWidth[StarterImage + 8] >= width / 2 ||
        ImageHeight[StarterImage + 8] >= height) {
        // Occurs when the width of the eight image equals the half the canvas
        // width or when the height equals the height of the canvas
        ImageWidth[StarterImage + 8] = width / 2;
        // Sets the width of the 8th image equal to half the canvas width
        ImageHeight[StarterImage + 8] = height;
        // Sets the height of the 8th image equal to the canvas height
    }

    if (ImageWidth[StarterImage + 8] == width / 2 ||
        ImageHeight[StarterImage + 8] == height) {
        ImageY[StarterImage + 9] += 2;
        // Increases the y-coordinate of the 9th image
    }

    // Many of the if statements below are copied from the previous ones
    // I couldn't use of for or a while loop because I needed each image to
    // trigger the next one

    if (ImageY[StarterImage + 9] >= 0) {
        // Occurs when the 9th image is fully on screen
        ImageY[StarterImage + 9] == 0;
        ImageX[StarterImage + 10] -= 2;
        // Animates the 1st Adeline image
    }

    if (ImageX[StarterImage + 10] <= width / 2) {
        // Occurs when the 10th image is fully on screen
        ImageX[StarterImage + 10] = width / 2;
        // Stops the 10th image from moving
        ImageWidth[StarterImage + 11] += 2;
        // Increases the width of the 11th image
        ImageHeight[StarterImage + 11] += 1.75;
        // Increases the height of the 11th image
    }

    if (ImageWidth[StarterImage + 11] >= width / 2 ||
        ImageHeight[StarterImage + 11] >= height) {
        // Occurs when the width of the 11th image equals half the width of
        // the canvas or when height equals half the height of the canvas
        ImageWidth[StarterImage + 11] = width / 2;
        // Sets the width of the 11th image equal to half the canvas width
        ImageHeight[StarterImage + 11] = height;
        // Sets the heightof the 11th image equal to half the canvas width
    }

    if (ImageWidth[StarterImage + 11] == width / 2 ||
        ImageHeight[StarterImage + 11] == height) {
        // Occurs when the width of the 11th image equals half the width of
        // the canvas or when height equals half the height of the canvas
        ImageWidth[StarterImage + 12] += 3;
        // Increases the width of the 12th image
        ImageHeight[StarterImage + 12] += 2.625;
        // Increases the height of the 12th image
    }

    if (ImageWidth[StarterImage + 12] >= width / 2 ||
        ImageHeight[StarterImage + 12] >= height) {
        // Occurs when the width of the 12th image equals half the width of
        // the canvas or when height equals half the height of the canvas
        ImageWidth[StarterImage + 12] = width / 2;
        // Sets the width of the 12th image to half the width
        ImageHeight[StarterImage + 12] = height;
        // Keeps the width and height of the 3rd Adeline image constant
    }

    if (ImageWidth[12] == width / 2 ||
        ImageHeight[12] == height / 2) {
        // Occurs when the width of the 12th image equals half the width of
        // the canvas or when height equals half the height of the canvas
        ImageX[StarterImage + 13] -= 2;
        // Lowers the 13th image
        ImageY[StarterImage + 13] += 1.75;
        // Moves the 13 image to the left
    }
    

    if (ImageX[StarterImage + 13] <= width / 2 ||
        ImageY[StarterImage + 13] >= 0) {
        // Occurs when the 13th image is fully on screen
        ImageX[StarterImage + 13] = width / 2;
        // Sets the width of the 13th image to half the width
    }

    if (ImageX[StarterImage + 13] == width / 2 ||
        ImageY[StarterImage + 13] >= 0) {
        // Occurs when the width of the 12th image equals half the width of
        // the canvas or when height equals half the height of the canvas
        ImageY[StarterImage + 13] = 0;
        // Stops the 4th Adeline image from moving
        ImageWidth[StarterImage + 14] += 6;
        // Increases the width of the 5th Adeline image
    }

    if (ImageWidth[StarterImage + 14] >= 500) {
        // Occurs when the width of the 14th image equals half the width of
        // the canvas
        ImageWidth[StarterImage + 14] = width / 2;
        // Sets the width of the 14th image to half the width
        ImageHeight[StarterImage + 14] += 2;
    }

    if (ImageHeight[StarterImage + 14] >= 875 / 2) {
        // Occurs when the height of the 14th image equals the canvas height
        ImageHeight[StarterImage + 14] = height;
        // Keeps the height of the 5th image constant
    }

    if (ImageHeight[StarterImage + 14] >= height) {
        // Occurs when the height of the 14th image equals the canvas height
        ImageWidth[StarterImage + 15] += 2;
        ImageHeight[StarterImage + 15] += 1.75;
        // Increases the width and height of the 6th image
    }

    if (ImageWidth[StarterImage + 15] >= width / 2 ||
        ImageHeight[StarterImage + 15] >= height) {
        // Occurs when the width of the 15th image equals half the width of
        // the canvas or when height equals half the height of the canvas
        ImageWidth[StarterImage + 15] = width / 2;
        ImageHeight[StarterImage + 15] = height;
        ImageHeight[StarterImage + 16] += 4;
        // Keeps the width and height of the 6th image constant
    }

    if (ImageHeight[StarterImage + 16] >= height) {
        // Occurs when the height of the 14th image equals the canvas height
        ImageHeight[StarterImage + 16] = height;
        ImageWidth[StarterImage + 16] += 2;
    }

    if (ImageWidth[StarterImage + 16] >= width / 2) {
        // Occurs when the width of the 16th image equals half the width of
        // the canvas
        ImageWidth[StarterImage + 16] = width / 2;
        ImageWidth[StarterImage + 17] += 3;
        ImageHeight[StarterImage + 17] += 2.625;
    }

    if (ImageWidth[StarterImage + 17] >= width / 2 ||
        ImageHeight[StarterImage + 17] >= height) {
        // Occurs when the width of the 15th image equals half the width of
        // the canvas and when height equals half the height of the canvas
        ImageWidth[StarterImage + 17] = width / 2;
        ImageHeight[StarterImage + 17] = height;
        // Keeps the width and height of the 3rd Adeline image constant
        ImageY[StarterImage + 18] += 2;
        // Animates the 1st Adeline image
    }

    if (ImageY[StarterImage + 18] >= 0) {
        // Occurs when the 2nd image is fully on screen
        ImageY[StarterImage + 18] = 0;
        // Stops the 1st Adeline image from moving
        ImageX[StarterImage + 19] -= 2;
        // Animates the 1st Adeline image
    }

    if (ImageX[StarterImage + 19] <= width / 2) {
        // Occurs when the 19th image is fully on screen
        ImageX[StarterImage + 19] = width / 2;
        // Stops the 2nd Adeline image from moving
        ImageWidth[StarterImage + 20] += 2;
        ImageHeight[StarterImage + 20] += 1.75;
    }

    if (ImageWidth[StarterImage + 20] >= width / 2 ||
        ImageHeight[StarterImage + 20] >= height) {
        // Occurs when the width of the 20th image equals half the width of
        // the canvas and when height equals half the height of the canvas
        ImageWidth[StarterImage + 20] = width / 2;
        ImageHeight[StarterImage + 20] = height;
        // Keeps the width and height of the 2nd Adeline image constant
    }

    if (ImageWidth[StarterImage + 20] == width / 2 ||
        ImageHeight[StarterImage + 20] == height) {
        ImageWidth[StarterImage + 21] += 3;
        ImageHeight[StarterImage + 21] += 2.625;
    }

    if (ImageWidth[StarterImage + 21] >= width / 2 ||
        ImageHeight[StarterImage + 21] >= height) {
        // Occurs when the width of the 15th image equals half the width of
        // the canvas and when height equals half the height of the canvas
        ImageWidth[StarterImage + 21] = width / 2;
        ImageHeight[StarterImage + 21] = height;
        // Keeps the width and height of the 3rd Adeline image constant
    }

    if (ImageWidth[StarterImage + 21] >= width / 2 ||
        ImageHeight[StarterImage + 21] >= height) {
        // Occurs when the width of the 21th image equals half the width of
        // the canvas and when height equals half the height of the canvas
        ImageX[StarterImage + 22] -= 2;
        ImageY[StarterImage + 22] += 1.75;
        // Animates the 4th Adeline image
    }

    if (ImageX[StarterImage + 22] <= width / 2 &
        ImageY[StarterImage + 4] >= 0) {
        // Occurs when the width of the 22th image equals half the width of
        // the canvas and when height equals half the height of the canvas
        ImageX[StarterImage + 22] = width / 2;
        ImageY[StarterImage + 22] = 0;
        // Stops the 4th Adeline image from moving
        ImageWidth[StarterImage + 23] += 6;
        // Increases the width of the 5th Adeline image
    }

    if (ImageWidth[StarterImage + 23] >= 500) {
        // Occurs when the width of the 15th image equals half the width of
        // the canvas
        ImageWidth[StarterImage + 23] = width / 2;
        ImageHeight[StarterImage + 23] += 2;
    }

    if (ImageHeight[StarterImage + 23] >= height) {
        // Occurs when the height of the image equals the canvas height
        ImageHeight[StarterImage + 23] = height;
        // Keeps the height of the 5th image constant
        ImageWidth[StarterImage + 24] += 2;
        ImageHeight[StarterImage + 24] += 1.75;
        // Increases the width and height of the 6th image
    }

    if (ImageWidth[StarterImage + 24] >= width / 2 ||
        ImageHeight[StarterImage + 6] >= height) {
        // Occurs when the width of the 24th image equals half the width of
        // the canvas or when height equals half the height of the canvas
        ImageWidth[StarterImage + 24] = width / 2;
        ImageHeight[StarterImage + 24] = height;
        ImageHeight[StarterImage + 25] += 4;
        // Keeps the width and height of the 6th image constant
    }

    if (ImageHeight[StarterImage + 25] >= height) {
        ImageHeight[StarterImage + 25] = height;
        ImageWidth[StarterImage + 25] += 2;
    }

    if (ImageWidth[StarterImage + 25] >= width / 2) {
        // Occurs when the width of the 25th image equals half the width of
        // the canvas
        ImageWidth[StarterImage + 25] = width / 2;
        ImageWidth[StarterImage + 26] += 3;
        ImageHeight[StarterImage + 26] += 2.625;
    }

    if (ImageWidth[StarterImage + 26] >= width / 2 ||
        ImageHeight[StarterImage + 26] >= height) {
        // Occurs when the width of the 3rd image equals half the width of
        // the canvas or when height equals half the height of the canvas
        ImageWidth[StarterImage + 26] = width / 2;
        ImageHeight[StarterImage + 26] = height;
        // Keeps the width and height of the 3rd Adeline image constant
    }

    // These are all the images in the code that are used for the presentation
    // Each of them have an assigned x and y coordinate, width and height
    // I wasn't able to put them in a for loop since I needed some of the to
    // be translated to the center
    // There are a total of 27 images and each has three variants
    image(ImageAnimation[StarterImage + 0], ImageX[StarterImage + 0],
        ImageY[StarterImage + 0], ImageWidth[StarterImage + 0],
        ImageHeight[StarterImage + 0]);
    image(ImageAnimation[StarterImage + 1], ImageX[StarterImage + 1],
        ImageY[StarterImage + 1], ImageWidth[StarterImage + 1],
        ImageHeight[StarterImage + 1]);
    image(ImageAnimation[StarterImage + 2], ImageX[StarterImage + 2],
        ImageY[StarterImage + 2], ImageWidth[StarterImage + 2],
        ImageHeight[StarterImage + 2]);
    imageMode(CENTER); // Makes the center of the image the pivot
    image(ImageAnimation[StarterImage + 3], ImageX[StarterImage + 3],
        ImageY[StarterImage + 3], ImageWidth[StarterImage + 3],
        ImageHeight[StarterImage + 3]);
    imageMode(CORNER); // Makes the upper left corrner of the image the pivot
    image(ImageAnimation[StarterImage + 4], ImageX[StarterImage + 4],
        ImageY[StarterImage + 4], ImageWidth[StarterImage + 4],
        ImageHeight[StarterImage + 4]);
    image(ImageAnimation[StarterImage + 5], ImageX[StarterImage + 5],
        ImageY[StarterImage + 5], ImageWidth[StarterImage + 5],
        ImageHeight[StarterImage + 5]);
    image(ImageAnimation[StarterImage + 6], ImageX[StarterImage + 6],
        ImageY[StarterImage + 6], ImageWidth[StarterImage + 6],
        ImageHeight[StarterImage + 6]);
    image(ImageAnimation[StarterImage + 7], ImageX[StarterImage + 7],
        ImageY[StarterImage + 7],ImageWidth[StarterImage + 7],
        ImageHeight[StarterImage + 7]);
    image(ImageAnimation[StarterImage + 8], ImageX[StarterImage + 8],
        ImageY[StarterImage + 8], ImageWidth[StarterImage + 8],
        ImageHeight[StarterImage + 8]);
    image(ImageAnimation[StarterImage + 9], ImageX[StarterImage + 9],
        ImageY[StarterImage + 9], ImageWidth[StarterImage + 9],
        ImageHeight[StarterImage + 9]);
    image(ImageAnimation[StarterImage + 10], ImageX[StarterImage + 10],
        ImageY[StarterImage + 10], ImageWidth[StarterImage + 10],
        ImageHeight[StarterImage + 10]);
    image(ImageAnimation[StarterImage + 11], ImageX[StarterImage + 11],
        ImageY[StarterImage + 11], ImageWidth[StarterImage + 11],
        ImageHeight[StarterImage + 11]);
    imageMode(CENTER);
    image(ImageAnimation[StarterImage + 12], ImageX[StarterImage + 12],
        ImageY[StarterImage + 12], ImageWidth[StarterImage + 12],
        ImageHeight[StarterImage + 12]);
    imageMode(CORNER);
    image(ImageAnimation[StarterImage + 13], ImageX[StarterImage + 13],
        ImageY[StarterImage + 13], ImageWidth[StarterImage + 13],
        ImageHeight[StarterImage + 13]);
    image(ImageAnimation[StarterImage + 14],ImageX[StarterImage + 14],
        ImageY[StarterImage + 14], ImageWidth[StarterImage + 14],
        ImageHeight[StarterImage + 14]);
    image(ImageAnimation[StarterImage + 15], ImageX[StarterImage + 15],
        ImageY[StarterImage + 15], ImageWidth[StarterImage + 15],
        ImageHeight[StarterImage + 15]);
    image(ImageAnimation[StarterImage + 16], ImageX[StarterImage + 16],
        ImageY[StarterImage + 16], ImageWidth[StarterImage + 16],
        ImageHeight[StarterImage + 16]);
    image(ImageAnimation[StarterImage + 17], ImageX[StarterImage + 17],
        ImageY[StarterImage + 17], ImageWidth[StarterImage + 17],
        ImageHeight[StarterImage + 17]);
    image(ImageAnimation[StarterImage + 18], ImageX[StarterImage + 18],
        ImageY[StarterImage + 18], ImageWidth[StarterImage + 18],
        ImageHeight[StarterImage + 18]);
    image(ImageAnimation[StarterImage + 19], ImageX[StarterImage + 19],
        ImageY[StarterImage + 19], ImageWidth[StarterImage + 19],
        ImageHeight[StarterImage + 19]);
    image(ImageAnimation[StarterImage + 20], ImageX[StarterImage + 20],
        ImageY[StarterImage + 20], ImageWidth[StarterImage + 20],
        ImageHeight[StarterImage + 20]);
    imageMode(CENTER);
    image(ImageAnimation[StarterImage + 21], ImageX[StarterImage + 21],
        ImageY[StarterImage + 21], ImageWidth[StarterImage + 21],
        ImageHeight[StarterImage + 21]);
    imageMode(CORNER);
    image(ImageAnimation[StarterImage + 22], ImageX[StarterImage + 22],
        ImageY[StarterImage + 22], ImageWidth[StarterImage + 22], height);
    image(ImageAnimation[StarterImage + 23], ImageX[StarterImage + 23],
        ImageY[StarterImage + 23], ImageWidth[StarterImage + 23],
        ImageHeight[StarterImage + 23]);
    image(ImageAnimation[StarterImage + 24], ImageX[StarterImage + 24],
        ImageY[StarterImage + 24], ImageWidth[StarterImage + 24],
        ImageHeight[StarterImage + 24]);
    image(ImageAnimation[StarterImage + 25], ImageX[StarterImage + 25],
        ImageY[StarterImage + 25], ImageWidth[StarterImage + 25],
        ImageHeight[StarterImage + 25]);
    image(ImageAnimation[StarterImage + 26], ImageX[StarterImage + 26],
        ImageY[StarterImage + 26], ImageWidth[StarterImage + 26],
        ImageHeight[StarterImage + 26]);

}

function mousePressed() { // Function for starting the animations and audio
    var AdelineDist = dist(mouseX, mouseY, 0.48 * AdelineX, 0.48 * AdelineY);
    // Creates variable to determine distance from the mouse to Adeline icon
    var HelenDist = dist(mouseX, mouseY, 0.48 * HelenX, 0.48 * HelenY);
    // Creates variable to determine distance from the mouse to Helen icon
    var TeddyDist = dist(mouseX, mouseY, 0.48 * TeddyX, 0.48 * TeddyY);
    // Creates variable to determine distance from the mouse to Teddy icon

    if (AdelineDist < 10) {
        playAdeline(); // Starts Adeline animation if mouse is pressed in icon
    }

    if (HelenDist < 10) {
        playHelen(); // Starts Helen animation if mouse is pressed in icon
    }

    if (TeddyDist < 10) {
        playTeddy(); // Starts Teddy animation if mouse pressed in icon
    }
}

Final_Project

Link to fixed project

This was a long project, and while I wasn’t able to accomplish everything that I wanted to it paid off. For my final project I decided that I should go out with a bang, and tried to help tell the stories of three survivors from the Rwandan genocide. I wanted to do help tell their story through imagery and help people understand some of the atrocities that were committed in Rwanda.  As a Jew, the stories of Rwanda reminded me of the atrocities committed during the Holocaust. I was also ashamed when I learned that America did almost nothing to aid the people of Rwanda.

Using the program is fairly simple. All you need to do is click on the red circles to play the story of each survivor. Each story will reset if you click a different circle.

Unfortunately I was unable to get my project working on Word Press. To view my project on the internet you will need to use a local server. To do this you will need to download either python or node.js.

Python:

For python, open the terminal and type in “python -m SimpleHTTPServer” (if you use python3 type in “python -m http.server”).

Next, you will need to type in “http://localhost:8000” in your web browser.

With this the project should load.

 

Node.js:

In a similar fashion to python, open your terminal or command panel.

Next, type in “sudo npm install -g http-server” if you use linux or “npm install -g http-server Then, type in “http-server”” if you use windows.

After that, cd the folder location on your computer. (For example, my folder is on my desktop, so I would type in “cd C:\Users\matth\Desktop\Final_Project”).

Then, type in “http-server”.

Finally, type “http://localhost:8080/” into a web browser.

Citations:

  • Processing. “Processing/p5.Js.” GitHub, 28 Sept. 2017, github.com/processing/p5.js/wiki/Local-server.

 

Leave a Reply