merlebac Fixed Project (Fixed)

Rwanda Survivor Testimonies

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("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/Adeline-2.mp3"); // Stores the Adeline audio
    AdelineAudio.setVolume(0.5); // Sets volume of Adeline audio

    HelenAudio = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/Helen-3.mp3"); // Stores the Helen audio
    HelenAudio.setVolume(0.5); // Sets volume of Helen audio

    TeddyAudio = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/Teddy-1.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
    }
}

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. (This submission is to be considered late).

hannajan_final project

sketch

//Hanna Jang
//Section B 
//hannajan@andrew.cmu.edu; 
//Final Project

var space = 10; 
var heart; 
var lightning; 
var banana; 
var ball; 
var RectLength = 0; 
var RectLength2 = 0; 
var hand; 
var snow = []; 


function setup(){
	createCanvas(480, 300); 
	frameRate(10); 
	
	//create Snow in window 
	for (var i = 0; i < 1; i++){
		var px =  space*8; 
		snow[i]= makeSnow(px); 
	}
}

//load images
function preload(){ 
	heart=loadImage("https://i.imgur.com/OcX9GYf.png"); 
	lightning=loadImage("https://i.imgur.com/MDIxpuo.png"); 
	banana=loadImage("https://i.imgur.com/YZLA1fs.png"); 
	ball=loadImage("https://i.imgur.com/J6JsNUS.png"); 
	smile=loadImage("https://i.imgur.com/7bNPbaY.png"); 
	hand=loadImage("https://i.imgur.com/j8tNnpH.png"); 
}

function draw(){
	background(254, 233, 239); 
	
	DrawHouse(); 
	DrawMiaBody(); 
	DrawFace(); 
	DrawHappinessBar(); 
	DrawEnergyBar(); 
	DrawRadio(); 
	DrawFood(); 
	DrawBall(); 
	DrawWindow(); 
	UpdateAndDisplaySnow(); 
	addNewSnow(); 
	

//Mia reacts to being fed 
	if (mouseX > 38.14*space & mouseX < 44.14*space
		&& mouseY > 20 && mouseY<80){
			MiaEats(); 
	}
	
//Mia reacts to being played music 
	if (mouseX > width/6 & mouseX < 15.5*space
		&& mouseY > 22*space && mouseY < 27*space){
			MiaIsHappy(); 
	}
	
//Mia reacts to playing with ball
	if (mouseX > 35*space & mouseX < 42*space
		&& mouseY > 21*space && mouseY < 28*space){
			MiaSmiles(); 
	}	
	
//fill up energy bar when fed
	fill(247, 102, 188); 
	rect(23*space, space*3, RectLength*15, space*3);    
	
//fill up heart bar when Mia is happy 
	fill(90, 130, 222); 
	rect(space*6, space*3, RectLength2*10, space*3); 
	
	DrawHand(); 
}

//draw Mia's house 
function DrawHouse(){
	
//draw Mia's wallpaper 
	for (var i = 0; i < 20; i++){
		fill(255); 
		noStroke(); 
		rect(i*25, 0, 6, height); 
		fill(199, 232, 255); 
		rect(i*25, 0, 2, height); 
	}
	
//draw Mia's floor 
	fill(247, 223, 163); 
	noStroke(); 
	rect(0, height-space*5, width, space*5); 
	
//draw rug 
	fill(245, 156, 210); 
	ellipse(width/2, height-space*3, space*14, space*5); 
	
}

//draw Mia's body 
function DrawMiaBody(){
	fill(176, 106, 26); 
	ellipse(width/2, height/2+space*8, space*9, space*10); 
	fill(239, 194, 144); 
	ellipse(width/2, height/2+space*9, space*5, space*6); 
}

//draw Mia's face 
function DrawFace(){
	//left ear
	fill(176, 106, 26); 
	ellipse(width/2-space*7, height/2-space*1.5, space*5, space*5); 
	fill(239, 194, 144); 
	ellipse(width/2-space*7, height/2-space*1.5, space*3, space*3); 
	
	//right ear
	fill(176, 106, 26); 
	ellipse(width/2+space*7, height/2-space*1.5, space*5, space*5); 
	fill(239, 194, 144); 
	ellipse(width/2+space*7, height/2-space*1.5, space*3, space*3); 
	
	//head 
	fill(176, 106, 26); 
	ellipse(width/2, height/2, space*14, space*12); 
	fill(239, 194, 144); 
	ellipse(width/2-space*2, height/2, space*6, space*6); 
	ellipse(width/2+space*2, height/2, space*6, space*6); 
	ellipse(width/2, height/2+space*2.7, space*8, space*5); 
	
	//eyes 
	fill(255); 
	ellipse(width/2-space*2, height/2, space*2, space*2); 
	ellipse(width/2+space*2, height/2, space*2, space*2); 
	
	//eyes follow mouse
	fill(0); 
	var x1 = map(mouseX, 0, width, width/2-space*2.5, width/2-space*1.9);
	var y1= map(mouseY, 0, height, height/2-2, height/2+2);
	ellipse(x1, y1, space, space); 
	var x2 = map(mouseX, 0, width, width/2+space*1.6, width/2+space*2.1);
	ellipse(x2, y1, space, space); 
	
	//nose 
	fill(0); 
	ellipse(width/2 - space, height/2 + space*2, 5, 5); 
	ellipse(width/2 + space, height/2 + space*2, 5, 5); 
}

//draw Happiness Bar 
function DrawHappinessBar(){
	fill(241, 101, 87); 
	rect(space*3, space*3, space*14, space*3); 
	ellipse(space*3, space*4.5, space*5, space*5); 
	fill(255); 
	ellipse(space*3, space*4.5, space*3.5, space*3.5); 
	image(heart, space*1.6, space*3.4); 
}

function DrawEnergyBar(){
	fill(100, 175, 209); 
	rect(space*22, space*3, space*14, space*3); 
	ellipse(space*21, space*4.5, space*5, space*5); 
	fill(255); 
	ellipse(space*21, space*4.5, space*3.5, space*3.5); 
	image(lightning, space*19, space*2.9); 
}

function DrawRadio(){
	fill(243, 98, 26); 
	rect(width/5.5, height - space*11, 5, space*4); 
	rect(width/6, height - space*8, space*7.5, space*5); 
	fill(255, 227, 168);   
	ellipse(width/5, height - space*6, space*1.5, space*1.5); 
	fill(0); 
	ellipse(width/5, height - space*4, space, space); 
	fill(177, 167, 146); 
	rect(width/4, height - space*7, space*2.5, space*2.5); 
}

function DrawFood(){
	fill(173, 234, 245); 
	ellipse(width*6/7, space*5, space*6, space*6); 
	fill(255); 
	ellipse(width*6/7, space*5, space*4, space*4); 
	image(banana, width*4.9/6, space*4); 
}

function DrawBall(){
	image(ball, space*35, height - space*9, space*7, space*7); 
}

function DrawWindow(){
	fill(160, 209, 243); 
	rect(space*1.8, space*8, space*12, space*10); 
	fill(255); 
	rect(space*1.8, space*16, space*12, space*2); 
}

function MiaEats(){
	//opens mouth for food
	fill(212, 68, 56); 
	ellipse(width/2, height/2+space*3.5, space*2.5, space*2.5); 
}

function MiaIsHappy(){
	fill(212, 68, 56); 
	arc(width/2, height/2+space*3.1, space*4, space*4, 0, PI); 
}

function MiaSmiles(){
	image(smile, width/2 - 6, height/2+space*2.6, space*3, space*2.1); 
}

function DrawHand(){
	image(hand, mouseX - 17, mouseY - 10, space*6, space*6); 
}

//update the snow and display them
function UpdateAndDisplaySnow(){
	for (var i = 0; i < snow.length; i++){
		snow[i].move(); 
		snow[i].display(); 
	}
}

function addNewSnow() {
    // With a very tiny probability, add new snow to the end.
    var likelihood = 0.03; 
    if (random(0,1) < likelihood) {
        snow.push(makeSnow (space*8));
    }
}

// method to update position of snow every frame
function snowMove() {
    this.x += this.speed;
    	if (this.x >= 17*space){
    		this.x=8*space; 
    	}
}

// draw the snow
function snowDisplay() {
  fill(255); 
  rect(this.breadth, this.x, 4, 4); 
}

//make the snow
function makeSnow(birthLocationX) {
    var snow = {x: birthLocationX,
                breadth: random(18, 130), 
                speed: 3.0,
                move: snowMove,
                display: snowDisplay}
    return snow;
}

function mouseClicked(){
	
	//mia earns energy when fed 
	if (mouseX > 38.14*space & mouseX < 44.14*space
		&& mouseY > 20 && mouseY < 80){
			if (RectLength==9){
				RectLength=0; 
			} else {
				RectLength+=1; 
		}
	}
	
	//hearts earned when played music or playing with ball
	if ((mouseX > width/6 & mouseX < 15.5*space
		&& mouseY > 22*space && mouseY < 27*space)
		|| (mouseX > 35*space && mouseX < 42*space
		&& mouseY > 21*space && mouseY < 28*space)){
			if (RectLength2==11){
				RectLength2=0; 
			} else {
				RectLength2+=1; 
		}
	}
}





Meet Mia the monkey!

She loves music and playing with her beach ball. Her favorite food to eat are bananas.

See what her reaction is when you click on the banana and feed her one! What is her reaction when you click on the ball or the radio? You can also see the reaction of  Mia’s heart and energy bar at the top. When you feed her, Mia’s energy level will increase. Mia’s heart level will also increase if you do something she likes.

As observed:

1). If you click on the banana, Mia will open her mouth to be fed. Her energy level will also increase from eating the banana.

2). If you click on the ball, Mia will smile. Her heart level will also increase.

3). If you click on the radio, Mia will open her mouth to sing. Her heart level will increase because she is having a good time.

Note About this Project*

For my final project, I wanted to create a virtual pet that could be interacted with through a mouse. In the end, I created Mia. The feedback in this game is simple. You are winning this game by increasing the levels in the heart and energy bars. The game is also endless, as the heart and energy bars are set back to 0 every single time you win all the points possible. That way, you can play again and again.

Max Mirho – Final Project – Popping Pup!

My goal in this project was to experiment with pixelation, and pixel images.
I created a cute little puppy and managed to switch his direction and cause different modes of his interaction.

