[OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice https://courses.ideate.cmu.edu/15-104/f2017 Professor Roger B. Dannenberg • Fall 2017 • Introduction to Computing for Creative Practice Sat, 12 Sep 2020 00:19:01 +0000 en-US hourly 1 https://wordpress.org/?v=4.8.24 sjahania – final project https://courses.ideate.cmu.edu/15-104/f2017/2018/03/15/sjahania-final-project/ https://courses.ideate.cmu.edu/15-104/f2017/2018/03/15/sjahania-final-project/#respond Thu, 15 Mar 2018 23:23:05 +0000 https://courses.ideate.cmu.edu/15-104/f2017/?p=24902 Continue reading "sjahania – final project"]]>

sjahania-final-project

My project is a simple, interactive keyboard. They keys light up when you press them, and I included harmonics to make it sound more like a real piano.

Press on a key and the note will sound! You can click and drag in order to play more than one note quickly.

To run:
1. Download the file “sjahania-final-project”
2. Open “index.html” in your browser
3. Play away!

]]> https://courses.ideate.cmu.edu/15-104/f2017/2018/03/15/sjahania-final-project/feed/ 0 yunzhous_final project_resubmission https://courses.ideate.cmu.edu/15-104/f2017/2017/12/10/yunzhous_final-project_resubmission/ https://courses.ideate.cmu.edu/15-104/f2017/2017/12/10/yunzhous_final-project_resubmission/#respond Sun, 10 Dec 2017 20:47:13 +0000 https://courses.ideate.cmu.edu/15-104/f2017/?p=24815 Continue reading "yunzhous_final project_resubmission"]]>

I reposted this project so that audio file would work.

sketch

//Kathy Song
//Section D
//yunzhous@andrew.cmu.edu
//Final Project

var trees = [];
var treeWidth = 50;
var treeHeight = 67;
var FL = 380;//y position of finish line
var numMiss = 0;
var combo = 0;
var score = 0;
var happy = "https://i.imgur.com/vDITqlq.png";//happy charlie brown
var backImg = "https://i.imgur.com/4QArmk0.jpg";//background image
var gamescreen = "https://i.imgur.com/kLeHBF4.jpg";//start screen
var CharlieBrown = "https://i.imgur.com/8OMKsmc.png";
var ChristmasTree = "https://i.imgur.com/mQ5fO5A.png";
var drawScreen = 0;//determines if start screen should be drawn
var mySnd;//background music
var count = 1; //framecount after game starts
var gameEnd = false;//determines if game has ended

function preload(){
    mySnd = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/We-Wish-You-A-Merry-Christmas.wav");//background music
    mySnd.setVolume(0.5);
    backgroundImg = loadImage(backImg);
    screenImg = loadImage(gamescreen);
    CLImag = loadImage(CharlieBrown);
    treeImg = loadImage(ChristmasTree);
    happyImg = loadImage(happy);
}

function setup() {
    createCanvas(480, 480);
    if (drawScreen == 0){//initial screen
        image(screenImg, 0, 0);
        strokeWeight(2);
        stroke(255);
        fill(0);
        textSize(24);
        textAlign(CENTER);
        text("Click To Start", width/2, height - 40);
        text("CHARLIE BROWN'S", width/2, 50);
        text("CHRISTMAS TREE", width/2, 80);
    }
}

function draw() {
    if (count % 3150 == 0){//music ends
        gameEnd = true;//game ends
        text("Press R To Restart", width/2, height - 40);
        count = 1;//reset count to 1
    }

    if (drawScreen == 0){
        //nothing happens
    }
    else if (gameEnd == false) {//if not initial screen, and game hasn't end, do following
        count += 1;//count frames after game starts
        print(count);
        image(backgroundImg, 0, 0);
        strokeWeight(2);
        stroke(255);
        line(0, FL, width, FL);//finish line
        fill(0);
        textSize(20);
        text("Combo " + combo, width - 60, 30);
        text("Score " + score, width - 50, 60);
        treeFunctions();//trees dropping from sky
        addTree();
        var CLx = mouseX - 20;
        if (CLx > width){
            CLx = width - 50;
        }
        image(CLImag, CLx, FL);//charlie brown image with cursor
    }

}

function keyPressed(){
    if (keyCode == 82){//if R is pressed
        gameEnd = false;//gameEnd becomes false, game restart
        mySnd.play();//music restart
    }
}

function mousePressed(){//after mouse is pressed, draw screen becomes 1,
                        //initial screen disappears and music starts playing
  if (drawScreen == 0) {
    drawScreen = 1;
    mySnd.play();
  }
}

function makeTree(bx, by){//make tree object
    var tree = {x: bx,
                y: by,
                w:treeWidth,
                h:treeHeight,
                speed: 3,
                move: treeMove,
                display: treeDisplay,
                click:treeClick,
                miss:treeMiss,
                died: false,//after clicking on the tree, the tree dies and disappear
                counted: false,
                countedMiss: false,
    }
    return tree;
}


function treeDisplay(){//draw tree
    if(!this.died) {
        image(treeImg, this.x, this.y);
    }
}

function treeMove()  {
    this.y += this.speed;//move trees by speed

    //change tree speed and the game gets harder
    if (count > 560 & count < 1100) {
        this.speed = 5;
    }
    if (count > 1100 & count < 2000) {
        this.speed = 6;
    }
    if (count > 2000 & count < 3150) {
        this.speed = 7;
    }

}

