Category: Section D

Final

//Daphne Lee
//15-104::1 (9:30am) Section D
//daphnel@andrew.cmu.edu
//Final-Project

//x is x location of ball;
//y is y location of ball;
var x = 200;
var y = 200;
var dirx = 1;
var diry = 5;
var speed = 0.75;
var paddleWidth = 75;
var paddleHeight = 10;
var ballDiam = 20;
var score = 0;
var lives = 3;
var scaled = 0.6;

var blockRowCount = 4;
var blockColCount = 13;
var blockWidth = 50;
var blockHeight = 20;
var blockPadding = 10;
var blockOffsetX = 30;
var blockOffsetY = 10;

var blockXArr = [];
var blockYArr = [];
var statusArr = [];
var started = false;

//preloaded items
var bg;
var girlLeft;
var girlRight;
var girlYPosition = 150;
var girlsSize = 100;
var press;
var enter;

function preload() {
    bg = loadImage("https://i.imgur.com/kElOb6m.jpg");
        //items on the start page before game starts
        if(started==false){
            press = loadImage("https://i.imgur.com/kbAP99M.png");
            enter = loadImage("https://i.imgur.com/4ijF2zc.png")
            // the girl gifs on the start screen
            girlLeft = createImg("https://i.imgur.com/IjEVc03.gif");
            girlLeft.position(150 * scaled, girlYPosition * scaled);
            girlLeft.size(girlsSize, girlsSize)
            girlRight = createImg("https://i.imgur.com/IjEVc03.gif");
            girlRight.position(500 * scaled, girlYPosition * scaled);
            girlRight.size(girlsSize, girlsSize);
        }
}

function setup() {
    createCanvas(800, 400);
    for(var i = 0; i < blockRowCount * blockColCount; i++) {
        //status makes sure if blocks disappear or remain
        statusArr.push(1);
    }
}

function collision(){
    for(var c = 0; c < blockColCount; c++){
        for(var r = 0; r < blockRowCount; r++){
            if(statusArr[r * blockColCount + c] == 1) {
                var radius = ballDiam / 2;

                //creating the blocks;
                var blockX = c * (blockWidth + blockPadding) + radius
                var blockY = r * (blockHeight + blockPadding) + radius;

                //collision points for each block;
                var minXCollide = blockX - radius;
                var maxXCollide = blockX + radius + blockWidth;
                var minYCollide = blockY - radius;
                var maxYCollide = blockY + radius + blockHeight;

                var collidesX = (x > minXCollide & x < maxXCollide);
                var collidesY = (y > minYCollide & y < maxYCollide)

                //what happens as a result of the collision;
                if(collidesX & collidesY) {
                    diry = -diry;
                    score++;
                    statusArr[r * blockColCount + c] = 0;
                }
            }
        }
    }
}

function countScore(){
    stroke(255);
    strokeWeight(1);
    textSize(15);
    //gives you a score when you lose
    text("Score: " + score, width - 70, height - 10);
}

function drawLives(){
    stroke(255);
    strokeWeight(1);
    textSize(15);
    //shows you the number of lives you have
    text("Lives: " + lives, 10, height - 10);
}

//creating the end result of what happens if you destroy all the blocks
function congrats(){
    if(score == blockColCount * blockRowCount){
        fill("lavender");
        textStyle(BOLD);
        textFont("cursive", 50);
        text("Congratulations You Won!", 120, 200);
    }
}

function draw() {
    scale(scaled);
    background(bg);
    noStroke();
    var textWidth = 150;
    var textHeight = 50;

    //creates the beginning press enter text before the game starts
    if(started == false){
        image(press, 340, 150, textWidth, textHeight);
        image(enter, 340, 210, textWidth, textHeight);
    }

    if(started){
        //ping pong ball
        rectMode(CENTER);
        fill(255);
        ellipse(x, y, ballDiam, ballDiam);

        //the paddle on the bottom
        fill(100, 300);
        rect(mouseX * scaled * 3, height - paddleHeight, paddleWidth,
        paddleHeight);

        //moves the ball
        x += dirx * speed;
        y += diry * speed;

        //left and right wall boundaries
        if(x > width - ballDiam / 2 || x < ballDiam / 2) {
            dirx = -dirx;
        }
        //top wall boundary
        if(y < ballDiam / 2){
            diry = -diry;
        }

        // else if(y > height + ballDiam / 2){
        if(lives > 0 & y > height + ballDiam / 2){
            x = width / 2;
            y = height / 2;
            lives --;
        } else if(lives == 0){
            speed = 0;
            stroke(0);
            fill("lavender");
            textStyle(BOLD);
            textFont("cursive", 50);
            //creating text to show if you fail to complete game
            text("GAME OVER", 250, 200);
            textSize(20);
            text("Score: " + score, 350, 250);
        }

        //Collision detection for the paddle
        var radius = ballDiam / 2;
        var minXCollide = (mouseX * scaled * 3) - radius - paddleWidth / 2;
        var maxXCollide = (mouseX * scaled * 3) + radius + paddleWidth / 2;
        var minYCollide = (height - paddleHeight) - radius - paddleHeight / 2;
        var maxYCollide = (height - paddleHeight) + radius + paddleHeight / 2

        var collidesX = (x >= minXCollide & x <= maxXCollide);
        var collidesY = (y >= minYCollide & y <= maxYCollide)

        if(collidesX && collidesY) {
            if(diry > 0) {
                diry = -diry;
                dirx = random(-5, 5);
                dirx = -dirx;
            }
        }

        countScore();
        drawLives();
        rectMode(CORNER);

        //creating the blocks
        for(var c = 0; c < blockColCount; c++){
            for(var r = 0; r < blockRowCount; r++) {
                if(statusArr[r * blockColCount + c] == 1) {
                    var blockX = c * (blockWidth + blockPadding) + ballDiam / 2;
                    var blockY = r * (blockHeight + blockPadding) + ballDiam / 2;
                    fill(100, 100);
                    stroke(255);
                    strokeWeight(1);
                    rect(blockX, blockY, blockWidth, blockHeight);
                }
            }
        }
        collision();
        congrats();
    }
}

function keyPressed() {
    // start the game
    if(keyCode == 13){
        //hides the girls running in the beginning frame before the game starts
        girlLeft.hide();
        girlRight.hide();
        started = true;
    }
}

I had a lot of ideas for my proposal but I found implementing the ideas I had difficult. For my project, I focused on keeping it at one level. You start out with three lives and whenever you die, the ball will reset at the middle of the canvas and move downwards from there. Once the 3 chances are used, it’s game over. I made it so that even if you are late in hitting the ball and you hit the left or right edge of the paddle, the ball could still be saved and move back up. As long as any contact with the paddle is made, the ball will be in play. When two side by side blocks are simultaneously hit by a ball due to the ball hitting the blocks directly in between the blocks, both blocks will disappear and the ball will continue moving upwards or diagonally until it has reached a solid border like the wall or the edge of another block.

Some Key Points

1. Note that the ball moves randomly at all times so you need to make sure to keep your focus on the direction of the ball at all times.
2.  Refresh the page to play the game again.
3. The ball is reset in the middle of the screen when you die and will immediately start moving again towards a random downwards direction.

For Graders:: TIP! Playing this game takes a while so if you would like, you can increase the PaddleWidth from 75 to 800 or 900 and center it on the screen and let it just run itself until the blocks are all gone.