I had a lot of fun, and I feel as if I have explored JavaScript enough to the point where a small adventure game would be possible.

While I continue learning to code, especially javascript, I know I need to review objects more and understand their full usefulness, as I’ve had trouble implementing, and my thought processes often don’t include them.

Hopefully, the format I’ve submitted is correct.

See below for a zip file of my program!

Max_Mirho_final

jdperez Final Project

For my final project, I threw together a little synth with an interface to change between types of waves, as well as add a lowpass filter, high pass filter, or bandpass filter.

The basic functionality of the synth is you can use your top row of keys to play a chromatic scale starting with Q, moving stepwise through the row (Q -> P) and then the last three half steps are in the next row down (ASD). You can adjust where the chromatic scale lies on the keyboard by pressing the arrow keys. The left and right arrow keys will shift the octave a half step up or down, and then the up and down arrow keys will shift the entire scale an octave up or down. You can do this while playing a note to have some cool effects. Another note, the keyboard is made to be able to play multiple notes at the same time, so play around with harmonies and stuff! The only issues come up when the notes frequencies become too close, and start phasing with each other… Also, if you are playing a perfect 6th and try to play a third note, the third note will not play. I’m not entirely sure how to fix these bugs.

Currently, the envelope for the filters are pre-set. Moving forward I’d like to implement some sliding-bar controls to control the envelopes. Also, the documentation on the p5.sound bandpass filter is very little, so I was not entirely sure how to control the range or location of the bandpass.

Other than these things the synth should work great! For maximum effect, use headphones. Put on a song you like on youtube or something, and try and jam out to it.

Enjoy.

 

sketch

//Jonathan Perez
//Section B
//jdperez@andrew.cmu.edu
//my music synth

//notes: could be much more efficient using objects and array that represents the keyboard. Consider initializing keyboard and having function calls
 
var keys = [] //holds all the keys in the diatonic scale including octave

//variable fill color for the buttons, allows selected button to highlitght
var fill1 = 255; //sine menu fill
var fill2 = 255; //triangle menu fill
var fill3 = 255; //square menu fill
var fill4 = 255; //sawtooth menu fill
var fill5 = 255; //lowPass menu fill
var fill6 = 255; //highPass menu fill
var fill7 = 255; //bandPass menu fill

 //create a key object that holds all the information for the oscillator,
 //the oscillator itself, and functions to adjust the oscillator
function synthKey(halfstep) {
    this.halfstep = halfstep; //indicates where in the chromatic scale the note is
    this.wave = "triangle" //type of wave the oscillator generates
    this.osc = new p5.Oscillator();
    this.env = new p5.Env();
    this.lowPass = new p5.LowPass();
    this.highPass = new p5.HighPass();
    this.bandPass = new p5.BandPass();
    this.fenv = new p5.Env(); //env for filters
    //set the frequency and wave type for the oscillator as well as
    //its envelope. Then start the oscillator so we can play the note anytime
    this.setup = function() {
        this.osc.setType(this.wave);
        this.osc.freq((261.63 * pow(2, this.halfstep / 12)));

        //this.env = new p5.Env();
        this.env.setADSR(0.01, 1.2, 0.3, 0.1);
        this.env.setRange(.5, 0);
        this.osc.amp(this.env);

        this.osc.start();
    }
    //now add some functionality to adjust where the diatonic scale
    //starts and ends, both step-wise and by octaves
    this.halfstepUp = function() {
        this.halfstep += 1;
        this.osc.freq((261.63 * pow(2, this.halfstep / 12)));
    }
    this.halfstepDown = function() {
        this.halfstep -= 1;
        this.osc.freq((261.63 * pow(2, this.halfstep / 12)));
    }
    this.octaveUp = function() {
        this.halfstep += 12;
        this.osc.freq((261.63 * pow(2, this.halfstep / 12)));
    }
    this.octaveDown = function() {
        this.halfstep -= 12;
        this.osc.freq((261.63 * pow(2, this.halfstep / 12)));
    }
    //function to change wave type
    this.changeType = function(type) {
        this.osc.setType(type);
    }
    //basic functions to tell the env to attack or release
    this.attack = function() {
        this.env.triggerAttack();
        this.fenv.triggerAttack();
    }
    this.release = function() {
        this.env.triggerRelease();
        this.fenv.triggerRelease();
    }
    this.setFilter = function(filterType) { //filter type will be indicated by 0 or 1
        if(filterType == 0) { // 0 maps to low pass filter
            this.osc.disconnect();
            this.osc.connect(this.lowPass);
            this.lowPass.freq(this.fenv);
            print("lowPass!")
        } else if(filterType == 1) { // 1 maps to high pass
            this.osc.disconnect();
            this.osc.connect(this.highPass);
            this.highPass.freq(this.fenv)
            print("hightPass!")
        } else if(filterType == 2) { // 2 maps to band pass
            this.osc.disconnect();
            this.osc.connect(this.bandPass);
            this.bandPass.freq(this.fenv);
            this.bandPass.res(10);
            print("bandPass!")
        }
    }
    this.setFilterEnv = function(A, D, S, R, startRange, endRange) {
        this.fenv.setADSR(A, D, S, R);
        this.fenv.setRange(startRange, endRange);
        //connect envelope to the filters
        this.lowPass.freq(this.fenv);
        this.highPass.freq(this.fenv);
        this.bandPass.freq(this.fenv);
    }
}

function setup() {
    createCanvas(400, 400);
    background(200);
    for(i = 0; i < 13; i++) {
        keys.push(new synthKey(i));
        keys[i].setup();
    }
}

function draw() {
    background(200);
    var rectHeight = 45
    var rectWidth = 90
    masterVolume(.5);

    //MAKE BUTTONS FOR WAVE TYPE
    stroke(0);
    strokeWeight(1);
    //make boxes
    rectMode(CENTER)
    fill(fill1);
    rect(width/2, height/2 - 2 * rectHeight, rectWidth, rectHeight);
    fill(fill2);
    rect(width/2, height/2 - rectHeight, rectWidth, rectHeight);
    fill(fill3);
    rect(width/2, height/2, rectWidth, rectHeight);
    fill(fill4);
    rect(width/2, height/2 + rectHeight, rectWidth, rectHeight);
    fill(fill5);
    rect(width/2 - rectWidth, height/2 + 150, rectWidth, rectHeight);
    fill(fill6);
    rect(width/2, height/2 + 150, rectWidth, rectHeight);
    fill(fill7);
    rect(width/2 + rectWidth, height/2 + 150, rectWidth, rectHeight);
    //label boxes
    fill(0);
    textAlign(CENTER)
    textSize(20)
    text("sine", width/2, height/2 - 2 * rectHeight);
    text("triangle", width/2, height/2 - rectHeight);
    text("square", width/2, height/2);
    text("sawtooth", width/2, height/2 + rectHeight)
    text("lowPass", width/2 - rectWidth, height/2 + 150);
    text("highPass", width/2, height/2 + 150);
    text("bandPass", width/2 + rectWidth, height/2 + 150);
}

//MENU CONTROLS
function mouseClicked() {
    //variables for all of the menu box locations
    var rectHeight = 45;
    var rectWidth = 90;
    var rightWaveMenu = width/2 + rectWidth/2;
    var leftWaveMenu = width/2 - rectWidth/2;
    var topFilterMenu = height/2 + 150 - rectHeight/2;
    var bottomFilterMenu = height/2 + 150 + rectHeight/2;
    var lowPassLeft = width/2 - 1.5 * rectWidth;
    var lowPassRight = width/2 - .5 * rectWidth;
    var highPassRight = width/2 + .5 * rectWidth;
    var bandPassRight = width/2 + 1.5 * rectWidth;

    //WAVE FORM MENU CONTROLS

    //if clicked within sine box
    if(mouseX < rightWaveMenu & mouseX > leftWaveMenu
        && mouseY < height/2 - 1.5 * rectHeight && mouseY > height/2 - 2.5 * rectHeight) {
        //make all keys sine waves
        for(i = 0; i < keys.length; i++) {
            keys[i].changeType("sine");
        }
        //highlight currently selected box
        fill1 = color(150, 255, 255);
        fill2 = 255;
        fill3 = 255;
        fill4 = 255;
    } else if(mouseX < width/2 + rectWidth/2 & mouseX > width/2 - rectWidth/2
        && mouseY < height/2 - .5 * rectHeight && mouseY > height/2 - 1.5 * rectHeight) {
        //make all keys triangle waves
        for(i = 0; i < keys.length; i++) {
            keys[i].changeType("triangle");
        }
        //highlight currently selected box
        fill1 = 255;
        fill2 = color(150, 255, 255);
        fill3 = 255;
        fill4 = 255;
    } else if(mouseX < width/2 + rectWidth/2 & mouseX > width/2 - rectWidth/2
        && mouseY < height/2 + .5 * rectHeight && mouseY > height/2 - .5 * rectHeight) {
        //make all keys square waves
        for(i = 0; i < keys.length; i++) {
            keys[i].changeType("square");
        }
        //highlight currently selected box
        fill1 = 255;
        fill2 = 255;
        fill3 = color(150, 255, 255);
        fill4 = 255;
    } else if(mouseX < width/2 + rectWidth/2 & mouseX > width/2 - rectWidth
        && mouseY < height/2 + 1.5 * rectHeight && mouseY > height/2 + .5 * rectHeight) {
        //make all keys sawtooth waves
        for(i = 0; i < keys.length; i++) {
            keys[i].changeType("sawtooth");
        }
        //highlight currently selected box
        fill1 = 255;
        fill2 = 255;
        fill3 = 255;
        fill4 = color(150, 255, 255);
    

    //FILTER MENU CONTROLS
    } else if(mouseY < bottomFilterMenu & mouseY > topFilterMenu &&
        mouseX > lowPassLeft && mouseX < lowPassRight) {

        for(i = 0; i < keys.length; i++) {
            keys[i].setFilter(0);
            keys[i].setFilterEnv(0.3, 1.2, 1000, 0.1, 8000, 400);
        }
        //highlight currently selected box
        fill5 = color(190, 160, 255);
        fill6 = 255
        fill7 = 255

    } else if(mouseY < bottomFilterMenu & mouseY > topFilterMenu &&
        mouseX > lowPassRight && mouseX < highPassRight) {

        for(i = 0; i < keys.length; i++) {
            keys[i].setFilter(1);
            keys[i].setFilterEnv(0.3, 1.2, 1000, 0.1, 8000, 400);
        }
        //highlight currently selected box
        fill5 = 255
        fill6 = color(190, 160, 255);
        fill7 = 255

    }else if(mouseY < bottomFilterMenu & mouseY > topFilterMenu &&
        mouseX > highPassRight && mouseX < bandPassRight) {

        for(i = 0; i < keys.length; i++) {
            keys[i].setFilter(2);
            keys[i].setFilterEnv(0.3, 1.2, 1000, 0.1, 8000, 400);
        }
        //highlight currently selected box
        fill5 = 255
        fill6 = 255
        fill7 = color(190, 160, 255);

    }
}
 
 // --------- KEYBOARD CONTROLS, ONE CHROMATIC SCALE ----------