function treeFunctions(){//update tree's position and display them
    for (var i = 0; i < trees.length; i++){
        trees[i].move();
        trees[i].display();
        trees[i].click();
        trees[i].miss();
    }
}

function addTree(){//add new trees
    var spacing = 40;

    if (count % 35 == 0) {
        trees.push(makeTree(30 + random(10) * spacing, 0));
    }

}

function treeClick(){
    //if click on tree, tree disappear
    if (mouseIsPressed & mouseX > this.x && mouseX< this.x + this.w && mouseY > this.y && mouseY < this.y + this.h){
        this.died = true;
    }
    //if click on tree at the finish line, get one point
    if (mouseIsPressed & mouseX > this.x && mouseX< this.x + this.w && this.y > FL - this.h && this.y < FL + this.h && !this.counted){
        image(happyImg, width - 50, FL);
        this.counted = true;
        combo += 1;
        score += 1;
    }
}

function treeMiss(){
    //if miss one tree, combo starts from 0
    if (this.y >= FL + 5 & !this.countedMiss && !this.counted){
        numMiss += 1;
        combo = 0;
        this.countedMiss = true;
    }
}

My final project a game called “Charlie Brown’s Christmas Tree”. Christmas trees would randomly drop form the sky and if the player clicks on the trees, they would disappear. However, the only way the player can get score is by clicking on the tree when it’s at the finish line. If the player continuously getting the tree he or she will receive a combo. If he or she missed one tree the combo would start from zero. The flash start with an start screen and the game only starts when players click on the screen. The game ends when the music ends, and if the players press “R” it will restart.

]]> https://courses.ideate.cmu.edu/15-104/f2017/2017/12/10/yunzhous_final-project_resubmission/feed/ 0 Sound Test https://courses.ideate.cmu.edu/15-104/f2017/2017/12/09/sound-test/ https://courses.ideate.cmu.edu/15-104/f2017/2017/12/09/sound-test/#respond Sun, 10 Dec 2017 04:00:27 +0000 https://courses.ideate.cmu.edu/15-104/f2017/?p=24830 Continue reading "Sound Test"]]>

Sound Test

type 1 2 3 4 to sketch to play sounds

playfour

var one, two, three, four;


function preload() {
    one = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/one.wav");
    two = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/two.wav");
    three = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/three.wav");
    four = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/four.wav");
}


function setup() {
    createCanvas(200, 200);
    background(200);
}

function keyPressed() {
    print("" + keyCode);
    if (keyCode == 49) one.play();
    else if (keyCode == 50) two.play();
    else if (keyCode == 51) three.play();
    else if (keyCode == 52) four.play();

}

]]> https://courses.ideate.cmu.edu/15-104/f2017/2017/12/09/sound-test/feed/ 0 keuchuka – final project https://courses.ideate.cmu.edu/15-104/f2017/2017/12/09/keuchuka-final-project/ https://courses.ideate.cmu.edu/15-104/f2017/2017/12/09/keuchuka-final-project/#respond Sat, 09 Dec 2017 21:16:23 +0000 https://courses.ideate.cmu.edu/15-104/f2017/?p=24733 Continue reading "keuchuka – final project"]]>

The video shows how the program should work – words said include “wind” “phone” “black” “yellow” “sock” “shoe” “roof” “ceiling” “cold” “warm” “wind” “water”.

I was trying to create some kind of fuzzy text or spoken word visualizer/analyzer, in a compositional landscape, using the p5.Speech library.
The width of the grayscale boxes is according to the letter of the word.
The morse code is a translation of the letters.
The text is a fuzzy recognition of the words, stretches according to the amplitude.
The ellipses are a representation of amplitude.
The voice recognition does not work too well, but overall I’m satisfied with the effect.

The project requires a local server to run due to the microphone components.
Instructions:
1. Download and extract FINAL PROJECT
2. Install node js
3. type npm install -g http-server into node terminal and enter
4. cd the extracted folder and enter
5. type http-server -c-1 and enter
6. node terminal will give you links
7. enter the link into a browser
8. file should run!

]]> https://courses.ideate.cmu.edu/15-104/f2017/2017/12/09/keuchuka-final-project/feed/ 0 hdw/tlai – Final Project https://courses.ideate.cmu.edu/15-104/f2017/2017/12/09/hdwtlai-final-project/ https://courses.ideate.cmu.edu/15-104/f2017/2017/12/09/hdwtlai-final-project/#respond Sat, 09 Dec 2017 19:18:48 +0000 https://courses.ideate.cmu.edu/15-104/f2017/?p=24786 Continue reading "hdw/tlai – Final Project"]]>

https://helenxwu.github.io/ –> link to game

https://drive.google.com/a/andrew.cmu.edu/file/d/1NQmUsm_kBniAq7vku2QIYw7QzBkgUOP_/view?usp=sharing –> link to zip file

How to run zip:
1) download file
2) move to desktop
3) open zip folder

4) On mac– open terminal (command+space and search “terminal”)

5) type in “python -m SimpleHTTPServer 8000”

6) go to browser–type in localhost:8000 where the URL would usually go

7) find desktop listing and click on it
8) find downloaded folder and click on it
9) file will load! 🙂