This game does not work as well on WordPress due to some parts of the code that could not be scaled well. Please click below for the Zip File to the full size of the game.

Click Here for the Game

Final_Project

sketch

// Jenny Zhang
// jennyzha
// Section D 
// Final Project

var img;
//setting a global variable for picture the user can paint
var col = [0, 0, 0, 0];
//setting a an initial color for the paintbrush color
var aSlider;
//setting a global variable for the slider that will control the width of the brush
var SizeOfBrush = 10;
//setting initial SizeOfBrush for the width of the brush

function preload() {
    var imgs = [];
    //preloading all of the possible images the user can paint into an array

    imgs[0] = "http://i.imgur.com/UyyTNyF.png";
    imgs[1] = "http://i.imgur.com/sW4fWRP.png";
    imgs[2] = "http://i.imgur.com/6HBfsCu.png";    
    imgs[3] = "http://i.imgur.com/60ITEbG.png";
    imgs[4] = "http://i.imgur.com/Zli7OsC.png";
    imgs[5] = "http://i.imgur.com/ztRhRts.png";
    imgs[6] = "http://i.imgur.com/Qx8zJO4.png";    
    imgs[7] = "http://i.imgur.com/mzxbto4.png";
    imgs[8] = "http://i.imgur.com/vXdn15r.png";
    imgs[9] = "http://i.imgur.com/shwrAy5.png";
    imgs[10] = "http://i.imgur.com/manEqm3.png";
    imgs[11] = "http://i.imgur.com/oh8iKpK.png";
    imgs[12] = "http://i.imgur.com/oh8iKpK.png";
    imgs[13] = "http://i.imgur.com/306OVy6.png";
    imgs[14] = "http://i.imgur.com/xJVNo7U.png";
    imgs[15] = "http://i.imgur.com/4mv8uhP.png";
    imgs[16] = "http://i.imgur.com/MvNo2DV.png";
    imgs[17] = "http://i.imgur.com/dxlMoKR.png";
    imgs[18] = "http://i.imgur.com/mxti4c2.png";
    imgs[19] = "http://i.imgur.com/hDtDFhD.png";
    imgs[20] = "http://i.imgur.com/shwrAy5.png";
    
    var num = floor(random(0, imgs.length));
    //randomly choosing a picture from the array to paint
    img = loadImage(imgs[num]);
    //assigning the image to the variable img
}

function setup() {
    createCanvas(800, 650);
    background(145, 200, 200);

    aSlider = createSlider(10, 50, SizeOfBrush);
    aSlider.position(670, 620);
    //creating the slider, placing it at the bottom of the canvas

    fill(250);
    noStroke();
    rect(0, 300, 800, 650); 
    //creating the canvas that the user will draw on 

    fill(145, 200, 200);
    noStroke();
    rect(0, 590, 800, 650); 
    //creating the canvas that the user will draw on 

    fill(0);
    textSize(20);
    text("Paint Away!", 0, 20);
    //writing the title of the page

    fill(0);
    textSize(15);
    text("Click on the painting to choose your color, then paint by clicking on the bottom canvas provided.", 0, 40); 
    //writing the instructions to choosing your color    

    fill(0);
    textSize(15);
    text("Move the slider in the bottom right corner to change the size of your paint brush.", 0, 55); 
    //writing the instructions to choosing your paintbrush size
}

function mousePressed(){
    SizeOfBrush = aSlider.value();
    //setting the width of the brush SizeOfBrush to the slider value
    //this is adapted from lab 15

    if (mouseX > 0 & mouseX < 800 && mouseY > 0 && mouseY < 350) {
        col = get(mouseX, mouseY);
    }
    //creating a restriction that the user can only get their color from the provided image

    else if  (mouseX > 0 & mouseX < 800 && mouseY > 350 && mouseY < 600 - SizeOfBrush/2){
        fill(color(col));
        ellipse(mouseX, mouseY, SizeOfBrush);
    }
    //telling the program that anywhere else besides the picture, they can draw a single ellipse

    fill(145, 200, 200);
    rect(70, 615, 250, 15);
    //effectively "erases"/"refreshes" the text every time the draw function is called

    fill(0);
    textSize(12);
    text("Your brush color is (" + col + ")", 70, 625); 
    //creates a text box telling you your current paintbrush color
    //this is adapted from assignment 11A, text rain
}

function mouseDragged() {
    SizeOfBrush = aSlider.value();
    //setting the brush size to the slider value

    if (mouseX > 0 & mouseY > 0 && 
        mouseX < 800 && mouseY > 300 && 
        mouseY < 600 - SizeOfBrush/2) {
            noStroke();
            fill(color(col));
            //setting the restriction so that when the mouse is dragged the user can draw in the provided canvas area

            ellipse(mouseX, mouseY, SizeOfBrush);
    }
}

function draw() {
    image(img, 0, 60); 
    //place current picture the user will draw

    fill(color(col));
    rect(10,595,50,50);
    //creates the square in the botton that shows the current color the user is using
}

My final project is essentially a virtual coloring book. The steps are very simple and easy. All you have to do is refresh the page if you don’t want to paint the painting provided until you are satisfied with the one loaded. Next, choose your first color to paint with by clicking on the color in the painting. Afterwards, choose the thickness of your brush by sliding the slider in the bottom right corner. Finally, click or drag across the bottom half of the screen, or your “canvas” to draw!

*unfortunately, wordpress is unable to handle the canvas size of the program, that being said, please refer to the attached zip file for the full effect – thank you!*

creyes1 Final Project – Beat Machine

//Christopher Reyes
//creyes1@andrew.cmu.edu
//Section D
//Capstone Project

//This program is a reinterpretation of Patatap (www.Patatap.com) created by
//Jono Brandel (jonobr1.com) and Lullatone (www.lullatone.com).

//Animations and drumkit sounds play if a key is pressed on the keyboard
//To differentiate from Patatap, there is a beat loop functionality that
//records the users\'s actions, then plays them in sequence for beatmaking

//DIRECTIONS

//SPEAKERS ON
//Press SPACEBAR to begin loop recording, play drum sounds with KEYS 1-5,
//Press SPACEBAR AGAIN to stop recording and play recorded beat
//Press SPACEBAR TWICE to clear loop

//Note: Records/plays one loop at a time

var introTextX = 30; //Initalizes intro text position, sets to undefined to hide

//Color scheme - RGB values
var softYellow = [248, 249, 197];  //Background
var softPink = [252, 202, 199];    //For bigSlideH
var softViolet = [187, 170, 192];  //For bigSlideV
var lightCyan = [187, 252, 223];   //For rectSlide
var darkerTeal = [85, 200, 190];   //For ringPulse
var transWhite = [255, 255, 255, 100]; //Transparent white for bg rings

//Looping variables and arrays
var actions = []; //Lists actions performed
var actionFrames = []; //Frames on which actions were performed
var actionSounds = []; //Lists sounds to be played
var counter = 0; //Counts frames
var counterMax; //Cap on frame count, signals when to loop
var actionIndex; //Relationship between actions, actionFrames, actionSounds

//Drumkit sound samples: "Urban Drum Samples" by user Biochron of soundpacks.com
//Source Link: https://soundpacks.com/free-sound-packs/urban-drum-samples/
var snare;
var bass;
var hihat;
var hightom;
var lowtom;

