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).
]]>
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.
]]>
Link to Outreach Programme on the Rwandan Genocide
Links to testimonies from survivors of the genocide
Testimony of Adeline a Survivor of the Rwandan Genocide
The two pieces of media that I was inspired by were the Frontline Documentary Ghosts of Rwanda and the primary sources from the Outreach Programme on the Rwandan Genocide. I first saw the Ghosts of Rwanda documentary in my sophomore year of high school. We were doing a unit on genocide and inhumane atrocities. The documentary highlighted the atrocities committed during the genocide, as well as the lack of response from the media and the United States as a whole. The exerts from the survivors are something that I wouldn’t consider to be art. However, I feel that for a project like this it is important to include stories from people who experienced the genocide. To me, these stories are something that no amount of artistic vision can compare to. Despite being vastly different sources, the two documents that I chose have a large amount in common. They both cover the experiences of people who suffer during the genocide, and hope to preserve the stories of the people that died. One criticism that I would have with Ghosts of Rwanda is that I wish it questioned some of the people in America who opposed intervening in the genocide.
]]>
Trigger Warning: this post contains a violent and graphic image.
For my final project, I would like to do an interactive mural of the Rwandan Genocide. It would by a 400 by 800 canvas split into two sections. The bottom section would be an image of Bill Clinton with one of his statements on the Rwandan Genocide. If you clicked on the image it would play a recording of that statement. The upper half of the canvas would be a bit more complicated. It would contain a checkerboard pattern of images of the genocide, and names of the survivors. If one of the images was clicked on it would enlarge to encompass the entire upper half of the canvas. If you clicked on the name of a survivor, it would play a recording of their experience. The main message would be to show that the genocide was an immense atrocity, and it went mostly ignored by the Clinton administration. Completing this would be a challenge, but I don’t think it would be impossible. The biggest obstacle that stands in my way would likely be the amount of images and audio files that I would need to store in preload.
Link to the Original Video: “https://vimeo.com/36742259”
A piece of computer music that I found to be incredibly interesting was Playable Decagons / MaxMSP by Melissa Pons. The video shows a mouse clicking on a 3D decagon and playing sounds based on where the mouse clicked. I thought that this was an extremely creative way to create music. By the appearance of the setup it appearsthey tried to have the decagon imitate a piano. I find this amazing since I find playing the piano to be hard enough (in fact I can’t play at all), but to play it using an unlabeled polygon is another feat entirely. The code that they used was likely very complicated. I would assume that they mapped certain sounds to the surface of the decagon using if statements involving the mouse. While the project may not seem very creative it bears further examination. I feel that coming up with the idea to do this was incredibly creative, and is something that I wouldn’t come up with in a million years.
]]>// Matthew Erlebacher
// Section B
// merlebac@andrew.cmu.edu
// Project-11
var turtle1;
var turtle2;
var turtle3;
var turtle4;
function turtleLeft(d) {
this.angle -= d;
}
function turtleRight(d) {
this.angle += d;
}
function turtleForward(p) {
var rad = radians(this.angle);
var newx = this.x + cos(rad) * p;
var newy = this.y + sin(rad) * p;
this.goto(newx, newy);
}
function turtleBack(p) {
this.forward(-p);
}
function turtlePenDown() {
this.penIsDown = true;
}
function turtlePenUp() {
this.penIsDown = false;
}
function turtleGoTo(x, y) {
if (this.penIsDown) {
stroke(this.color);
strokeWeight(this.weight);
line(this.x, this.y, x, y);
}
this.x = x;
this.y = y;
}
function turtleDistTo(x, y) {
return sqrt(sq(this.x - x) + sq(this.y - y));
}
function turtleAngleTo(x, y) {
var absAngle = degrees(atan2(y - this.y, x - this.x));
var angle = ((absAngle - this.angle) + 360) % 360.0;
return angle;
}
function turtleTurnToward(x, y, d) {
var angle = this.angleTo(x, y);
if (angle < 180) {
this.angle += d;
} else {
this.angle -= d;
}
}
function turtleSetColor(c) {
this.color = c;
}
function turtleSetWeight(w) {
this.weight = w;
}
function turtleFace(angle) {
this.angle = angle;
}
function makeTurtle(tx, ty) {
var turtle = {x: tx, y: ty,
angle: 0.0,
penIsDown: true,
color: color(128),
weight: 1,
left: turtleLeft, right: turtleRight,
forward: turtleForward, back: turtleBack,
penDown: turtlePenDown, penUp: turtlePenUp,
goto: turtleGoTo, angleto: turtleAngleTo,
turnToward: turtleTurnToward,
distanceTo: turtleDistTo, angleTo: turtleAngleTo,
setColor: turtleSetColor, setWeight: turtleSetWeight,
face: turtleFace};
return turtle;
}
function setup() {
createCanvas(480, 480);
background(125);
var color1 = (255, 255, 0);
// Creates yellow color
turtle1 = makeTurtle(0, height / 2);
// Creates the first turtle
turtle1.penDown();
turtle1.setColor(color1);
turtle1.setWeight(4);
// Prepares turtle for movement
var color2 = (255, 0, 0);
// Creates red color
turtle2 = makeTurtle(width, height / 2);
// Creates second turtle
turtle2.penDown();
turtle2.setColor(color2);
turtle2.setWeight(4);
// Prepares turtle for movement
var color3 = (0, 255, 0);
// Creates green color
turtle3 = makeTurtle(width / 2, 0);
// Creates third turtle
turtle3.penDown();
turtle3.setColor(color3);
turtle3.setWeight(4);
// Prepares turlte for movement
var color4 = (0);
// Creates black color
turtle4 = makeTurtle(width / 2, height);
// Creates fourth turtle
turtle4.penDown();
turtle4.setColor(color4);
turtle4.setWeight(4);
// Prepares turtle for movement
}
function draw() {
turtle1.forward(1);
// Moves turtle1 forward
turtle1.turnToward(mouseX, mouseY, 1);
// Turns turtle1 toward mouse
turtle2.forward(1);
// Moves turtle2 forward
turtle2.turnToward(480 - mouseX, mouseY, 1);
// Turns turtle2 away from mouseX toward mouseY
turtle3.forward(1);
// Moves turtle3 forward
turtle3.turnToward(mouseX, 480 - mouseY, 1);
// Turns turtle3 toward mouseX away from mouseY
turtle4.forward(1);
// Moves turtle4 forward
turtle4.turnToward(480 - mouseX, 480 - mouseY, 1);
// Turns turtle4 away from mouse
}
// makeTurtle(x, y) -- make a turtle at x, y, facing right, pen down
// left(d) -- turn left by d degrees
// right(d) -- turn right by d degrees
// forward(p) -- move forward by p pixels
// back(p) -- move back by p pixels
// penDown() -- pen down
// penUp() -- pen up
// goto(x, y) -- go straight to this location
// setColor(color) -- set the drawing color
// setWeight(w) -- set line width to w
// face(d) -- turn to this absolute direction in degrees
// angleTo(x, y) -- what is the angle from my heading to location x, y?
// turnToward(x, y, d) -- turn by d degrees toward location x, y
// distanceTo(x, y) -- how far is it to location x, y?Overall this project wasn’t that difficult. I decided to have the turtles movements based on the location of the mouse. Each of them have different interactions with the mouse.
A project that I thought was incredibly admirable was Angela Washko’s video game The Game: The Game. The title refers to a common phrase in the self proclaimed “seduction community.” For context, the members of the seduction community, to put it bluntly, aim to have sex with as many women as humanly possible and treat them like trash (this is unfortunately an accurate description). The Game: The Game is a point and click game where you play as a single female. The purpose of the goal is to see if you can distinguish average normal guys from members of the seduction community. I personally think that it is good that she is shedding light on this heinous group, and spreading social awareness. I wasn’t able to find that much information on her background. It was difficult for me to find information on her background. She graduated from from Temple University with a Bachelor of Fine Arts, and received a masters of fine arts at the University of California. Additionally, she won the Terminal Award for her video “Chastity,” and has had her art featured in several exhibits. Angela has worked on several other projects which fight for gender acceptance and women’s rights (Wikipedia, sect. 1-6).
Link to Angel’s main page on The Game: The Game
Sources Used:
- “Angela Washko.” ANGELA WASHKO, angelawashko.com/home.html.
- “Angela Washko.” Wikipedia, Wikimedia Foundation, 1 Nov. 2017, en.wikipedia.org/wiki/Angela_Washko.
- “The Game: The Game.” ANGELA WASHKO, angelawashko.com/section/437138-The-Game-The-Game.html.
- Washko, Angela. “Angela Washko.” Vimeo, Angela Washko, vimeo.com/angelawashko.
// Matthew Erlebacher
// Section B
// merlebac@andrew.cmu.edu
// Project-10
var stars = [];
var planets = [];
function setup() {
createCanvas(480, 480);
// create an initial collection of stars
for (var i = 0; i < 100; i++){
var rx = random(width);
stars[i] = makeStar(rx);
}
// create an initial collection of planets
for (var i = 0; i < 3; i++){
var rx = random(width);
planets[i] = makePlanet(rx);
}
frameRate(10);
}
function draw() {
background(0);
updateAndDisplayStars();
removeStarsThatHaveSlippedOutOfView();
addNewStarsWithSomeRandomProbability();
updateAndDisplayPlanets();
removePlanetsThatHaveSlippedOutOfView();
addNewPlanetsWithSomeRandomProbability();
fill(125);
rectMode(CENTER);
rect(120, mouseY, 10, 70);
// Creates laser holder
fill(0, 0, 255);
rect(125, mouseY + 35, 40, 10);
// Creates lower laser
rect(125, mouseY - 35, 40, 10);
// Creates upper laser
quad(80, mouseY + 20, 60, mouseY + 20, 30, mouseY + 40, 50, mouseY + 40);
// Creates lower fin
quad(80, mouseY - 20, 60, mouseY - 20, 30, mouseY - 40, 50, mouseY - 40);
// Creates upper fin
ellipse(160, mouseY, 60, 40);
// Creates cockpit
fill(0);
ellipse(160, mouseY, 50, 30);
// Creates cockpit window
fill(125);
rect(110, mouseY, 100, 40);
// Creakes body
fill(0);
textAlign(CENTER);
textSize(18);
text("MATTHEW", 110, mouseY + 5);
}
function updateAndDisplayStars(){
// Update the star's positions, and display them.
for (var i = 0; i < stars.length; i++){
stars[i].move();
stars[i].display();
}
}
function removeStarsThatHaveSlippedOutOfView(){
// If a star has dropped off the left edge,
// remove it from the array. This is quite tricky, but
// we've seen something like this before with particles.
// The easy part is scanning the array to find stars
// to remove. The tricky part is if we remove them
// immediately, we'll alter the array, and our plan to
// step through each item in the array might not work.
// Our solution is to just copy all the stars
// we want to keep into a new array.
var starsToKeep = [];
for (var i = 0; i < stars.length; i++){
if (stars[i].x + stars[i].breadth > 0) {
starsToKeep.push(stars[i]);
}
}
stars = starsToKeep; // remember the surviving stars
}
function addNewStarsWithSomeRandomProbability() {
// With a very tiny probability, add a new star to the end.
var newStarLikelihood = 0.07;
if (random(0,1) < newStarLikelihood) {
stars.push(makeStar(width));
}
}
// method to update position of star every frame
function starMove() {
this.x += this.speed / 2;
}
// draw the star and some windows
function starDisplay() {
var floorHeight = 20;
var bHeight = this.nFloors;
fill(255);
stroke(0);
push();
translate(this.x, height);
beginShape();
vertex(0, -bHeight);
// Upper point of star
vertex(0 + 2, -bHeight + 6);
vertex(0 + 8, -bHeight + 6);
// Right point of star
vertex(0 + 3, -bHeight + 9);
vertex(0 + 4, -bHeight + 16);
// Lower right point of star
vertex(0, -bHeight + 11);
vertex(0 - 4, -bHeight + 16);
// Lower left point of star
vertex(0 - 3, -bHeight + 9);
vertex(0 - 8, -bHeight + 6);
// Left point of star
vertex(0 - 2, -bHeight + 6);
endShape();
// Creates star shape
pop();
}
function makeStar(birthLocationX) {
var bldg = {x: birthLocationX,
breadth: 50,
speed: -1.0,
nFloors: round(random(0, height)),
// I changed the range of possible values to the entire height of the canvas
move: starMove,
display: starDisplay}
return bldg;
}
function updateAndDisplayPlanets(){
// Update the planet's positions, and display them.
for (var i = 0; i < planets.length; i++) {
planets[i].move();
planets[i].display();
}
}
function removePlanetsThatHaveSlippedOutOfView() {
// If a planet has dropped off the left edge,
// remove it from the array. This is quite tricky, but
// we've seen something like this before with particles.
// The easy part is scanning the array to find planets
// to remove. The tricky part is if we remove them
// immediately, we'll alter the array, and our plan to
// step through each item in the array might not work.
// Our solution is to just copy all the planets
// we want to keep into a new array.
var planetsToKeep = [];
for (var i = 0; i < planets.length; i++){
if (planets[i].x + planets[i].breadth > 0) {
planetsToKeep.push(planets[i]);
}
}
planets = planetsToKeep; // remember the surviving planets
}
function addNewPlanetsWithSomeRandomProbability() {
// With a very tiny probability, add a new planet to the end.
var newPlanetLikelihood = 0.007;
if (random(0,1) < newPlanetLikelihood) {
planets.push(makePlanet(width));
}
}
// method to update position of planet every frame
function planetMove() {
this.x += this.speed / 2;
}
// draw the planet and some windows
function planetDisplay() {
var floorHeight = 20;
var bHeight = this.nFloors;
noStroke();
push();
translate(this.x, height);
for (var i = 0; i < height; i++) {
fill(this.colorR, this.colorG, this.colorB);
ellipse(0, -bHeight, this.r, this.r);
// Creates the main body of planet
fill(this.colorR - 50, this.colorG - 50, this.colorB - 50);
ellipse(0, -bHeight, this.r / this.d1, this.r);
// Creates horizontal texture of planet
fill(this.colorR - 50, this.colorG - 50, this.colorB - 50);
ellipse(0, -bHeight, this.r, this.r / this.d2);
// Creates vertical texture of planet
fill(this.colorR, this.colorG, this.colorB);
ellipse(0, -bHeight, this.r / this.d1 + 10, this.r / this.d2 + 10);
// Creates center of planet
}
pop();
}
function makePlanet(birthLocationX) {
var bldg = {x: birthLocationX,
r: round(random(50, 100)),
d1: random(2, 5),
d2: random(2, 5),
// Variables for radius of planet
colorR: round(random(100, 255)),
colorG: round(random(100, 255)),
colorB: round(random(100, 255)),
// Variables for the color of the planet
breadth: 50,
speed: -1.0,
nFloors: round(random(0, height)),
move: planetMove,
display: planetDisplay}
return bldg;
}I started out with having no idea what to do for this assignment. I just wasn’t sure how I would be able to create a generative landscape using the code that I had. However, I eventually figured out that I could do a space theme. Implementing this was tricky at first. I didn’t have a full understanding of the code when I first went in, so I made a lot of mistakes. I thought that I was supposed to set the location of each object to random until I realized that this wouldn’t animate it. I then had to undo a large amount of my work and replace it with the sample code. After looking at some of my peers’ projects I decided to add a rocket ship since I felt that the appearance was somewhat bland.
Alien Bonsais by Chaotic Atmospheres
http://chaoticatmospheres.com/alien-bonsais
The looking outward that I chose to respond to was Selina Lee’s week 5 post. The project that she cited was Alien Bonsais, and was made by Chaotic Atmospheres. I thought the 3D modeled plants looked beautiful. The artist did an amazing job of making them look as if they were from another world. In addition, I would have to complement Chaotic on his/her choice of color for the plants. Each model has a small amount of a bright color to make the images pop. One critique of Chaotic’s work that I would have is the background that they used. They used a plain white back drop, and I though it would have looked more interesting in a surrounding environment.
]]>
// Matthew Erlebacher
// Section B
// merlebac@andrew.cmu.edu
// Project-09
var underlyingImage;
function preload() {
var myImageURL = "https://i.imgur.com/lcdPSVo.jpg";
underlyingImage = loadImage(myImageURL);
// Loads the image and turns it into a variable
}
function setup() {
createCanvas(500, 480);
background(0);
underlyingImage.loadPixels();
frameRate(60);
// I increased the frame rate to 60 so it would appear faster
}
function draw() {
var px1 = random(width);
var py1 = random(height);
// Creates random location for small square
var px2 = random(width);
var py2 = random(height);
// Creates random location for large square
var ix1 = constrain(floor(px1), 0, width-1);
var iy1 = constrain(floor(py1), 0, height-1);
// Constrains px1 and py1
var ix2 = constrain(floor(px2), 0, width-1);
var iy2 = constrain(floor(py2), 0, height-1);
// Constrains px1 and py1
var theColorAtLocationXY = underlyingImage.get(ix1, iy1);
var theColorAtLocationXY = underlyingImage.get(ix2, iy2);
noStroke();
fill(theColorAtLocationXY);
// Fills the squares with portions of the image
rect(px1, py1, 6, 6);
rect(px2, py2, 9, 9);
// Generates random rectangles
var theColorAtTheMouse = underlyingImage.get(mouseX, mouseY);
stroke(theColorAtTheMouse);
line(pmouseX, pmouseY, mouseX, mouseY);
}Working on this project was extremely difficult for me. For some reason the image wouldn’t generate a large amount of the time. Some of the edits that I made were increasing the frame rate, and changing the ellipses to rectangles. I did this because I thought the rectangles looked more visually appealing and covered the screen more quickly.