For our final project, Tiffany and I made a dance dance revolution game to the Mii remix. We delved into an entirely new library (the p5js sound extension) and learned a lot about different techniques for signal processing. For the main sound visualizer, we used Fast Fourier Transform algorithm (FFT) to sample the music files’ signals over a period of time, and divided its frequency components to create the bouncing colors that react and move according to note and rhythm.

Additionally, we mapped the volume controls to create new objects under an object function, to randomly generate 4 different types of arrows. We then set a range for the function to work under so the score counter could add points. We also created a start screen and end screen for the game under two separate functions.

]]> https://courses.ideate.cmu.edu/15-104/f2017/2017/12/09/hdwtlai-final-project/feed/ 0 merlebac Fixed Project (Fixed) https://courses.ideate.cmu.edu/15-104/f2017/2017/12/09/merlebac-fixed-project-fixed/ https://courses.ideate.cmu.edu/15-104/f2017/2017/12/09/merlebac-fixed-project-fixed/#respond Sat, 09 Dec 2017 15:25:07 +0000 https://courses.ideate.cmu.edu/15-104/f2017/?p=24771 Continue reading "merlebac Fixed Project (Fixed)"]]>

Rwanda Survivor Testimonies

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

}

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

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

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

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

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

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

]]> https://courses.ideate.cmu.edu/15-104/f2017/2017/12/09/merlebac-fixed-project-fixed/feed/ 0 thlai/hdw – Project 12 – Final https://courses.ideate.cmu.edu/15-104/f2017/2017/12/09/24687/ https://courses.ideate.cmu.edu/15-104/f2017/2017/12/09/24687/#respond Sat, 09 Dec 2017 05:03:21 +0000 https://courses.ideate.cmu.edu/15-104/f2017/?p=24687 Continue reading "thlai/hdw – Project 12 – Final"]]>

sketch

// Tiffany Lai (thlai) & Helen Wu (hdw)
// 15-104, Section A
// Project 12 - Final

//var font; // variable for font
var music; // variable for music
var fft; // variable for p5.FFT library
var amp; // variable for p5.Amplitude library
var leftArrows = [];
var opacity = 255;
var scoreCount = 0;
var playMode = 0;

function preload() {
  //font = loadFont('font/slkscr.ttf'); // load font 'silk screen'
  music = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/music-2.mp3"); // load music
}

function setup() {
  createCanvas(480, 480);
  fft = new p5.FFT(0.9, 256); // load p5.FFT library
  amp = new p5.Amplitude(); // load p5.Amplitude
}

function draw() {
  background(22, 35, 42);
  circleBeat(); // background sound visualization
  displayTriangles(); // display top triangles
  moveTriangles(); // top triangles go down when pressing specific keys
  generateArrows();

  for (var i = 0; i < leftArrows.length; i++) {
    leftArrows[i].move();
    leftArrows[i].render();
    if (leftArrows[i].y < -500) {
      leftArrows.shift();
    }
  }
  scoreCounter(); // score counter
  endScreen();
  startScreen();
}

//start screen
function startScreen() {
    fill(255, 56, 115, opacity);
    rect(0,0,width,height);
    textSize(12);
      if (frameCount%2 == 0){
        fill(255,opacity);
        //textFont(font);
        textAlign(CENTER);
        textSize(12);
        text("CLICK TO PLAY", width/2, height/2);
    }
}


//music plays
function mouseClicked() {
  displayTriangles(); // display main triangles
  opacity = 0;
  moveTriangles();
  if (playMode == 0) {
    music.play();
    playMode = 'sustain';
  } else {
    playMode = 0;
    music.stop();
   }
}

// background sound visualization
function circleBeat() {
  var spectrum = fft.analyze(); // analyze music spectrum
  // drawing the circle
  push();
  translate(width/2, height/2);
    for (var i = 0; i <  spectrum.length; i++) {
      var angle = map(i, 0, spectrum.length, 0, 360); // map spectrum to degrees
      var spec = spectrum[i];
      var r = 2 * map(spec, 0, 256, 20, 100);
      var x = r * cos(angle);
      var y = r * sin(angle);

      fill(200, i*3, i*5); // fill with gradient
      noStroke();
      ellipse(x, y, 3, 3); // tiny center circles
    }
  pop();
}

//==========CREATE TOP TRIANGLES ==========//
// make triangles object
function makeTriangles (l, d, u, r) {
  var triangles = {
    left: l,
    down: d,
    up: u,
    right: r,
    display: displayTriangles,
    move: moveTriangles
  }
  return triangles;
}

// display triangles
function displayTriangles() {
  fill(255);
  noStroke();
  // draw four anchor triangles
  triangle(115, this.l+66, 154, this.l+88, 154, this.l+44); // left
  triangle(185, this.d+53, 207, this.d+92, 229, this.d+53); // down
  triangle(272, this.u+40, 250, this.u+79, 295, this.u+79); // up
  triangle(325, this.r+44, 325, this.r+89, 364, this.r+66); // right

  // draw 3D part of anchor triangles
  fill(116, 136, 133);
  quad(115, this.l+66, 154, this.l+88, 154, 93, 115, 71); // left
  quad(250, this.u+79, 295, this.u+79, 295, 85, 250, 85); // up
  fill(230, 160, 133);
  quad(185, this.d+53, 185, 62, 207, 102, 207, this.d+92); // down (left)
  quad(207, this.d+92, 207, 102, 229, 62, 229, this.d+53); // down (right)
  quad(325, this.r+89, 325, 94, 364, 71, 364, this.r+66); // right
}