function preload() {
    snare = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/"
            + "uploads/2017/12/creyes1-snare.wav");
    snare.setVolume(.3);
    bass = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/"
           + "uploads/2017/12/creyes1-bass.wav");
    bass.setVolume(1);
    hihat = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/"
            + "uploads/2017/12/creyes1-hihat.wav");
    hihat.setVolume(.6);
    hightom = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/"
              + "wp-content/uploads/2017/12/creyes1-hightom.wav");
    hightom.setVolume(.5);
    lowtom = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/"
             + "uploads/2017/12/creyes1-lowtom.wav");
    lowtom.setVolume(.5);
}

function setup() {
    createCanvas(480, 480);
    background(softYellow);
}

function draw() {
    background(softYellow);

    //Background detail, layered circles

    noStroke();
    fill(transWhite);
    ellipse(width/2, height/2, 400, 400);

    fill(softYellow);
    ellipse(width/2, height/2, 350, 350);

    stroke(transWhite);
    noFill();
    strokeWeight(10);
    ellipse(width/2, height/2, 320, 320);

    strokeWeight(5);
    ellipse(width/2, height/2, 500, 500);

    noStroke();
    fill(transWhite);
    ellipse(width/2, height/2, 200, 200);

    //Introductory Text & Instructions
    //Disappears once user begins playing

    noStroke();
    fill(255);
    rect(introTextX-10, 420, 440, 50, 10);

    fill(100);
    textStyle(BOLD);
    textFont("Courier New", 12);
    text('Press any key 1-5, press SPACEBAR to start/stop recording your loop. '
         + 'Double-tap SPACEBAR to stop loop. (Speakers up)',
         introTextX, 430, 450, 50);

    //Starts initial counter to track actions
    if (recording == true) {
        counter++;
    }

    //If in playback, and items are in array, play on a loop
    if (recording == false & actionFrames.length > 0) {

        counter++;

        //Loops counter after hitting max
        if (counter === counterMax) {
            counter = 0;
        }

        //Plays action if counter is the same as the frame which action occurred
        var success = false;
        for (i = 0; i < actionFrames.length; i++) {
            if (counter === actionFrames[i]) {
                success = true;
                actionIndex = i;
                break;
            }
        }

        //Plays the action if counter number matches the stored frame count
        if (success == true) {
            (actions[actionIndex])();
            (actionSounds[actionIndex]).play();
        }

    }

    //Functions check if anything is in their respective arrays, then draw
    playSlideH();
    playSlideV();
    playRectSlide();
    playRingPulse();
    playDotSpray();

    //Visual feedback

    //Red dot when recording
    if (recording == true) {
        noStroke();
        fill(204, 67, 67);
        ellipse(30, 30, 10, 10);
    }

    //Playback icon if looping with actions in array
    if (recording == false & actions.length > 0) {
        noStroke();
        fill(110, 142, 105);
        triangle(25, 25, 25, 35, 35, 30);
    }

}

var recording = false;

function keyPressed() {

    //Hides intro text once user begins playing
    if (keyCode == 32 || keyCode == 49 || keyCode == 50 ||
        keyCode == 51 || keyCode == 52 || keyCode == 53) {
        introTextX = undefined;
    }

    //Toggles a loop recorder
    if (keyCode == 32 & recording == false) {
        counter = 0;
        actions = [];
        actionFrames = [];
        actionSounds = [];
        recording = true;
        print("start");
    } else if (keyCode == 32 & recording == true) {
        counterMax = counter; //Creates a cap for counter to loop
        counter = 0;
        recording = false;
        print("stop");
    }

    //Triggers an animation and sound clip on press
    //If recording, stores action, the frame that action occurred, and the sound
    //into respective arrays - actions[], actionFrames[], actionSounds[]

    //Excluding dotSpray, clears arrays on press

    //Pressing 1 sprays dots while playing a highhat clip
    if (keyCode == 49) {
        hihat.play();
        dotSpray();
        if (recording == true) {
            print('1');
            actionFrames.push(counter);
            actions.push(dotSpray);
            actionSounds.push(hihat);
        }
    }

    //Pressing 2 slides two rectangles while playing a bass drum clip
    if (keyCode == 50) {
        bass.play();
        rectSliders = [];
        rectSlide();
        if (recording == true) {
            print('2');
            actionFrames.push(counter);
            actions.push(rectSlide);
            actionSounds.push(bass);
        }
    }

    //Pressing 3 creates a scaling ring while playing a snare clip
    if (keyCode == 51) {
        snare.play();
        rings = [];
        ringPulse();
        if (recording == true) {
            print('3');
            actionFrames.push(counter);
            actions.push(ringPulse);
            actionSounds.push(snare);
        }
    }

    //Pressing 4 slides a large panel horizontally, plays a hightom clip
    if (keyCode == 52) {
        hightom.play();
        bigSliderH = [];
        bigSlideH();
        if (recording == true) {
            print('4');
            actionFrames.push(counter);
            actions.push(bigSlideH);
            actionSounds.push(hightom);
        }
    }

    //Pressing 5 slides a large panel vertically, plays a lowtom clip
    if (keyCode == 53) {
        lowtom.play();
        bigSliderV = [];
        bigSlideV();
        if (recording == true) {
            print('5');
            actionFrames.push(counter);
            actions.push(bigSlideV);
            actionSounds.push(lowtom);
        }
    }

}

/*----Dot Spray Functions-----------------------------------------------------*/
//Dots fly out from a random position

var dots = []; //For dotSpray

//Places dots into array
function dotSpray() {
    var dotOriginX = random(0, width);
    var dotOriginY = random(0, height);
    for (var i = 0; i < 10; i++) {
        dots.push(makeDot(dotOriginX, dotOriginY));
    }
}

//Creates dot object
function makeDot(inputX, inputY) {
    var dot = {x: inputX,
               y: inputY,
               stepX: random(-20, 20),
               stepY: random(-20, 20),
               color: [random(0, 255), random(0, 255), random(0, 255)],
               size: random(5, 10),
               move: dotStep,
               display: drawDot}
    return dot;
}

//Render dot
function drawDot() {
    noStroke();
    fill(this.color);
    ellipse(this.x, this.y, this.size);
}

//Moves dot
function dotStep() {
    this.x += this.stepX;
    this.y += this.stepY;
}

//If something is in the array, execute animation
function playDotSpray() {
    //Checks if anything exists inside array
    if (dots.length > 0) {
        for (var i = 0; i < dots.length; i++) {
            //Moves and renders
            dots[i].move();
            dots[i].display();

            //If dot leaves canvas, remove it from dots array
            if (dots[i].x < 0 || dots[i].x > width ||
                dots[i].y < 0 || dots[i].y > height) {
                dots.splice(i, 1);
            }
        }
    }
}
/*----------------------------------------------------------------------------*/

/*----rectSlide Functions-----------------------------------------------------*/
//Two rectangles slide vertically across the screen, direction random

var rectSliders = []; //For rectSliders

//Places slider into array
function rectSlide() {
    var startingY = 480;
    var slideRate = 20;

    var sliderY1;    //Input for the first rectangle's Y position
    var sliderStep1; //Input for the first rectangle's move speed

    var sliderY2;    //Input for the second rectangle's Y position
    var sliderStep2; //Input for the first rectangle's move speed

    //50/50 chance on which direction the sliders travel
    var coin1 = coinToss();
    if (coin1 == true) {
        sliderY1 = -startingY;
        sliderStep1 = slideRate;
    } else {
        sliderY1 = startingY;
        sliderStep1 = -slideRate;
    }

    rectSliders.push(makeSlider(100, sliderY1, sliderStep1));

    var coin2 = coinToss();
    if (coin2 == true) {
        sliderY2 = -startingY;
        sliderStep2 = slideRate;
    } else {
        sliderY2 = startingY;
        sliderStep2 = -slideRate;
    }

    rectSliders.push(makeSlider(300, sliderY2, sliderStep2));
}