function keyPressed() {
    if(key === 'Q') {
        keys[0].attack();
    } else if(key === 'W') {
        keys[1].attack();
    } else if(key === 'E') {
        keys[2].attack();
    } else if(key === 'R') {
        keys[3].attack();
    } else if(key === 'T') {
        keys[4].attack();
    } else if(key === 'Y') {
        keys[5].attack();
    } else if(key === 'U') {
        keys[6].attack();
    } else if(key === 'I') {
        keys[7].attack();
    } else if(key === 'O') {
        keys[8].attack();
    } else if(key === 'P') {
        keys[9].attack();
    } else if(key === 'A') {
        keys[10].attack();
    } else if(key === 'S') {
        keys[11].attack();
    } else if(key === 'D') {
        keys[12].attack();


        //KEYSIGNATURE CONTROLS
    } else if(keyCode === LEFT_ARROW) {
        for(i = 0; i < keys.length; i++) {
            keys[i].halfstepDown();
        }
    } else if(keyCode === RIGHT_ARROW) {
        for(i = 0; i < keys.length; i++) {
            keys[i].halfstepUp();
        }
    } else if(keyCode === DOWN_ARROW) {
        for(i = 0; i < keys.length; i++) {
            keys[i].octaveDown();
        }
    } else if(keyCode === UP_ARROW) {
        for(i = 0; i < keys.length; i++) {
            keys[i].octaveUp();
        }
    }
    
}

function keyReleased() {
    if(key === 'Q') {
        keys[0].release();
    } else if(key === 'W') {
        keys[1].release();
    } else if(key === 'E') {
        keys[2].release();
    } else if(key === 'R') {
        keys[3].release();
    } else if(key === 'T') {
        keys[4].release();
    } else if(key === 'Y') {
        keys[5].release();
    } else if(key === 'U') {
        keys[6].release();
    } else if(key === 'I') {
        keys[7].release();
    } else if(key === 'O') {
        keys[8].release();
    } else if(key === 'P') {
        keys[9].release();
    } else if(key === 'A') {
        keys[10].release();
    } else if(key === 'S') {
        keys[11].release();
    } else if(key === 'D') {
        keys[12].release();
    }
}

nayeonk1-Final Project

nayeonk1

//Na-yeon Kim
//Section B
//nayeonk1@andrew.cmu.edu
//Final project

//global variables
var music;
var amp;
var volHistory = [];
var spectrumHistory = [];
var wave = [];
var fft;
var rainSize = 5;
var streams = [];
var w = 960;
var h = 540;


//load the song
function preload() {
    music = loadSound('city.mp3');
}

//setup canvas, music, aplitude and fft of the music, rainstream
function setup() {
    frameRate(20);
    createCanvas(1920, 1080);
    angleMode(DEGREES);

    music.play(); //play the song

    amp = new p5.Amplitude(0.9, 64); //get the aplitude value of the music
    fft = new p5.FFT(); //get the spectrum analysis value of the music

//generate and render the rains
    var x = 0;
    for (var i = 0; i <= width / rainSize; i++) {
      var stream = new Stream();
      stream.generate(x, random(-1000, 0));
      streams.push(stream);
      x += random(10, 50);
    }
}

//draw lighting and disk changing based on song. render raindrops
function draw() {
    background(0);

    light(0, 0); // lighting that changes with fft
    disk(0, 0); //disk that changes with amp

//render the streams
    streams.forEach(function(stream) {
      stream.render();
    });
}

//function rain-setting values for it-
function rain(x, y, vel, first) {
    this.x = x;
    this.y = y;
    this.vel = vel;
    this.first = first;

//reset raindrops to top when they hit the bottom
    this.reset = function() {
      if (this.y >= height) {
        this.y = 0;
      } else {
        this.y += this.vel;
      }
    }
}

//rain stream function. set speed and generation ofr rain drops
function Stream() {
    this.rainDrops = [];
    this.totalDrops = round(random(10, 50));
    this.vel = random(10);

//set the function of generating the rains
    this.generate = function(x, y) {
      var first = round(random(4)) == 1;
      for (var i = 0; i < this.totalDrops; i++) {
        rains = new rain(x, y, this.vel, first);
        this.rainDrops.push(rains);
        y -= rainSize * random(5);
        first = false;
      }
    }
    //setting the rendering funtion to the rain
    this.render = function() {
      this.rainDrops.forEach(function(rains) {
        if (rains.first) {
          fill(170, 50, 130, random(200));
        } else {
          fill(230, 100, 200, 50);
        }
        //draw rain drops
        noStroke();
        push();
        ellipse(rains.x, rains.y, rainSize, rainSize);
        rains.reset();
        pop();
      });
    }
}

//draw a light that changes it's shapes based on spectrum of the music(fft)
function light() {

    push();
    translate(w, h)

//get the value of fft and put them in spectrum array
    var spectrum = fft.analyze();
    spectrumHistory.push(spectrum);

//erase old spectrum from the array
    if (spectrumHistory.length > width) {
      spectrumHistory.splice(0, 1);
    }

//draw shapes
    for (var i = 0; i < spectrum.length; i++) {
      var spec = spectrum[i];
      var angle = map(i, 0, spectrum.length, 0, 520);
      var r = map(spec, 0, 100, 50, 150);
      var x = r * cos(angle);
      var y = r * sin(angle);

      beginShape();
      stroke(y * 2, x / 2, r / 2);
      strokeWeight(0.5);

      line(0, 0, x, y);
      line(0, 0, -x, -y);
      }
      endShape();
      pop();
}

//draw disk that change its radius based on volum of the music(amp)
function disk(x, y) {
    push();
    translate(w, h);

//get the amp level from the music and put them in vol array
    var vol = amp.getLevel();
    volHistory.push(vol);

//erase old volume from the array
    if (volHistory.length > width) {
      volHistory.splice(0, 1);
    }

//more circles on center
    var rad = map(vol, 0, 1, 100, 250);
    noStroke();
    fill(50, 50, 200, 100);
    ellipse(x, y, rad, rad);
    fill(200, 50, 50, 100);
    ellipse(x, y, rad - 5, rad - 5);
    fill(50, 50, 200, 100);
    ellipse(x, y, rad - 20, rad - 20);
    fill(255, 25);
    ellipse(x, y, rad - 40, rad - 40);
    pop();
}

For the final project, I worked with Jiaxin. It was really fun to work with the friend for something I wanted to do! I’m interested in media art, especially interactive installation art. I proposed this idea to Jiaxin and she also loves to work with Kinect. Since both of us are ETC student, we could get access to all of the equipment like Kinect and projector very easily. So we teamed up and divided works into two. As Jiaxin wanted to work with Kinect, I took charge of background animation and music. I play with sound on p5js and interactive images for days. Meanwhile, me and Jiaxing had several meetings to settle down the idea on this project. We worked on mood board first to see how we are picturing the outcome.

Moodboard1
Moodboard2
Reference

And then we moved on to work on actual work process. For me, it was getting interact images with sound done. I searched on how to make interactive images with sounds in p5js and got some ideas about what I want to create.
First interactive thing is volume. circle on the center of the canvas is changing its radius by music volume. Second is frequency spectrum. It shows analysis of spectrum from low frequency to high frequency, of course, different sound effects have the different frequency.
It was really fun to work on installation art as I wished! I’d love to work on this kind of artwork later again.

Special thanks to Julian Korzeniowsky -a talented and awesome musician- for providing awesome music for our project.

1.download this file Final project(Jiaxin_Nayeon)
2.set up a local server
3.(get a Kinect and) open the file in chrome

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.

 

rgroves – Final – Section B

sketch

//vertices and edge sets of the individual graphs
var V = [];
var E = [];

//total set of vertices
var vertices = [];
var spacing = 48;

//buttons for coloring vertices
var redbutton;
var bluebutton;
var greenbutton;
var pinkbutton;
var orangebutton
var buttons = [];

var levelnumber = 1;
var mousehasentbeenclicked;

function setup() {
    createCanvas(480, 400);
    background(255);
    resetLevel();
}

function resetLevel() {
	mousehasentbeenclicked = true;
	 background(255);
    //create buttons
    redbutton = makeButton(width/6, color(209, 90, 90));
	bluebutton = makeButton(2 * width/6, color(93, 137, 196));
	greenbutton = makeButton(3 * width/6, color(199, 197, 71));
	pinkbutton = makeButton(4 * width/6, 'lightpink');
	orangebutton = makeButton(5 * width/6, 'orange');
	buttons = [redbutton, bluebutton, greenbutton, pinkbutton, orangebutton];
	for (i = 0; i < buttons.length; i++) {
		buttons[i].isoutlined = false;
		buttons[i].draw();
	}

	//draw grid of small vertices and label them from 0 to 53 in an array
    for (i = 0; i < width/spacing - 1; i++) {
    	for (j = 0; j < 300/spacing - 1; j++) {
	   		vertices[i + ((width/spacing - 1) * j)] = 
	   		makeVertex(spacing + i * spacing, spacing + j * spacing);
    	}
    }
}

//OBJECTS: VERTICES, EDGES, BUTTONS////////////////////////////////////////////

//vertices
function vertexboldDraw() {
	noStroke();
	if (this.isred == true) {
		fill(209, 90, 90);
		ellipse(this.x, this.y, 16, 16);	
	} else if (this.isblue == true) {
		fill(93, 137, 196);
		ellipse(this.x, this.y, 16, 16);	
	} else if (this.isgreen == true) {
		fill(199, 197, 71);
		ellipse(this.x, this.y, 16, 16);	
	} else if (this.ispink == true) {
		fill('lightpink');
		ellipse(this.x, this.y, 16, 16);
	} else if (this.isorange == true) {
		fill('orange');
		ellipse(this.x, this.y, 16, 16);
	} else {
		stroke(150);
		strokeWeight(1);
		fill(255);	
		ellipse(this.x, this.y, 15, 15);	
	}
}