function moveTriangles(){
  // move triangles down when you press specific arrow key
  if (keyIsDown(LEFT_ARROW)) {
    this.l = 3;
  } else if (keyIsDown(DOWN_ARROW)) {
    this.d = 5;
  } else if (keyIsDown(UP_ARROW)) {
    this.u = 4;
  } else if (keyIsDown(RIGHT_ARROW)) {
    this.r = 3;
  } else {
    this.l = 0;
    this.d = 0;
    this.u = 0;
    this.r = 0;
  }
}

//========== GENERATE ARROWS ==========//
function makeArrows(aX, aY, spd, rot) {
  var arrows = {
    x: aX,
    y: aY,
    speed: spd,
    rotateArrow: rot,
    move: moveArrows,
    render: displayArrows,
    generate: generateArrows
  }
  return arrows;
}

function displayArrows() {
  push();
  stroke(0, 200, 200);
  strokeWeight(5);
  noFill();
  translate(this.x, this.y);
  rotate(this.rotateArrow);
  triangle(115, 66, 154, 88, 154, 44);
  pop();
  //triangle(this.x+115, this.y+66, this.x+154, this.y+88, this.x+154, this.y+44);
}

function moveArrows() { // speed of clouds
	this.y -= this.speed;
}

function generateArrows() {
  var vol = amp.getLevel();

  if ((vol > 0.33 & vol < 0.34) || (vol > 0.18 && vol < 0.2) || (vol > 0.03 && vol < 0.032)) {
    var randomizer = int(random(0,4)); // if the volume level is over 0.3
    if(randomizer == 0){
      var newArrow = new makeArrows(0, 420, 4, 0); // make new arrow object
      leftArrows.push(newArrow);
    }

    if (randomizer == 1) {
      var newArrow = new makeArrows(140, 840, 4, 3/2*PI); // make new arrow object
      leftArrows.push(newArrow);
    }

    if (randomizer == 2) {
      var newArrow = new makeArrows(340, 420, 4, 1/2*PI); // make new arrow object
      leftArrows.push(newArrow);
    }

    if (randomizer == 3) {
      var newArrow = new makeArrows(480, 840, 4, PI); // make new arrow object
      leftArrows.push(newArrow);
    }
  }
}

function endScreen() {
  if (music.isPlaying() ) {
    var endOpacity = 0;

  } else {fill(255, 56, 115, endOpacity);
    var endOpacity = 255;
    rect(0, 0, width, height);
    textSize(12);
      if (frameCount%2 == 0){
        fill(255,endOpacity);
        textFont(font);
        textAlign(CENTER);
        textSize(12);
        text("GAME OVER", width/2, height/2);
        text("SCORE: " + scoreCount, width/2, height/2+20);
    }
  }
}

// ========== COUNTER ========== //
function scoreCounter() {
  // draw borders on screen
  noStroke();
  fill(110, 120, 120);
  rect(0, 0, width, 7);
  rect(0, 0, 7, height);
  rect(0, height-7, width, 7);
  rect(width-7, 0, 7, height);
  fill(116, 136, 133);
  quad(182, height, 187, height-25, 292, height-25, 297, height);

  fill(255);
  text("SCORE: " + scoreCount, width/2, 472);
  for (var i = 0; i < leftArrows.length; i++) {
    if((keyIsDown(LEFT_ARROW))) {
      if (leftArrows[i].y > -10 & leftArrows[i].y < 30 && (leftArrows[i].x ==0)) {
        scoreCount = scoreCount + 10;
        leftArrows.shift();
      }
    }
    if(keyIsDown(DOWN_ARROW)){
      if (leftArrows[i].y > 180 & leftArrows[i].y < 220 && (leftArrows[i].x == 140)) {
        scoreCount = scoreCount + 10;
        leftArrows.shift();
      }
    }

    if(keyIsDown(UP_ARROW)){
      if (leftArrows[i].y > -90 & leftArrows[i].y < -50 && (leftArrows[i].x == 340)) {
        scoreCount = scoreCount + 10;
        leftArrows.shift();
      }
    }

    if(keyIsDown(RIGHT_ARROW)){
      if (leftArrows[i].y > 110 & leftArrows[i].y < 150 && (leftArrows[i].x == 480)) {
        scoreCount = scoreCount + 10;
        leftArrows.shift();
      }
    }

}
}

]]> https://courses.ideate.cmu.edu/15-104/f2017/2017/12/09/24687/feed/ 0 myoungsh-finalproject-babyphotoshop https://courses.ideate.cmu.edu/15-104/f2017/2017/12/08/myoungsh-finalproject-babyphotoshop/ https://courses.ideate.cmu.edu/15-104/f2017/2017/12/08/myoungsh-finalproject-babyphotoshop/#respond Sat, 09 Dec 2017 04:59:46 +0000 https://courses.ideate.cmu.edu/15-104/f2017/?p=24655

Baby Photoshop