//Creates slider object
function makeSlider(inputX, inputY, inputS) {
    var slider = {x: inputX,
                  y: inputY,
                  w: 150,
                  h: 480,
                  color: lightCyan,
                  stepY: inputS,
                  move: slideStep,
                  display: drawSlider};
    return slider;
}

//Renders slider
function drawSlider() {
    noStroke();
    fill(this.color);
    rect(this.x, this.y, this.w, this.h);
}

//Moves slider
function slideStep() {
    this.y += this.stepY;
}

//If something is in the array, execute animation
function playRectSlide() {
    //Checks if anything exists inside array
    if (rectSliders.length > 0) {
        for (var i = 0; i < rectSliders.length; i++) {
            rectSliders[i].move();
            rectSliders[i].display();

            //If rectangle leaves canvas, remove it from array
            if (rectSliders[i].y < -500 || rectSliders[i] > 500) {
                rectSliders.splice(i, 1);
            }
        }
    }
}
/*----ringPulse Functions-----------------------------------------------------*/
//Creates a ring that grows or shrinks in size from center
var rings = [];

//Places ring into array
function ringPulse() {
    var scaleRate = 50;
    var startingSize; //Input for ring's starting size
    var scaleTick; //Input for ring scale rate
    var coin = coinToss();

    //Determines direrction ring is scaling
    if (coin == true) {
        //Ring explodes outwards
        startingSize = 0;
        scaleTick = scaleRate;
    } else {
        //Ring collapses inwards
        startingSize = width*1.5;
        scaleTick = -scaleRate;
    }

    rings.push(makeRing(startingSize, scaleTick));

}

//Creates ring object
function makeRing(inputSize, inputStep) {
    var ring = {x: width/2,
                y: height/2,
                size: inputSize,
                step: inputStep,
                color: darkerTeal,
                weight: 50,
                scale: ringStep,
                display: drawRing};
    return ring;
}

//Renders ring
function drawRing() {
    strokeWeight(this.weight);
    stroke(this.color);
    noFill();
    ellipse(this.x, this.y, this.size);
}

//Scales ring
function ringStep() {
    this.size += this.step;
}

//If something is in the array, execute animation
function playRingPulse() {

    if (rings.length > 0) {

        //Renders and scales ring
        for (var i = 0; i < rings.length; i++) {

            rings[i].scale();
            rings[i].display();

            //If ring gets too big or too small, remove it from array
            if (rings[i].size > width*2 || rings[i].size < 0) {
                rings.splice(i, 1);
            }
        }
    }
}
/*----------------------------------------------------------------------------*/

/*----bigSlideH Functions-----------------------------------------------------*/
//Slides a big block of color horizontally across the screen
var bigSliderH = [];

//Places slider into array
function bigSlideH() {
    var startingX = 580;
    var moveRate = 50;
    var sliderHX; //Input for X position of slider
    var sliderHS; //Input for movement rate of slider
    var coin = coinToss();

    //50/50 chance of coming in from either side of canvas
    if (coin == true) {
        sliderHX = -startingX;
        sliderHS = moveRate;
    } else {
        sliderHX = startingX;
        sliderHS = -moveRate;
    }

    bigSliderH.push(makeSliderH(sliderHX, sliderHS));
}

//Creates slider object
function makeSliderH(inputX, inputS) {
    var sliderH = {x: inputX,
                   y: 0,
                   w: width+100,
                   h: height,
                   speed: inputS,
                   col: softPink,
                   move: sliderHStep,
                   display: drawSliderH};
    return sliderH;
}

//Renders slider
function drawSliderH() {
    noStroke();
    fill(this.col);
    rect(this.x, this.y, this.w, this.h);
}

//Moves slider
function sliderHStep() {
    this.x += this.speed;
}

//If something is in the array, execute animation
function playSlideH() {
    if (bigSliderH.length > 0) {
        for (var i = 0; i < bigSliderH.length; i++) {
            bigSliderH[i].display();
            bigSliderH[i].move();

            //Clear array if sliders leave canvas
            if (bigSliderH[i].x < -580 || bigSliderH[i].x > 580) {
                bigSliderH = [];
            }
        }
    }
}
/*----------------------------------------------------------------------------*/

/*----bigSlideV Functions-----------------------------------------------------*/
//Slides a big block of color horizontally across the screen
var bigSliderV = [];

//Places slider into array
function bigSlideV() {
    var startingY = 580;
    var moveRate = 50;
    var sliderVY; //Input for Y position of slider
    var sliderVS; //Input for movement rate of slider
    var coin = coinToss();

    //50/50 chance of coming in from either side of canvas
    if (coin == true) {
        sliderVY = -startingY;
        sliderVS = moveRate;
    } else {
        sliderVY = startingY;
        sliderVS = -moveRate;
    }

    bigSliderV.push(makeSliderV(sliderVY, sliderVS));

}

//Creates slider object
function makeSliderV(inputY, inputS) {
    var sliderV = {x: 0,
                   y: inputY,
                   w: width,
                   h: height + 100,
                   speed: inputS,
                   col: softViolet,
                   move: sliderVStep,
                   display: drawSliderV};
    return sliderV;
}

//Renders slider
function drawSliderV() {
    noStroke();
    fill(this.col);
    rect(this.x, this.y, this.w, this.h);
}

//Moves slider
function sliderVStep() {
    this.y += this.speed;
}

//If something is in the array, execute animation
function playSlideV() {
    if (bigSliderV.length > 0) {
        for (var i = 0; i < bigSliderV.length; i++) {
            bigSliderV[i].display();
            bigSliderV[i].move();

            //Clear array if sliders leave canvas
            if (bigSliderV[i].y < -580 || bigSliderV[i].y > 580) {
                bigSliderV = [];
            }
        }
    }
}
/*----------------------------------------------------------------------------*/

/*----------------------------------------------------------------------------*/
//Returns a Boolean value with a 50/50 chance
function coinToss() {
    var coin = floor(random(0, 2));
    if (coin === 0) {
        return true;
    } else {
        return false;
    }
}

DIRECTIONS: Press number keys 1-5 to play various drum sounds, hit spacebar to record your beat, then spacebar once more to play it back – double-tap spacebar to clear your loop. A red dot in the upper-left indicates that you are recording, and an arrow indicates a loop is being played. Please turn on your speakers.

This program is a reinterpretation of Patatap created by Jono Brandel and Lullatone. While I really enjoyed my experience with Patatap, I felt that it was lacking a system to create a looping beat capability seen on percussion pads or Launchpads. Because of this, I wanted to focus less on creating a complete keyboard’s worth of complex animation and moreso on creating that kind of robust looping system.

The program works by having a running frame counter once recording begins, and storing the action with its respective animation and sound, as well as the frame that it was performed into separate arrays. To loop, the counter resets, and whenever the counter number is the same as a stored frame number, the associated action is executed. For me, the biggest challenge was having all of these arrays relate to each other and keeping everything organized for a clean loop, however once I figured out the core system down, it was just a matter of adding more content in terms of possible actions.

