![[OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice](wp-content/uploads/2020/08/stop-banner.png)
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
}
}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.