I did not embed the code because of the pixel size as well as multiple files the code loads. This is my final project in a .zip file. It includes multiple photos, but more importantly a font file that I couldn’t link in any way other than the file.

]]> https://courses.ideate.cmu.edu/15-104/f2017/2017/12/08/myoungsh-finalproject-babyphotoshop/feed/ 0 Sheenu-Final Project https://courses.ideate.cmu.edu/15-104/f2017/2017/12/08/sheenu-final-project/ https://courses.ideate.cmu.edu/15-104/f2017/2017/12/08/sheenu-final-project/#respond Sat, 09 Dec 2017 04:58:48 +0000 https://courses.ideate.cmu.edu/15-104/f2017/?p=24667 Continue reading "Sheenu-Final Project"]]>

Because it can’t be viewed properly on WordPress, please download the file.

I was always fascinated in animation ever since I was little and I always wanted to create something that would help introduce people to making animations. I made this so anyone at any age can know or get the idea and possibly get inspired.

SAMPLE:

Instructions:

  1. Adjust your character to your preferred position. Please move the character slowly.
  2. Save the frame
  3. Adjust your character very slightly little by little and save the frame every time
  4. You can view your animation forward and backward by pressing and holding one of the arrow buttons.

sketch
FinalProject-DOWNLOAD

//Sheenu You
//Section E
//sheenuy@andrew.cmu.edu; 
//Final Project

//Initial X and Y coordinates for the Ragdoll Bodyparts 
var charx = 640;
var chary = 380;
var hedx = 640;
var hedy = 220;
var arlx = 640 - 160;
var arly = 380;
var arrx = 640 + 160;
var arry = 380;
var brlx = 640 - 80;
var brly = 650;
var brrx = 640 + 80;
var brry = 650;

//Arrays that register all the X Y coordinates of all the bodyparts
var xb = [];
var yb = [];
var xh = [];
var yh = [];
var xal = [];
var yal = [];
var xar = [];
var yar = [];
var xbl = [];
var ybl = [];
var xbr = [];
var ybr = [];

//Variables that track animation frames
var frameNumber = -1;
var frames = 0;

//Variables that test if functions are running. 
var initialized = 0;
var forward = 0;
var backward = 0;

function setup() {
    createCanvas(1280, 720);
    background(220);
    frameRate(24);
}

function draw() {
    noStroke();
	
    //Controls drawing of buttons
    var playing = 0;
    var blockyMath = 100;
    var distance = 150;

    background(255, 245, 195);

    body();

    fill(124, 120, 106);
    textSize(20);
    text("FRAMES: " + frames, 5, 20);

    //Draws NewFrame Button
    fill(252, 223, 135);
    rect(width/2 - 10, 80 + 10, 180, 100);
    fill(141, 205, 193);
    rect(width/2, 80, 180, 100);
	
    //Draws Play/Stop Button
    fill(252, 223, 135);
    rect((width/2) - distance - 10, 80 + 10, blockyMath, blockyMath);
    fill(235, 110, 68);
    rect((width/2) - distance, 80, blockyMath, blockyMath);
	
    //Fills triangle if one frame is made 
    if (frames >= 1){
        fill(255);
	} else { 
        fill(231, 80, 29);
	}
    triangle((width/2) - distance + 40, 40, (width/2) - distance + 40, 120, (width/2) - distance - 40, 80);
    push();
        fill(255);
        textSize(30);
        text("ADD", 610, 75);
        text("FRAME", 590, 110);
    pop();
	
	//Draws Rewind/Stop Button
    fill(252, 223, 135);
    rect((width/2) + distance - 10, 80 + 10, blockyMath, blockyMath);
    fill(211, 227, 151);
    rect((width/2) + distance, 80, blockyMath, blockyMath);
    if (frames >= 1){
        fill(255);
    } else { 
        fill(182, 204, 104);
    }
    triangle((width/2) + distance - 40, 40, (width/2) + distance - 40, 120, (width/2) + distance + 40, 80);
	
	//PLAY/Stop Button Functions-Cycles forward through frames if mouse is pressing the button 
    if (mouseX >= ((width/2) + distance - blockyMath/2) & mouseX <= ((width/2) + 
        distance + blockyMath/2) && mouseY >= 30 && mouseY <= 135 && mouseIsPressed && frames >= 1){
        frameNumber += 1
		//Cycles through all arrays
        charx = xb[frameNumber];
        chary = yb[frameNumber];

        hedx = xh[frameNumber];
        hedy = yh[frameNumber];

        arlx = xal[frameNumber];
        arly = yal[frameNumber];

        arrx = xar[frameNumber];
        arry = yar[frameNumber];

        brlx = xbl[frameNumber];
        brly = ybl[frameNumber];

        brrx = xbr[frameNumber];
        brry = ybr[frameNumber];

        playing = 1;
        initialized = 1;
        forward = 1;
		//Goes back to latest frame when mouse is released.
    } else if (forward == 1){
        frameNumber =xb.length - 1
        playing = 0;
        initialized = 0;
        forward = 0;
    }

	//REWIND/Stop Button Functions-Cycles backward through frames if mouse is pressing the button 
    if (mouseX >= ((width/2) - distance - blockyMath/2) & mouseX <= ((width/2) - distance + 
        blockyMath/2) && mouseY >= 30 && mouseY <= 135 && mouseIsPressed && frames >= 1){
        frameNumber -= 1;
		//Cycles through all arrays
        charx = xb[frameNumber];
        chary = yb[frameNumber];

        hedx = xh[frameNumber];
        hedy = yh[frameNumber];

        arlx = xal[frameNumber];
        arly = yal[frameNumber];

        arrx = xar[frameNumber];
        arry = yar[frameNumber];

        brlx = xbl[frameNumber];
        brly = ybl[frameNumber];

        brrx = xbr[frameNumber];
        brry = ybr[frameNumber];
        initialized = 1;
        playing = 1;
        backward = 1;
		//Goes back to latest frame when mouse is released.
    } else if (backward == 1){
        frameNumber = xb.length - 1
        playing = 0;
        initialized = 0;
        backward = 0;
    }

	//Allows frames to loop when animation is going forward
    if (frameNumber >= xb.length - 1 & playing == 1 && forward == 1){
        frameNumber = -1;
    }
	//Allows frame to loop when animation is going backward
    if (frameNumber <= 0 & backward == 1 && playing == 1){
        frameNumber = xb.length;
    }

}