In the future, I’d like to develop this further to have a full keyboard’s worth of sound and animation, as well as being able to perform several loops at once (likely involving storing arrays within arrays), but for now, I’m really pleased with the final result. I’ve played percussion for several years, so it was really enjoyable to get the chance to translate that interest over to a different medium.

Sounds are from Urban Drum Samples on SoundPacks.com, by user Biochron.

To be honest, more interesting looking at night after like 7pm.

sketch

//Name: Colleen Duong
//Email: cduong@andrew.cmu.edu
//Section: D
//Final Project

//empty array to store clouds
var clouds = [];

//variables for images
var liloandstitch;
var tangled;
var liloandstitchsurfboard;
var bighero6;

function setup() {
  createCanvas(1000 * 0.5, 500 * 0.5); //scales drawing for wordpress

  liloandstitch = loadImage("https://i.imgur.com/Q8WphXR.png");
  tangled = loadImage("https://i.imgur.com/IPR7Psj.png");
  liloandstitchsurfboard = loadImage("https://i.imgur.com/MovIC2B.png");
  bighero6 = loadImage("https://i.imgur.com/zhYJmIx.png");
}

function draw() {
  scale(0.5); //scales drawing for wordpress
  background(202, 230, 205);
  var H = hour();
  var M = minute();
  var S = second();

  //Sky Color
    //Changes sky color throughout the day according to the hour
  if(H > 0 & H < 13){ //1am to 12pm
		var skyR = H * (180/12); //red
		var skyG = H * (270/12); //green
		var skyB = H * (290/12); //blue
	}else if(H > 13 & H < 23){  //1pm to 11pm
    var skyR = 180 - (H - 12) * (180/12);
    var skyG = 270 - (H - 12) * (270/12);
    var skyB = 290 - (H - 12) * (290/12);
	}else{ //12am
    var skyR = 0;
    var skyG = 0;
    var skyB = 0;
  }


  fill(skyR, skyG, skyB); //Sky changes color according to the if/else statements above
  rect(530, 0, 500, 300);

  drawstars();

  secondstartotheright();

  updateAndDisplayClouds();
  addNewCloudsWithSomeRandomProbability();

  fill(202, 230, 205);  //Green
  rect(0, 0, 520, height);  //Hiro's Wallpaper

  sanfranstokyo();

  HirosRoom();

  clock();

  baymaxhead();

  tangledportrait();

  liloandstitchportrait();

  bighero6portrait();

  chair();
}

function updateAndDisplayClouds(){
  for(var i = 0; i < clouds.length; i++){
    clouds[i].move();
    clouds[i].display();
  }
}

function removeCloudsThatHaveSlippedOutOfView(){
  var cloudsToKeep = [];
  for(var i = 0; i < clouds.length; i++){
    if(clouds[i].x + clouds[i].breadth > 0){
      cloudsToKeep.push(clouds[i]);
    }
  }
  clouds = cloudstoKeep;
}

function addNewCloudsWithSomeRandomProbability(){
  //Spawn a new cloud to the right edge of the canvas
  var newCloudLikelihood = 0.01;
  if(random(0,1) < newCloudLikelihood){
    clouds.push(makeCloud(width));
  }
}

function cloudMove(){
  this.x += this.speed;
}

function cloudDisplay(){
  var cloudHeight = this.altitude * 20;

  push();
  translate(this.x, 50);

  var H = hour();

  //Changes Cloud Colors According to Time
  if(H > 0 & H < 13){ //1am to 12pm
    var skyR = H * (140/12); //red
    var skyG = H * (230/12); //green
    var skyB = H * (250/12); //blue
  }else if(H > 13 & H < 23){ //1pm to 11pm
    var skyR = 140 - (H - 12) * (140/12);
    var skyG = 230 - (H - 12) * (230/12);
    var skyB = 250 - (H - 12) * (250/12);
  }else{  //12am
    var skyR = 20;
    var skyG = 20;
    var skyB = 20;
  }

  fill(skyR, skyG, skyB);
  //Variables randomize the position and sized
  ellipse(0, cloudHeight, this.breadth, cloudHeight-10);
  ellipse(0, cloudHeight-210, this.breadth*0.6, cloudHeight-20);
  ellipse(0, cloudHeight-200, this.breadth, cloudHeight-10);
  ellipse(0, cloudHeight-100, this.breadth, cloudHeight-20);
  pop();
}

function makeCloud(birthLocationX){
  var clouds = {x: birthLocationX,
                breadth: 60,
                speed: -0.2,
                altitude: round(random(-1, 1)),
                move: cloudMove,
                display: cloudDisplay}
  return clouds;
}

function HirosRoom(){
  noStroke();

  //WALLPAPER BOTTOM TRIM
  fill(255);
  rect(0, 440, 1000, 60);
  //WALLPAPER BOTTOM TRIM

  //TRIANGULAR WALL
  fill(97, 69, 62);   //Darkest Brown
  triangle(0, 0, 200, 0, 0, 200);
  //TRIANGULAR WALL

  //GROUND
  fill(97, 69, 62); //Darkest Brown
  rect(0, 485, 1000, 15);
  //GROUND

  //DESK
  fill(209, 178, 169);  //Dark Brown
  rect(150, 300, 300, 40);
  rect(330, 300, 150, 185);

  push();
  stroke(191, 157, 148);  //Darker than Dark Brown
  strokeWeight(2);
  rect(340, 345, 130, 50);  //Drawers
  rect(340, 415, 130, 50);  //Drawers
  pop();

  fill(235, 208, 201);  //Light Brown
  rect(0, 300, 150, 185);
  //DESK

  //DESK ACCESSORIES
  fill(97, 69, 62);   //Darkest Brown
  rect(435, 235, 10, 30); //Pencil
  rect(450, 245, 8, 30); //Pencil
  fill(234, 112, 108);  //Light Red
  rect(430, 255, 30, 45); //Cup
  fill(97, 69, 62);   //Darkest Brown
  rect(320, 270, 120, 30);
  fill(68); //Super Dark Grey
  rect(145, 275, 80, 20);  //Computer
  fill(81, 80, 80); //Dark Grey
  rect(80, 145, 200, 130);  //Computer
  rect(115, 290, 140, 10);  //Computer
  fill(119); //Light Grey
  rect(90, 155, 180, 105);  //Computer
  fill(234, 112, 108); //Light Red
  rect(85, 265, 30, 30); //Post it
  //DESK ACCESSORIES

  //SHELF
  push();
  fill(187, 155, 148);  //Darker than Dark Brown
  rect(300, 40, 10, 90);
  rect(450, 40, 10, 90);

  fill(209, 178, 169);  //Dark Brown
  rect(280, 100, 200, 20);
  rect(280, 50, 200, 20);

  textSize(20);
  textStyle(BOLD);
  textFont("Verdana");
  fill(209, 178, 169);  //Dark Brown
  text("CLICK THE", 325, 50);
  text("PHOTOS", 335, 100);
  pop();
  //SHELF

  //WALL PICTURES
  //WALL PICTURES

  //WINDOW FRAME
  fill(240);
  rect(705, 0, 20, 300);  //Window Frame
  rect(525, 0, 20, 300);  //Window Frame
  rect(520, 280, width, 20);  //Window Frame
  push();
  noStroke();
  rect(706, 0, 19, 300);  //Window Frame
  rect(525, 0, 20, 300);  //Window Frame
  pop();

  fill(86); //Light grey
  rect(530, 0, 180, 10);   //Window Shutters (Left)
  rect(530, 15, 180, 10);   //Window Shutters (Left)
  rect(530, 30, 180, 10);   //Window Shutters (Left)
  rect(530, 45, 180, 10);   //Window Shutters (Left)
  rect(720, 0, width, 10);   //Window Shutters (Right)
  rect(720, 15, width, 10);   //Window Shutters (Right)
  rect(720, 30, width, 10);   //Window Shutters (Right)
  rect(550, 0, 5, 50); //Shutter Connector
  rect(695, 0, 5, 50); //Shutter Connector
  rect(730, 0, 5, 35); //Shutter Connector

  fill(200);
  rect(510, 300, width, 100); //Bed Frame
  fill(255);
  rect(510, 0, 30, 400);  //Bed Frame
  fill(220);
  rect(510, 300, width, 20);  //Bed Frame Back
  fill(255);
  rect(510, 300, 80, 20); //Bed Frame
  push();
  noStroke();
  rect(511, 0, 29, 400);  //Bed Frame

  pop();
  //WINDOW FRAME

  //BED
  fill(148, 160, 205); //Periwinkle
  rect(500, 335, 600, 150, 20);
  //BED
}