function vertexDraw() {
	noStroke();
	fill(180);
	ellipse(this.x, this.y, 1.5, 1.5);
}

function makeVertex(px, py) {
	v = {x: px, y: py, draw: vertexDraw, bolddraw: vertexboldDraw,
		isred: false, isgreen: false, isblue: false, ispink: false,
		isorange: false};
	return v;
}

//edges
function edgeDraw(m, n) {
	if (this.iscolored == true & this.iscorrect == true) {
		strokeWeight(3);
		stroke('limegreen');
	} else if (this.iscolored == true & this.iscorrect == false) {
		strokeWeight(3);
		stroke('tomato');
	} else if (this.iscolored == false) {
		strokeWeight(.5);
		stroke(200);
	}
    line(vertices[this.m].x, vertices[this.m].y,
    vertices[this.n].x, vertices[this.n].y);
}

function makeEdge(pm, pn) {
	e = {m: pm, n: pn, iscolored: false, iscorrect: true, draw: edgeDraw};
	return e
}

//buttons
function buttonDraw() {
	rectMode(CENTER);
	if (this.isoutlined == true) {
		strokeWeight(3);
		stroke(255);
		fill(this.buttoncolor);
		rect(this.x, height - 50, 60, 20);
	} else {
		noStroke();
		fill(this.buttoncolor);
		rect(this.x, height - 50, 61.5, 21.5);
	}	
	
}

function makeButton(px, color) {
	b = {x: px, buttoncolor: color, isoutlined: false, draw: buttonDraw};
	return b;
}

//FUNCTIONS TO BE CALLED IN MOUSEPRESSED///////////////////////////////////////
function testEdge() {
	//edges are green if the vertices are different color and red if they are 
	//the same colors
	for (i = 0; i < E.length; i++) {
		if (vertices[E[i].m].isred == true & vertices[E[i].n].isred == true) {
			E[i].iscolored = true;
			E[i].iscorrect = false;
		}
		if (vertices[E[i].m].isblue == true & vertices[E[i].n].isblue == true) {
			E[i].iscolored = true;
			E[i].iscorrect = false;
		}
		if (vertices[E[i].m].isgreen == true & vertices[E[i].n].isgreen == true) {
			E[i].iscolored = true;
			E[i].iscorrect = false;
		}
		if (vertices[E[i].m].ispink == true & vertices[E[i].n].ispink == true) {
			E[i].iscolored = true;
			E[i].iscorrect = false;
		}
		if (vertices[E[i].m].isorange == true & vertices[E[i].n].isorange == true) {
			E[i].iscolored = true;
			E[i].iscorrect = false;
		}
		if ((vertices[E[i].m].isred == true || vertices[E[i].m].isblue == true ||
			vertices[E[i].m].isgreen == true || vertices[E[i].m].ispink == true
			|| vertices[E[i].m].isorange == true) & (vertices[E[i].n].isred == true 
			|| vertices[E[i].n].isblue == true || vertices[E[i].n].isgreen == true
			|| vertices[E[i].n].ispink == true || vertices[E[i].n].isorange == true)) {
			E[i].iscolored = true;
		}
		if (E[i].iscolored == true & (vertices[E[i].m].isred !== vertices[E[i].n].isred
			|| vertices[E[i].m].isblue !== vertices[E[i].n].isblue
		    || vertices[E[i].m].isgreen !== vertices[E[i].n].isgreen 
		    || vertices[E[i].m].ispink !== vertices[E[i].n].ispink
		    || vertices[E[i].m].isorange !== vertices[E[i].n].isorange)) {
			E[i].iscolored = true;
			E[i].iscorrect = true;
		}
		E[i].draw();
	}
}

function colorVertices() {
	//change colors of vertices when clicked, depending on which button has 
	//most recently been clicked
	for (i = 0; i < V.length; i++) {
		if (dist(mouseX, mouseY, vertices[V[i]].x, vertices[V[i]].y) < 10) {
			if (buttons[0].isoutlined == true & buttons[1].isoutlined == false &&
				buttons[2].isoutlined == false && buttons[3].isoutlined == false &&
				buttons[4].isoutlined == false) {
				vertices[V[i]].isred = true;
				vertices[V[i]].isblue = false;
				vertices[V[i]].isgreen = false;
				vertices[V[i]].ispink = false;
				vertices[V[i]].isorange = false;
			}
			if (buttons[0].isoutlined == false & buttons[1].isoutlined == true &&
				buttons[2].isoutlined == false && buttons[3].isoutlined == false &&
				buttons[4].isoutlined == false) {
				vertices[V[i]].isred = false;
				vertices[V[i]].isblue = true;
				vertices[V[i]].isgreen = false;
				vertices[V[i]].ispink = false;
				vertices[V[i]].isorange = false;
			}
			if (buttons[0].isoutlined == false & buttons[1].isoutlined == false &&
				buttons[2].isoutlined == true && buttons[3].isoutlined == false &&
				buttons[4].isoutlined == false) {
				vertices[V[i]].isred = false;
				vertices[V[i]].isblue = false;
				vertices[V[i]].isgreen = true;
				vertices[V[i]].ispink = false;
				vertices[V[i]].isorange = false;
			}
			if (buttons[0].isoutlined == false & buttons[1].isoutlined == false &&
				buttons[2].isoutlined == false && buttons[3].isoutlined == true &&
				buttons[4].isoutlined == false) {
				vertices[V[i]].isred = false;
				vertices[V[i]].isblue = false;
				vertices[V[i]].isgreen = false;
				vertices[V[i]].ispink = true;
				vertices[V[i]].isorange = false;
			}
			if (buttons[0].isoutlined == false & buttons[1].isoutlined == false &&
				buttons[2].isoutlined == false && buttons[3].isoutlined == false &&
				buttons[4].isoutlined == true) {
				vertices[V[i]].isred = false;
				vertices[V[i]].isblue = false;
				vertices[V[i]].isgreen = false;
				vertices[V[i]].ispink = false;
				vertices[V[i]].isorange = true;
			}
		}
	}
}

function pressButton() {
	//select color for vertex coloring
	if (mouseX >= buttons[0].x - 30 & mouseX <= buttons[0].x + 30 
		&& mouseY <= height - 40 && mouseY >= height - 60) {
			buttons[0].isoutlined = true;
			buttons[1].isoutlined = false;
			buttons[2].isoutlined = false;
			buttons[3].isoutlined = false;
			buttons[4].isoutlined = false;
			for (i = 0; i < buttons.length; i++) {
				buttons[i].draw();
			}
	}
	if (mouseX >= buttons[1].x - 30 & mouseX <= buttons[1].x + 30 
		&& mouseY <= height - 40 && mouseY >= height - 60) {
			buttons[0].isoutlined = false;
			buttons[1].isoutlined = true;
			buttons[2].isoutlined = false;
			buttons[3].isoutlined = false;
			buttons[4].isoutlined = false;
			for (i = 0; i < buttons.length; i++) {
				buttons[i].draw();
			}
	}
	if (mouseX >= buttons[2].x - 30 & mouseX <= buttons[2].x + 30 
		&& mouseY <= height - 40 && mouseY >= height - 60) {
			buttons[0].isoutlined = false;
			buttons[1].isoutlined = false;
			buttons[2].isoutlined = true;
			buttons[3].isoutlined = false;
			buttons[4].isoutlined = false;
			for (i = 0; i < buttons.length; i++) {
				buttons[i].draw();
			}
	}
	if (mouseX >= buttons[3].x - 30 & mouseX <= buttons[3].x + 30 
		&& mouseY <= height - 40 && mouseY >= height - 60) {
			buttons[0].isoutlined = false;
			buttons[1].isoutlined = false;
			buttons[2].isoutlined = false;
			buttons[3].isoutlined = true;
			buttons[4].isoutlined = false;
			for (i = 0; i < buttons.length; i++) {
				buttons[i].draw();
			}
	}
	if (mouseX >= buttons[4].x - 30 & mouseX <= buttons[4].x + 30 
		&& mouseY <= height - 40 && mouseY >= height - 60) {
			buttons[0].isoutlined = false;
			buttons[1].isoutlined = false;
			buttons[2].isoutlined = false;
			buttons[3].isoutlined = false;
			buttons[4].isoutlined = true;
			for (i = 0; i < buttons.length; i++) {
				buttons[i].draw();
			}
	}
}

//DESIGN LEVELS AND CALL THEM IN DRAW//////////////////////////////////////////
function levelOne() {
	textSize(10);
	strokeWeight(.4);
	fill('grey');
	text('Level One: Practice', 30, 10);
	E = [[25, 4], [19, 4], [25, 51], [51, 47], [47, 19], [4, 13], [25, 24], 
	[51, 41], [47, 39], [19, 20], [13, 41], [41, 20], [20, 24], [24, 39], 
	[39, 13]];
	for (i = 0; i < E.length; i++) {
		E[i] = makeEdge(E[i][0], E[i][1]);
		if (mousehasentbeenclicked) {
			E[i].draw();
		}
	}
	V = [4, 13, 19, 20, 24, 25, 39, 41, 47, 51];
	for (i = 0; i < V.length; i++) {
		vertices[V[i]].bolddraw();
	} 	
}

function levelTwo() {
	textSize(10);
	strokeWeight(.4);
	fill('grey');
	text('Level Two', 30, 10);
	E = [[25, 4], [19, 4], [25, 51], [51, 47], [47, 19], [38, 47], [47, 51], 
	[51, 42], [42, 38], [38, 51], [42, 47], [42, 19], [25, 38], [4, 38], 
	[4, 42], [19, 38], [25, 42]];
	for (i = 0; i < E.length; i++) {
		E[i] = makeEdge(E[i][0], E[i][1]);
		if (mousehasentbeenclicked) {
			E[i].draw();
		}
	}
	V = [4, 19, 25, 38, 42, 47, 51];
	for (i = 0; i < V.length; i++) {
		vertices[V[i]].bolddraw();
	} 	
}