//Draws Ragdoll 
function body(){
	
	//Shadow
    fill(252, 223, 135);
    ellipse(charx, 670, (chary/2) + 100, 30);
	
	//Ligaments
    //Neck
    push();
    stroke(249, 213, 151);
    strokeWeight(30);
    line(charx, chary - 80, hedx, hedy);
    stroke(190, 228, 171);
    
    //ArmLeft
    line(charx, chary - 80, arlx, arly);
    
    //ArmRight
    line(charx, chary - 80, arrx, arry);
    stroke(88, 203, 172);
    
    //FootLeft
    line(charx - 20, chary + 70, brlx, brly);
   
    //FootRight
    line(charx + 20, chary + 70, brrx, brry);
    pop();

    noStroke();
    rectMode(CENTER);
    
    //Head 
    fill(249, 213, 151);
    ellipse(hedx, hedy, 100, 100);
    fill(80);
    ellipse(hedx - 10, hedy - 10, 10, 20);
    ellipse(hedx + 10, hedy - 10, 10, 20);
    ellipse(hedx, hedy + 20, 30, 30);
    fill(249, 213, 151);
    ellipse(hedx, hedy + 15, 30, 30);
   
    //Left Arm
    fill(249, 213, 151);
    ellipse(arlx, arly, 50, 50);
  
    //Right Arm
    fill(249, 213, 151);
    ellipse(arrx, arry, 50, 50);
 
    //Left Foot
    fill(112, 47, 53);
    rect(brlx, brly, 50, 50);
  
    //Right Foot
    fill(112, 47, 53);
    rect(brrx, brry, 50, 50);
   
     //Character
    fill(190, 228, 171);
    rect(charx, chary, 100, 200);
    fill(88, 203, 172);
    rect(charx, chary + 50, 100, 100);
    fill(88, 203, 172);
    rect(charx + 30, chary - 50, 20, 100);
    rect(charx - 30, chary - 50, 20, 100);

    //MouseDrag Body
    if (mouseX >= charx - 50 & mouseX <= charx + 50 && mouseY >= chary - 100 && mouseY <= chary + 100 && mouseIsPressed){
        charx = mouseX;
        chary = mouseY;
    }
    //MouseDrag Head
    if (mouseX >= hedx - 50 & mouseX <= hedx + 50 && mouseY >= hedy - 50 && mouseY <= hedy + 50 && mouseIsPressed){
        hedx = mouseX;
        hedy = mouseY;
    } 
    //MouseDrag Left Arm
    if (mouseX >= arlx - 25 & mouseX <= arlx + 25 && mouseY >= arly - 25 && mouseY <= arly + 25&& mouseIsPressed){
        arlx = mouseX;
        arly = mouseY;
    }
    //MouseDrag Right Arm
    if (mouseX >= arrx - 25 & mouseX <= arrx + 25 && mouseY >= arry - 25 && mouseY <= arry + 25 && mouseIsPressed){
        arrx = mouseX;
        arry = mouseY;
    }
    //MouseDrag Left Foot
    if (mouseX >= brlx - 25 & mouseX <= brlx + 25 && mouseY >= brly - 25 && mouseY <= brly + 25 && mouseIsPressed){
        brlx = mouseX;
        brly = mouseY;
    }
    //MouseDrag Right Foot
    if (mouseX >= brrx - 25 & mouseX <= brrx +25 && mouseY >= brry - 25 && mouseY <= brry + 25 && mouseIsPressed){
        brrx = mouseX;
        brry = mouseY;
    }

}
function mousePressed(){
	//Register/records character coordinates to new frame when "New Frame" button is pressed
    if (mouseX >= (width/2) - 90 & mouseX <= (width/2) + 90 && mouseY >= 30 && mouseY <= 135 && mouseIsPressed){
    frameNumber += 1
    frames += 1
	
	//Push character coordinates to x y arrays.
    xb.push(charx);
    yb.push(chary);

    xh.push(hedx);
    yh.push(hedy);

    xal.push(arlx);
    yal.push(arly);

    xar.push(arrx);
    yar.push(arry);

    xbl.push(brlx);
    ybl.push(brly);

    xbr.push(brrx);
    ybr.push(brry);

	//Flash
    background(255, 0, 0, 90);
	}

}
//Resets all body parts to x y coordinates of last frame created when mouse is released
//and cycling is over. 
function mouseReleased(){
    if (initialized == 1){
        charx = xb[xb.length - 1];
        chary = yb[yb.length - 1];

        hedx = xh[xh.length - 1];
        hedy = yh[yh.length - 1];
 
        arlx = xal[xal.length - 1];
        arly = yal[yal.length - 1];

        arrx = xar[xar.length - 1];
        arry = yar[yar.length - 1];

        brlx = xbl[xbl.length - 1];
        brly = ybl[ybl.length - 1];

        brrx = xbr[xbr.length - 1];
        brry = ybr[ybr.length - 1];
    }
}