function sanfranstokyo(){
  var H = hour();
  var S = second();

  //SANFRANSTOKYO
  //Bridge
  if(H > 3 & H < 19){//4am to 7pm lighter color
    fill(201, 70, 72); //Red
  }else{
    fill(137, 44, 49); //Darker Red
  }
  rect(690, 260, 200, 10);  //Horizontal
  rect(720, 190, 10, 200);
  rect(830, 190, 10, 200);

  push();
  noFill();
  if(H > 3 & H < 19){//4am to 7pm lighter color
    stroke(201, 70, 72); //Red
  }else{
    stroke(137, 44, 49); //Darker Red
  }

  strokeWeight(2);
  curve(710, -300, 729, 192, 831, 192, 800, -300);
  curve(700, -300, 618, 192, 720, 192, 800, -300);
  curve(850, -300, 839, 192, 933, 192, 710, -300);
  line(680, 250, 680, 260); //Left
  line(690, 241, 690, 260); //Left
  line(700, 229, 700, 260); //Left
  line(740, 222, 740, 260); //Mid
  line(750, 236, 750, 260); //Mid
  line(760, 246, 760, 260); //Mid
  line(770, 252, 770, 260); //Mid
  line(780, 254, 780, 260); //Mid
  line(790, 254, 790, 260); //Mid
  line(800, 250, 800, 260); //Mid
  line(810, 242, 810, 260); //Mid
  line(820, 228, 820, 260); //Mid
  line(850, 223, 850, 260); //Right
  line(860, 236, 860, 260); //Right
  line(870, 246, 870, 260); //Right
  line(880, 252, 880, 260); //Right
  pop();

  if(H > 3 & H < 19){//4am to 7pm lighter color
    fill(219, 93, 100); //Light Red
  }else{
    fill(165, 61, 72); //Darker Light Red
  }
  rect(720, 190, 14, 10);
  rect(720, 215, 14, 10);
  rect(720, 240, 14, 10);
  rect(826, 190, 18, 10);
  rect(826, 215, 18, 10);
  rect(826, 240, 18, 10);
  //Bridge

  //Building 3 (Left)
  if(H > 3 & H < 19){//4am to 7pm lighter color
    fill(200);
  }else{
    fill(150);
  }
  rect(655, 210, 30, 30); //Roof Box

  if(H > 3 & H < 19){//4am to 7pm lighter color
    fill(230);
  }else{
    fill(180);
  }
  rect(620, 240, 70, 80); //Base

  if(H > 3 & H < 19){//4am to 7pm lighter color
    fill(50);
  }else{
    fill(255, 242, 6);
    if(S % 3){
      fill(249, 214, 38);  //Blinking Effect
    }//Light
  }
  rect(650, 250, 35, 10); //Ribbon Window
  rect(650, 265, 25, 10); //Ribbon Window
  //Building 3 (Left)

  //Building 2 (Right)
  if(H > 3 & H < 19){//4am to 7pm lighter color
    fill(254, 252, 238); //Pale Yellow
  }else{
    fill(216, 213, 195); //Darker Pale Yellow
  }
  rect(880, 250, 70, 40); //Base

  if(H > 3 & H < 19){//4am to 7pm lighter color
    fill(79, 106, 112); //Teal
  }else{
    fill(50, 70, 73); //Darker Teal
  }
  triangle(860, 250, 880, 230, 900, 250); //Roof
  rect(880, 230, 70, 20); //Roof
  fill(0);
  rect(880, 210, 70, 20); //Roof

  if(H > 3 & H < 19){//4am to 7pm lighter color
    fill(79, 106, 112); //Teal
  }else{
    fill(50, 70, 73); //Darker Teal
  }
  triangle(860, 210, 920, 160, 900, 210); //Roof
  triangle(870, 210, 920, 140, 950, 210); //Roof
  rect(880, 200, 70, 10); //Roof
  rect(915, 140, 70, 10); //Roof
  //Building 2 (Right)

  //Building 2 (Left)
  if(H > 3 & H < 19){//4am to 7pm lighter color
    fill(254, 252, 238); //Pale Yellow
  }else{
    fill(216, 213, 195); //Darker Pale Yellow
  }
  rect(580, 220, 70, 80); //Base

  if(H > 3 & H < 19){//4am to 7pm lighter color
    fill(102, 72, 55); //Dark Brown
  }else{
    fill(73, 50, 39); //Darker Dark Brown
  }
  rect(580, 150, 70, 80); //Roof Box

  if(H > 3 & H < 19){//4am to 7pm lighter color
    fill(144, 117, 108); //Light Brown Roof
  }else{
    fill(104, 81, 75); //Darker Light Brown Roof
  }
  rect(530, 220, 150, 10); //Roof

  if(H > 3 & H < 19){//4am to 7pm lighter color
    fill(102, 72, 55); //Dark Brown
  }else{
    fill(73, 50, 39); //Darker Dark Brown
  }
  rect(580, 150, 70, 80); //Roof Box
  rect(530, 230, 120, 5); //Brace
  rect(530, 255, 120, 5); //Brace
  rect(600, 230, 5, 30); //Brace
  //building 2(Left)

  //Building 1 (Right)
  if(H > 3 & H < 19){//4am to 7pm lighter color
    fill(255);
  }else{
    fill(200);
  }
  rect(930, 200, 100, 80);  //Base

  if(H > 3 & H < 19){//4am to 7pm lighter color
    fill(233);
  }else{
    fill(180);
  }
  rect(925, 200, 100, 2);  //Base

  if(H > 3 & H < 19){//4am to 7pm lighter color
    fill(255);
  }else{
    fill(200);
  }
  rect(925, 170, 100, 30);  //Base

  if(H > 3 & H < 19){//4am to 7pm lighter color
    fill(144, 117, 108);  //Brown
  }else{
    fill(107, 86, 81);  //Darker Brown
  }
  rect(925, 150, 100, 20);  //Base

  if(H > 3 & H < 19){//4am to 7pm lighter color
    fill(233);
  }else{
    fill(180);
  }
  rect(925, 150, 100, 2);  //Base
  rect(950, 110, 100, 20);  //Base

  if(H > 3 & H < 19){//4am to 7pm lighter color
    fill(255);
  }else{
    fill(200);
  }
  triangle(925, 150, 910, 130, 950, 130);
  rect(925, 130, 100, 20);  //Base

  if(H > 3 & H < 19){//4am to 7pm lighter color
    fill(85, 96, 85);
  }else{
    fill(251, 237, 36); //Light
    if(S % 6){
      fill(249, 214, 38);  //Blinking Effect
    }
  }
  rect(935, 207, 30, 40);  //Window
  rect(970, 207, 30, 40);  //Window
  rect(935, 252, 30, 40);  //Window
  rect(970, 252, 30, 40);  //Window

  if(H > 3 & H < 19){//4am to 7pm lighter color
    fill(233);
  }else{
    fill(180);
  }
  rect(943, 208, 2, 38);  //Window (T.Left)
  rect(955, 208, 2, 38);  //Window (T.Left)
  rect(936, 220, 28, 2);  //Window (T.Left)
  rect(936, 235, 28, 2);  //Window (T.Left)
  rect(978, 208, 2, 38);  //Window (T.Right)
  rect(990, 208, 2, 38);  //Window (T.Right)
  rect(971, 220, 28, 2);  //Window (T.Right)
  rect(971, 235, 28, 2);  //Window (T.Right)
  rect(943, 253, 2, 38);  //Window (B.Left)
  rect(955, 253, 2, 38);  //Window (B.Left)
  rect(936, 265, 28, 2);  //Window (B.Left)
  rect(936, 265, 28, 2);  //Window (B.Left)
  rect(978, 253, 2, 38);  //Window (B.Right)
  rect(990, 253, 2, 38);  //Window (B.Right)
  rect(971, 265, 28, 2);  //Window (B.Right)
  rect(971, 265, 28, 2);  //Window (B.Right)
  //Building 1 (Right)

  //Building 1 (Left)
  if(H > 3 & H < 19){//4am to 7pm lighter color
    fill(255, 239, 205); //Pale Yellow
  }else{
    fill(234, 215, 181); //Darker Pale Yellow
  }
  rect(540, 100, 50, 200);
  rect(590, 120, 20, 5); //Sign
  rect(590, 200, 20, 5); //Sign

  if(H > 3 & H < 19){//4am to 7pm lighter color
    fill(234, 112, 108); //Pale Red
  }else{
    fill(206, 91, 91); //Darker Pale Red
  }
  rect(600, 115, 50, 100); //Sign

  if(H > 3 & H < 19){//4am to 7pm lighter color
    fill(255, 239, 205); //Pale Yellow
  }else{
    fill(234, 215, 181); //Darker Pale Yellow
  }
  rect(605, 120, 40, 90); //Sign

  push();
  if(H > 3 & H < 19){//4am to 7pm lighter color
    fill(85, 52, 148); //Bright-ish Dark Blue
  }else{
    fill(255); //Brighter Bright-ish Dark Blue
    if(S % 2){  //Light Blinking Effect
      fill(117, 91, 178);
    }
  }
  textSize(25);
  textStyle(BOLD)
  text("ホ", 613, 150);
  text("テ", 613, 180);
  text("ル", 613, 210);  //Hotel
  pop();

  if(H > 3 & H < 19){//4am to 7pm lighter color
    fill(80); //Dark Grey
  }else{
    fill(40); //Darker Grey
  }
  rect(590, 210, 20, 5); //Sign
  rect(590, 245, 20, 5); //Sign

  if(H > 3 & H < 19){//4am to 7pm lighter color
    fill(119); //Light grey
  }else{
    fill(70); //Darker Light Grey
  }
  rect(610, 200, 60, 60); //Sign

  if(H > 3 & H < 19){//4am to 7pm lighter color
    fill(80); //Dark Grey
  }else{
    fill(40); //Darker Grey
  }
  rect(610, 200, 25, 60); //Sign

  push();
  if(H > 3 & H < 19){//4am to 7pm lighter color
    fill(80);
  }else{
    fill(150);
    if(S % 2){  //Light Blinking Effect
      fill(255);
    }
  }
  textSize(8);
  textStyle(BOLD);
  text("ミ", 655, 213);
  text("ッ", 655, 226);
  text("キ", 655, 239);
  text("|", 659, 252);
  text("マ", 640, 213);
  text("ウ", 640, 226);
  text("ス", 640, 239);  //Mickey Mouse!
  pop();

  if(H > 3 & H < 19){//4am to 7pm lighter color
    fill(247, 223, 181);  //Dark Pale Yellow
  }else{
    fill(221, 194, 151); //Darker Dark Pale Yellow
  }
  rect(540, 100, 55, 10);
  rect(540, 160, 55, 10);
  rect(540, 220, 55, 10);

  if(H > 3 & H < 19){//4am to 7pm lighter color
  fill(234, 206, 150); //Dark Pale Yellow Shadow
  }else{
    fill(209, 180, 130); //Darker Dark Pale Yellow Shadow
  }
  rect(540, 110, 50, 2);
  rect(540, 170, 50, 2);
  rect(540, 230, 50, 2);
  //Building 1 (Left)
  //SANFRANSTOKYO
}

