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).
]]>//Hanna Jang
//Section B
//hannajan@andrew.cmu.edu;
//Final Project
var space = 10;
var heart;
var lightning;
var banana;
var ball;
var RectLength = 0;
var RectLength2 = 0;
var hand;
var snow = [];
function setup(){
createCanvas(480, 300);
frameRate(10);
//create Snow in window
for (var i = 0; i < 1; i++){
var px = space*8;
snow[i]= makeSnow(px);
}
}
//load images
function preload(){
heart=loadImage("https://i.imgur.com/OcX9GYf.png");
lightning=loadImage("https://i.imgur.com/MDIxpuo.png");
banana=loadImage("https://i.imgur.com/YZLA1fs.png");
ball=loadImage("https://i.imgur.com/J6JsNUS.png");
smile=loadImage("https://i.imgur.com/7bNPbaY.png");
hand=loadImage("https://i.imgur.com/j8tNnpH.png");
}
function draw(){
background(254, 233, 239);
DrawHouse();
DrawMiaBody();
DrawFace();
DrawHappinessBar();
DrawEnergyBar();
DrawRadio();
DrawFood();
DrawBall();
DrawWindow();
UpdateAndDisplaySnow();
addNewSnow();
//Mia reacts to being fed
if (mouseX > 38.14*space & mouseX < 44.14*space
&& mouseY > 20 && mouseY<80){
MiaEats();
}
//Mia reacts to being played music
if (mouseX > width/6 & mouseX < 15.5*space
&& mouseY > 22*space && mouseY < 27*space){
MiaIsHappy();
}
//Mia reacts to playing with ball
if (mouseX > 35*space & mouseX < 42*space
&& mouseY > 21*space && mouseY < 28*space){
MiaSmiles();
}
//fill up energy bar when fed
fill(247, 102, 188);
rect(23*space, space*3, RectLength*15, space*3);
//fill up heart bar when Mia is happy
fill(90, 130, 222);
rect(space*6, space*3, RectLength2*10, space*3);
DrawHand();
}
//draw Mia's house
function DrawHouse(){
//draw Mia's wallpaper
for (var i = 0; i < 20; i++){
fill(255);
noStroke();
rect(i*25, 0, 6, height);
fill(199, 232, 255);
rect(i*25, 0, 2, height);
}
//draw Mia's floor
fill(247, 223, 163);
noStroke();
rect(0, height-space*5, width, space*5);
//draw rug
fill(245, 156, 210);
ellipse(width/2, height-space*3, space*14, space*5);
}
//draw Mia's body
function DrawMiaBody(){
fill(176, 106, 26);
ellipse(width/2, height/2+space*8, space*9, space*10);
fill(239, 194, 144);
ellipse(width/2, height/2+space*9, space*5, space*6);
}
//draw Mia's face
function DrawFace(){
//left ear
fill(176, 106, 26);
ellipse(width/2-space*7, height/2-space*1.5, space*5, space*5);
fill(239, 194, 144);
ellipse(width/2-space*7, height/2-space*1.5, space*3, space*3);
//right ear
fill(176, 106, 26);
ellipse(width/2+space*7, height/2-space*1.5, space*5, space*5);
fill(239, 194, 144);
ellipse(width/2+space*7, height/2-space*1.5, space*3, space*3);
//head
fill(176, 106, 26);
ellipse(width/2, height/2, space*14, space*12);
fill(239, 194, 144);
ellipse(width/2-space*2, height/2, space*6, space*6);
ellipse(width/2+space*2, height/2, space*6, space*6);
ellipse(width/2, height/2+space*2.7, space*8, space*5);
//eyes
fill(255);
ellipse(width/2-space*2, height/2, space*2, space*2);
ellipse(width/2+space*2, height/2, space*2, space*2);
//eyes follow mouse
fill(0);
var x1 = map(mouseX, 0, width, width/2-space*2.5, width/2-space*1.9);
var y1= map(mouseY, 0, height, height/2-2, height/2+2);
ellipse(x1, y1, space, space);
var x2 = map(mouseX, 0, width, width/2+space*1.6, width/2+space*2.1);
ellipse(x2, y1, space, space);
//nose
fill(0);
ellipse(width/2 - space, height/2 + space*2, 5, 5);
ellipse(width/2 + space, height/2 + space*2, 5, 5);
}
//draw Happiness Bar
function DrawHappinessBar(){
fill(241, 101, 87);
rect(space*3, space*3, space*14, space*3);
ellipse(space*3, space*4.5, space*5, space*5);
fill(255);
ellipse(space*3, space*4.5, space*3.5, space*3.5);
image(heart, space*1.6, space*3.4);
}
function DrawEnergyBar(){
fill(100, 175, 209);
rect(space*22, space*3, space*14, space*3);
ellipse(space*21, space*4.5, space*5, space*5);
fill(255);
ellipse(space*21, space*4.5, space*3.5, space*3.5);
image(lightning, space*19, space*2.9);
}
function DrawRadio(){
fill(243, 98, 26);
rect(width/5.5, height - space*11, 5, space*4);
rect(width/6, height - space*8, space*7.5, space*5);
fill(255, 227, 168);
ellipse(width/5, height - space*6, space*1.5, space*1.5);
fill(0);
ellipse(width/5, height - space*4, space, space);
fill(177, 167, 146);
rect(width/4, height - space*7, space*2.5, space*2.5);
}
function DrawFood(){
fill(173, 234, 245);
ellipse(width*6/7, space*5, space*6, space*6);
fill(255);
ellipse(width*6/7, space*5, space*4, space*4);
image(banana, width*4.9/6, space*4);
}
function DrawBall(){
image(ball, space*35, height - space*9, space*7, space*7);
}
function DrawWindow(){
fill(160, 209, 243);
rect(space*1.8, space*8, space*12, space*10);
fill(255);
rect(space*1.8, space*16, space*12, space*2);
}
function MiaEats(){
//opens mouth for food
fill(212, 68, 56);
ellipse(width/2, height/2+space*3.5, space*2.5, space*2.5);
}
function MiaIsHappy(){
fill(212, 68, 56);
arc(width/2, height/2+space*3.1, space*4, space*4, 0, PI);
}
function MiaSmiles(){
image(smile, width/2 - 6, height/2+space*2.6, space*3, space*2.1);
}
function DrawHand(){
image(hand, mouseX - 17, mouseY - 10, space*6, space*6);
}
//update the snow and display them
function UpdateAndDisplaySnow(){
for (var i = 0; i < snow.length; i++){
snow[i].move();
snow[i].display();
}
}
function addNewSnow() {
// With a very tiny probability, add new snow to the end.
var likelihood = 0.03;
if (random(0,1) < likelihood) {
snow.push(makeSnow (space*8));
}
}
// method to update position of snow every frame
function snowMove() {
this.x += this.speed;
if (this.x >= 17*space){
this.x=8*space;
}
}
// draw the snow
function snowDisplay() {
fill(255);
rect(this.breadth, this.x, 4, 4);
}
//make the snow
function makeSnow(birthLocationX) {
var snow = {x: birthLocationX,
breadth: random(18, 130),
speed: 3.0,
move: snowMove,
display: snowDisplay}
return snow;
}
function mouseClicked(){
//mia earns energy when fed
if (mouseX > 38.14*space & mouseX < 44.14*space
&& mouseY > 20 && mouseY < 80){
if (RectLength==9){
RectLength=0;
} else {
RectLength+=1;
}
}
//hearts earned when played music or playing with ball
if ((mouseX > width/6 & mouseX < 15.5*space
&& mouseY > 22*space && mouseY < 27*space)
|| (mouseX > 35*space && mouseX < 42*space
&& mouseY > 21*space && mouseY < 28*space)){
if (RectLength2==11){
RectLength2=0;
} else {
RectLength2+=1;
}
}
}
Meet Mia the monkey!
She loves music and playing with her beach ball. Her favorite food to eat are bananas.
See what her reaction is when you click on the banana and feed her one! What is her reaction when you click on the ball or the radio? You can also see the reaction of Mia’s heart and energy bar at the top. When you feed her, Mia’s energy level will increase. Mia’s heart level will also increase if you do something she likes.
As observed:
1). If you click on the banana, Mia will open her mouth to be fed. Her energy level will also increase from eating the banana.
2). If you click on the ball, Mia will smile. Her heart level will also increase.
3). If you click on the radio, Mia will open her mouth to sing. Her heart level will increase because she is having a good time.
Note About this Project*
For my final project, I wanted to create a virtual pet that could be interacted with through a mouse. In the end, I created Mia. The feedback in this game is simple. You are winning this game by increasing the levels in the heart and energy bars. The game is also endless, as the heart and energy bars are set back to 0 every single time you win all the points possible. That way, you can play again and again.
]]>My goal in this project was to experiment with pixelation, and pixel images.
I created a cute little puppy and managed to switch his direction and cause different modes of his interaction.
I had a lot of fun, and I feel as if I have explored JavaScript enough to the point where a small adventure game would be possible.
While I continue learning to code, especially javascript, I know I need to review objects more and understand their full usefulness, as I’ve had trouble implementing, and my thought processes often don’t include them.
Hopefully, the format I’ve submitted is correct.
See below for a zip file of my program!
]]>For my final project, I threw together a little synth with an interface to change between types of waves, as well as add a lowpass filter, high pass filter, or bandpass filter.
The basic functionality of the synth is you can use your top row of keys to play a chromatic scale starting with Q, moving stepwise through the row (Q -> P) and then the last three half steps are in the next row down (ASD). You can adjust where the chromatic scale lies on the keyboard by pressing the arrow keys. The left and right arrow keys will shift the octave a half step up or down, and then the up and down arrow keys will shift the entire scale an octave up or down. You can do this while playing a note to have some cool effects. Another note, the keyboard is made to be able to play multiple notes at the same time, so play around with harmonies and stuff! The only issues come up when the notes frequencies become too close, and start phasing with each other… Also, if you are playing a perfect 6th and try to play a third note, the third note will not play. I’m not entirely sure how to fix these bugs.
Currently, the envelope for the filters are pre-set. Moving forward I’d like to implement some sliding-bar controls to control the envelopes. Also, the documentation on the p5.sound bandpass filter is very little, so I was not entirely sure how to control the range or location of the bandpass.
Other than these things the synth should work great! For maximum effect, use headphones. Put on a song you like on youtube or something, and try and jam out to it.
Enjoy.
//Jonathan Perez
//Section B
//jdperez@andrew.cmu.edu
//my music synth
//notes: could be much more efficient using objects and array that represents the keyboard. Consider initializing keyboard and having function calls
var keys = [] //holds all the keys in the diatonic scale including octave
//variable fill color for the buttons, allows selected button to highlitght
var fill1 = 255; //sine menu fill
var fill2 = 255; //triangle menu fill
var fill3 = 255; //square menu fill
var fill4 = 255; //sawtooth menu fill
var fill5 = 255; //lowPass menu fill
var fill6 = 255; //highPass menu fill
var fill7 = 255; //bandPass menu fill
//create a key object that holds all the information for the oscillator,
//the oscillator itself, and functions to adjust the oscillator
function synthKey(halfstep) {
this.halfstep = halfstep; //indicates where in the chromatic scale the note is
this.wave = "triangle" //type of wave the oscillator generates
this.osc = new p5.Oscillator();
this.env = new p5.Env();
this.lowPass = new p5.LowPass();
this.highPass = new p5.HighPass();
this.bandPass = new p5.BandPass();
this.fenv = new p5.Env(); //env for filters
//set the frequency and wave type for the oscillator as well as
//its envelope. Then start the oscillator so we can play the note anytime
this.setup = function() {
this.osc.setType(this.wave);
this.osc.freq((261.63 * pow(2, this.halfstep / 12)));
//this.env = new p5.Env();
this.env.setADSR(0.01, 1.2, 0.3, 0.1);
this.env.setRange(.5, 0);
this.osc.amp(this.env);
this.osc.start();
}
//now add some functionality to adjust where the diatonic scale
//starts and ends, both step-wise and by octaves
this.halfstepUp = function() {
this.halfstep += 1;
this.osc.freq((261.63 * pow(2, this.halfstep / 12)));
}
this.halfstepDown = function() {
this.halfstep -= 1;
this.osc.freq((261.63 * pow(2, this.halfstep / 12)));
}
this.octaveUp = function() {
this.halfstep += 12;
this.osc.freq((261.63 * pow(2, this.halfstep / 12)));
}
this.octaveDown = function() {
this.halfstep -= 12;
this.osc.freq((261.63 * pow(2, this.halfstep / 12)));
}
//function to change wave type
this.changeType = function(type) {
this.osc.setType(type);
}
//basic functions to tell the env to attack or release
this.attack = function() {
this.env.triggerAttack();
this.fenv.triggerAttack();
}
this.release = function() {
this.env.triggerRelease();
this.fenv.triggerRelease();
}
this.setFilter = function(filterType) { //filter type will be indicated by 0 or 1
if(filterType == 0) { // 0 maps to low pass filter
this.osc.disconnect();
this.osc.connect(this.lowPass);
this.lowPass.freq(this.fenv);
print("lowPass!")
} else if(filterType == 1) { // 1 maps to high pass
this.osc.disconnect();
this.osc.connect(this.highPass);
this.highPass.freq(this.fenv)
print("hightPass!")
} else if(filterType == 2) { // 2 maps to band pass
this.osc.disconnect();
this.osc.connect(this.bandPass);
this.bandPass.freq(this.fenv);
this.bandPass.res(10);
print("bandPass!")
}
}
this.setFilterEnv = function(A, D, S, R, startRange, endRange) {
this.fenv.setADSR(A, D, S, R);
this.fenv.setRange(startRange, endRange);
//connect envelope to the filters
this.lowPass.freq(this.fenv);
this.highPass.freq(this.fenv);
this.bandPass.freq(this.fenv);
}
}
function setup() {
createCanvas(400, 400);
background(200);
for(i = 0; i < 13; i++) {
keys.push(new synthKey(i));
keys[i].setup();
}
}
function draw() {
background(200);
var rectHeight = 45
var rectWidth = 90
masterVolume(.5);
//MAKE BUTTONS FOR WAVE TYPE
stroke(0);
strokeWeight(1);
//make boxes
rectMode(CENTER)
fill(fill1);
rect(width/2, height/2 - 2 * rectHeight, rectWidth, rectHeight);
fill(fill2);
rect(width/2, height/2 - rectHeight, rectWidth, rectHeight);
fill(fill3);
rect(width/2, height/2, rectWidth, rectHeight);
fill(fill4);
rect(width/2, height/2 + rectHeight, rectWidth, rectHeight);
fill(fill5);
rect(width/2 - rectWidth, height/2 + 150, rectWidth, rectHeight);
fill(fill6);
rect(width/2, height/2 + 150, rectWidth, rectHeight);
fill(fill7);
rect(width/2 + rectWidth, height/2 + 150, rectWidth, rectHeight);
//label boxes
fill(0);
textAlign(CENTER)
textSize(20)
text("sine", width/2, height/2 - 2 * rectHeight);
text("triangle", width/2, height/2 - rectHeight);
text("square", width/2, height/2);
text("sawtooth", width/2, height/2 + rectHeight)
text("lowPass", width/2 - rectWidth, height/2 + 150);
text("highPass", width/2, height/2 + 150);
text("bandPass", width/2 + rectWidth, height/2 + 150);
}
//MENU CONTROLS
function mouseClicked() {
//variables for all of the menu box locations
var rectHeight = 45;
var rectWidth = 90;
var rightWaveMenu = width/2 + rectWidth/2;
var leftWaveMenu = width/2 - rectWidth/2;
var topFilterMenu = height/2 + 150 - rectHeight/2;
var bottomFilterMenu = height/2 + 150 + rectHeight/2;
var lowPassLeft = width/2 - 1.5 * rectWidth;
var lowPassRight = width/2 - .5 * rectWidth;
var highPassRight = width/2 + .5 * rectWidth;
var bandPassRight = width/2 + 1.5 * rectWidth;
//WAVE FORM MENU CONTROLS
//if clicked within sine box
if(mouseX < rightWaveMenu & mouseX > leftWaveMenu
&& mouseY < height/2 - 1.5 * rectHeight && mouseY > height/2 - 2.5 * rectHeight) {
//make all keys sine waves
for(i = 0; i < keys.length; i++) {
keys[i].changeType("sine");
}
//highlight currently selected box
fill1 = color(150, 255, 255);
fill2 = 255;
fill3 = 255;
fill4 = 255;
} else if(mouseX < width/2 + rectWidth/2 & mouseX > width/2 - rectWidth/2
&& mouseY < height/2 - .5 * rectHeight && mouseY > height/2 - 1.5 * rectHeight) {
//make all keys triangle waves
for(i = 0; i < keys.length; i++) {
keys[i].changeType("triangle");
}
//highlight currently selected box
fill1 = 255;
fill2 = color(150, 255, 255);
fill3 = 255;
fill4 = 255;
} else if(mouseX < width/2 + rectWidth/2 & mouseX > width/2 - rectWidth/2
&& mouseY < height/2 + .5 * rectHeight && mouseY > height/2 - .5 * rectHeight) {
//make all keys square waves
for(i = 0; i < keys.length; i++) {
keys[i].changeType("square");
}
//highlight currently selected box
fill1 = 255;
fill2 = 255;
fill3 = color(150, 255, 255);
fill4 = 255;
} else if(mouseX < width/2 + rectWidth/2 & mouseX > width/2 - rectWidth
&& mouseY < height/2 + 1.5 * rectHeight && mouseY > height/2 + .5 * rectHeight) {
//make all keys sawtooth waves
for(i = 0; i < keys.length; i++) {
keys[i].changeType("sawtooth");
}
//highlight currently selected box
fill1 = 255;
fill2 = 255;
fill3 = 255;
fill4 = color(150, 255, 255);
//FILTER MENU CONTROLS
} else if(mouseY < bottomFilterMenu & mouseY > topFilterMenu &&
mouseX > lowPassLeft && mouseX < lowPassRight) {
for(i = 0; i < keys.length; i++) {
keys[i].setFilter(0);
keys[i].setFilterEnv(0.3, 1.2, 1000, 0.1, 8000, 400);
}
//highlight currently selected box
fill5 = color(190, 160, 255);
fill6 = 255
fill7 = 255
} else if(mouseY < bottomFilterMenu & mouseY > topFilterMenu &&
mouseX > lowPassRight && mouseX < highPassRight) {
for(i = 0; i < keys.length; i++) {
keys[i].setFilter(1);
keys[i].setFilterEnv(0.3, 1.2, 1000, 0.1, 8000, 400);
}
//highlight currently selected box
fill5 = 255
fill6 = color(190, 160, 255);
fill7 = 255
}else if(mouseY < bottomFilterMenu & mouseY > topFilterMenu &&
mouseX > highPassRight && mouseX < bandPassRight) {
for(i = 0; i < keys.length; i++) {
keys[i].setFilter(2);
keys[i].setFilterEnv(0.3, 1.2, 1000, 0.1, 8000, 400);
}
//highlight currently selected box
fill5 = 255
fill6 = 255
fill7 = color(190, 160, 255);
}
}
// --------- KEYBOARD CONTROLS, ONE CHROMATIC SCALE ----------
function keyPressed() {
if(key === 'Q') {
keys[0].attack();
} else if(key === 'W') {
keys[1].attack();
} else if(key === 'E') {
keys[2].attack();
} else if(key === 'R') {
keys[3].attack();
} else if(key === 'T') {
keys[4].attack();
} else if(key === 'Y') {
keys[5].attack();
} else if(key === 'U') {
keys[6].attack();
} else if(key === 'I') {
keys[7].attack();
} else if(key === 'O') {
keys[8].attack();
} else if(key === 'P') {
keys[9].attack();
} else if(key === 'A') {
keys[10].attack();
} else if(key === 'S') {
keys[11].attack();
} else if(key === 'D') {
keys[12].attack();
//KEYSIGNATURE CONTROLS
} else if(keyCode === LEFT_ARROW) {
for(i = 0; i < keys.length; i++) {
keys[i].halfstepDown();
}
} else if(keyCode === RIGHT_ARROW) {
for(i = 0; i < keys.length; i++) {
keys[i].halfstepUp();
}
} else if(keyCode === DOWN_ARROW) {
for(i = 0; i < keys.length; i++) {
keys[i].octaveDown();
}
} else if(keyCode === UP_ARROW) {
for(i = 0; i < keys.length; i++) {
keys[i].octaveUp();
}
}
}
function keyReleased() {
if(key === 'Q') {
keys[0].release();
} else if(key === 'W') {
keys[1].release();
} else if(key === 'E') {
keys[2].release();
} else if(key === 'R') {
keys[3].release();
} else if(key === 'T') {
keys[4].release();
} else if(key === 'Y') {
keys[5].release();
} else if(key === 'U') {
keys[6].release();
} else if(key === 'I') {
keys[7].release();
} else if(key === 'O') {
keys[8].release();
} else if(key === 'P') {
keys[9].release();
} else if(key === 'A') {
keys[10].release();
} else if(key === 'S') {
keys[11].release();
} else if(key === 'D') {
keys[12].release();
}
}//Na-yeon Kim
//Section B
//nayeonk1@andrew.cmu.edu
//Final project
//global variables
var music;
var amp;
var volHistory = [];
var spectrumHistory = [];
var wave = [];
var fft;
var rainSize = 5;
var streams = [];
var w = 960;
var h = 540;
//load the song
function preload() {
music = loadSound('city.mp3');
}
//setup canvas, music, aplitude and fft of the music, rainstream
function setup() {
frameRate(20);
createCanvas(1920, 1080);
angleMode(DEGREES);
music.play(); //play the song
amp = new p5.Amplitude(0.9, 64); //get the aplitude value of the music
fft = new p5.FFT(); //get the spectrum analysis value of the music
//generate and render the rains
var x = 0;
for (var i = 0; i <= width / rainSize; i++) {
var stream = new Stream();
stream.generate(x, random(-1000, 0));
streams.push(stream);
x += random(10, 50);
}
}
//draw lighting and disk changing based on song. render raindrops
function draw() {
background(0);
light(0, 0); // lighting that changes with fft
disk(0, 0); //disk that changes with amp
//render the streams
streams.forEach(function(stream) {
stream.render();
});
}
//function rain-setting values for it-
function rain(x, y, vel, first) {
this.x = x;
this.y = y;
this.vel = vel;
this.first = first;
//reset raindrops to top when they hit the bottom
this.reset = function() {
if (this.y >= height) {
this.y = 0;
} else {
this.y += this.vel;
}
}
}
//rain stream function. set speed and generation ofr rain drops
function Stream() {
this.rainDrops = [];
this.totalDrops = round(random(10, 50));
this.vel = random(10);
//set the function of generating the rains
this.generate = function(x, y) {
var first = round(random(4)) == 1;
for (var i = 0; i < this.totalDrops; i++) {
rains = new rain(x, y, this.vel, first);
this.rainDrops.push(rains);
y -= rainSize * random(5);
first = false;
}
}
//setting the rendering funtion to the rain
this.render = function() {
this.rainDrops.forEach(function(rains) {
if (rains.first) {
fill(170, 50, 130, random(200));
} else {
fill(230, 100, 200, 50);
}
//draw rain drops
noStroke();
push();
ellipse(rains.x, rains.y, rainSize, rainSize);
rains.reset();
pop();
});
}
}
//draw a light that changes it's shapes based on spectrum of the music(fft)
function light() {
push();
translate(w, h)
//get the value of fft and put them in spectrum array
var spectrum = fft.analyze();
spectrumHistory.push(spectrum);
//erase old spectrum from the array
if (spectrumHistory.length > width) {
spectrumHistory.splice(0, 1);
}
//draw shapes
for (var i = 0; i < spectrum.length; i++) {
var spec = spectrum[i];
var angle = map(i, 0, spectrum.length, 0, 520);
var r = map(spec, 0, 100, 50, 150);
var x = r * cos(angle);
var y = r * sin(angle);
beginShape();
stroke(y * 2, x / 2, r / 2);
strokeWeight(0.5);
line(0, 0, x, y);
line(0, 0, -x, -y);
}
endShape();
pop();
}
//draw disk that change its radius based on volum of the music(amp)
function disk(x, y) {
push();
translate(w, h);
//get the amp level from the music and put them in vol array
var vol = amp.getLevel();
volHistory.push(vol);
//erase old volume from the array
if (volHistory.length > width) {
volHistory.splice(0, 1);
}
//more circles on center
var rad = map(vol, 0, 1, 100, 250);
noStroke();
fill(50, 50, 200, 100);
ellipse(x, y, rad, rad);
fill(200, 50, 50, 100);
ellipse(x, y, rad - 5, rad - 5);
fill(50, 50, 200, 100);
ellipse(x, y, rad - 20, rad - 20);
fill(255, 25);
ellipse(x, y, rad - 40, rad - 40);
pop();
}
For the final project, I worked with Jiaxin. It was really fun to work with the friend for something I wanted to do! I’m interested in media art, especially interactive installation art. I proposed this idea to Jiaxin and she also loves to work with Kinect. Since both of us are ETC student, we could get access to all of the equipment like Kinect and projector very easily. So we teamed up and divided works into two. As Jiaxin wanted to work with Kinect, I took charge of background animation and music. I play with sound on p5js and interactive images for days. Meanwhile, me and Jiaxing had several meetings to settle down the idea on this project. We worked on mood board first to see how we are picturing the outcome.
And then we moved on to work on actual work process. For me, it was getting interact images with sound done. I searched on how to make interactive images with sounds in p5js and got some ideas about what I want to create.
First interactive thing is volume. circle on the center of the canvas is changing its radius by music volume. Second is frequency spectrum. It shows analysis of spectrum from low frequency to high frequency, of course, different sound effects have the different frequency.
It was really fun to work on installation art as I wished! I’d love to work on this kind of artwork later again.
Special thanks to Julian Korzeniowsky -a talented and awesome musician- for providing awesome music for our project.
1.download this file Final project(Jiaxin_Nayeon)
2.set up a local server
3.(get a Kinect and) open the file in chrome
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.
]]>
//vertices and edge sets of the individual graphs
var V = [];
var E = [];
//total set of vertices
var vertices = [];
var spacing = 48;
//buttons for coloring vertices
var redbutton;
var bluebutton;
var greenbutton;
var pinkbutton;
var orangebutton
var buttons = [];
var levelnumber = 1;
var mousehasentbeenclicked;
function setup() {
createCanvas(480, 400);
background(255);
resetLevel();
}
function resetLevel() {
mousehasentbeenclicked = true;
background(255);
//create buttons
redbutton = makeButton(width/6, color(209, 90, 90));
bluebutton = makeButton(2 * width/6, color(93, 137, 196));
greenbutton = makeButton(3 * width/6, color(199, 197, 71));
pinkbutton = makeButton(4 * width/6, 'lightpink');
orangebutton = makeButton(5 * width/6, 'orange');
buttons = [redbutton, bluebutton, greenbutton, pinkbutton, orangebutton];
for (i = 0; i < buttons.length; i++) {
buttons[i].isoutlined = false;
buttons[i].draw();
}
//draw grid of small vertices and label them from 0 to 53 in an array
for (i = 0; i < width/spacing - 1; i++) {
for (j = 0; j < 300/spacing - 1; j++) {
vertices[i + ((width/spacing - 1) * j)] =
makeVertex(spacing + i * spacing, spacing + j * spacing);
}
}
}
//OBJECTS: VERTICES, EDGES, BUTTONS////////////////////////////////////////////
//vertices
function vertexboldDraw() {
noStroke();
if (this.isred == true) {
fill(209, 90, 90);
ellipse(this.x, this.y, 16, 16);
} else if (this.isblue == true) {
fill(93, 137, 196);
ellipse(this.x, this.y, 16, 16);
} else if (this.isgreen == true) {
fill(199, 197, 71);
ellipse(this.x, this.y, 16, 16);
} else if (this.ispink == true) {
fill('lightpink');
ellipse(this.x, this.y, 16, 16);
} else if (this.isorange == true) {
fill('orange');
ellipse(this.x, this.y, 16, 16);
} else {
stroke(150);
strokeWeight(1);
fill(255);
ellipse(this.x, this.y, 15, 15);
}
}
function vertexDraw() {
noStroke();
fill(180);
ellipse(this.x, this.y, 1.5, 1.5);
}
function makeVertex(px, py) {
v = {x: px, y: py, draw: vertexDraw, bolddraw: vertexboldDraw,
isred: false, isgreen: false, isblue: false, ispink: false,
isorange: false};
return v;
}
//edges
function edgeDraw(m, n) {
if (this.iscolored == true & this.iscorrect == true) {
strokeWeight(3);
stroke('limegreen');
} else if (this.iscolored == true & this.iscorrect == false) {
strokeWeight(3);
stroke('tomato');
} else if (this.iscolored == false) {
strokeWeight(.5);
stroke(200);
}
line(vertices[this.m].x, vertices[this.m].y,
vertices[this.n].x, vertices[this.n].y);
}
function makeEdge(pm, pn) {
e = {m: pm, n: pn, iscolored: false, iscorrect: true, draw: edgeDraw};
return e
}
//buttons
function buttonDraw() {
rectMode(CENTER);
if (this.isoutlined == true) {
strokeWeight(3);
stroke(255);
fill(this.buttoncolor);
rect(this.x, height - 50, 60, 20);
} else {
noStroke();
fill(this.buttoncolor);
rect(this.x, height - 50, 61.5, 21.5);
}
}
function makeButton(px, color) {
b = {x: px, buttoncolor: color, isoutlined: false, draw: buttonDraw};
return b;
}
//FUNCTIONS TO BE CALLED IN MOUSEPRESSED///////////////////////////////////////
function testEdge() {
//edges are green if the vertices are different color and red if they are
//the same colors
for (i = 0; i < E.length; i++) {
if (vertices[E[i].m].isred == true & vertices[E[i].n].isred == true) {
E[i].iscolored = true;
E[i].iscorrect = false;
}
if (vertices[E[i].m].isblue == true & vertices[E[i].n].isblue == true) {
E[i].iscolored = true;
E[i].iscorrect = false;
}
if (vertices[E[i].m].isgreen == true & vertices[E[i].n].isgreen == true) {
E[i].iscolored = true;
E[i].iscorrect = false;
}
if (vertices[E[i].m].ispink == true & vertices[E[i].n].ispink == true) {
E[i].iscolored = true;
E[i].iscorrect = false;
}
if (vertices[E[i].m].isorange == true & vertices[E[i].n].isorange == true) {
E[i].iscolored = true;
E[i].iscorrect = false;
}
if ((vertices[E[i].m].isred == true || vertices[E[i].m].isblue == true ||
vertices[E[i].m].isgreen == true || vertices[E[i].m].ispink == true
|| vertices[E[i].m].isorange == true) & (vertices[E[i].n].isred == true
|| vertices[E[i].n].isblue == true || vertices[E[i].n].isgreen == true
|| vertices[E[i].n].ispink == true || vertices[E[i].n].isorange == true)) {
E[i].iscolored = true;
}
if (E[i].iscolored == true & (vertices[E[i].m].isred !== vertices[E[i].n].isred
|| vertices[E[i].m].isblue !== vertices[E[i].n].isblue
|| vertices[E[i].m].isgreen !== vertices[E[i].n].isgreen
|| vertices[E[i].m].ispink !== vertices[E[i].n].ispink
|| vertices[E[i].m].isorange !== vertices[E[i].n].isorange)) {
E[i].iscolored = true;
E[i].iscorrect = true;
}
E[i].draw();
}
}
function colorVertices() {
//change colors of vertices when clicked, depending on which button has
//most recently been clicked
for (i = 0; i < V.length; i++) {
if (dist(mouseX, mouseY, vertices[V[i]].x, vertices[V[i]].y) < 10) {
if (buttons[0].isoutlined == true & buttons[1].isoutlined == false &&
buttons[2].isoutlined == false && buttons[3].isoutlined == false &&
buttons[4].isoutlined == false) {
vertices[V[i]].isred = true;
vertices[V[i]].isblue = false;
vertices[V[i]].isgreen = false;
vertices[V[i]].ispink = false;
vertices[V[i]].isorange = false;
}
if (buttons[0].isoutlined == false & buttons[1].isoutlined == true &&
buttons[2].isoutlined == false && buttons[3].isoutlined == false &&
buttons[4].isoutlined == false) {
vertices[V[i]].isred = false;
vertices[V[i]].isblue = true;
vertices[V[i]].isgreen = false;
vertices[V[i]].ispink = false;
vertices[V[i]].isorange = false;
}
if (buttons[0].isoutlined == false & buttons[1].isoutlined == false &&
buttons[2].isoutlined == true && buttons[3].isoutlined == false &&
buttons[4].isoutlined == false) {
vertices[V[i]].isred = false;
vertices[V[i]].isblue = false;
vertices[V[i]].isgreen = true;
vertices[V[i]].ispink = false;
vertices[V[i]].isorange = false;
}
if (buttons[0].isoutlined == false & buttons[1].isoutlined == false &&
buttons[2].isoutlined == false && buttons[3].isoutlined == true &&
buttons[4].isoutlined == false) {
vertices[V[i]].isred = false;
vertices[V[i]].isblue = false;
vertices[V[i]].isgreen = false;
vertices[V[i]].ispink = true;
vertices[V[i]].isorange = false;
}
if (buttons[0].isoutlined == false & buttons[1].isoutlined == false &&
buttons[2].isoutlined == false && buttons[3].isoutlined == false &&
buttons[4].isoutlined == true) {
vertices[V[i]].isred = false;
vertices[V[i]].isblue = false;
vertices[V[i]].isgreen = false;
vertices[V[i]].ispink = false;
vertices[V[i]].isorange = true;
}
}
}
}
function pressButton() {
//select color for vertex coloring
if (mouseX >= buttons[0].x - 30 & mouseX <= buttons[0].x + 30
&& mouseY <= height - 40 && mouseY >= height - 60) {
buttons[0].isoutlined = true;
buttons[1].isoutlined = false;
buttons[2].isoutlined = false;
buttons[3].isoutlined = false;
buttons[4].isoutlined = false;
for (i = 0; i < buttons.length; i++) {
buttons[i].draw();
}
}
if (mouseX >= buttons[1].x - 30 & mouseX <= buttons[1].x + 30
&& mouseY <= height - 40 && mouseY >= height - 60) {
buttons[0].isoutlined = false;
buttons[1].isoutlined = true;
buttons[2].isoutlined = false;
buttons[3].isoutlined = false;
buttons[4].isoutlined = false;
for (i = 0; i < buttons.length; i++) {
buttons[i].draw();
}
}
if (mouseX >= buttons[2].x - 30 & mouseX <= buttons[2].x + 30
&& mouseY <= height - 40 && mouseY >= height - 60) {
buttons[0].isoutlined = false;
buttons[1].isoutlined = false;
buttons[2].isoutlined = true;
buttons[3].isoutlined = false;
buttons[4].isoutlined = false;
for (i = 0; i < buttons.length; i++) {
buttons[i].draw();
}
}
if (mouseX >= buttons[3].x - 30 & mouseX <= buttons[3].x + 30
&& mouseY <= height - 40 && mouseY >= height - 60) {
buttons[0].isoutlined = false;
buttons[1].isoutlined = false;
buttons[2].isoutlined = false;
buttons[3].isoutlined = true;
buttons[4].isoutlined = false;
for (i = 0; i < buttons.length; i++) {
buttons[i].draw();
}
}
if (mouseX >= buttons[4].x - 30 & mouseX <= buttons[4].x + 30
&& mouseY <= height - 40 && mouseY >= height - 60) {
buttons[0].isoutlined = false;
buttons[1].isoutlined = false;
buttons[2].isoutlined = false;
buttons[3].isoutlined = false;
buttons[4].isoutlined = true;
for (i = 0; i < buttons.length; i++) {
buttons[i].draw();
}
}
}
//DESIGN LEVELS AND CALL THEM IN DRAW//////////////////////////////////////////
function levelOne() {
textSize(10);
strokeWeight(.4);
fill('grey');
text('Level One: Practice', 30, 10);
E = [[25, 4], [19, 4], [25, 51], [51, 47], [47, 19], [4, 13], [25, 24],
[51, 41], [47, 39], [19, 20], [13, 41], [41, 20], [20, 24], [24, 39],
[39, 13]];
for (i = 0; i < E.length; i++) {
E[i] = makeEdge(E[i][0], E[i][1]);
if (mousehasentbeenclicked) {
E[i].draw();
}
}
V = [4, 13, 19, 20, 24, 25, 39, 41, 47, 51];
for (i = 0; i < V.length; i++) {
vertices[V[i]].bolddraw();
}
}
function levelTwo() {
textSize(10);
strokeWeight(.4);
fill('grey');
text('Level Two', 30, 10);
E = [[25, 4], [19, 4], [25, 51], [51, 47], [47, 19], [38, 47], [47, 51],
[51, 42], [42, 38], [38, 51], [42, 47], [42, 19], [25, 38], [4, 38],
[4, 42], [19, 38], [25, 42]];
for (i = 0; i < E.length; i++) {
E[i] = makeEdge(E[i][0], E[i][1]);
if (mousehasentbeenclicked) {
E[i].draw();
}
}
V = [4, 19, 25, 38, 42, 47, 51];
for (i = 0; i < V.length; i++) {
vertices[V[i]].bolddraw();
}
}
function levelThree() {
textSize(10);
strokeWeight(.4);
fill('grey');
text('Level Three', 30, 10);
E = [[4, 31], [31, 17], [31, 53], [31, 45], [31, 9], [12, 14], [14, 33],
[33, 40], [40, 29], [29, 12], [4, 29], [4, 14], [17, 12], [17, 33], [53, 14],
[53, 40], [45, 33], [45, 29], [9, 40], [9, 12]];
for (i = 0; i < E.length; i++) {
E[i] = makeEdge(E[i][0], E[i][1]);
if (mousehasentbeenclicked) {
E[i].draw();
}
}
V = [4, 9, 12, 14, 17, 29, 33, 40, 45, 53, 31];
for (i = 0; i < V.length; i++) {
vertices[V[i]].bolddraw();
}
}
function levelFour() {
textSize(10);
strokeWeight(.4);
fill('grey');
text('Level Four', 30, 10);
E = [[4, 18], [18, 45], [45, 21], [21, 4], [4, 23], [23, 53], [53, 26],
[26, 4], [4, 28], [4, 34], [28, 34], [18, 28], [26, 34], [18, 21],
[23, 26], [28, 21], [34, 23], [21, 23], [28, 34], [23, 45], [21, 53]];
for (i = 0; i < E.length; i++) {
E[i] = makeEdge(E[i][0], E[i][1]);
if (mousehasentbeenclicked) {
E[i].draw();
}
}
V = [4, 18, 21, 23, 26, 28, 34, 45, 53];
for (i = 0; i < V.length; i++) {
vertices[V[i]].bolddraw();
}
}
function levelFive() {
textSize(10);
strokeWeight(.4);
fill('grey');
text('Level Five', 30, 10);
E = [[25, 4], [19, 4], [25, 51], [51, 47], [47, 19], [4, 13], [19, 13],
[25, 13], [29, 13], [33, 13], [47, 13], [51, 13], [4, 29], [4, 33],
[19, 29], [25, 33], [29, 51], [33, 47], [29, 47], [33, 51], [25, 29], [19, 33]];
for (i = 0; i < E.length; i++) {
E[i] = makeEdge(E[i][0], E[i][1]);
if (mousehasentbeenclicked) {
E[i].draw();
}
}
V = [4, 19, 25, 47, 51, 13, 33, 29];
for (i = 0; i < V.length; i++) {
vertices[V[i]].bolddraw();
}
}
function draw() {
for (k = 0; k < vertices.length; k++) {
vertices[k].draw();
}
if (levelnumber == 1) {
levelOne();
} else if (levelnumber == 2) {
levelTwo();
} else if (levelnumber == 3) {
levelThree();
} else if (levelnumber == 4) {
levelFour();
} else if (levelnumber == 5) {
levelFive();
}
}
function mousePressed() {
mousehasentbeenclicked = false;
pressButton();
colorVertices();
testEdge();
var is5colored = true;
for (i = 0; i < E.length; i ++) {
if (E[i].iscolored == false || E[i].iscorrect == false) {
is5colored = false;
}
}
if (is5colored == true) {
resetLevel();
levelnumber++;
}
if (levelnumber == 6) {
textSize(90);
fill('lightpink');
noStroke();
text('YOU WIN', 40, height/2);
}
}
My final project is a simple game based on graph coloring. Click on any of the colored boxes to select a color and then click in the vertices to color them with that color. The goal is to color in the graph so that there is no edge between vertices of the same color. When you succeed it will automatically move on to the next level. There are a total of 5 levels and when you complete them all you win!
]]>Interactive Music Media Installation
This is a project using Kinect connecting with a website which was developed by P5.js. Therefore, this project cannot be run on WordPress. We recorded the video for our project and hope it can be a good demonstration of the whole concept.
For this project, Nayeon and I worked together to create a new media installation in which people can interact with music by hitting virtual buttons to generate sounds and visual effects. People can follow the music from the background and have fun with moving their body to play music.
I learned a lot and a lot and a lot from this final project and I am so proud that it finally has been done. For this project, I was responsible for the Kinect part, which included making sure the connection between Kinect and the website (or we can say the Javascript files) work well and also create User Interface (the virtual buttons, particle effects, and sound effects) for the website. So, the biggest challenge for me at the beginning was figuring out how to connect Kinect and Javascript. I did a lot of research and finally decided to use the Node-Kinect2 library to achieve what I needed.
(Information about Node-Kinect library: https://github.com/wouterverweirder/kinect2)
I followed the instructions of the library, installed all the modules and packages that I needed (which took me a long time to figure out how to properly install the node.js and all kinds of modules. 
). After it, I looked into the sample files carefully, analyzed the logic inside to figure out how I can access the data of Kinect skeleton. I figured out, for using this library to access data, I needed to set up a local server and point it to my local index, uploading my resources and files to the server through the node.js. At last, I need to use the command prompt to open the js file by using node.js. Whoo… to be honest, it was not easy to figure out the whole process clearly, but once I understood the logic behind it, the whole thing went more fluently.
The next step I did was designing how the interface looks like. After communication with Nayeon, we decided to create a project with a Neon art style. I created a mood board for myself to figured out the feelings of the visual part.
I also looked into a very inspiring and amazing project which is The V Motion Project and decided to do a circling interface for people to play with.
(For more information about V Motion Project: https://vimeo.com/45417241)
I created 6 virtual buttons on the canvas, and when people hit any of them, a particle effect will be generated along with a sound effect. By standing in front of the Kinect, people can move their hands to touch the buttons and create their own music and visual effects.
One more thing I have learned from this project is about how to access JS file outside Node.js through Node.js. The trick is you need to follow a very strict syntax to get your directory of the file and upload your resources to it.
Anyway, it is so excited that I have finished this project with Nayeon! We definitely went through some difficulties and I guess this is why I feel very fulfilled when I finished creating everything! Here are some screenshots of the project! Hope you Enjoy 
Finally here is the source code (a zip file) we created, please feel free to check it. I was responsible for the Kinect and interface (jiaxin.js) part.
Instruction for opening our project:
- Go to https://github.com/wouterverweirder/kinect2 download the Kinect node.js library.
- Follow the instruction to install node.js
- Connect your Kinect to your PC and make sure it works
- Extract the project zip file, and open your Command Prompt (for windows), go to the directory that you put our project folder. (use “cd + the directory “)
- And then use node.js to open the kinect.js file. (simply type “node kinect”)
- Open a browser and go to the local server : http://localhost:8000
- Stand in front of your Kinect, and have fun with our project!
How to open up and run the file:
- download and unzip the files below.
- nahyunk1-yugyeonl-final project
- songs
- extract “sound1”, “sound2”, and “sound3” music files from the songs folder and put them into the “assets” folder inside the final project folder.
- turn on terminal or node and run local server.
- access the sketch.js inside the final project folder.
- play and enjoy the songs by entering either 1, 2, 3 on your keyboard.
The project file was too large so we had to upload the songs separately in another folder along with the zip file of our code. Our project was based on the idea of generating animation with the kiwi bird and creating its walkthrough with the incorporation of music affecting the background of the landscape. There are three parts to the scenes: pressing 1 on your keyboard will affect your current scene to an urban landscape. Similarly, when either 2 or 3 is pressed, different scenes and music replace the current scene with different parts of the landscape responding to the beat, frequency, and the amplitude of the music assigned. The parts of the landscapes were drawn with the incorporation of the FFT(); function and the p5.Amplitude(); function which analyzes the frequency and the volume of the music when it is played. Some of the interesting factors that our animation consisted was the sun beam which would draw itself in an ellipse in a form of measured frequency and the stars and the moon which brightens and glistens depending on the beat of the music played at night. Throughout, we put a lot of effort learning and incorporating the p5.sound materials, creating a variety of landscapes with music chosen according to the mood of our scenes, and generally coding different functions and figuring out ways for our code to understand the switching of the scenes and the play of different music files.
**scene 2 consists of a song that is relatively louder than the other scenes that contain music files. We’ve put code for the sound of the song to be reduced, but the song still plays comparatively loud. Please be careful with the volume of your headphones.
var kiwi;
var kiwiX = 200; //kiwi locationX
var kiwiY = 310; //kiwi locationY
var tree = []; //array of trees
var treeAssets = [];
var shell = []; //array of shells
var shellAssets = [];
var coin = []; //array of coins
var coinAssets = [];
var gem = []; //array of gems
var gemAssets = [];
var buildings = []; //array of buildings
var ocean = []; //array of mountain
var mountain = []; //array of ocean
var stars = []; //array of stars
var clouds = []; //array of clouds
var sound1;
var sound2;
var sound3;
var amplitude;
var volArray = []; //array that stores volume
var timeState = "morning"; //determines initial state of time
function preload() {
sound1 = loadSound("assets/sound1.mp3");
sound2 = loadSound("assets/sound2.mp3");
sound3 = loadSound("assets/sound3.mp4");
var treeLinks = ["assets/palmtree0.png", "assets/palmtree1.png",
"assets/palmtree2.png", "assets/palmtree3.png"];
//load tree images
for (var t = 0; t < treeLinks.length; t++) {
treeAssets[t] = loadImage(treeLinks[t]);
}
//load shell images
for (var i = 0; i < 1; i++){
shellAssets[i] = loadImage("assets/shell.png");
}
//load coin images
for (var i = 0; i < 1; i++){
coinAssets[i] = loadImage("assets/coin.png");
}
//load gem images
for (var i = 0; i < 1; i++){
gemAssets[i] = loadImage("assets/gem.png");
}
}
function setup() {
createCanvas(1000, 700);
imageMode(CENTER);
//load amplitude
amplitude = new p5.Amplitude();
//load fft
fft = new p5.FFT();
sound1.setVolume(1);
sound2.setVolume(0.00000001);
sound3.setVolume(1);
//create initial set of trees
for (var i = 0; i < 4; i ++) {
var treeX = random(width);
tree[i] = makeTrees(treeX);
}
//create initial set of shells
for (var i = 0; i < 5; i ++) {
var shellX = random(360, width);
shell[i] = makeShells(shellX);
}
//create initial set of coins
for (var i = 0; i < 5; i ++) {
var coinX = random(360, width);
coin[i] = makeCoins(coinX);
}
//create initial set of gems
for (var i = 0; i < 5; i ++) {
var gemX = random(360, width);
gem[i] = makeGems(gemX);
}
//create initial set of buildings
for (var i = 0; i < 10; i++){
var rx = random(width);
buildings[i] = makeBuilding(rx);
}
//create initial set of clouds
for (var i = 0; i < 10; i++) {
var cloudX = random(width);
var cloudY = random(height/2);
clouds[i] = makeClouds(cloudX, cloudY);
}
//create kiwi animation
createKiwi(kiwiX, kiwiY);
//ocean
makeOcean(height - 220, 30, 0.00005, 0.0005, color(197, 227, 234));
makeOcean(height - 180, 80, 0.00005, 0.001, color(225, 211, 185));
//mountain
makeMountain(height - 400, 200, 0.00005, 0.0025, color(15));
makeMountain(height - 350, 300, 0.00015, 0.006, color(0));
}
function draw() {
if (timeState == "morning") {
morning();
if (sound1.isPlaying() == false){
sound1.play();
} else if (sound2.isPlaying() == true){
sound2.stop();
} else if (sound3.isPlaying() == true){
sound3.stop();
}
} if (timeState == "afternoon") {
afternoon();
if (sound2.isPlaying() == false){
sound2.play();
}
else if (sound1.isPlaying() == true){
sound1.stop();
} else if (sound3.isPlaying() == true){
sound3.stop();
}
} if (timeState == "night") {
night();
if (sound3.isPlaying() == false){
sound3.play();
} if (sound1.isPlaying() == true){
sound1.stop();
} else if (sound2.isPlaying() == true){
sound2.stop();
}
}
}
function keyPressed() {
if (key == '1') {
timeState = "morning";
} if (key == '2') {
timeState = "afternoon";
} else if (key == '3') {
timeState = "night";
}
}
function morning() {
//gradient background color
var from = color(125, 133, 216);
var to = color(220, 224, 251);
setGradient(0, from, to, 3.5 * height / 5);
//lines in the background showing frequency
skyFreq(0, 125);
//sun
makeSun(width / 4 - 100, 550, 236, 191, 113, 300);
//ground
noStroke();
fill(96, 91, 103);
rect(0, 3.5 * height / 5 - 10, width, 0.5 * height / 5);
fill(127, 109, 123);
rect(0, 4 * height / 5 - 10, width, height / 4);
//clouds
updateAndDisplayClouds();
addClouds();
//buildings
updateAndDisplayBuildings();
addBuildings();
//kiwi
drawKiwi();
//coins
updateAndDisplayCoins();
addCoins();
}
function afternoon() {
//gradient background color
var from = color(20, 140, 172);
var to = color(209, 255, 249);
setGradient(0, from, to, 3.5 * height / 5);
//lines in the background showing frequency
skyFreq(100, 48);
//ocean & sand
noStroke();
moveOcean();
//sun
makeSun(3 * width / 4, 90, 243, 229, 202, 150);
//sun outline based on frequency
sunFreq();
//trees
updateAndDisplayTrees();
addTrees();
//kiwi
drawKiwi();
//shells
updateAndDisplayShells();
addShells();
}
function night() {
//gradient background color
var from = color(25, 0, 51);
var to = color(51, 0, 102);
setGradient(0, from, to, 3.5 * height / 5);
//stars
updateAndDisplayStars();
removeStars();
addStars();
drawStars();
//moon
makeMoon();
//mountain
strokeWeight(random(0.2, 0.4));
stroke(random(0,255), random(0,255), random(0,255));
moveMountain();
//ground
noStroke();
fill(18, 13, 17);
rect(0, 3.5 * height / 5, width, 1.5 * height / 5);
//kiwi
drawKiwi();
//gems
updateAndDisplayGems();
addGems();
//sound
}
function setGradient (y, from, to, length) {
//top to bottom gradient (background)
for (var i = y; i <= length; i++) {
var inter = map(i, y, width, 0, 1);
var c = lerpColor(from, to, inter);
stroke(c);
strokeWeight(2);
line(0, i, width, i);
}
}
function makeSun(sunX, sunY, r, g, b, diam) {
noStroke();
//glowing gradient sunlight
for (var i = 0; i < 30; i++) {
var value = random(7, 8);
var transparency = 100 - value * i;
fill(r + 2 * i / 3, g + 7 * i / 3, b + i, transparency);
ellipse(sunX, sunY, diam + 20 * i, diam + 20 * i);
}
//sun
fill(r, g, b, 100);
ellipse(sunX, sunY, diam, diam);
}
function sunFreq() { //sun outline
angleMode(DEGREES);
//analyze level of the amplitude
var vol = amplitude.getLevel();
//array that pushes the volume in the array
volArray.push(vol);
stroke(255);
strokeWeight(.5);
noFill();
push();
translate(width - 240, 90);
scale(2.5);
//shape that represent the range of the frequency
beginShape();
for (var i = 0; i < 360; i ++){
var r = map(volArray[i], 0, 1, 10, 100);
var x = r * cos(i);
var y = r * sin(i);
vertex(x ,y);
}
endShape();
pop();
//360 because the reperesentation draws in an ellipse
if (volArray.length > 360){
volArray.splice(0, 1);
}
}
function skyFreq(offset, spacingX) { //background lines
var w = width / spacingX;
//anaylze the fft
var spectrum = fft.analyze();
push();
translate(0, offset);
beginShape();
//draws the frequency level as lines behind the ocean
for (var i = 0; i < spectrum.length; i++){
var angle = map(i, 0, spectrum.length, 0, 360);
var amp = spectrum[i];
var r = map(amp, 0, 256, 40, 200);
var y = map(amp, 0, 256, height, 0);
stroke(255);
strokeWeight(0.5);
line(i * w, height, i * w, y);
}
endShape();
pop();
}
function cityFreq() {
}
function makeMoon() {
//size of moonlight depends on the amplitude
for (var c = 0; c < 30; c++){
var level = amplitude.getLevel();
noStroke();
fill(217, 154, 100, (10 - c) * level * 50);
ellipse(850, 150, 90 + (10 * c) + level, 90 + (10 * c) + level);
stroke(255, 223, 181);
fill(255, 223, 181);
ellipse(850, 150, 100, 100);
fill(252, 240, 224);
ellipse(858, 150, 85, 85);
}
}
function drawKiwi() { //create kiwi
push();
translate(kiwiX, kiwiY);
scale(0.6, 0.6);
drawSprites();
pop();
}
function createKiwi(x, y) { //create sprite at a random position
kiwi = createSprite(x, y);
kiwi.addAnimation("assets/kiwi0.png","assets/kiwi1.png",
"assets/kiwi2.png","assets/kiwi3.png","assets/kiwi4.png","assets/kiwi5.png","assets/kiwi6.png",
"assets/kiwi7.png","assets/kiwi8.png","assets/kiwi9.png","assets/kiwi10.png",
"assets/kiwi11.png","assets/kiwi12.png","assets/kiwi13.png","assets/kiwi14.png");
}
function makeOcean(landscapeY, landscapeR, landscapeS, landscapeD, landscapeC) {
var landscape = {ly: landscapeY, //locationY
range: landscapeR, //range of how far landscape goes up
speed: landscapeS, //speed of the landscape
detail: landscapeD, //detail (how round/sharp)
color: landscapeC, //color of the landscape
draw: drawLandscape}
ocean.push(landscape);
}
function makeMountain(landscapeY, landscapeR, landscapeS, landscapeD, landscapeC) {
var landscape = {ly: landscapeY, //locationY
range: landscapeR, //range of how far landscape goes up
speed: landscapeS, //speed of the landscape
detail: landscapeD, //detail (how round/sharp)
color: landscapeC, //color of the landscape
draw: drawLandscape}
mountain.push(landscape);
}
function drawLandscape() { //generating landscape from code provided
fill(this.color);
beginShape();
vertex(0, height);
for (var i = 0; i < width; i++) {
var t = (i * this.detail) + (millis() * this.speed);
var y = map(noise(t), 0, 1, this.ly - this.range / 2, this.ly + this.range / 2);
vertex(i, y);
}
vertex(width, height);
endShape(CLOSE);
}
function moveOcean() { //move the landscape
for (var i = 0; i < ocean.length; i++)
ocean[i].draw();
}
function moveMountain() { //move the landscape
for (var i = 0; i < mountain.length; i++)
mountain[i].draw();
}
//palm trees
function updateAndDisplayTrees() {
//keeps the trees moving along the x-axis
for (var i = 0; i < tree.length; i++) {
tree[i].moveTree();
tree[i].drawTree();
}
}
function drawTrees() { //draws the trees
image(treeAssets[this.nFloor], this.x + 200, this.y - 100);
}
function moveTrees() { //move the trees
this.x -= this.speed;
}
function addTrees() { //places in more trees into the array
var newTreesProbability = 0.0015;
if (random(0, 1) < newTreesProbability) {
tree.push(makeTrees(width));
}
}
function makeTrees(originX) {
var palmtrees = {
x: originX,
y: random(400, 420),
speed: 0.55,
nFloor: floor(random(0, 3)),
moveTree: moveTrees,
drawTree: drawTrees}
return palmtrees;
}
//shells
function updateAndDisplayShells() {
//keeps the shells moving along the x-axis
for (var i = 0; i < shell.length; i++) {
shell[i].moveShell();
shell[i].drawShell();
}
}
function drawShells() { //draws the shells
push();
translate(this.x + 100, this.y);
scale(0.25, 0.25);
image(shellAssets[0], 0, 0);
pop();
}
function moveShells() { //move the shells
this.x -= this.speed;
}
function addShells() { //places in more trees into the array
var newTreesProbability = 0.0035;
if (random(0, 1) < newTreesProbability) {
shell.push(makeShells(width));
}
}
function makeShells(shellX) {
var shells = {
x: shellX,
y: 610,
speed: 1,
moveShell: moveShells,
drawShell: drawShells}
return shells;
}
//budilings
function updateAndDisplayBuildings(){
//keeps the buildings moving along the x-axis
for (var i = 0; i < buildings.length; i++) {
buildings[i].move();
buildings[i].display();
}
}
function addBuildings() { //places in more buildings into the array
var newBuilding = 0.006;
if (random(0,1) < newBuilding) {
buildings.push(makeBuilding(width));
}
}
function moveBuildings() { //move the buildings
this.x -= this.speed;
}
function drawBuildings() { //draws the buildings
var floorHeight = 45;
var bHeight = this.nFloors * floorHeight;
push();
noStroke();
fill(this.buildingC);
translate(this.x, height - 180);
rect(0, -bHeight, this.breadth, bHeight);
for (var y = 0; y < this.nFloors; y++) {
for (var x = 0; x < 6; x++){
noStroke();
fill(255, 221, random(100, 150));
rect(x * (this.breadth / 7) + 10, -25 - (y * floorHeight), this.breadth / 12, 20);
}
}
pop();
}
function makeBuilding(buildingX) {
var building = {x: buildingX,
breadth: random(100, 125),
speed: 0.55,
buildingC: color(random(150, 225), random(100, 175), random(100, 175)),
nFloors: round(random(4, 10)),
move: moveBuildings,
display: drawBuildings}
return building;
}
//coins
function updateAndDisplayCoins() {
//keeps the coins moving along the x-axis
for (var i = 0; i < coin.length; i++) {
coin[i].moveCoins();
coin[i].drawCoins();
}
}
function drawCoins() { //draws the coins
push();
translate(this.x + 100, this.y);
scale(0.3, 0.3);
image(coinAssets[0], 0, 0);
pop();
}
function moveCoins() { //move the coins
this.x -= this.speed;
}
function addCoins() { //places in more coins into the array
var newTreesProbability = 0.0035;
if (random(0, 1) < newTreesProbability) {
coin.push(makeCoins(width));
}
}
function makeCoins(coinX) {
var coins = {
x: coinX,
y: 610,
speed: 1,
moveCoins: moveCoins,
drawCoins: drawCoins}
return coins;
}
//gems
function updateAndDisplayGems() {
//keeps the gems moving along the x-axis
for (var i = 0; i < gem.length; i++) {
gem[i].moveGems();
gem[i].drawGems();
}
}
function drawGems() { //draws the gems
push();
translate(this.x + 100, this.y);
scale(0.3, 0.3);
image(gemAssets[0], 0, 0);
pop();
}
function moveGems() { //move the gems
this.x -= this.speed;
}
function addGems() { //places in more gems into the array
var newTreesProbability = 0.0035;
if (random(0, 1) < newTreesProbability) {
gem.push(makeGems(width));
}
}
function makeGems(gemX) {
var gems = {
x: gemX,
y: 610,
speed: 1,
moveGems: moveGems,
drawGems: drawGems}
return gems;
}
//stars
function updateAndDisplayStars() {
//keeps the stars moving along the x-axis
for (var i = 0; i < stars.length; i++){
stars[i].move();
stars[i].display();
}
}
function removeStars() { //remove stars out of canvas
var starsKeep = [];
for (var i = 0; i < stars.length; i++){
if (stars[i].x + stars[i].breadth > 0) {
starsKeep.push(stars[i]);
}
}
stars = starsKeep; //remaining stars
}
function addStars() { //places in more trees into the array
var newTreesProbability = 0.0075;
if (random(0,1) < newTreesProbability) {
stars.push(makeStars(width));
}
}
function moveStars() { //move the stars
this.x -= this.speed;
}
function drawStars() { //draws the coins
strokeWeight(random(0.5, 3));
stroke(random(0, 255), (0, 255), (0, 255));
push();
translate(this.x, 20);
// the size of the stars depends on the amplitude
for (var i = 0; i < stars.length; i++) {
var level = amplitude.getLevel();
var size = map(level, 0, 1, 0, 1);
fill(random(0, size), (0, size), (0, size));
ellipse(random(10, 3.5 * height / 5), random(10, 3.5 * height / 5), size, size);
}
pop();
}
function makeStars(birthLocationX) {
var star = {
x: birthLocationX,
breadth: 50,
speed: 1,
move: moveStars,
display: drawStars}
return star;
}
//clouds
function updateAndDisplayClouds() {
//update the clouds' position & draw them
for (var i = 0; i < clouds.length; i++) {
clouds[i].move();
clouds[i].draw();
}
}
function makeClouds(cloudX, cloudY) {
var cloud = {x: cloudX, //locationX of cloud
y: cloudY, //locationY of the cloud
offsetX: random(30, 100),
offsetY: random(100, 175),
breadth: random(300, 400), //width of the cloud
speedC: -random(1, 2), //speed of the cloud
nFloors: round(random(2, 8)), //multiplier that determines the height of the cloud
transparency: random(20, 60), //transparency of the cloud
move: moveClouds,
draw: drawClouds}
return cloud;
}
function drawClouds() {
var multiplier = 5; //multiplier that determines the height of the cloud
var cloudHeight = this.nFloors * multiplier;
ellipseMode(CENTER);
noStroke();
fill(255, this.transparency);
//cloud height reacts to the amplitude
var level = amplitude.getLevel();
push();
translate(this.x, height / 2 - this.offsetY);
ellipse(this.breadth/2, -cloudHeight, this.breadth, cloudHeight + 500 * level);
pop();
push();
translate(this.x, height / 2 - this.offsetY - 50);
ellipse(this.breadth/2 + this.offsetX, -cloudHeight, this.breadth, cloudHeight + 500 * level);
pop();
}
function moveClouds() {
//move clouds by updating its x position
this.x += this.speedC;
}
function addClouds() {
//new clouds from the right edge of the canvas
var newCloudsProbability = 0.0075;
//likliness of new clouds
if (random(0, 1) < newCloudsProbability) {
var cloudX = width;
var cloudY = random(height / 2);
clouds.push(makeClouds(cloudX, cloudY));
}
}PSA: THIS IS A TWO-PART ENDEAVOR, SO BE SURE TO SCROLL DOWN FOR PART 2!
Hi guys! This is a game we made called “Carl Cooks a Meal” that exists in two parts. Under the premise, our friend Carl is trying to make a lovely meal for his girlfriend Carla. However, he has absolutely no idea how to start! The first part is a clickventure where people help Carl gather ingredients. People have the option to either check in the refrigerator to see what’s inside OR take a trip to a distant country to get some more exotic ingredients. In travelling, users can learn about the histories behind these ingredients, adding an educational aspect to this part. Users can then return home to begin the second part. In the second part, people help Carl “cook” the meal. This is in the form of a game where users have to catch these ingredients in a pan to reach the final score. However, after each time an ingredient is caught in the pan, they begin to fall faster, making it more difficult as time passes. Once thirty ingredients have been caught, the meal is done, and Carla is very happy! Thanks for helping Carl make the meal!
/*15-104 final projec
team members: rachel park (rsp1) and hamza qureshi (hqq)
section: b; e
CARL COOKS A MEAL*/
var button1, button2, button3, button4, button5; //these variables create buttons, which are defined
//locally to avoid having to create dozens of em
var home, meetCarl, where2go, worldMap, fridge, //these variables will hold the images that form each slide
turmeric, miso, acai, foieGras, uSure,
startup;
var col; //sets color
//---------------------------------------------------
function setup() {
createCanvas(480,480);
background(0);
noLoop(); //allows the slides to remain static (prevents flickering!)
}
//---------------------------------------------------
function draw() { //will only comment once in detail because it can get redundant
home = createImg("https://i.imgur.com/aI9WG89.jpg"); //creates slide
home.position(-760,-760); //position and scales are used to fit the images on the canvas
home.style("transform", "scale(0.25)");
button1 = createButton('Play Game!'); //creates a button
button1.position(300,200);
col = color(129,178,154);
button1.style("background-color", col);
button1.style("color", "white");
button1.mousePressed(PromptPage); //allows the button to load the next screen
}
//---------------------------------------------------
//functions for each page
function PromptPage() {
//prompts with info on what to do
meetCarl = createImg("https://i.imgur.com/HAX6uEa.jpg");
meetCarl.position(-760, -760);
meetCarl.style("transform", "scale(0.25)");
button1 = createButton('Help me out →');
col = color(129,178,154);
button1.style("background-color", col);
button1.style("color", "white");
button1.position(350,200);
button1.mousePressed(ScenePage);
}
//---------------------------------------------------
function ScenePage() {
//loads scene where users have option of gathering ingredients
where2go = createImg("https://i.imgur.com/7F5M1iF.jpg");
where2go.position(-760,-760);
where2go.style("transform", "scale(0.25)");
button1 = createButton('Open the fridge');
col = color(129,178,154);
button1.style("background-color", col);
button1.style("color", "white");
button1.position(20,220);
button1.mousePressed(FridgeFoodPage);
button2 = createButton('Take a trip');
col = color(129,178,154);
button2.style("background-color", col);
button2.style("color", "white");
button2.position(140,460);
button2.mousePressed(WorldFoodPage);
button3 = createButton('Time to cook!');
col = color(129,178,154);
button3.style("background-color", col);
button3.style("color", "white");
button3.position(300,180);
button3.mousePressed(gameLandingPage);
}
//---------------------------------------------------
function WorldFoodPage() {
//loads international map screen, with buttons for diff locations
worldMap = createImg("https://i.imgur.com/aNsxfi1.jpg");
worldMap.position(-760,-760);
worldMap.style("transform", "scale(0.25)");
button1 = createButton('Brazil');
button1.style("background-color", col);
button1.style("color", "white");
button1.position(130,230);
button1.mousePressed(brazil);
button2 = createButton('France');
button2.style("background-color", col);
button2.style("color", "white");
button2.position(150,80);
button2.mousePressed(france);
button3 = createButton('India');
button3.style("background-color", col);
button3.style("color", "white");
button3.position(320,160);
button3.mousePressed(india);
button4 = createButton('Japan');
button4.style("background-color", col);
button4.style("color", "white");
button4.position(420,120);
button4.mousePressed(japan);
button5 = createButton('Go back home!');
button5.style("background-color", col);
button5.style("color", "white");
button5.position(190,450);
button5.mousePressed(ScenePage);
}
//---------------------------------------------------
function FridgeFoodPage() {
//loads fridge screen with items available in the fridge
fridge = createImg("https://i.imgur.com/jPanqPC.jpg");
fridge.position(-760,-760);
fridge.style("transform", "scale(0.25)");
button1 = createButton('Grab the items!');
col = color(129,178,154);
button1.style("background-color", col);
button1.style("color", "white");
button1.position(320,220);
button1.mousePressed(FridgeGrab);
button2 = createButton('No thanks!');
col = color(129,178,154);
button2.style("background-color", col);
button2.style("color", "white");
button2.position(320,260);
button2.mousePressed(ScenePage);
}
//---------------------------------------------------
function FridgeGrab(){
//simulates "grabbing" items from the fridge
fridge = createImg("https://i.imgur.com/zlj1DaE.jpg");
fridge.position(-760,-760);
fridge.style("transform", "scale(0.25)");
button1 = createButton('Back to the kitchen!');
col = color(129,178,154);
button1.style("background-color", col);
button1.style("color", "white");
button1.position(320,220);
button1.mousePressed(ScenePage);
}
//---------------------------------------------------
function india() {
//loads turmeric screen
turmeric = createImg("https://i.imgur.com/tj04pYa.jpg")
turmeric.position(-760,-760);
turmeric.style("transform", "scale(0.25)");
countryButtons();
}
//---------------------------------------------------
function japan(){
//loads miso screen
miso = createImg("https://i.imgur.com/A0mow9a.jpg")
miso.position(-760,-760);
miso.style("transform", "scale(0.25)");
countryButtons();
}
//---------------------------------------------------
function france(){
//loads france screen
foieGras = createImg("https://i.imgur.com/4OLHPzQ.jpg")
foieGras.position(-760,-760);
foieGras.style("transform", "scale(0.25)");
countryButtons();
}
//---------------------------------------------------
function brazil(){
//loads brazil screen
acai = createImg("https://i.imgur.com/H4gDOUD.jpg")
acai.position(-760,-760);
acai.style("transform", "scale(0.25)");
countryButtons();
}
//---------------------------------------------------
function countryButtons(){
//creates two sets of buttons on country screen to
//allow for less code to be used in each of the country slides.
button1 = createButton('Take home!');
button1.style("transform", "scale(0.8)");
button1.style("background-color", col);
button1.style("color", "white");
button1.position(170,310);
button1.mousePressed(WorldFoodPage);
button2 = createButton('All done!');
button2.style("transform", "scale(0.8)");
button2.style("background-color", col);
button2.style("color", "white");
button2.position(178, 370);
button2.mousePressed(gameLandingPage);
}
//---------------------------------------------------
function gameLandingPage(){
//makes sure the user is ready (lol)
uSure = createImg("https://i.imgur.com/9RFTHko.jpg");
uSure.position(-760,-760);
uSure.style("transform", "scale(0.25)");
button1 = createButton('Yes, I am ready!');
button1.style("background-color", col);
button1.style("color", "white");
button1.position(190,250);
button1.mousePressed(gameStartScreen);
button2 = createButton('No, not yet!');
button2.style("background-color", col);
button2.style("color", "white");
button2.position(200, 300);
button2.mousePressed(ScenePage);
}
//---------------------------------------------------
function gameStartScreen(){
//loads final screen of this part, instructing users to scroll
startup = createImg("https://i.imgur.com/duuVdOZ.jpg");
startup.position(-760,-760);
startup.style("transform", "scale(0.25)");
}
//---------------------------------------------------
/*15-104 final project
team members: rachel park (rsp1) and hamza qureshi (hqq)
section: b; e
CARL COOKS A MEAL*/
//setting global variables to use throughout the code
//for score
var score = 0;
//for falling objects
var speed = 10;
var canHit = true;
var x = 0;
var y = 0;
var s = 5;
//for key functions
var keyRIGHT= false;
var keyLEFT= false;
var moveRight = false;
var moveLeft = false;
//for frypan options
var onBasket = false;
//setting modes to use to run the functions
var beforeGame;
var endGame;
var beginning;
var ending;
//for arrays used in code
var fridge = [];
var ixs = [50,-50,350];
var iys = [-500, 0, -1000];
//to load frypan image
var frypan;
//---------------------------------------------------
//preloading images of foods and pushing into new array
function preload() {
var Foods = [
"https://i.imgur.com/WrAqBJF.png",
"https://i.imgur.com/F6VoqQ8.png",
"https://i.imgur.com/6Piz1HF.png",
"https://i.imgur.com/Qltr0uK.png"];
for (var i = 0; i < Foods.length; i++){
fridge.push(loadImage(Foods[i]));
}
}
//---------------------------------------------------
//setting up canvas and using modes
function setup () {
createCanvas(480, 480);
background(129,178,154);
beforeGame = true;
endGame = false;
frypan = loadImage("https://i.imgur.com/UdaokKr.png");
ending = loadImage("https://i.imgur.com/0EdDOXJ.jpg");
beginning = loadImage("https://i.imgur.com/crhULDP.jpg");
}
//---------------------------------------------------
//function to start game when any key is pressed
function keyPressed() {
beforeGame = false;
}
//---------------------------------------------------
//function to make frypan move as a gathering platform
function keyTyped() {
if (keyCode === LEFT_ARROW) {
keyLEFT = true;
} else if (keyCode === RIGHT_ARROW) {
keyRIGHT = true;
}
}
//---------------------------------------------------
//drawing the game by calling the other functions which make the visuals of the objects
function draw() {
if (beforeGame == true) {
push();
scale(0.24);
imageMode(CORNER);
image(beginning,0,0);
pop();
} else {
background(129,178,154);
BasketDraw();//drawing the frypan
foodDraw();//drawing the falling food objects
update();//updating the so that frypan moves with keys and food continuously falls onto canvas
displayScore();//displaying number of foods caught
}
if (endGame == true) {//displaying ending page when game is finished
push();
scale(0.24);
imageMode(CORNER);
image(ending,0,0);
pop();
}
}
//---------------------------------------------------
function reachBottom() {//ending the game when food hits limit
endGame = true;
}
//---------------------------------------------------
function displayScore() {//function to create the score
fill(0);
textSize(20);
text(("Score: " + this.score + " out of 30!"), 80, 23);
}
//--------------------------------------------------
function makeFood(length, xpos, ypos, space) {//class to draw the food objects
var food = {"l": length, "ix": xpos, "iy": ypos, "s": space}
food.draw = foodDraw;
return food;
}
//--------------------------------------------------
function foodDraw() {//drawing the foods
for (var i = 0; i < ixs.length; i++){
imageMode(CORNER);
canHit = true;
fill(255);
stroke(4);
image(fridge[i], this.ixs[i], this.iys[i]);
}
for (var i = 0; i < iys.length; i++) {
this.iys[i] += this.s/2
}
}
//---------------------------------------------------
function makeBasket(xpos,ypos,moveBasket) {//class to make the frypan (aka basket)
var Basket = {"x": xpos, "y": ypos}
Basket.draw = BasketDraw;
return Basket;
}
//---------------------------------------------------
function BasketDraw() {//drawing the basket
noStroke();
fill("#FFD581");
image(frypan,this.x, this.y + height-50);
}
//---------------------------------------------------
function update() {//function to update the objects and have them restart at top to be continuously moving
//for basket
if(keyIsDown(RIGHT_ARROW) & this.x < width-20){
this.x += speed;
print(x);
}
if (keyIsDown(LEFT_ARROW) & this.x > -20){
this.x -= speed;
print(x);
}
print(width)
//for food
for(var i = 0; i < iys.length; i++){
if (this.iys[i] >= height-80) {
if(this.ixs[i] > this.x - 100 & this.ixs[i] < this.x + 100) {
this.score++;
this.s ++;
if( this.score == 30) {
reachBottom();
}
}
this.iys[i] = random(-1000, -300);
this.ixs[i] = random(-300 ,width-40);
}
}
}
//---------------------------------------------------
As one might expect with almost 400 lines of code, there were a couple of roadblocks on the way. The biggest one was probably the marrying of the two parts to create one code, which we weren’t able to do. This is primarily because the first part uses the DOC library via buttons and commands like createImg, while the second part relies solely on p5. This caused difficulties in combining the two sets of code because they required a change in the HTML template to allow them to be combined. Once we were able to, the code wasn’t running as smoothly as we had intended. However, despite dividing them into these two parts, we were able to successfully create a unified game experience that uses two modes to reach a greater goal. For us, that’s a win!