Because it can’t be viewed properly on WordPress, please download the file.

 

]]> https://courses.ideate.cmu.edu/15-104/f2017/2017/12/08/sheenu-final-project/feed/ 0 juyeonk – Final Project https://courses.ideate.cmu.edu/15-104/f2017/2017/12/08/juyeonk-final-project/ https://courses.ideate.cmu.edu/15-104/f2017/2017/12/08/juyeonk-final-project/#comments Sat, 09 Dec 2017 04:58:47 +0000 https://courses.ideate.cmu.edu/15-104/f2017/?p=24592 Continue reading "juyeonk – Final Project"]]>

For this project I wanted to create a game, but not one of those kinds where you feel anxious and competitive while playing the game.

So I created this game where you can enjoy the winter scenery and a cute dog running while given a bit of an entertainment of being able to move around the dog and its sled to collect the presents.

 

How to:

Use the left/right arrow keys to move around the dog and its sled.

Use the space bar to generate more presents (will be falling from the sky)

NEVER HOLD THE KEY DOWN!!!

The sliding motion of the presents was to re-enact the real time inertia of the objects.

 

sketch

//Claire Koh
//juyeonk@andrew.cmu.edu
//Section E
//Final Project

var frames = []; // An array to store the puppy images
var x = 0; // Variable to draw out an image from the array

var houses = []; // An array to store the house images
var housepics = []; // Array to store the passing by houses

var terrainSpeed = 0.0015;
var terrainDetail = 0.01;
var stars = []; // Array to store the snowflakes

var puppyX = 270; // Initial x position of the puppy
var puppyY = 330; // Initial y position of the puppy (remains the same throughout)

var presents = []; //Array to store the newly created presents



function setup() {
    createCanvas(600, 426);
    frameRate(13)
    // Creates the snowflakes at the beginning
    for (var g = 0; g < 150; g ++) {
        var ry = random(width);
        stars[g] = makeStar(ry);
    }
    
    // Creates the houses at the beginning
    var x = 0;
    for(var i = 0; i < 4; i++) {
        var newHouse = new House();
        newHouse.image = housepics[i];
        newHouse.x = x;
        if(i == 2) {
            newHouse.width = 300;
            newHouse.y = 120;
        }
        x += 300;
        houses.push(newHouse);
    }
    
    
    // Creates the presents at the beginning
    for (i = 0; i <= width; i +=40) {
        presents.push(new Present());
    }
}
 
 
function preload(){
    
    var filenames = [];
    filenames[0] = "https://i.imgur.com/Dv85eeW.png";
    filenames[1] = "https://i.imgur.com/kRjE8sW.png";
    filenames[2] = "https://i.imgur.com/AZLU597.png";
    filenames[3] = "https://i.imgur.com/8wakuK8.png";
    filenames[4] = "https://i.imgur.com/7mD1cW9.png";
    filenames[5] = "https://i.imgur.com/tqUCgkx.png";
    filenames[6] = "https://i.imgur.com/yQ4WaYh.png";
    
    //Loads the images into the frames[] array
    for (var i = 0; i < filenames.length; i ++) {
        frames[i]= loadImage(filenames[i]);
    }

    
    var housepic =[];
    housepic[0] = "https://i.imgur.com/RNMEypc.png";
    housepic[1] = "https://i.imgur.com/NgL94xZ.png";
    housepic[2] = "https://i.imgur.com/TRsZkpd.png";
    housepic[3] = "https://i.imgur.com/X6qFGHM.png";
    housepic[4] = "https://i.imgur.com/TKd1cpX.png";
    housepic[5] = "https://i.imgur.com/uVz8Spc.png";

    // Loads teh images into the housepics[] array
    for (var j = 0; j < housepic.length; j ++) {
        housepics[j] = loadImage(housepic[j]);
    }
}
    


function draw() {
    background(200);
    
    var sky1 = color(27, 36, 49);
    var sky2 = color(30, 55, 92);
   

    for (var c = 0; c <= height; c += 1) {
        var amt = map(c, 0, height/2, 0, 1);
        var skygradient1 = lerpColor(sky1, sky2, amt);
        noStroke();
        fill(skygradient1);
        rect(0, c, width, 1);
    }
        
    
    for (var i = houses.length-1; i>=0; i--){
        houses[i].render();
        houses[i].move();  
    }
    
    createHillShadow();
    createHill();
    
    //SLED
    stroke(0);
    strokeWeight(1);
    line(puppyX-10, puppyY+68, puppyX+25, puppyY+50)
    push();
    noStroke();
    
    fill(112, 100, 35);
    ellipse(puppyX-10, puppyY+68, 8);
    
    strokeWeight(8);
    stroke(112,100,35);
    
    line(puppyX-100, puppyY+50, puppyX-80, puppyY+67.5);
    
    noStroke();
    rect(puppyX-80, puppyY+64, 70, 8);
    pop();
    
    
    
    //PUPPY
    image(frames[x], puppyX, puppyY, 90, 90);
        x += 1;
            if (x > 6) {
                x = 0;
            } 
     
    for (var i = 0; i < presents.length; i++) {
        presents[i].draw();
        presents[i].move();
        presents[i].update();
    }
    
    //SNOW
    updateAndDisplayStars();
    removeStarsThatHaveSlippedOutOfView();
    addNewStarsWithSomeRandomProbability();
    
    
    //INSTRUCTIONS
    push();
    if (frameCount < 50) {
        fill(255);
        textAlign(CENTER);
        text("Use left/right arrow keys to move the puppy", width/2, height/2 - 40)
        text("Press the spacebar to generate more presents", width/2, height/2 - 20)
        text("Try to collect as many presents as you want but you don't have to!", width/2, height/2)
    pop();
    }
    

}