function drawstars(){
  var H = hour();

  //Draws Stars in the sky after 7pm
    if(H > 3 & H < 19){
    }else{
      fill(255);
      rect(600, 100, 5, 1);
      rect(602, 98, 1, 5);
      rect(700, 150, 5, 1);
      rect(702, 148, 1, 5);
      rect(800, 80, 5, 1);
      rect(802, 78, 1, 5);
      rect(750, 40, 5, 1);
      rect(752, 38, 1, 5);
      rect(888, 120, 5, 1);
      rect(890, 118, 1, 5);
      rect(940, 80, 5, 1);
      rect(942, 78, 1, 5);
      rect(620, 80, 5, 1);
      rect(622, 78, 1, 5);
      rect(760, 140, 5, 1);
      rect(762, 138, 1, 5);
    }
}


function secondstartotheright(){  //Peter Pan Easter Egg
  var H = hour();

  if(H > 2 & H < 23){  //Star only appears at 11pm
  }else{
    fill(175, 223, 249);
    rect(950, 70, 10, 1);
    rect(955, 66, 1, 10);
  }
}

function clock(){

  var H = hour();
  var M = minute();
  var S = second();

  //WALL-E's Eve
  fill(250);  //Arms
  ellipse(559, 240, 10, 22);
  ellipse(580, 240, 10, 22);
  fill(255); //Body
  ellipse(570, 220, 27, 27);
  ellipse(570, 240, 22, 50);
  fill(0);  //Face
  ellipse(570, 220, 20, 15);
  if(H == 8 & M == 30 && S%2){  //If it is 8:30 am the alarm starts (her eyes blink green) for Hiro to wake up and go to class
    fill(62, 173, 50); //Green Eyes
  }else{
    fill(80, 159, 214); //Blue Eyes
  }
  ellipse(566, 220, 5, 8);
  ellipse(574, 220, 5, 8);
  //WALL-E's Eve

  //The clock
  fill(50);
  rect(550, 260, 70, 40, 10);
  rect(560, 257, 10, 5, 5);
  rect(572, 257, 10, 5, 5);
  fill(0);
  rect(565, 265, 50, 30, 5);
  //The clock

  if(S % 4){  //Blink Blink
    fill(198, 0, 0);

    if (H > 12 || H == 0) { //Converts it to twelve hour clock
      H = abs(H - 12)}
    if(M < 10){
      text(H + " : 0" + M, 575, 285); //If the time is before 10 minutes it still shows two digits "01, 02, etc"
    }
    text(H + " : " + M, 575, 285) //Shows time on the clock
  }else{
    fill(0);
  }
}