function levelThree() {
	textSize(10);
	strokeWeight(.4);
	fill('grey');
	text('Level Three', 30, 10);
	E = [[4, 31], [31, 17], [31, 53], [31, 45], [31, 9], [12, 14], [14, 33], 
	[33, 40], [40, 29], [29, 12], [4, 29], [4, 14], [17, 12], [17, 33], [53, 14], 
	[53, 40], [45, 33], [45, 29], [9, 40], [9, 12]];
	for (i = 0; i < E.length; i++) {
		E[i] = makeEdge(E[i][0], E[i][1]);
		if (mousehasentbeenclicked) {
			E[i].draw();
		}
	}
	V = [4, 9, 12, 14, 17, 29, 33, 40, 45, 53, 31];
	for (i = 0; i < V.length; i++) {
		vertices[V[i]].bolddraw();
	} 
		
}

function levelFour() {
	textSize(10);
	strokeWeight(.4);
	fill('grey');
	text('Level Four', 30, 10);
	E = [[4, 18], [18, 45], [45, 21], [21, 4], [4, 23], [23, 53], [53, 26], 
	[26, 4], [4, 28], [4, 34], [28, 34], [18, 28], [26, 34], [18, 21], 
	[23, 26], [28, 21], [34, 23], [21, 23], [28, 34], [23, 45], [21, 53]];
	for (i = 0; i < E.length; i++) {
		E[i] = makeEdge(E[i][0], E[i][1]);
		if (mousehasentbeenclicked) {
			E[i].draw();
		}
	}
	V = [4, 18, 21, 23, 26, 28, 34, 45, 53];
	for (i = 0; i < V.length; i++) {
		vertices[V[i]].bolddraw();
	} 
}

function levelFive() {
	textSize(10);
	strokeWeight(.4);
	fill('grey');
	text('Level Five', 30, 10);
	E = [[25, 4], [19, 4], [25, 51], [51, 47], [47, 19], [4, 13], [19, 13], 
	[25, 13], [29, 13], [33, 13], [47, 13], [51, 13], [4, 29], [4, 33], 
	[19, 29], [25, 33], [29, 51], [33, 47], [29, 47], [33, 51], [25, 29], [19, 33]];
	for (i = 0; i < E.length; i++) {
		E[i] = makeEdge(E[i][0], E[i][1]);
		if (mousehasentbeenclicked) {
			E[i].draw();
		}
	}
	V = [4, 19, 25, 47, 51, 13, 33, 29];
	for (i = 0; i < V.length; i++) {
		vertices[V[i]].bolddraw();
	} 
}



function draw() {
	for (k = 0; k < vertices.length; k++) {
    	vertices[k].draw();
    }
    if (levelnumber == 1) {
    	levelOne();
    } else if (levelnumber == 2) {
    	levelTwo();
    } else if (levelnumber == 3) {
    	levelThree();
    } else if (levelnumber == 4) {
    	levelFour();
    } else if (levelnumber == 5) {
    	levelFive();
    }
}


function mousePressed() { 
	mousehasentbeenclicked = false;
	pressButton();
	colorVertices();
	testEdge();	

	var is5colored = true;
	for (i = 0; i < E.length; i ++) {
		if (E[i].iscolored == false || E[i].iscorrect == false) {
			is5colored = false;
		}
	}
	if (is5colored == true) {
		resetLevel();
		levelnumber++;
	}
	if (levelnumber == 6) {
		textSize(90);
		fill('lightpink');
		noStroke();
		text('YOU WIN', 40, height/2);
	}			
}

My final project is a simple game based on graph coloring. Click on any of the colored boxes to select a color and then click in the vertices to color them with that color. The goal is to color in the graph so that there is no edge between vertices of the same color. When you succeed it will automatically move on to the next level. There are a total of 5 levels and when you complete them all you win!

jiaxinw-Final Project

Interactive Music Media Installation

This is a project using Kinect connecting with a website which was developed by P5.js.  Therefore, this project cannot be run on WordPress. We recorded the video for our project and hope it can be a good demonstration of the whole concept.

For this project, Nayeon and I worked together to create a new media installation in which people can interact with music by hitting virtual buttons to generate sounds and visual effects. People can follow the music from the background and have fun with moving their body to play music.

I learned a lot and a lot and a lot from this final project and I am so proud that it finally has been done. For this project, I was responsible for the Kinect part,  which included making sure the connection between Kinect and the website (or we can say the Javascript files) work well and also create User Interface (the virtual buttons, particle effects, and sound effects) for the website.  So, the biggest challenge for me at the beginning was figuring out how to connect Kinect and Javascript. I did a lot of research and finally decided to use the Node-Kinect2 library to achieve what I needed.