// Function to create the presents
function Present() {
    this.x = random(width);
    this.y = -50;
    this.width = this.height = 20;
    this.velocity = random(1,5);
    this.R = random(100,255);
    this.G = random(100, 255);
    this.B = random(100, 255);
    this.w = -20
    this.draw = function() {
        noStroke();
        fill(this.R,this.G,this.B,200)
        rect(this.x, this.y, this.width, this.height);
        push();
        stroke(255);
        line(this.x, this.y+10, this.x + this.width, this.y + 10)
        line(this.x + 10, this.y, this.x + 10, this.y + this.width)
        pop();
    }
    
    this.move = function() {
        this.y += this.velocity;
        
    }
    
    this.update = function() {
        if (this.y >= height-52 & this.y <= height && abs((puppyX-50)-this.x) < 40) {
            this.y = height-52;
            this.velocity = 0;
        }
        if (keyIsDown(LEFT_ARROW) & this.velocity == 0) {
            this.x -= 10;
        }
        
        if (keyIsDown(RIGHT_ARROW) & this.velocity == 0) {
            this.x += 10;
        }
    }        
}



function keyPressed(){
    // Generates more presents
    if (keyCode === 32) {
        for (i = 0; i <= width; i +=40) {
            presents.push(new Present());
        }
    }
    // Moves the puppy with the left/right arrow keys
    if (keyCode === LEFT_ARROW) {
        puppyX -= 10;
        if (Present.velocity == 0) {
            presents[i].x -= 10;
        }
    }
    if (keyCode === RIGHT_ARROW) {
        puppyX += 10;
        if (Present.velocity == 0) {
            presents[i].x += 10
        }
    }
    
    
}




// Draws House 
function House(){
    this.x = width;
    this.y = 180;
    this.width = 200;
    this.speed = 6;
    this.image;

    this.render = function(){
        image(this.image,this.x, this.y, this.width, this.width);
    }
    
    this.move = function(){
        this.x -= this.speed;
        if (this.x < -200) {
            this.x = width + 100;
        }
     
        this.remove = function() {
            if (this.x < -150) {
                return true;
            } 
            else {
                return false;
            }
        }
    }
}



//BACKGROUND ELEMENTS

// Draws the snowflakes
function updateAndDisplayStars(){
    // Update the lantern's positions, and display them.
    for (var i = 0; i < stars.length; i++){
        stars[i].move();
        stars[i].display();
    }
}


function removeStarsThatHaveSlippedOutOfView(){
    var starsToKeep = [];
    for (var i = 0; i < stars.length; i++){
        if (stars[i].x> 0) {
            starsToKeep.push(stars[i]);
        }
    }
    stars = starsToKeep;
}


function addNewStarsWithSomeRandomProbability() {
    // With some possibility, add new snowflakes
    var newStarLikelihood = 0.8;  
    if (random(0,1) < newStarLikelihood) {
        stars.push(makeStar(width));
    }
}


// Makes the snowflakes move
function starMove() {
    this.x -= this.speed*1.2;
}
    

// Draws the snowflakes
function starDisplay() {
    noStroke()
    fill(255, this.transparency);
    ellipse(this.breadth, this.x, this.size)
}


function makeStar(birthLocationX) {
    var star = {x: birthLocationX,
                y: random(10,70),
                breadth: random(width),
                breadthy: random(height),
                speed: random(0.1,4),
                move: starMove,
                display: starDisplay,
                size: random(2,7),
                transparency: random(150, 255)
               }
    return star;
}



// Creates the shadow of the hill
function createHillShadow() {
    var noiseScale = 0.001;
    var forestDetail = 0.0005;
    var forestSpeed = 0.0005;

    for (var g = 0; g < width; g++) {
        h = (g * forestDetail * 7 + millis() * forestSpeed/8);
        i = map(noise(h), 0, 1, 40, 100);
           stroke(30,70);
           line(g, i+200, g, height-80);
    }  
}


// Creates the hill
function createHill() {
    var noiseScale = 0.001;
    var forestDetail = 0.0005;
    var forestSpeed = 0.0005;

    for (var g = 0; g < width; g++) {
        h = (g * forestDetail * 8 + millis() * forestSpeed/4);
        i = map(noise(h), 0, 1, 40, 100);
           stroke(255);
           line(g, i+250, g, height);
    }  
}

]]> https://courses.ideate.cmu.edu/15-104/f2017/2017/12/08/juyeonk-final-project/feed/ 1