function chair(){
  //CHAIR
  fill(50); //Close To Black
  rect(200, 250, 140, 120, 10);
  rect(260, 370, 20, 20);
  rect(200, 380, 140, 20);
  rect(265, 390, 10, 40);
  rect(260, 420, 20, 40);
  rect(210, 460, 120, 15);
  ellipse(215, 480, 20);
  ellipse(325, 480, 20);
  ellipse(270, 480, 20);
  //CHAIR
}

function baymaxhead(){
  fill(255);  //Baymax's Head
  ellipse(50, 280, 50, 40);
  ellipse(43, 282, 40, 35);
  ellipse(57, 282, 40, 35);

  fill(0);  //Baymax's Eyes
  ellipse(40, 280, 10, 10);
  ellipse(60, 280, 10, 10);
  rect(40, 278, 20, 2);

  fill(122, 81, 53); //Brown
  rect(10, 290, 80, 10);  //Plate-like thing
}

function tangledportrait(){
  fill(163, 107, 160); //Purple
  rect(300, 170, 60, 25);
  fill(45, 47, 85); //Dark Blue
  rect(300, 195, 60, 20);
  fill(248, 172, 147); //Peach

  image(tangled, 313, 175, tangled.width/8, tangled.height/8);

  if(mouseIsPressed & mouseX >= 300 * 0.5 && mouseX <= 360 * 0.5 && mouseY >= 170 * 0.5 && mouseY <= 215 * 0.5){ //When you click on the photo (scaled) an image will pop on the computer screen
    fill(163, 107, 160); //Purple
    rect(90, 155, 180, 70);

    //Clouds
    for(var i = 0; i < 5; i++){
      fill(111, 90, 155);
      ellipse(118 + 300 * i/12, 225, 50, 30);
    }
    //Clouds

    //Castle
    fill(34, 35, 59); //Dark Blue

    rect(160, 200, 60, 40);
    rect(150, 215, 80, 40);
    rect(180, 175, 10, 60);
    rect(190, 190, 15, 60);
    rect(170, 190, 5, 60);
    //Castle

    fill(45, 47, 85); //Dark Blue
    rect(90, 225, 180, 35);
    for(var i = 0; i < 5; i++){ //The Lanterns
      var x = 5;
      var y = 10;
      fill(248, 172, 147); //Peach
      rect((110) + i/7 * 240, 170 + i, x, y);
      rect((170) + i/10 * 150, 195 - i/2, x/1.3, y/1.3);
      rect((170) + i/4 * 30, 210 + i/2, x/2, y/2);
      fill(254, 218, 181); //Light Yellow
      rect((110) + i/7 * 240, 178 + i, x, y/4);
      rect((170) + i/10 * 150, 201 - i/2, x/1.3, y/6);
      rect((170) + i/4 * 30, 214 + i/2, x/2, y/9);
    }

    //Boat
    fill(248, 228, 196);  //Yellow (Rapunzel's Hair)
    rect(200, 237, 2, 5);
    rect(205, 237, 2, 5);
    fill(99, 48, 46); //Brown
    rect(200, 240, 20, 5);
    triangle(200, 240, 195, 240, 200, 245);
    triangle(220, 240, 225, 240, 220, 245);
    //Boat
  }

}

function liloandstitchportrait() {
  fill(253, 244, 172); //Yellow
  rect(380, 160, 60, 35);
  fill(117, 178, 225); //Blue
  rect(380, 191, 60, 10);
  fill(93, 158, 198); //Blue
  rect(380, 193, 60, 10);
  fill(82, 143, 181); //Blue
  rect(380, 195, 60, 10);

  push();
  beginShape();
  fill(251, 178, 81); //Orange
  curveVertex(400, 200);
  curveVertex(380, 205);
  curveVertex(405, 190);
  curveVertex(440, 205);
  curveVertex(490, 240);
  endShape();
  pop();
  image(liloandstitchsurfboard, 415, 163, liloandstitchsurfboard.width/7, liloandstitchsurfboard.height/9);
  fill(251, 178, 81); //Orange
  rect(415, 198, 10, 5);


  if(mouseIsPressed & mouseX >= 380 * 0.5 && mouseX <= 440 * 0.5 && mouseY >= 160 * 0.5 && mouseY <= 205 * 0.5){ //When you click on the photo (scaled) an image will pop on the computer screen
    fill(253, 244, 172); //Yellow
    rect(90, 155, 180, 80)

    //Ocean
    fill(117, 178, 225); //Blue
    rect(90, 240, 180, 20);
    fill(93, 158, 198); //Blue
    rect(90, 235, 180, 5);
    fill(82, 143, 181); //Blue
    rect(90, 230, 180, 5);
    //Ocean

    //Sand
    push();
    beginShape();
    fill(251, 178, 81); //Orange
    curveVertex(100, 200);
    curveVertex(90, 260);
    curveVertex(170, 220);
    curveVertex(270, 260);
    curveVertex(300, 230);
    endShape();
    pop();
    //Sand

    image(liloandstitch, 145, 192, liloandstitch.width/5, liloandstitch.height/5);
  }
}

function bighero6portrait(){
  fill(208, 35, 39); //Red
  rect(370, 220, 50, 50);
  fill(255);
  rect(375, 225, 40, 15);
  rect(375, 245, 40, 5);
  rect(375, 255, 40, 15);

  if(mouseIsPressed & mouseX >= 370 * 0.5 && mouseX <= 420 * 0.5 && mouseY >= 220 * 0.5 && mouseY <= 270 * 0.5){ //When you click on the photo (scaled) an image will pop on the computer screen
    fill(208, 35, 39); //Red
    rect(90, 155, 180, 105);
    image(bighero6, 105, 172, bighero6.width/1.5, bighero6.height/1.5)
  }
}

I really wanted to code Sanfranstokyo but I realized there weren’t enough reference pictures that I could find so I referenced a picture of Sanfranstokyo and made it an outside window view from Hiro’s bedroom. I drew out Hiro’s bedroom on illustrator first before coding it (which was actually really fun to do even though it was tedious). Some things that I tried to implement into my code include:
1. Clouds that move through the sky and change color, with the sky, according to the time of day. You can tell what the time of the day is by looking at Hiro’s clock near his bed.
2. Eve from WALL-E (on top of the clock)’s eyes actually change color when it is 8:30am as if to indicate that it’s time for Hiro to wake up and go to school
3. After 7pm stars start to appear in the sky because it’s night time
4. After 7pm the buildings also start to get darker to match with the darkening sky. The windows light up and they also flash every couple seconds (differing per building) and the signs in japanese flash as if to attract people to come in

I also decided to add some easter eggs in the code. Spoilers of the easter eggs below 🙂 Read w/ caution
1. When it’s 11pm you can see a “Second star to the right” that’s blue and larger than the other stars: Peter Pan
2. Two drawings on the wall are from two disney movies that I also really love

Night Time + Second Star to the Right

It’s getting darker, Evening Time

Morning!

Reference photos and drawing of Hiro’s room

Zipped file of actual sized canvas with working clouds

cduong_SectionD_FinalProject