(Information about Node-Kinect library: https://github.com/wouterverweirder/kinect2)

I followed the instructions of the library, installed all the modules and packages that I needed (which took me a long time to figure out how to properly install the node.js and all kinds of modules. 😉 ). After it, I looked into the sample files carefully, analyzed the logic inside to figure out how I can access the data of Kinect skeleton. I figured out, for using this library to access data, I needed to set up a local server and point it to my local index, uploading my resources and files to the server through the node.js. At last, I need to use the command prompt to open the js file by using node.js. Whoo… to be honest, it was not easy to figure out the whole process clearly, but once I understood the logic behind it, the whole thing went more fluently.

The next step I did was designing how the interface looks like. After communication with Nayeon, we decided to create a project with a Neon art style.  I created a mood board for myself to figured out the feelings of the visual part.

my mood board

I also looked into a very inspiring and amazing project which is The V Motion Project and decided to do a circling interface for people to play with.

(For more information about V Motion Project: https://vimeo.com/45417241)

The presentation of V Motion Project

I created 6 virtual buttons on the canvas, and when people hit any of them, a particle effect will be generated along with a sound effect. By standing in front of the Kinect, people can move their hands to touch the buttons and create their own music and visual effects.

One more thing I have learned from this project is about how to access JS file outside Node.js through Node.js. The trick is you need to follow a very strict syntax to get your directory of the file and upload your resources to it.

you need to follow a special syntax to access your file

Anyway, it is so excited that I have finished this project with Nayeon! We definitely went through some difficulties and I guess this is why I feel very fulfilled when I finished creating everything! Here are some screenshots of the project!  Hope you Enjoy 🙂

Capture of final project
Capture of final project
Capture of final project

Finally here is the source code (a zip file) we created, please feel free to check it. I was responsible for the Kinect and interface (jiaxin.js) part.

Final project(Jiaxin_Nayeon)

Instruction for opening our project:

  1. Go to https://github.com/wouterverweirder/kinect2   download the Kinect node.js library.
  2. Follow the instruction to install node.js
  3. Connect your Kinect to your PC and make sure it works 🙂
  4. Extract the project zip file, and open your Command Prompt (for windows), go to the directory that you put our project folder. (use “cd + the directory “)
  5. And then use node.js to open the kinect.js file. (simply type “node kinect”)
  6. Open a browser and go to the local server : http://localhost:8000
  7. Stand in front of your Kinect, and have fun with our project!

nahyunk1 & yugyeonl Final



How to open up and run the file:

  1. download and unzip the files below.
  2. nahyunk1-yugyeonl-final project
  3. songs
  4. extract “sound1”, “sound2”, and “sound3” music files from the songs folder and put them into the “assets” folder inside the final project folder.
  5. turn on terminal or node and run local server.
  6. access the sketch.js inside the final project folder.
  7. play and enjoy the songs by entering either 1, 2, 3 on your keyboard.

The project file was too large so we had to upload the songs separately in another folder along with the zip file of our code. Our project was based on the idea of generating animation with the kiwi bird and creating its walkthrough with the incorporation of music affecting the background of the landscape. There are three parts to the scenes: pressing 1 on your keyboard will affect your current scene to an urban landscape. Similarly, when either 2 or 3 is pressed, different scenes and music replace the current scene with different parts of the landscape responding to the beat, frequency, and the amplitude of the music assigned. The parts of the landscapes were drawn with the incorporation of the FFT(); function and the p5.Amplitude(); function which analyzes the frequency and the volume of the music when it is played. Some of the interesting factors that our animation consisted was the sun beam which would draw itself in an ellipse in a form of measured frequency and the stars and the moon which brightens and glistens depending on the beat of the music played at night. Throughout, we put a lot of effort learning and incorporating the p5.sound materials, creating a variety of landscapes with music chosen according to the mood of our scenes, and generally coding different functions and figuring out ways for our code to understand the switching of the scenes and the play of different music files.

**scene 2 consists of a song that is relatively louder than the other scenes that contain music files. We’ve put code for the sound of the song to be reduced, but the song still plays comparatively loud. Please be careful with the volume of your headphones.

 

sketch

var kiwi;             
var kiwiX = 200;        //kiwi locationX
var kiwiY = 310;        //kiwi locationY
var tree = [];          //array of trees
var treeAssets = [];
var shell = [];         //array of shells
var shellAssets = [];
var coin = [];          //array of coins
var coinAssets = [];
var gem = [];           //array of gems
var gemAssets = [];
var buildings = [];     //array of buildings
var ocean = [];         //array of mountain
var mountain = [];      //array of ocean
var stars = [];         //array of stars
var clouds = [];        //array of clouds
var sound1;
var sound2;
var sound3;
var amplitude; 
var volArray = [];      //array that stores volume
var timeState = "morning";    //determines initial state of time

function preload() {
    sound1 = loadSound("assets/sound1.mp3");
    sound2 = loadSound("assets/sound2.mp3");
    sound3 = loadSound("assets/sound3.mp4");
    var treeLinks = ["assets/palmtree0.png", "assets/palmtree1.png", 
                    "assets/palmtree2.png", "assets/palmtree3.png"];
    //load tree images
    for (var t = 0; t < treeLinks.length; t++) {
        treeAssets[t] = loadImage(treeLinks[t]);
    }
    //load shell images
    for (var i = 0; i < 1; i++){
        shellAssets[i] = loadImage("assets/shell.png");
    }
    //load coin images
    for (var i = 0; i < 1; i++){
        coinAssets[i] = loadImage("assets/coin.png");
    }
    //load gem images
    for (var i = 0; i < 1; i++){
        gemAssets[i] = loadImage("assets/gem.png");
    }
}

function setup() {
    createCanvas(1000, 700);
    imageMode(CENTER);
    //load amplitude
    amplitude = new p5.Amplitude();
    //load fft 
    fft = new p5.FFT();
    sound1.setVolume(1);
    sound2.setVolume(0.00000001);
    sound3.setVolume(1);
    //create initial set of trees
    for (var i = 0; i < 4; i ++) {
        var treeX = random(width);
        tree[i] = makeTrees(treeX);
    }
    //create initial set of shells
    for (var i = 0; i < 5; i ++) {
        var shellX = random(360, width);
        shell[i] = makeShells(shellX);
    }
    //create initial set of coins
    for (var i = 0; i < 5; i ++) {
        var coinX = random(360, width);
        coin[i] = makeCoins(coinX);
    }
    //create initial set of gems
    for (var i = 0; i < 5; i ++) {
        var gemX = random(360, width);
        gem[i] = makeGems(gemX);
    }
    //create initial set of buildings
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        buildings[i] = makeBuilding(rx);
    }
    //create initial set of clouds
    for (var i = 0; i < 10; i++) {
      var cloudX = random(width);
      var cloudY = random(height/2);
      clouds[i] = makeClouds(cloudX, cloudY);
    }
    //create kiwi animation
    createKiwi(kiwiX, kiwiY);  
    //ocean
    makeOcean(height - 220, 30, 0.00005, 0.0005, color(197, 227, 234));
    makeOcean(height - 180, 80, 0.00005, 0.001, color(225, 211, 185));  
    //mountain
    makeMountain(height - 400, 200, 0.00005, 0.0025, color(15));
    makeMountain(height - 350, 300, 0.00015, 0.006, color(0));
}

function draw() {
    if (timeState == "morning") {
        morning();
        if (sound1.isPlaying() == false){
          sound1.play();
        }  else if (sound2.isPlaying() ==  true){
          sound2.stop();
        }  else if (sound3.isPlaying() ==  true){
          sound3.stop();
        }
    } if (timeState == "afternoon") {
        afternoon();
        if (sound2.isPlaying() == false){
          sound2.play();
        }
        else if (sound1.isPlaying() ==  true){
          sound1.stop();
        } else if (sound3.isPlaying() ==  true){
          sound3.stop();
        }
    } if (timeState == "night") {
        night();
        if (sound3.isPlaying() == false){
          sound3.play();
        }  if (sound1.isPlaying() == true){
          sound1.stop();
        }  else if (sound2.isPlaying() ==  true){
          sound2.stop();
        }
    } 
}

function keyPressed() {
    if (key == '1') {
        timeState = "morning";
    } if (key == '2') {
        timeState = "afternoon";
    } else if (key == '3') {
        timeState = "night";
    }
}

function morning() {
    //gradient background color
    var from = color(125, 133, 216);
    var to = color(220, 224, 251);
    setGradient(0, from, to, 3.5 * height / 5);
    //lines in the background showing frequency
    skyFreq(0, 125);
    //sun
    makeSun(width / 4 - 100, 550, 236, 191, 113, 300);
    //ground
    noStroke();
    fill(96, 91, 103);
    rect(0, 3.5 * height / 5 - 10, width, 0.5 * height / 5);
    fill(127, 109, 123);
    rect(0, 4 * height / 5 - 10, width, height / 4);
    //clouds
    updateAndDisplayClouds();
    addClouds();
    //buildings
    updateAndDisplayBuildings();
    addBuildings();
    //kiwi
    drawKiwi();
    //coins
    updateAndDisplayCoins();
    addCoins();
}

function afternoon() {
    //gradient background color
    var from = color(20, 140, 172);
    var to = color(209, 255, 249);
    setGradient(0, from, to, 3.5 * height / 5);
    //lines in the background showing frequency
    skyFreq(100, 48);
    //ocean & sand
    noStroke();
    moveOcean();
    //sun
    makeSun(3 * width / 4, 90, 243, 229, 202, 150);  
    //sun outline based on frequency
    sunFreq();     
    //trees
    updateAndDisplayTrees();
    addTrees(); 
    //kiwi
    drawKiwi();     
    //shells
    updateAndDisplayShells();
    addShells();
}

function night() {
    //gradient background color
    var from = color(25, 0, 51);
    var to = color(51, 0, 102);
    setGradient(0, from, to, 3.5 * height / 5);
    //stars
    updateAndDisplayStars();
    removeStars();
    addStars();
    drawStars();
    //moon
    makeMoon();
    //mountain
    strokeWeight(random(0.2, 0.4));
    stroke(random(0,255), random(0,255), random(0,255));
    moveMountain();
    //ground
    noStroke();
    fill(18, 13, 17);
    rect(0, 3.5 * height / 5, width, 1.5 * height / 5);
    //kiwi
    drawKiwi();
    //gems
    updateAndDisplayGems();
    addGems();
    //sound
}

function setGradient (y, from, to, length) {
    //top to bottom gradient (background)
    for (var i = y; i <= length; i++) {
        var inter = map(i, y, width, 0, 1);
        var c = lerpColor(from, to, inter);
        stroke(c);
        strokeWeight(2);
        line(0, i, width, i);
    }
}

function makeSun(sunX, sunY, r, g, b, diam) {
    noStroke();
    //glowing gradient sunlight
    for (var i = 0; i < 30; i++) {
        var value = random(7, 8);
        var transparency = 100 - value * i;
        fill(r + 2 * i / 3, g + 7 * i / 3, b + i, transparency);
        ellipse(sunX, sunY, diam + 20 * i, diam + 20 * i);
    }
    //sun
    fill(r, g, b, 100);
    ellipse(sunX, sunY, diam, diam);
}

function sunFreq() {    //sun outline
    angleMode(DEGREES);
    //analyze level of the amplitude
    var vol = amplitude.getLevel();
    //array that pushes the volume in the array
    volArray.push(vol);
    stroke(255);
    strokeWeight(.5);
    noFill();
    push();
    translate(width - 240, 90);
    scale(2.5);
    //shape that represent the range of the frequency
    beginShape();
    for (var i = 0; i < 360; i ++){
        var r = map(volArray[i], 0, 1, 10, 100);
        var x = r * cos(i);
        var y = r * sin(i);
        vertex(x ,y);
    }
    endShape();
    pop();
    //360 because the reperesentation draws in an ellipse
    if (volArray.length > 360){
        volArray.splice(0, 1);
    }  
}

function skyFreq(offset, spacingX) {    //background lines
    var w = width / spacingX;
    //anaylze the fft
    var spectrum = fft.analyze();
    push();
    translate(0, offset);
    beginShape();
    //draws the frequency level as lines behind the ocean
    for (var i = 0; i < spectrum.length; i++){
        var angle = map(i, 0, spectrum.length, 0, 360);
        var amp = spectrum[i];
        var r = map(amp, 0, 256, 40, 200);
        var y = map(amp, 0, 256, height, 0);
        stroke(255);
        strokeWeight(0.5);
        line(i * w, height, i * w, y);
    }
    endShape();
    pop();
}

function cityFreq() {

}

function makeMoon() {
    //size of moonlight depends on the amplitude
    for (var c = 0; c < 30; c++){
        var level = amplitude.getLevel();
        noStroke();
        fill(217, 154, 100, (10 - c) * level * 50);
        ellipse(850, 150, 90 + (10 * c) + level, 90 + (10 * c) +  level);
        stroke(255, 223, 181);
        fill(255, 223, 181);
        ellipse(850, 150, 100, 100);
        fill(252, 240, 224);
        ellipse(858, 150, 85, 85);
    }
}

function drawKiwi() {  //create kiwi   
    push();
    translate(kiwiX, kiwiY);
    scale(0.6, 0.6);
    drawSprites();
    pop();
}

function createKiwi(x, y) {  //create sprite at a random position
    kiwi = createSprite(x, y);
    kiwi.addAnimation("assets/kiwi0.png","assets/kiwi1.png",
                  "assets/kiwi2.png","assets/kiwi3.png","assets/kiwi4.png","assets/kiwi5.png","assets/kiwi6.png",
                  "assets/kiwi7.png","assets/kiwi8.png","assets/kiwi9.png","assets/kiwi10.png",
                  "assets/kiwi11.png","assets/kiwi12.png","assets/kiwi13.png","assets/kiwi14.png");
}

function makeOcean(landscapeY, landscapeR, landscapeS, landscapeD, landscapeC) {
    var landscape = {ly: landscapeY,     //locationY
                range: landscapeR,      //range of how far landscape goes up
                speed: landscapeS,      //speed of the landscape
                detail: landscapeD,     //detail (how round/sharp)
                color: landscapeC,      //color of the landscape
                draw: drawLandscape}
    ocean.push(landscape);
}

function makeMountain(landscapeY, landscapeR, landscapeS, landscapeD, landscapeC) {
    var landscape = {ly: landscapeY,     //locationY
                range: landscapeR,      //range of how far landscape goes up
                speed: landscapeS,      //speed of the landscape
                detail: landscapeD,     //detail (how round/sharp)
                color: landscapeC,      //color of the landscape
                draw: drawLandscape}
    mountain.push(landscape);
}

function drawLandscape() {  //generating landscape from code provided
    fill(this.color);
    beginShape();
    vertex(0, height);
    for (var i = 0; i < width; i++) {
        var t = (i * this.detail) + (millis() * this.speed);
        var y = map(noise(t), 0, 1, this.ly - this.range / 2, this.ly + this.range / 2);
        vertex(i, y); 
    }
    vertex(width, height);
    endShape(CLOSE);
}

function moveOcean() { //move the landscape
    for (var i = 0; i < ocean.length; i++) 
        ocean[i].draw();
}

function moveMountain() { //move the landscape
    for (var i = 0; i < mountain.length; i++) 
        mountain[i].draw();
}

//palm trees
function updateAndDisplayTrees() {
    //keeps the trees moving along the x-axis
    for (var i = 0; i < tree.length; i++) {
        tree[i].moveTree();
        tree[i].drawTree();
   }
}

function drawTrees() { //draws the trees
    image(treeAssets[this.nFloor], this.x + 200, this.y - 100);
}

function moveTrees() { //move the trees
    this.x -= this.speed;
}

function addTrees() { //places in more trees into the array
    var newTreesProbability = 0.0015;
    if (random(0, 1) < newTreesProbability) {
        tree.push(makeTrees(width));
   }
}

function makeTrees(originX) {
    var palmtrees = {
        x: originX,
        y: random(400, 420),
        speed: 0.55,
        nFloor: floor(random(0, 3)),
        moveTree: moveTrees,
        drawTree: drawTrees}
    return palmtrees;
}

//shells
function updateAndDisplayShells() {
    //keeps the shells moving along the x-axis
    for (var i = 0; i < shell.length; i++) {
        shell[i].moveShell();
        shell[i].drawShell();
    }
}

function drawShells() { //draws the shells
    push();
    translate(this.x + 100, this.y);
    scale(0.25, 0.25);
    image(shellAssets[0], 0, 0);
    pop();
}

function moveShells() { //move the shells
    this.x -= this.speed;
}

function addShells() {  //places in more trees into the array
    var newTreesProbability = 0.0035; 
    if (random(0, 1) < newTreesProbability) {
        shell.push(makeShells(width));
    }
}

function makeShells(shellX) {
    var shells = {
        x: shellX,
        y: 610,
        speed: 1,
        moveShell: moveShells,
        drawShell: drawShells}
    return shells;
}

//budilings
function updateAndDisplayBuildings(){
    //keeps the buildings moving along the x-axis
    for (var i = 0; i < buildings.length; i++) {
        buildings[i].move();
        buildings[i].display();
    }
}

function addBuildings() {  //places in more buildings into the array
    var newBuilding = 0.006; 
    if (random(0,1) < newBuilding) {
        buildings.push(makeBuilding(width));
    }
}

function moveBuildings() { //move the buildings
    this.x -= this.speed;
}

function drawBuildings() { //draws the buildings
    var floorHeight = 45;
    var bHeight = this.nFloors * floorHeight; 
    push();
    noStroke();
    fill(this.buildingC); 
    translate(this.x, height - 180);
    rect(0, -bHeight, this.breadth, bHeight);
    for (var y = 0; y < this.nFloors; y++) {
        for (var x = 0; x < 6; x++){
            noStroke();
            fill(255, 221, random(100, 150));
            rect(x * (this.breadth / 7) + 10, -25 - (y * floorHeight), this.breadth / 12, 20);
        }
    }
    pop();
}

function makeBuilding(buildingX) {
    var building = {x: buildingX,
        breadth: random(100, 125),
        speed: 0.55,
        buildingC: color(random(150, 225), random(100, 175), random(100, 175)),
        nFloors: round(random(4, 10)),
        move: moveBuildings,
        display: drawBuildings}
    return building;
}

//coins
function updateAndDisplayCoins() {
    //keeps the coins moving along the x-axis
    for (var i = 0; i < coin.length; i++) {
        coin[i].moveCoins();
        coin[i].drawCoins();
    }
}

function drawCoins() { //draws the coins
    push();
    translate(this.x + 100, this.y);
    scale(0.3, 0.3);
    image(coinAssets[0], 0, 0);
    pop();
}

function moveCoins() { //move the coins
    this.x -= this.speed;
}

function addCoins() { //places in more coins into the array
    var newTreesProbability = 0.0035;
    if (random(0, 1) < newTreesProbability) {
        coin.push(makeCoins(width));
   }
}

function makeCoins(coinX) {
    var coins = {
        x: coinX,
        y: 610,
        speed: 1,
        moveCoins: moveCoins,
        drawCoins: drawCoins}
    return coins;
}

//gems
function updateAndDisplayGems() {
    //keeps the gems moving along the x-axis
    for (var i = 0; i < gem.length; i++) {
        gem[i].moveGems();
        gem[i].drawGems();
    }
}

function drawGems() { //draws the gems
    push();
    translate(this.x + 100, this.y);
    scale(0.3, 0.3);
    image(gemAssets[0], 0, 0);
    pop();
}

function moveGems() { //move the gems
    this.x -= this.speed;
}

function addGems() { //places in more gems into the array
    var newTreesProbability = 0.0035;
    if (random(0, 1) < newTreesProbability) {
        gem.push(makeGems(width));
   }
}

function makeGems(gemX) {
    var gems = {
        x: gemX,
        y: 610,
        speed: 1,
        moveGems: moveGems,
        drawGems: drawGems}
    return gems;
}

//stars
function updateAndDisplayStars() {
    //keeps the stars moving along the x-axis
    for (var i = 0; i < stars.length; i++){
        stars[i].move();
        stars[i].display();
    }
}

function removeStars() {  //remove stars out of canvas
    var starsKeep = [];
    for (var i = 0; i < stars.length; i++){
        if (stars[i].x + stars[i].breadth > 0) {
            starsKeep.push(stars[i]);
            }
    }
    stars = starsKeep; //remaining stars
}

function addStars() { //places in more trees into the array
    var newTreesProbability = 0.0075;
    if (random(0,1) < newTreesProbability) {
        stars.push(makeStars(width));
    }
}

function moveStars() {  //move the stars
    this.x -= this.speed;
}

function drawStars() { //draws the coins
    strokeWeight(random(0.5, 3));
    stroke(random(0, 255), (0, 255), (0, 255));
    push();
    translate(this.x, 20);
    // the size of the stars depends on the amplitude 
    for (var i = 0; i < stars.length; i++) {
        var level = amplitude.getLevel();
        var size = map(level, 0, 1, 0, 1);
        fill(random(0, size), (0, size), (0, size));
        ellipse(random(10, 3.5 * height / 5), random(10, 3.5 * height / 5), size, size);
    }
    pop();
   }

function makeStars(birthLocationX) {
    var star = {
        x: birthLocationX,
        breadth: 50,
        speed: 1,
        move: moveStars,
        display: drawStars}
    return star;
 }

 //clouds
function updateAndDisplayClouds() {
    //update the clouds' position & draw them
    for (var i = 0; i < clouds.length; i++) {
        clouds[i].move();
        clouds[i].draw();
    }
}

function makeClouds(cloudX, cloudY) {
    var cloud = {x: cloudX,             //locationX of cloud
        y: cloudY,                      //locationY of the cloud
        offsetX: random(30, 100),
        offsetY: random(100, 175),
        breadth: random(300, 400),      //width of the cloud
        speedC: -random(1, 2),          //speed of the cloud
        nFloors: round(random(2, 8)),   //multiplier that determines the height of the cloud
        transparency: random(20, 60),   //transparency of the cloud
        move: moveClouds,
        draw: drawClouds}
    return cloud;
}

function drawClouds() {
    var multiplier = 5; //multiplier that determines the height of the cloud
    var cloudHeight = this.nFloors * multiplier;
    ellipseMode(CENTER);
    noStroke();
    fill(255, this.transparency);
    //cloud height reacts to the amplitude
    var level = amplitude.getLevel();
    push();
    translate(this.x, height / 2 - this.offsetY);
    ellipse(this.breadth/2, -cloudHeight, this.breadth, cloudHeight + 500 * level);
    pop();
    push();
    translate(this.x, height / 2 - this.offsetY - 50);
    ellipse(this.breadth/2 + this.offsetX, -cloudHeight, this.breadth, cloudHeight + 500 * level);
    pop();
}

function moveClouds() {
    //move clouds by updating its x position
    this.x += this.speedC;
}

function addClouds() {
    //new clouds from the right edge of the canvas
    var newCloudsProbability = 0.0075;
    //likliness of new clouds
    if (random(0, 1) < newCloudsProbability) {
        var cloudX = width;
        var cloudY = random(height / 2);
        clouds.push(makeClouds(cloudX, cloudY));
    } 
}

hqq – rsp1 – final_project – sections _ e+b

PSA: THIS IS A TWO-PART ENDEAVOR, SO BE SURE TO SCROLL DOWN FOR PART 2!

Hi guys! This is a game we made called “Carl Cooks a Meal” that exists in two parts. Under the premise, our friend Carl is trying to make a lovely meal for his girlfriend Carla. However, he has absolutely no idea how to start! The first part is a clickventure where people help Carl gather ingredients. People have the option to either check in the refrigerator to see what’s inside OR take a trip to a distant country to get some more exotic ingredients. In travelling, users can learn about the histories behind these ingredients, adding an educational aspect to this part. Users can then return home to begin the second part. In the second part, people help Carl “cook” the meal. This is in the form of a game where users have to catch these ingredients in a pan to reach the final score. However, after each time an ingredient is caught in the pan, they begin to fall faster, making it more difficult as time passes. Once thirty ingredients have been caught, the meal is done, and Carla is very happy! Thanks for helping Carl make the meal!

part 1

/*15-104 final projec
team members: rachel park (rsp1) and hamza qureshi (hqq)
section: b; e


CARL COOKS A MEAL*/

var button1, button2, button3, button4, button5; //these variables create buttons, which are defined
                                                //locally to avoid having to create dozens of em
var home, meetCarl, where2go, worldMap, fridge, //these variables will hold the images that form each slide
    turmeric, miso, acai, foieGras, uSure,
    startup;
var col;                                       //sets color
//---------------------------------------------------
function setup() {
    createCanvas(480,480);
    background(0);
    noLoop();                                //allows the slides to remain static (prevents flickering!)
}
//---------------------------------------------------
function draw() { //will only comment once in detail because it can get redundant
  home = createImg("https://i.imgur.com/aI9WG89.jpg"); //creates slide
  home.position(-760,-760); //position and scales are used to fit the images on the canvas
  home.style("transform", "scale(0.25)");
  button1 = createButton('Play Game!'); //creates a button
  button1.position(300,200);
  col = color(129,178,154);
  button1.style("background-color", col);
  button1.style("color", "white");
  button1.mousePressed(PromptPage); //allows the button to load the next screen
}
//---------------------------------------------------

//functions for each page

function PromptPage() {
  //prompts with info on what to do
    meetCarl = createImg("https://i.imgur.com/HAX6uEa.jpg");
    meetCarl.position(-760, -760);
    meetCarl.style("transform", "scale(0.25)");
    button1 = createButton('Help me out →');
    col = color(129,178,154);
    button1.style("background-color", col);
    button1.style("color", "white");
    button1.position(350,200);
    button1.mousePressed(ScenePage);
}
//---------------------------------------------------
function ScenePage() {
  //loads scene where users have option of gathering ingredients
    where2go = createImg("https://i.imgur.com/7F5M1iF.jpg");
    where2go.position(-760,-760);
    where2go.style("transform", "scale(0.25)");
    button1 = createButton('Open the fridge');
    col = color(129,178,154);
    button1.style("background-color", col);
    button1.style("color", "white");
    button1.position(20,220);
    button1.mousePressed(FridgeFoodPage);
    button2 = createButton('Take a trip');
    col = color(129,178,154);
    button2.style("background-color", col);
    button2.style("color", "white");
    button2.position(140,460);
    button2.mousePressed(WorldFoodPage);
    button3 = createButton('Time to cook!');
    col = color(129,178,154);
    button3.style("background-color", col);
    button3.style("color", "white");
    button3.position(300,180);
    button3.mousePressed(gameLandingPage);
}
//---------------------------------------------------
function WorldFoodPage() {
  //loads international map screen, with buttons for diff locations
    worldMap = createImg("https://i.imgur.com/aNsxfi1.jpg");
    worldMap.position(-760,-760);
    worldMap.style("transform", "scale(0.25)");
    button1 = createButton('Brazil');
    button1.style("background-color", col);
    button1.style("color", "white");
    button1.position(130,230);
    button1.mousePressed(brazil);
    button2 = createButton('France');
    button2.style("background-color", col);
    button2.style("color", "white");
    button2.position(150,80);
    button2.mousePressed(france);
    button3 = createButton('India');
    button3.style("background-color", col);
    button3.style("color", "white");
    button3.position(320,160);
    button3.mousePressed(india);
    button4 = createButton('Japan');
    button4.style("background-color", col);
    button4.style("color", "white");
    button4.position(420,120);
    button4.mousePressed(japan);
    button5 = createButton('Go back home!');
    button5.style("background-color", col);
    button5.style("color", "white");
    button5.position(190,450);
    button5.mousePressed(ScenePage);
}
//---------------------------------------------------
function FridgeFoodPage() {
  //loads fridge screen with items available in the fridge
    fridge = createImg("https://i.imgur.com/jPanqPC.jpg");
    fridge.position(-760,-760);
    fridge.style("transform", "scale(0.25)");
    button1 = createButton('Grab the items!');
    col = color(129,178,154);
    button1.style("background-color", col);
    button1.style("color", "white");
    button1.position(320,220);
    button1.mousePressed(FridgeGrab);
    button2 = createButton('No thanks!');
    col = color(129,178,154);
    button2.style("background-color", col);
    button2.style("color", "white");
    button2.position(320,260);
    button2.mousePressed(ScenePage);
}
//---------------------------------------------------
function FridgeGrab(){
  //simulates "grabbing" items from the fridge
    fridge = createImg("https://i.imgur.com/zlj1DaE.jpg");
    fridge.position(-760,-760);
    fridge.style("transform", "scale(0.25)");
    button1 = createButton('Back to the kitchen!');
    col = color(129,178,154);
    button1.style("background-color", col);
    button1.style("color", "white");
    button1.position(320,220);
    button1.mousePressed(ScenePage);
}
//---------------------------------------------------
function india() {
  //loads turmeric screen
    turmeric = createImg("https://i.imgur.com/tj04pYa.jpg")
    turmeric.position(-760,-760);
    turmeric.style("transform", "scale(0.25)");
    countryButtons();
}
//---------------------------------------------------
function japan(){
  //loads miso screen
    miso = createImg("https://i.imgur.com/A0mow9a.jpg")
    miso.position(-760,-760);
    miso.style("transform", "scale(0.25)");
    countryButtons();
}
//---------------------------------------------------
function france(){
  //loads france screen
    foieGras = createImg("https://i.imgur.com/4OLHPzQ.jpg")
    foieGras.position(-760,-760);
    foieGras.style("transform", "scale(0.25)");
    countryButtons();
}
//---------------------------------------------------
function brazil(){
  //loads brazil screen
    acai = createImg("https://i.imgur.com/H4gDOUD.jpg")
    acai.position(-760,-760);
    acai.style("transform", "scale(0.25)");
    countryButtons();
}
//---------------------------------------------------
function countryButtons(){
  //creates two sets of buttons on country screen to
  //allow for less code to be used in each of the country slides.
    button1 = createButton('Take home!');
    button1.style("transform", "scale(0.8)");
    button1.style("background-color", col);
    button1.style("color", "white");
    button1.position(170,310);
    button1.mousePressed(WorldFoodPage);
    button2 = createButton('All done!');
    button2.style("transform", "scale(0.8)");
    button2.style("background-color", col);
    button2.style("color", "white");
    button2.position(178, 370);
    button2.mousePressed(gameLandingPage);
}
//---------------------------------------------------
function gameLandingPage(){
  //makes sure the user is ready (lol)
    uSure = createImg("https://i.imgur.com/9RFTHko.jpg");
    uSure.position(-760,-760);
    uSure.style("transform", "scale(0.25)");
    button1 = createButton('Yes, I am ready!');
    button1.style("background-color", col);
    button1.style("color", "white");
    button1.position(190,250);
    button1.mousePressed(gameStartScreen);
    button2 = createButton('No, not yet!');
    button2.style("background-color", col);
    button2.style("color", "white");
    button2.position(200, 300);
    button2.mousePressed(ScenePage);
}
//---------------------------------------------------
function gameStartScreen(){
  //loads final screen of this part, instructing users to scroll
    startup = createImg("https://i.imgur.com/duuVdOZ.jpg");
    startup.position(-760,-760);
    startup.style("transform", "scale(0.25)");
}
//---------------------------------------------------

part 2

/*15-104 final project
team members: rachel park (rsp1) and hamza qureshi (hqq)
section: b; e


CARL COOKS A MEAL*/

//setting global variables to use throughout the code

//for score
var score = 0;
//for falling objects
var speed = 10;
var canHit = true;
var x = 0;
var y = 0;
var s = 5;
//for key functions
var keyRIGHT= false;
var keyLEFT= false;
var moveRight = false;
var moveLeft = false;
//for frypan options
var onBasket = false;
//setting modes to use to run the functions
var beforeGame;
var endGame;
var beginning;
var ending;
//for arrays used in code
var fridge = [];
var ixs = [50,-50,350];
var iys = [-500, 0, -1000];
//to load frypan image
var frypan;
//---------------------------------------------------

//preloading images of foods and pushing into new array
function preload() {
    var Foods = [
      "https://i.imgur.com/WrAqBJF.png",
      "https://i.imgur.com/F6VoqQ8.png",
      "https://i.imgur.com/6Piz1HF.png",
      "https://i.imgur.com/Qltr0uK.png"];
    for (var i = 0; i < Foods.length; i++){
      fridge.push(loadImage(Foods[i]));
    }
}
//---------------------------------------------------
//setting up canvas and using modes
function setup () {
  createCanvas(480, 480);
  background(129,178,154);
  beforeGame = true;
  endGame = false;
  frypan = loadImage("https://i.imgur.com/UdaokKr.png");
  ending = loadImage("https://i.imgur.com/0EdDOXJ.jpg");
  beginning = loadImage("https://i.imgur.com/crhULDP.jpg");
}
//---------------------------------------------------
//function to start game when any key is pressed
function keyPressed() {
    beforeGame = false;
}
//---------------------------------------------------
//function to make frypan move as a gathering platform
function keyTyped() {
   if (keyCode === LEFT_ARROW) {
      keyLEFT = true;
   } else if (keyCode === RIGHT_ARROW) {
      keyRIGHT = true;
     }
}
//---------------------------------------------------
//drawing the game by calling the other functions which make the visuals of the objects
function draw() {
    if (beforeGame == true) {
      push();
      scale(0.24);
      imageMode(CORNER);
      image(beginning,0,0);
      pop();
    } else {
      background(129,178,154);
      BasketDraw();//drawing the frypan
      foodDraw();//drawing the falling food objects
      update();//updating the so that frypan moves with keys and food continuously falls onto canvas
      displayScore();//displaying number of foods caught
    }
  if (endGame == true) {//displaying ending page when game is finished
    push();
    scale(0.24);
    imageMode(CORNER);
    image(ending,0,0);
    pop();
  }
}
//---------------------------------------------------
function reachBottom() {//ending the game when food hits limit
    endGame = true;
}
//---------------------------------------------------
function displayScore() {//function to create the score
  fill(0);
  textSize(20);
  text(("Score: " + this.score + " out of 30!"), 80, 23);
}

//--------------------------------------------------

function makeFood(length, xpos, ypos, space) {//class to draw the food objects

  var food = {"l": length, "ix": xpos, "iy": ypos, "s": space}
  food.draw = foodDraw;
  return food;
}

//--------------------------------------------------

function foodDraw() {//drawing the foods

    for (var i = 0; i < ixs.length; i++){
    imageMode(CORNER);
    canHit = true;
    fill(255);
    stroke(4);
      image(fridge[i], this.ixs[i], this.iys[i]);
    }
    for (var i = 0; i < iys.length; i++) {

      this.iys[i] += this.s/2
    }

}

//---------------------------------------------------
function makeBasket(xpos,ypos,moveBasket) {//class to make the frypan (aka basket)
  var Basket = {"x": xpos, "y": ypos}
  Basket.draw = BasketDraw;
  return Basket;
}
//---------------------------------------------------
function BasketDraw() {//drawing the basket
  noStroke();
  fill("#FFD581");
  image(frypan,this.x, this.y + height-50);
}
//---------------------------------------------------
function update() {//function to update the objects and have them restart at top to be continuously moving
  //for basket
  if(keyIsDown(RIGHT_ARROW) & this.x < width-20){
     this.x += speed;
     print(x);
   }
 if (keyIsDown(LEFT_ARROW) & this.x > -20){
     this.x -= speed;
     print(x);
  }
  print(width)
//for food
  for(var i = 0; i < iys.length; i++){
    if (this.iys[i] >= height-80) {
      if(this.ixs[i] >  this.x - 100 & this.ixs[i] < this.x + 100) {
         this.score++;
         this.s ++;
         if( this.score == 30) {
           reachBottom();
         }
      }
      this.iys[i] = random(-1000, -300);
      this.ixs[i] = random(-300 ,width-40);
    }
  }
}
//---------------------------------------------------

As one might expect with almost 400 lines of code, there were a couple of roadblocks on the way. The biggest one was probably the marrying of the two parts to create one code, which we weren’t able to do. This is primarily because the first part uses the DOC library via buttons and commands like createImg, while the second part relies solely on p5. This caused difficulties in combining the two sets of code because they required a change in the HTML template to allow them to be combined. Once we were able to, the code wasn’t running as smoothly as we had intended. However, despite dividing them into these two parts, we were able to successfully create a unified game experience that uses two modes to reach a greater goal. For us, that’s a win! 🙂