Category: Section C

(The audio seems to only work in wordpress on Chrome).

instructions:
hover over points to hear their pitches.
click points to activate them.
click points again to deactivate them.
clicked points that are close enough to each other will link to each other. (try not to link too many or the program will lag lol)
explore and enjoy the soundscape!

/* Hannah Cai
Section C
hycai@andrew.cmu.edu
Final Project
*/

//particle position arrays
var particleNumber = 200; //number of particles
var psize = 1.5; //particle size
var px = []; //particle x position
var py = []; //particle y position
var pz = []; //particle z position
var distanceToPoint; //dist from (mouseX, mousY) to (px, py)
var amplitude = 3.14 * 3; //amplitude of bobbing animation
var waveSpeed; //speed of bobbing animation
var theta = 0; //plugin for sin()


//particle sound arrays
var threshold = 100; //minimum distance between mouse and particle to trigger glow/sound
var notes = [130.81, 146.83, 164,81, 174.61, 196, 220, 246.94, //pitches of whole notes from C3
            261.63, 293.66, 329.63, 349.23, 392.00, 440, 493.88, 
            523.25, 587.33, 659.25, 698.46, 783.99, 880, 987.77, 
            1046.5, 1174.66, 1318.51, 1396.91, 1567.98, 1760, 2093]; //to C7
var ppitch = []; //pitch values for each particle
var pOsc = []; //oscillator for each particle
var pvolume = 0; //volume of each particle
var pOscOn = []; //array of booleans for if the oscillators are on

//misc other particle arrays
var pClicked = []; //array of booleans for if the particle was clicked
var glowSize; //size of particle glow

//arrays for cursor
var xarray = [0, 10, 20, 30, 40, 50];
var yarray = [0, 10, 20, 30, 40, 50];
var s;

//arrays for camera and perspective
var camX;
var camY;
var camZ;
var rotateX;
var rotateY;

//arrays for lines between particles
var connect = [];
var connectionThreshold = 500;

function setup() {
    createCanvas(windowWidth, windowHeight, WEBGL); //fit canvas to window size

    //set up variables; store in arrays
    for (i = 0; i < particleNumber; i++) {
        px.push(random(-width * 0.8, width * 0.8));
        py.push(random(-height, height));
        pz.push(random(-width, height / 2));
        ppitch.push(notes[floor(random(0, notes.length))]);
        pOscOn.push(false);
        pClicked.push(false);
        makeOsc(i);
    }
}

function makeOsc(index) {
    myOsc = new p5.SinOsc();
    myOsc.freq(ppitch[index]);
    pOsc.push(myOsc); //store oscillators in pOsc array
}

function playOsc(index) {
    var maxVolume = 0.01;
    pvolume = constrain(pvolume, 0, maxVolume);
    //turn clicked particles permanently on
    if (pClicked[index] === true) { 
        pvolume = maxVolume;
    } else { 
    //unclicked particles get louder as the mouse gets closer
        pvolume = map(distanceToPoint, threshold, 0, 0, maxVolume);
    }
    //make particles with lower pitches louder, so all ranges are heard clearly
    var factor =  map(ppitch[index], ppitch[0], ppitch[ppitch.length - 1], 5, 1);
    pvolume *= factor;
    pOsc[index].amp(pvolume);
}

function stopOsc(index) {
    pOsc[index].stop();
}

function draw() {
    background(0);
    noStroke(); //get rid of default black stroke

    //map camera position to mouse position to simulate orbit control
    camX = map(mouseX, 0, width, -width / 2, width / 2);
    camY = map(mouseY, 0, height, -height / 2, height / 2);
    camZ = (height/2.0) / tan(PI*30.0 / 180.0);
    camera(camX, camY, camZ, 0, 0, 0, 0, 1, 0);

    //set up particles
    for (i = 0; i < particleNumber; i++) {
        drawLines(i); //draw lines between clicked particles
        //create bobbing movement

        waveSpeed = map(pz[i], -width, height, 20000, 70000); //create parallax effect
        theta += (TWO_PI / waveSpeed);
        if (theta > amplitude) {
            theta = -theta;
        }
        py[i] += sin(theta);

        push();
        translate(px[i], py[i], pz[i]);
        drawGlow(i); //draw glow of each particle
        //draw each particle
        fill(255); 
        smooth();
        sphere(psize);
        pop();

        //play a particle's oscillator if the mouse's 
        //distance is less than the threshold
        if (distanceToPoint <= threshold) {
            if (pOscOn[i] == false) {
                pOsc[i].start();
                pOscOn[i] = true;
            }
            playOsc(i);
        }

        //stop a particle's oscillator if the mouse's 
        //distance is greater than the threshold
        if (distanceToPoint > threshold & pClicked[i] == false) {
            stopOsc(i);
            pOscOn[i] = false;
        }
    }

    //cursor
    noCursor(); //turn off the cursor icon, display below instead
    //this is basically the code from the snake lab we did
    for (var i = 0; i < xarray.length; i++) {
        fill(255, 255, 200);
        s = 8 - (xarray.length - i);
        ellipse(xarray[i], yarray[i], s, s);
    }
    xarray.push(mouseX - width / 2);
    yarray.push(mouseY - height / 2);
    if (xarray.length > 8) {
        xarray.shift();
        yarray.shift();
    }
}

function drawGlow(index) {
    push();
    noStroke();
    //rotate the (flat) ellipses to face the cameras to simulate 3d glow
    rotateX(radians(map(camY, -height / 2, height / 2, 40, -40)));
    rotateY(radians(map(camX, -width / 2, width / 2, -45, 45)));

    //calculate distance from mouse to each point
    distanceToPoint = dist(mouseX - width / 2, mouseY - height / 2, px[index], py[index]);
    
    //clicked particles have a pulsing glow;
    //unclicked particles glow when the mouse hovers close to them
    if (pClicked[index] === true) {
        glowSize = map(sin(theta), TWO_PI, 0, psize, 100);
    } else {
        glowSize = map(distanceToPoint, 100, psize, psize, 100);
    }
    //draw the actual glow (a radial alpha gradient)
    for (r = psize; r < glowSize; r += 1.5) {
        fill(255, 255, 200, map(r, psize, glowSize, 2, 0));
        ellipse(0, 0, r);
    }
    pop();
}

function drawLines(index) {
    push();
    //push the indices of clicked particles in the "connect" array;
    //turn off/remove particles from the array if clicked again
    if (pClicked[index] == true & ! connect.includes(index)) {
        connect.push(index);
    } else if (pClicked[index] == false) {
        connect.splice(index, 1);
    }

    //connect groups of particles that are clicked if the distance between is less than the threshold
    stroke(255);
    strokeWeight(1);
    noFill();
    for (i = 0; i < connect.length; i++) {
        for (j = i + 1; j < connect.length; j++) {
            if (dist(px[connect[i]], py[connect[i]], pz[connect[i]], 
                px[connect[j]], py[connect[j]], pz[connect[j]]) < connectionThreshold) {
                beginShape(LINES);
                vertex(px[connect[i]], py[connect[i]], pz[connect[i]]);
                vertex(px[connect[j]], py[connect[j]], pz[connect[j]]);
                endShape();
            }
        }
    }
    noStroke();
    pop();
}

//if window is resized, refit the canvas to the window
function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

function mouseClicked() {
    for (i = 0; i < particleNumber; i++) {
        distanceToPoint = dist(mouseX - width / 2, mouseY - height / 2, px[i], py[i]);
        //toggle pClicked on and off if mouse clicks within 10 pixels of a particle
        if (distanceToPoint < 10 & pClicked[i] == false) {
            pClicked[i] = true;
        } else if (distanceToPoint < 10 & pClicked[i] == true) {
            pClicked[i] = false;
        }
    }
}

Here’s a zip file for the fullscreen version.
final project fin

There are still a few bugs I’m aware of that I don’t know how to fix:
1. sometimes the links will flicker, adding another grouped point sometimes fixes it
2. sometimes the volume is louder than it should be upon refreshing/starting the program. I constrained the volume to try and avoid this but it didn’t seem to help
3. sometimes all the oscillators start off turned on upon refreshing/starting the program (if you move your mouse close to a point, the sine wave will start and stop, instead of fading in and out).

Generally, refreshing the page fixes all of these bugs, so please refresh the page if you notice any of the above!

I enjoyed this project a lot. Even though I spent a lot of time struggling and debugging, I feel like I learned a lot about both WEBGL and using sound/oscillators. I’m pretty satisfied in the final visual effects as well, although unfortunately, the program will start to lag if too many linked points are formed. Also unfortunately, my aim with this project was to familiarize myself more with objects, but I was completely stuck trying to format things in objects so I made everything with a ton of arrays instead. I definitely want to revisit this project in the future and format it properly with objects. In general, I definitely want to keep adding to this project because it’s still pretty clunky and buggy right now. I was planning to add a start screen, instructions, the ability to record audio, and different modes (eg a “wander” mode where the cursor moves around on its own), but I didn’t have time to even try implementing most of those before the deadline. In the future, though, I definitely want to try and make this something that could be a standalone interactive website (and add it to my portfolio, lol).

In general, I loved this class and I learned a lot! Thank you to Dannenberg and all the TAs!

My final project uses the webcam to generate simple animations that will follow motion/gestures of the user through a red color marker. For the best experience, make sure to only have one red object in front of the camera at a time.

Instructions:

1. grab something red (any relatively small red object would work best, or just pull up a red image on your phone)

2. hold it within range of the webcam, with the red facing the camera

3. wave/draw/play

   *to see the animations alone, you can turn the camera image on/off by pressing camera button

   press on shape 1, shape 2, and shape 3 to see different shapes

   works best in a brightly lit room, so the computer can recognize the red object

sketch

// Sophie Chen
// sophiec@andrew.cmu.edu
// 15-104 Final Project
// Dec 2018

// This program uses the webcam and generates a simple animation that will
// follow a red color marker. For best user experience, make sure to only have
// one red object in front of the camera at a time.

// declare variables
var myCaptureDevice;
var xarray = []; // array to store the value of x positions
var yarray = []; // array to store the value of y positions
var limitSize = 50; // length limit of x and y arrays
var cameraOn = 1; // camera switch - default on
var shapeOne = 1; // default starts with shape one
var shapeTwo = -1; // shape two starts false
var shapeThree = -1; // shape three starts false
var turtle; // define turtle graphics variable


// setup loads the webcam input and initializes turtle graphics
function setup() {
    createCanvas(600, 430);
    myCaptureDevice = createCapture(VIDEO);
    myCaptureDevice.size(600, 430);
    myCaptureDevice.hide();
    turtle = makeTurtle(0, 0);
    turtle.penDown();
    turtle.setColor(255);
}

// this function tests for color as a condition
function isColor(c) {
	return (c instanceof Array);
}

// this function draws the animations on top of the camera image
function draw() {
    myCaptureDevice.loadPixels();
    // if cameraOn is true, load camera output
    // if cameraOn is false, camera output is not visible, load black background
    if (cameraOn === 1){
        image(myCaptureDevice, 0, 0);
    } else {
        background(0);
    }

    //call functions that draw the buttons
    drawCamButton();
    drawShapeButton();
    drawShapeTwoButton();
    drawShapeThreeButton();

    //declare variables used to calculate centerpoint of red object/marker
    var xMin = 0; // x value minimum 
    var xMax = 600; // x value maximum
    var yMin = 0; // y value minimum
    var yMax = 430; // y value maximum

    // for loop that draws the shape animations
    for (var a = 0; a < xarray.length; a++){ 
        // declare color and size variables based on forloop
        var size = (50 / xarray.length) * a;
        var r = map(a, 0, xarray.length, 0, 255);
        var g = map(a, 0, xarray.length, 0, 255);
        var b = map(a, 0, xarray.length, 0, 255);

        // Shape 1: filled ellipse
        if (shapeOne === 1){
            shapeTwo = -1;
            shapeThree = -1;
            noStroke();
            fill(r, g, 255);
            ellipse(xarray[a], yarray[a], size, size);
        }


        // Shape 2: outlined ellipse
        if (shapeTwo === 1) {
            shapeOne = -1;
            shapeThree = -1;
            noFill();
            stroke(r, g, b);
            strokeWeight(1);
            ellipse(xarray[a], yarray[a], size, size);
        }

        
        // Shape 3: turtle graphics
        if (shapeThree === 1) {
            shapeOne = -1;
            shapeTwo = -1;
            turtle.setColor(color(205, 255, 10));
            turtle.goto(xarray[a], yarray[a]);
            turtle.forward(25);
            turtle.right(90);  
        }
    }

    // get the color value of every 5 pixels of webcam output
    for (var i = 0; i < width; i += 5){
        for (var j = 0; j < height; j+= 5) {
            var currentColor = myCaptureDevice.get(i, j);
            // targetColor: color(255, 0, 0);

            // calculate the difference between current color and target color
            var dr = red(currentColor) - 255;
            var dg = green(currentColor) - 0;
            var db =  blue(currentColor) - 0;
            
            // if current color is close enough to target color (~120), calculate
            // center point of the red area
            if (isColor(currentColor)){
               var dist = sqrt(sq(dr) + sq(dg) + sq(db));
               if (dist < 120) {
                    // find center point of red marker
                    if (i > xMin){ 
                        xMin = i;
                    }
                    if (i < xMax){
                        xMax = i;
                    }

                    if (j > yMin){
                        yMin = j;
                    }
                    if (j < yMax){
                        yMax = j;
                    } 
                }   
    		}
    	}
    }

    // push the newly discovered x, y into the array 
    xarray.push((xMin + xMax) / 2);
    yarray.push((yMin + yMax) / 2); 
    
    // if array is full, pop something out from the beginning
    while (xarray.length > limitSize) {
        xarray.shift();
        yarray.shift();
    }
}

// functions to trigger responses of buttons pressed
function mouseClicked(){
    // if camera button is pressed, toggle on/off
    if (mouseX > 10 & mouseX < 60 && mouseY > 10 && mouseY < 30){
        cameraOn = -cameraOn;
    }
    // if shape 1 button is pressed, show shape 1, disable shape 2 & 3
    if (mouseX > 10 && mouseX < 60 && mouseY > 20 && mouseY < 60){
        shapeOne = 1;
        shapeTwo = -1;
        shapeThree = -1;
    }
    // if shape 2 button is pressed, show shape 2, disable shape 1 & 3
    if (mouseX > 10 && mouseX < 60 && mouseY > 60 && mouseY < 90){
        shapeTwo = 1;
        shapeOne = -1;
        shapeThree = -1;
    }
    // if shape 3 button is pressed, show shape 3, disable shape 1 & 2
    if (mouseX > 10 && mouseX < 60 && mouseY > 90 && mouseY < 120){
        shapeThree = 1;
        shapeTwo = -1;
        shapeOne = -1;
    }

}

// camera button
function drawCamButton(){
    fill(255);
    stroke(0);
    rect(10, 10, 50, 20);
    noStroke();
    fill(0);
    text('camera', 15, 23);
}

// shape 1 button
function drawShapeButton(){
    fill(255);
    stroke(0);
    rect(10, 40, 50, 20);
    noStroke();
    fill(0);
    text('shape 1', 15, 54);
}

// shape 2 button
function drawShapeTwoButton(){
    fill(255);
    stroke(0);
    rect(10, 70, 50, 20);
    noStroke();
    fill(0);
    text('shape 2', 15, 85);
}

// shape 3 button
function drawShapeThreeButton(){
    fill(255);
    stroke(0);
    rect(10, 100, 50, 20);
    noStroke();
    fill(0);
    text('shape 3', 15, 116);
}

//////////////////////////////////////////////////////////////////////////////
function turtleLeft(d){this.angle-=d;}function turtleRight(d){this.angle+=d;}
function turtleForward(p){var rad=radians(this.angle);var newx=this.x+cos(rad)*p;
var newy=this.y+sin(rad)*p;this.goto(newx,newy);}function turtleBack(p){
this.forward(-p);}function turtlePenDown(){this.penIsDown=true;}
function turtlePenUp(){this.penIsDown = false;}function turtleGoTo(x,y){
if(this.penIsDown){stroke(this.color);strokeWeight(this.weight);
line(this.x,this.y,x,y);}this.x = x;this.y = y;}function turtleDistTo(x,y){
return sqrt(sq(this.x-x)+sq(this.y-y));}function turtleAngleTo(x,y){
var absAngle=degrees(atan2(y-this.y,x-this.x));
var angle=((absAngle-this.angle)+360)%360.0;return angle;}
function turtleTurnToward(x,y,d){var angle = this.angleTo(x,y);if(angle< 180){
this.angle+=d;}else{this.angle-=d;}}function turtleSetColor(c){this.color=c;}
function turtleSetWeight(w){this.weight=w;}function turtleFace(angle){
this.angle = angle;}function makeTurtle(tx,ty){var turtle={x:tx,y:ty,
angle:0.0,penIsDown:true,color:color(128),weight:1,left:turtleLeft,
right:turtleRight,forward:turtleForward, back:turtleBack,penDown:turtlePenDown,
penUp:turtlePenUp,goto:turtleGoTo, angleto:turtleAngleTo,
turnToward:turtleTurnToward,distanceTo:turtleDistTo, angleTo:turtleAngleTo,
setColor:turtleSetColor, setWeight:turtleSetWeight,face:turtleFace};
return turtle;}

I really enjoyed the camera interaction aspect of the text rain assignment, which is why I wanted to work more with live cam for this project and create something where the user has even more direct control. Overall this project was a lot more challenging than I expected, but that also made it more rewarding when I finally got it to work. I’m glad I went with color recognition for the marker because it allows for precise control and is more forgiving towards the user in terms of what environment they should be in when using this program. The most time-consuming and unexpected challenge was the lagging and freezing that comes with working with so many pixels, so trying to figure out what was causing the freezing took a lot longer than changing the code to fix it. Since the animations are on the simple side, I decided to include 3 different options. Ideally the animations would’ve been more complex, that’s something I hope to keep working on in the future. Below are screenshots from me using the program to give an idea of how it would look like when it’s working.

Term Project

// Joanne Lee
// Section C
// joannele@andrew.cmu.edu
// Term Project

// Visual Quadrant Map:
// Q1  Q2  Q3
// Q4  Q5  Q6
// Q7  Q8  Q9

// logistics
var game = "inactive"
var fCount = 150;
var playBoardW = 270;

// playing board variables
var boardWeight = 10;
var playBoxW = 270;
var effectCounter = 6;

// white, orange, gray box variables
var boxW = playBoardW / 4;
var boxX = [165.625, 250, 334.375];
var boxY = [240.625, 325, 409.375];
var grayBoxes = [];
var newOrange = false;
var whiteX = 0;
var whiteY = 2;
var orangeX = 2;
var orangeY = 0;

// score keeper
var score = 0;
var bestScore = 0;

// sound variables
var coin;
var boing;

function preload() {
    coin = loadSound("https://courses.ideate.cmu.edu/15-104/f2018/wp-content/uploads/2018/12/coin.wav");
    coin.setVolume(0.5);
    boing = loadSound("https://courses.ideate.cmu.edu/15-104/f2018/wp-content/uploads/2018/12/boing.wav");
    boing.setVolume(0.5);
}

function setup() {
    createCanvas(500,650);
    frameRate(100);
}

function draw() {
    background(255,211,222);

    // "growth" effect seen when white + gray boxes collide
    if (effectCounter < 2) { // staggered growth effect
        playBoxW = 280;
    }
    if (effectCounter > 2 & effectCounter < 4) { // staggered growth effect
        playBoxW = 290;
    }
    if (effectCounter > 4 & effectCounter < 6) { // staggered growth effect
        playBoxW = 280;
    }
    if (effectCounter > 6) { // staggered growth effect
        playBoxW = 270;
    }
    effectCounter += 1;

    drawPlayingBoard();
    drawPlayerBox();
    drawGoalBox();
    displayScore();

    if (game == "inactive") {
        displayStarterText();
    }
    if (game == "active") {
        drawGrayBox();
        // control speed that new boxes are generated
        if (frameCount % fCount == 0 & frameCount != 0) {
            generateGrayBox();
        }
        updateGrayBox();
        checkCollision();
    }
}

function displayScore() {
    fill(255,80); // display current score
    textSize(200);
    textStyle(BOLD);
    textFont('Helvetica');
    if (score < 10) {
        text(score, width - 120, height - 10);
    }
    else if (score < 100) { // shift over one spot for 2 digit score
        text(score, width - 225, height - 10);
    }
    else if (score < 999) {
        text(score, width - 330, height - 10 );
    }
    if (score >= bestScore) { // record the best score
        bestScore = score
    }

    fill(255); // display the best score
    textSize(20);
    textStyle(BOLD);
    textFont('Helvetica');
    text("High Score  " + bestScore, 110, height-160);
}

function displayStarterText() {
    fill(40,99);
    textSize(20);
    textStyle(BOLD);
    textFont('Helvetica');
    text("Press enter to begin", 155, height/2);
}

function drawPlayingBoard() { // light pink w/ thick white border
    fill(255,211,222);
    stroke(255); 
    strokeWeight(boardWeight);
    rectMode(CENTER);
    rect(width / 2, height / 2, playBoxW, playBoxW);
}

function drawPlayerBox() { // white box, starts in Q7
    strokeWeight(0);
    fill(255);
    rect(boxX[whiteX], boxY[whiteY], boxW, boxW);
}

function drawGoalBox() { // orange box, starts in Q3
    fill(255,170,107);
    rect(boxX[orangeX], boxY[orangeY], boxW*0.7, boxW*0.7);
}

function randomOrangeXY() { // generate random position for orange box
    var randX = int(random(0,3));
    var randY = int(random(0,3));

    // make sure orange x & y are in same line or column as previous position
    while (randX == whiteX || randY == whiteY) {
        randX = int(random(0,3));
        randY = int(random(0,3));
    }
    orangeX = randX;
    orangeY = randY;
}

function checkBoard() {
    // if white box position = orange box, you need a new orange box
    if (whiteX == orangeX & whiteY == orangeY) {
        coin.play();
        newOrange = true; // indicate need for new orange box
        score += 1; // increment score

        // increase speed at which new boxes spawn, cap at 90 frame count
        if (score % 10 == 0 & score != 0 && fCount > 90) {
            fCount -= 20;
        }   
    }

    // if board needs new orange box, randomly generate
    if (newOrange == true) {
        randomOrangeXY();
        newOrange = false;
    }
}

function generateGrayBox() { // will create a box with random attributes
    if (int(random(0,2)) == 0) { // create a box going left or right
        if (int(random(0,2)) == 0) { // create box going right
            createBox(-23.625, boxY[int(random(0,3))], 1, 0);
        }
        else { // create box going left
            createBox(523.625, boxY[int(random(0,3))], -1, 0);
        }
    }
    else { // create a box going up or down
        if (int(random(0,2)) == 0) { // create box going down
            createBox(boxX[int(random(0,3))], -23.625, 0, 1);
        }
        else { // create box going up
            createBox(boxX[int(random(0,3))], 673.625, 0, -1);
        }
    }
}

function createBox(tx, ty, dx, dy) { // store as an object in the array
    var grayBox =   { x: tx, y: ty,
                      dx: dx, dy: dy,
                      speed: 2.5, state: 'active'
                    }
    grayBoxes.push(grayBox);
}

function updateGrayBox() { // moves the box along
    for (var a = 0; a < grayBoxes.length; a ++) {
        grayBoxes[a].x += grayBoxes[a].dx * grayBoxes[a].speed;
        grayBoxes[a].y += grayBoxes[a].dy * grayBoxes[a].speed;
    }
}

function drawGrayBox() {
    for (var b = 0; b < grayBoxes.length; b ++) {
        fill(107,105,107);
        rect(grayBoxes[b].x, grayBoxes[b].y, boxW*0.7, boxW*0.7);
    }
}

function checkGrayBox() {
    for (var c = 0; c < grayBoxes.length; c ++) {
        // delete box from array once it is off the screen
        if (grayBoxes[c].x < -24 || (grayBoxes[c].x > 524) || 
            (grayBoxes[c].y < -24) || (grayBoxes[c].y > 674)) {
            count += 1;
            grayBoxes.splice(c,1);
        }
    }
}

function checkCollision() {
    for (var d = 0; d < grayBoxes.length; d ++) {
        if ((grayBoxes[d].x + boxW * 0.35) > (boxX[whiteX] - boxW * 0.5) &
            (grayBoxes[d].x - boxW * 0.35) < (boxX[whiteX] + boxW * 0.5) &&
            (grayBoxes[d].y - boxW * 0.35) < (boxY[whiteY] + boxW * 0.5) &&
            (grayBoxes[d].y + boxW * 0.35) > (boxY[whiteY] - boxW * 0.5)) {
            gameReset();
            break;
        }
    }
}

function gameReset() {
    boing.play();
    score = 0;
    grayBoxes = [];
    fCount = 150;
    effectCounter = 0;
    game = "inactive";
}

function keyPressed() {
    if (game == "active") {
        if (keyCode == UP_ARROW & whiteY > 0) {
            whiteY -= 1;
        }
        if (keyCode == DOWN_ARROW & whiteY < 2) {
            whiteY += 1;
        }
        if (keyCode == LEFT_ARROW & whiteX > 0) {
            whiteX -= 1;
        }
        if (keyCode == RIGHT_ARROW & whiteX < 2) {
            whiteX += 1;
        }
    }
    if (game == "inactive" & keyCode == ENTER) {
        game = "active"
        generateGrayBox();
    }

    // CHECK BOARD: to see if white box "ate" orange box
    checkBoard();
}

The objective of the game is quite simple: collect the orange box by using your arrow keys to move the white box while avoiding the incoming gray boxes!

As the game progresses, you’ll find that the gray boxes will appear quicker, creating more obstacles to dodge. The game was based off of a game I saw a while ago, but was unable to find again on the internet — so the idea is not original, however, the interface is!

Although seemingly simple, there were a lot of technical obstacles I had to overcome with the main one being having to make sure that too many gray boxes did not appear at once. I ran into some bugs along the way, but I believe that my current code is clean and efficient!

Something I also tried to focus on was simple, but meaningful UI. Attention to detail was put in to small things such as a visual (and audio) cue when you mess up or the placement of the score. Hopefully this is a soothing yet addictive game that will get people through finals week! It was fun to create something of my own.

Garden Game

// Catherine Coyle
// Final Project
// Section C
// ccoyle@andrew.cmu.edu

var flowers = [];

// number of the tool determines which tool the mouse is
var tool = 0;
var seedType = 0;
var SEEDTYPES = ['daisy', 'sunflower', 'tulip', 'violet'];
// 0 = seed pack
// 1 = watering can
// 2 = shovel

var filenames = [];
var images = [];
var menu = false;
var points = 0;
var flowerCount = 0;

// will be used for animation
var frames = 0;

// loading in all my image assets
function preload() {
	filenames[0] = 'https://i.imgur.com/WFbRW0R.png' // grown daisy
	filenames[1] = 'https://i.imgur.com/KfHyjYc.png' // grown sunflower
	filenames[2] = 'https://i.imgur.com/f5Naph6.png' // tulip grown
	filenames[3] = 'https://i.imgur.com/RjLTKmz.png' // violet grown
	filenames[4] = 'https://i.imgur.com/v4QTgQ2.png' // watering can
	filenames[5] = 'https://i.imgur.com/Rj3iuaG.png' // watering can pouring
	filenames[6] = 'https://i.imgur.com/1emAAfx.png' // daisy seed
	filenames[7] = 'https://i.imgur.com/Sjj5ezu.png' // sunflower seed
	filenames[8] = 'https://i.imgur.com/1HzYXus.png' // tulip seed
	filenames[9] = 'https://i.imgur.com/cKFWiib.png' // violet seed
	filenames[10] = 'https://i.imgur.com/z2DQqJT.png' // seeds plant
	filenames[11] = 'https://i.imgur.com/NBEkiuR.png' // daisy sapling
	filenames[12] = 'https://i.imgur.com/FVmfFxU.png' // sunflower sapling
	filenames[13] = 'https://i.imgur.com/9tXiQKK.png' // tulip sapling
	filenames[14] = 'https://i.imgur.com/irNCdQr.png' // violet sapling
	filenames[15] = 'https://i.imgur.com/pvEMQE2.png' // shovel up
	filenames[16] = 'https://i.imgur.com/WJ2MWlw.png' // shovel down

	for (var i = 0; i < filenames.length; i++) {
		images[i] = loadImage(filenames[i]);
	}
}

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

function draw() {
	background(173, 214, 156);

	// flowerCount is used to calculate points
	flowerCount = 0

	for (var i = 0; i < flowers.length; i++) {

		// flowers stop being watered after about 10 seconds
		if ((frames - flowers[i].startingF > 600) & (flowers[i].watered)){
			flowers[i].watered = false;
			flowers[i].startingF = frames;
		}

		// if they are not watered for 10 seconds, they wilt
		else if ((frames - flowers[i].startingF > 600) & 
				(flowers[i].watered == false)) {
			flowers[i].wilted = true;
		}

		// these if statements are just delegating how long it takes a flower to grow
		if ((flowers[i].status == 'seed') & 
			(frames - flowers[i].statusF - flowers[i].wiltedFrames > 700) &&
			 (flowers[i].wilted == false)) {
			flowers[i].status = 'sapling';
			flowers[i].statusF = frames;
		}
		else if ((flowers[i].status == 'sapling') & 
			(frames - flowers[i].statusF - flowers[i].wiltedFrames > 1200) && 
			(flowers[i].wilted == false)) {
			flowers[i].status = 'grown';
			flowers[i].statusF = frames;
		}

		// only non-wilted flowers are considered for points
		if (flowers[i].wilted == false) {
			flowerCount++;
		}
		flowers[i].draw();
	}

	// points increase every half-second
	if (frames % 30 == 0) {
		points += flowerCount;
	}

	// menu and points display
	fill(87, 77, 221);
	rect(0, 0, 200, 60);
	fill(255);
	textSize(30);
	text('POINTS: ' + str(points), 0, 30);
	textSize(10);
	text('Press m to display the menu', 0, 50);
	fill(0);
	noStroke();

	// different images are shown on the mouse based on the different tools
	if (tool == 0) {
		image(images[6 + seedType], mouseX, mouseY - 40);
	}
	else if (tool == 1) {
		if (mouseIsPressed){
			image(images[5], mouseX, mouseY - 40);
		}
		else {
			image(images[4], mouseX, mouseY - 40);
		}
	}
	else if (tool == 2) {
		if (mouseIsPressed){
			image(images[16], mouseX, mouseY - 40);
		}
		else {
			image(images[15], mouseX, mouseY - 40);
		}
	}

	// menu text
	if (menu) {
		fill(87, 77, 221);
		rect(20, 20, 440, 440);
		fill(255);
		textSize(12);
		text('-Grow a cute garden and gain points! \n \n \
			-Use the left and right arrows to cycle through tools \n \n \
			-The up and down arrows cycle through different types of flowers! \n \n \
			-Blue circles mean that your plant is currently watered \n \n \
			-Brown circles mean that it has wilted and you need to water it again! \n \n \
			-Points only increase for non-wilted flowers \n \n \
			-Press m again to go back to the game!', 30, 130);
	}

	// the continuous counter increases every time draw is called, time events are based on this
	frames++;
}

function keyPressed() {

	// right and left arrow commands switch between tools
	if (keyCode == RIGHT_ARROW) {
		tool++;
		tool = tool % 3;
	}
	else if ((keyCode == LEFT_ARROW) & (tool > 0)) {
		tool--;
		tool = Math.abs(tool);
		tool = tool % 3;
	}
	else if ((keyCode == LEFT_ARROW) & (tool == 0)) {
		tool = 2;
	}

	// up and down arrows switch between flower types
	// this only occurs if the user is currently using the seed tool
	if ((tool == 0) & (keyCode == UP_ARROW)) {
		seedType++;
		seedType = seedType % SEEDTYPES.length;
	}
	else if ((tool ==0) & (keyCode == DOWN_ARROW) && (seedType > 0)) {
		seedType--;
		seedType = seedType % SEEDTYPES.length;
	}
	else if ((tool ==0) & (keyCode == DOWN_ARROW) && (seedType == 0)) {
		seedType = 3;
	}
	if ((key == 'm') & (menu == false)) {
		menu = true;
	}

	//pressing m opens the menu
	else if ((key == 'm') & (menu)) {
		menu = false;
	}
}

function mousePressed() {

	// clicking with the seed tool will plant a seed
	if (tool == 0) {
		newFlower = makeFlower(SEEDTYPES[seedType], mouseX, mouseY, seedType);
		flowers.push(newFlower);
	}

	// clicking with the watering can waters the flower
	if (tool == 1) {
		for(var i = 0; i < flowers.length; i++) {
			if ((dist(mouseX, mouseY, flowers[i].x, flowers[i].y) < 20) & 
				(flowers[i].wilted)) {
				flowers[i].wilted = false;
				flowers[i].wiltedFrames = 0;
				flowers[i].startingF = frames;
			}
			else if ((dist(mouseX, mouseY, flowers[i].x, flowers[i].y) < 20)) {
				flowers[i].watered = true;
				flowers[i].startingF = frames;
			}
		}
	}

	// clicking with the shovel digs up and removes the flower
	if (tool == 2) {
		for (var i = 0; i < flowers.length; i++) {
			if (dist(mouseX, mouseY, flowers[i].x, flowers[i].y) < 20) {
				flowers.splice(i, 1);
			}
		}
	}
}

// flower class
function makeFlower(type, x, y, typeNum) {
	flower = {
		type: type,
		x: x,
		y: y,
		status: 'seed',
		wilted: false,
		draw: drawFlower,
		watered: false,
		imageNum: typeNum,
		startingF: frames,
		statusF: frames,
		wiltedFrames: 0,
	}
	return flower
}


function drawFlower() {
	fill(255);

	// blue circle indicates flower has been watered
	// circle size decreases as time watered runs out
	if (this.watered) {
		stroke('blue');
		strokeWeight(.25);
		noFill();
		ellipse(this.x - 20, this.y - 20, 10, 10);
		var waterTime = map(frames - this.startingF, 600, 0, 0, 10);
		fill('blue');
		noStroke();
		ellipse(this.x - 20, this.y - 20, waterTime, waterTime);
	}

	// brown circles indicate a wilted flower
	if (this.wilted) {
		fill('brown')
		ellipse(this.x - 20, this.y - 20, 10, 10);
		this.wiltedFrames++;
	}

	// below if statements delegate which image to be drawn
	if (this.status == 'seed') {
		image(images[10], this.x - 20, this.y - 20);
	}
	else if (this.status == 'sapling') {
		image(images[11 + this.imageNum], this.x - 20, this.y - 20);
	}
	else if (this.status == 'grown') {
		image(images[this.imageNum], this.x - 20, this.y - 20);
	}
}

I had so much fun with this!!!!!!

The instructions are all viewable in-game by going to the menu. It basically involves clicking and selecting tools with the arrow keys.

I really like idyllic and peaceful kind of games so I thought making a gardening game would be fun! I had originally wanted to have random interactions with animals but it turned out to be too much to do in the time frame (maybe I’ll do it on my own).

The graphics are not the best as I didn’t really realize how many I would have to draw going into the project but I think at the least they get the point across.

I was really happy with my time-based animations for this project as I feel like we didn’t do too much with those this semester. Additionally I took advantage of objects to make all my flowers.

I hope you like the game!

Instructions:

To operate the television, click the power button and use the up and down buttons to cycle through the channels. Come back at a different time of the day to see what else is on! Make sure your webcam access is allowed as well.

Turn on the TV!

var power = false; // power starts off

var h; // hour

var gCLickCount; // track mouse clicks
var channelIsCurrently = 0; // what index of the array is at
var channel = []; // array to store current videos

var myCaptureDevice; // laptop camera

var chanDistUp; // distance to channel up
var chanDistDown; // distance to channel down
var powDist; // distance to power button

var videos;

var buttonsPositionX = 485;

var powerbutton = {x: buttonsPositionX, y: 230, d: 60, render:drawPowerButton, 
                   strokecol:'burlywood', col:'lightyellow', 
                   labelcol:'burlywood'};
var channelUp = {x: buttonsPositionX, y:390 , w:60 , h:60 , render:drawChannelUp, 
                strokecol:'burlywood', col:'lightyellow'};
var channelDown = {x: buttonsPositionX, y:450 , w:60 , h:60 , render:drawChannelDown, 
                   strokecol:'burlywood', col:'lightyellow'};
                   
function setup() {
    createCanvas(550, 600);


    frameRate(30);
    myCaptureDevice = createCapture(VIDEO);
    myCaptureDevice.size(350, 308); // attempt to size the camera. 
    myCaptureDevice.hide(); // this hides unnecessary extra view.

    h = hour(); // what time is it?

    //load videos, assign each video a variable
    var mVid1 = createVideo('https://i.imgur.com/6OBMn2v.mp4');
    var mVid2 = createVideo('https://i.imgur.com/X73HsOP.mp4');
    var mVid3 = createVideo('https://i.imgur.com/AHmztFm.mp4');
    var aVid1 = createVideo('https://i.imgur.com/wNWUrAi.mp4');
    var aVid2 = createVideo('https://i.imgur.com/5nEKwzC.mp4');
    var aVid3 = createVideo('https://i.imgur.com/FbpKnv0.mp4');
    var eVid1 = createVideo('https://i.imgur.com/ziaEsYx.mp4');
    var eVid2 = createVideo('https://i.imgur.com/4kGyLnf.mp4');
    var eVid3 = createVideo('https://i.imgur.com/arD9T0D.mp4');
    var nVid1 = createVideo('https://i.imgur.com/5IfBxXm.mp4');
    var nVid2 = createVideo('https://i.imgur.com/ziyI0g4.mp4');
    var nVid3 = createVideo('https://i.imgur.com/fPyKK17.mp4');

    videos = [mVid1, mVid2, mVid3, aVid1, aVid2, aVid3, eVid1, 
              eVid2, eVid3, nVid1, nVid2, nVid3]; // array of video variables

    for (var i = 0; i < videos.length; i++){
        videos[i].hide(); //hide off canvas videos
        videos[i].loop(); // play videos on loop
    }
    // Which videos are on the different channels
    // if the hour is before 6 am
    if(h <= 6){ 
        channel = [mVid1, mVid2, mVid3];
    // if hour is between 6am and 12 pm
    }else if (h > 6 & h <= 12){ 
        channel = [aVid1,aVid2, aVid3];
    // if hour is between 12apm and 6pm
    }else if(h > 12 & h <= 18){
        channel = [eVid1, eVid2, eVid3];
    // if hour is after 6pm
    }else{
        channel = [nVid1,nVid2, nVid3];
    } 

}

function draw() {
     scale(0.8, 0.8)
    // distance between mouse click and the different buttons
    chanDistUp = dist(mouseX, mouseY, channelUp.x * 0.8, channelUp.y * 0.8); 
    chanDistDown = dist(mouseX, mouseY, channelDown.x * 0.8, channelDown.y * 0.8);
    powDist = dist(mouseX, mouseY, powerbutton.x * 0.8, powerbutton.y *0.8);

    television(0, 40);

    // if the tv is on, show the video on the current channel
    if(power === true){
        image(channel[channelIsCurrently % channel.length], 
            buttonsPositionX - 444, 192, buttonsPositionX - 138, 305);
    }

    //if tv is off, you see your reflection on the screen
    if(power === false){
        myCaptureDevice.loadPixels(); // this must be done on each frame.
        push();
        tint(100, 50); // Display at half opacity
        image(myCaptureDevice, buttonsPositionX - 440, 190); // draw the camera
        pop();
    } 

    //random tv noise, higher mouseY and mouseX is more noise
    if(power === true){
        for (var i = 0; i < mouseY + mouseX * 2; i++) {
            var r = random(0, 255);
            var g = random(0, 255);
            var b = random(0, 255);
            stroke(r, g, b);
            point(random(buttonsPositionX - 445, 388), 
                random(buttonsPositionX - 298, 497));
        }
    }
}

function mousePressed(){

    //click the channel up/down buttons when the power is on, 
    //the video will change
    if(chanDistUp < channelUp.w / 2 & power === true) {
        channelIsCurrently += 1;
    }
    if(chanDistDown < channelDown.w / 2 & power === true){
        channelIsCurrently -= 1;
        if(channelIsCurrently < 0){ // channels cycle, never goes above 2
            channelIsCurrently = 2;
        }
    }

    // if you click the power button, the tv will turn on
    if(powDist < 30 & power === false){
        power = true;
    } else if (powDist < 30) {
        power = false;
    }
}

function drawPowerButton() {
    ellipseMode(CENTER);
    strokeWeight(10);
    stroke(powerbutton.strokecol);
    fill(powerbutton.col);
    ellipse(powerbutton.x, powerbutton.y, powerbutton.d, powerbutton.d);
   
    // power symbol
    strokeWeight(3);

    // hovering over the symbol changes its color
    if(powDist < 30){
        stroke(150);
    }else{
        stroke(powerbutton.labelcol);
    }

    // power symbol
    noFill();
    arc(buttonsPositionX, 232, 25, 25, PI + 2.5, PI + 7);
    line(buttonsPositionX, 220, buttonsPositionX, 232);
}

function drawChannelUp() {
    rectMode(CENTER);
    strokeWeight(10);
    stroke(channelUp.strokecol);
    fill(channelUp.col);
    rect(channelUp.x, channelUp.y, channelUp.w, channelUp.h, 5, 5);
    strokeWeight(0);
    // hovering over the symbol changes its color
    if(chanDistUp < 30){
        fill(150);
    }else{
        fill(channelUp.strokecol)
    }
    textAlign(CENTER);
    textSize(40);
    text('+', channelUp.x, channelUp.y + 10);
}

function drawChannelDown(){
    rectMode(CENTER);
    strokeWeight(10);
    stroke(channelDown.strokecol);
    fill(channelDown.col);
    rect(channelDown.x, channelDown.y, channelDown.w, channelDown.h, 
        5, 5);
    strokeWeight(0);
    // hovering over the symbol changes its color
    if(chanDistDown < 30){
        fill(150);
    }else{
        fill(channelDown.strokecol);
    }
    textAlign(CENTER);
    textSize(40);
    text('-', channelDown.x, channelDown.y + 10);
}

function television(x, y){
    rectMode(CORNER);

    //tv body
    stroke(63, 44, 35);
    strokeWeight(5);
    fill(63,44,35); 
    rect(0, y + 65, width, y + 440, 30, 30); 

    //tv body
    fill('lightyellow');
    rect(x + 10, y + 80, x + 425, y + 410, 10, 10); 

    // screen
    fill(131, 123, 105);
    stroke(63, 44, 35);
    rect(x + 40, 190, 350, 308); 

    // place for tv knobs
    fill(101,69,56);
    strokeWeight(15);
    rect(x + 425, y + 85, x + 115, y + 400); 
    strokeWeight(10);
    stroke(63, 44, 35);
    line(x + 320, 5, x + 390, 105);
    line(x + 420, 5, x + 400, 105);

    drawPowerButton(); // power button
    drawChannelUp(); // channel up
    drawChannelDown(); // channel down 
}

Statement:

For my final project, I wanted to create a television that had different “programs” on at different times of the day. I was able to create this with a set of 12 different videos, three each for four different times of day (12am-6am, 6am-12pm, 12pm-6pm, 6pm-12am). I also had the buttons on the tv be mouse responsive: when hovering over the buttons they change a different color. As stated in my proposal, I was able to add a webcam component for when the tv is ‘off’ as if you were reflected in the screen like a glass tv. I added some noise on top of the videos controlled by mouse x and mouse y positions.

I feel like this project solidified a lot of the concepts we have learned throughout this semester. I definitely have a better grasp on how I can use p5.js in the future on my own projects as well as the core concepts behind computer programming.

Project Description & Instructions Below!!

finalproject

// Name: Rachel Park
// Andrew ID: rjpark
// 15-104 Section C

var i;
var currentkey = 'c';
var choreography = [];

var contemporary = [];
var groovy = [];
var footwork = [];
var isolation = [];
var pretty = [];
var swaggySassy = [];
var tutting = [];
var wavesWacking = [];

function preload() {
    // database of dance moves
    // loading the videos
    contemporary = ['C1.MOV', 'C2.MOV', 'C3.MOV', 'C4.MOV', 'C5.MOV',
        'C6.MOV', 'C7.MOV', 'C8.MOV', 'C9.MOV', 'C10.MOV', 'C11.MOV', 'C12.MOV',
        'C13.MOV', 'C14.MOV', 'C15.MOV', 'C16.MOV', 'C17.MOV', 'C18.MOV',
        'C19.MOV', 'C20.MOV', 'C21.MOV', 'C22.MOV', 'C23.MOV', 'C24.MOV',
        'C25.MOV', 'C26.MOV', 'C27.MOV', 'C28.MOV', 'C29.MOV', 'C30.MOV',
        'C31.MOV', 'C32.MOV', 'C33.MOV', 'C34.MOV', 'C35.MOV', 'C36.MOV',
        'C37.MOV', 'C38.MOV',];

    for (var j = 0; j < contemporary.length; j ++) {
        contemporary[j] = './Moves/C/' + contemporary[j];
    }

    groovy = ['G1.MOV', 'G2.MOV', 'G3.MOV', 'G4.MOV', 'G5.MOV', 'G6.MOV',
        'G7.MOV', 'G8.MOV', 'G9.MOV', 'G10.MOV', 'G11.MOV', 'G12.MOV',
        'G13.MOV', 'G14.MOV'];

    for (var j = 0; j < groovy.length; j ++) {
        groovy[j] = './Moves/G/' + groovy[j];
    }

    footwork = ['F1.MOV', 'F2.MOV', 'F3.MOV', 'F4.MOV', 'F5.MOV', 'F6.MOV',
        'F7.MOV', 'F8.MOV', 'F9.MOV', 'F10.MOV', 'F11.MOV', 'F12.MOV',
        'F13.MOV', 'F14.MOV', 'F15.MOV', 'F16.MOV', 'F17.MOV', 'F18.MOV',
        'F19.MOV', 'F20.MOV', 'F21.MOV'];

    for (var j = 0; j < footwork.length; j ++) {
        footwork[j] = './Moves/F/' + footwork[j];
    }

    isolation = ['I1.MOV', 'I2.MOV', 'I3.MOV','I4.MOV', 'I5.MOV', 'I6.MOV',
        'I7.MOV', 'I8.MOV', 'I9.MOV', 'I10.MOV', 'I11.MOV', 'I12.MOV',
        'I13.MOV', 'I14.MOV', 'I15.MOV', 'I16.MOV', 'I17.MOV', 'I18.MOV',
        'I19.MOV', 'I20.MOV', 'I21.MOV', 'I22.MOV', 'I23.MOV', 'I24.MOV',
        'I25.MOV', 'I26.MOV', 'I27.MOV', 'I28.MOV', 'I29.MOV', 'I30.MOV',
        'I31.MOV', 'I32.MOV', 'I33.MOV', 'I34.MOV', 'I35.MOV'];

    for (var j = 0; j < isolation.length; j ++) {
        isolation[j] = './Moves/I/' + isolation[j];
    }

    pretty = ['P1.MOV', 'P2.MOV', 'P3.MOV', 'P4.MOV', 'P5.MOV', 'P6.MOV',
        'P7.MOV', 'P8.MOV', 'P9.MOV', 'P10.MOV', 'P11.MOV', 'P12.MOV',
        'P13.MOV', 'P14.MOV', 'P15.MOV', 'P16.MOV', 'P17.MOV', 'P18.MOV',
        'P19.MOV', 'P20.MOV', 'P21.MOV', 'P22.MOV', 'P23.MOV', 'P24.MOV',
        'P25.MOV', 'P26.MOV', 'P27.MOV', 'P28.MOV', 'P29.MOV'];

    for (var j = 0; j < pretty.length; j ++) {
        pretty[j] = './Moves/P/' + pretty[j];
    }

    swaggySassy = ['S1.MOV', 'S2.MOV', 'S3.MOV', 'S4.MOV', 'S5.MOV', 'S6.MOV',
        'S7.MOV', 'S8.MOV', 'S9.MOV', 'S10.MOV', 'S11.MOV','S12.MOV', 'S13.MOV',
        'S14.MOV', 'S15.MOV', 'S16.MOV', 'S17.MOV', 'S18.MOV', 'S19.MOV',
        'S20.MOV', 'S21.MOV', 'S22.MOV', 'S23.MOV', 'S24.MOV', 'S25.MOV',
        'S26.MOV', 'S27.MOV', 'S28.MOV', 'S29.MOV', 'S30.MOV', 'S31.MOV',
        'S32.MOV'];

    for (var j = 0; j < swaggySassy.length; j ++) {
        swaggySassy[j] = './Moves/S/' + swaggySassy[j];
    }

    tutting = ['T1.MOV', 'T2.MOV', 'T3.MOV', 'T4.MOV', 'T5.MOV', 'T6.MOV',
        'T7.MOV', 'T8.MOV', 'T9.MOV', 'T10.MOV', 'T11.MOV', 'T12.MOV',
        'T13.MOV', 'T14.MOV', 'T15.MOV', 'T16.MOV', 'T17.MOV', 'T18.MOV',
        'T19.MOV', 'T20.MOV', 'T21.MOV', 'T22.MOV', 'T23.MOV', 'T24.MOV',
        'T25.MOV', 'T26.MOV', 'T27.MOV', 'T28.MOV', 'T29.MOV', 'T30.MOV',
        'T31.MOV', 'T32.MOV', 'T33.MOV', 'T34.MOV', 'T35.MOV', 'T36.MOV',
        'T37.MOV', 'T38.MOV'];

    for (var j = 0; j < tutting.length; j ++) {
        tutting[j] = './Moves/T/' + tutting[j];
    }

    wavesWacking = ['W1.MOV', 'W2.MOV', 'W3.MOV', 'W4.MOV', 'W5.MOV', 'W6.MOV',
        'W7.MOV', 'W8.MOV', 'W9.MOV', 'W10.MOV', 'W11.MOV', 'W12.MOV',
        'W13.MOV'];

    for (var j = 0; j < wavesWacking.length; j ++) {
        wavesWacking[j] = './Moves/W/' + wavesWacking[j];
    }
}

function setup() {
    createCanvas(700, 355);
    background(0);
    fill(255);
    noStroke();
    rect(600, 0, 100, 355);
}

function draw() {
    // title
    fill("pink");
    stroke(0);
    strokeWeight(3);
    textAlign(CENTER);
    textSize(30);
    text("Make Your Own Choreography!!", 300, 45);

    // box for reference
    fill(255);
    stroke("pink");
    strokeWeight(3);
    rectMode(CENTER);
    rect(85, 170, 120, 140);

    // text in reference box
    fill(0);
    noStroke();
    textAlign(CENTER);
    textSize(12);
    text("c = contemporary", 85, 117);
    text("f = footwork", 85, 133);
    text("g = groovy", 85, 149);
    text("i = isolation", 85, 165);
    text("p = pretty/feminine", 85, 181);
    text("s = swaggy/sassy", 85, 197);
    text("t = tutting", 85, 213);
    text("w = wavy/wacking", 85, 229);
    fill(255);
    stroke(0);
    strokeWeight(1);
    text("Letter Key Chart", 85, 90);

    // box for which letter key is pressed
    fill(255);
    stroke("pink");
    strokeWeight(3);
    rectMode(CENTER);
    rect(205, 127, 55, 55);

    // display the letter key that's pressed
    fill(0);
    noStroke();
    textAlign(CENTER);
    textSize(40);
    text(currentkey, 205, 140);
    fill(255);
    stroke(0);
    strokeWeight(1);
    textSize(12);
    text("Last Key Pressed", 205, 90);

    // box for play button
    fill(255);
    stroke("pink");
    strokeWeight(3);
    rectMode(CENTER);
    rect(205, 213, 55, 55);

    // display the play sign
    fill(0);
    noStroke();
    triangle(195, 200, 195, 230, 220, 215);
    fill(255);
    stroke(0);
    strokeWeight(1);
    textSize(12);
    text("Play Button", 205, 175);

    // box for instructions
    fill(255);
    stroke("pink");
    strokeWeight(3);
    rectMode(CENTER);
    rect(400, 170, 260, 140);

    // text in instructions box
    fill(0);
    noStroke();
    textAlign(LEFT);
    textSize(10);
    text("1. Look at the letter key chart & choose a letter to press", 
        280, 115);
    text("2. Press the letter key (displayed in the box to the right)", 
        280, 134);
    text("3. Keep pressing desired letter keys", 280, 153);
    text("4. When finished pressing letter keys, click the play", 280, 172);
    text("button to watch your choreography", 280, 191);
    text("5. Repeat steps 1-4 to keep adding to choreography", 280, 210);
    text("6. Refresh page to start over", 280, 229)
    fill(255);
    stroke(0);
    strokeWeight(1);
    textAlign(CENTER);
    textSize(12);
    text("Instructions", 400, 90);

    // side note & credit/shoutout to dancers
    fill(255);
    stroke(0);
    strokeWeight(1);
    textAlign(LEFT);
    textSize(10);
    text("** The objective of this project is to help you create a sequence" + 
        "of dance moves (choreography) that can be adjusted", 30, 280);
    text("and modified to match a song you choose when actually" +
        "choreographing.", 30, 295);
    text("** Also, shoutout to the featured dancers (by letter key chart);" +
        "Léann Bahi, Elizabeth Kuo, Jackie Jiang, Chris Shon,", 30, 320);
    text("Maggie Lyu, Emily Wu, Newton Xie, and Yuyan Sun.", 30, 335);
}

function getRandomInt(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min)) + min;
}

function keyTyped() {
    document.getElementById("danceVideo").muted = true;

    // assigning pressed keys to a dance move video
    // playing that dance move video
    // adding each dance move video into a new array called choreography
    if (key === 'c') {
        currentkey = key;
        i = getRandomInt(0, contemporary.length);
        choreography.push(contemporary[i]);
        document.getElementById("video").src = str(contemporary[i]);
        document.getElementById("danceVideo").load();
        document.getElementById("danceVideo").play();
    }

    if (key === 'g') {
        currentkey = key;
        i = getRandomInt(0, groovy.length);
        choreography.push(groovy[i]);
        document.getElementById("video").src = str(groovy[i]);
        document.getElementById("danceVideo").load();
        document.getElementById("danceVideo").play();
    }

    if (key === 'f') {
        currentkey = key;
        i = getRandomInt(0, footwork.length);
        choreography.push(footwork[i]);
        document.getElementById("video").src = str(footwork[i]);
        document.getElementById("danceVideo").load();
        document.getElementById("danceVideo").play();
    }

    if (key === 'i') {
        currentkey = key;
        i = getRandomInt(0, isolation.length);
        choreography.push(isolation[i]);
        document.getElementById("video").src = str(isolation[i]);
        document.getElementById("danceVideo").load();
        document.getElementById("danceVideo").play();
    }
    if (key === 'p') {
        currentkey = key;
        i = getRandomInt(0, pretty.length);
        choreography.push(pretty[i]);
        document.getElementById("video").src = str(pretty[i]);
        document.getElementById("danceVideo").load();
        document.getElementById("danceVideo").play();
    }

    if (key === 's') {
        currentkey = key;
        i = getRandomInt(0, swaggySassy.length);
        choreography.push(swaggySassy[i]);
        document.getElementById("video").src = str(swaggySassy[i]);
        document.getElementById("danceVideo").load();
        document.getElementById("danceVideo").play();
    }

    if (key === 't') {
        currentkey = key;
        i = getRandomInt(0, tutting.length);
        choreography.push(tutting[i]);
        document.getElementById("video").src = str(tutting[i]);
        document.getElementById("danceVideo").load();
        document.getElementById("danceVideo").play();
    }

    if (key === 'w') {
        currentkey = key;
        i = getRandomInt(0, wavesWacking.length);
        choreography.push(wavesWacking[i]);
        document.getElementById("video").src = str(wavesWacking[i]);
        document.getElementById("danceVideo").load();
        document.getElementById("danceVideo").play();
    }
}

function mouseClicked() {
    // plays through all videos in choreography array
    var nextVideos = function(i) {
       document.getElementById('video').src = choreography[i];

       var videoElement = document.getElementById('danceVideo');
       videoElement.load();
       videoElement.play();

       // checks to see if there are videos left to play (i < array length)
       // checks to see if current video has ended to play next video in array
       if (i < choreography.length) {
            videoElement.onended = function() {
                nextVideos(i + 1);
            }
        }
    }

    // clicking the play button will play back entire choreography
    if (mouseX > 205 - (55 / 2) & mouseX < 205 + (55 / 2)) {
        if (mouseY > 213 - (55 / 2) && mouseY < 213 + (55 / 2)) {
            nextVideos(0);
        }
    }
}

Statement

As stated in my final project proposal, I wanted to create something that was going to be personally interesting to me. So, I decided to create a visual and interactive computer keyboard dance generator. The objective of my project was to allow the user to compile a bunch of dance moves that are generated based off of the letter key that they pressed. This would help the user create their own choreography that can be adjusted and modified to fit a song they choose when they actually choreograph.

In order to create this, I had to collect a database of dance moves. So, I recorded various dancers on campus dancing in a specific dance style, and, from this, I gathered videos of 220 unique dance moves. Once I collected my videos, I loaded them into code and assigned specific dancers/dance style to different arrays. Next, I essentially paired certain letter keys to arrays so that, when the user presses a letter key, a random dance video (dance move) from the paired array would play. In addition, as the user presses a letter key, the corresponding dance videos are added to a “choreography” array which contains the entire choreography that the user makes and can be played by pressing the play button at the end.

My greatest struggle with this project was getting all the videos in the “choreography” array to play in succession. I had to do a lot of outside research to figure out how to see if one video has ended in the array for another one to start. I used document.getElementById().src, load, play, and onended to make this happen.

Below is a screenshot of what the project looks like as well as instructions on how to install and run it.

Screenshots

** can’t show the interactiveness of the project through screenshots; click the link below and follow instructions to use it!

Instructions

1. Press the link below (you will only get access with CMU Andrew email).
2. Download the file (it is safe to download & it will take a while).
3. Open the folder Final Project.
4. Open the index.html file.
5. Read the instructions on the web page to play!

Choreography Generator Download Link

sketch

/*
Connor McGaffin
Section C
cmcgaffi@andrew.cmu.edu
Assignment 11-B
*/

var option = 3; //starting option
var w = 500; //width
var h = 300; //height
var w2 = w / 2; //width / 2
var h2 = h / 2; //height / 2
var x = []; //bubble starting pos
var y = [];
var dx = []; //bubble direction
var dy = [];
var col = []; //bubble color
var np = 50; // how many particles
var nb = 50; //how many bubbles
var title = ["Valerie","Hound Dog", "Step"];
var artist = ["Amy Winehouse", "Elvis Presley", "Vampire Weekend"];
var currentSpot = 200; //current spot and lengths are to be later configured with p5.js addons and Spotify connectivity
var songLength = 300; // placeholder
var tempo = [96,175,78,0]; //stored tempo of songs
var amp = new p5.Amplitude(); //get amplitude
var particles = [];

function preload() {
    img = loadImage("https://i.imgur.com/K3YQPRm.png"); //load spotify logo
    amy = loadSound("https://courses.ideate.cmu.edu/15-104/f2018/wp-content/uploads/2018/12/amy.mp3"); //"Valerie" by Amy Winehouse
    elvis = loadSound("https://courses.ideate.cmu.edu/15-104/f2018/wp-content/uploads/2018/12/elvis.mp3"); //"Hound Dog" by Elvis Presley
    vw = loadSound("https://courses.ideate.cmu.edu/15-104/f2018/wp-content/uploads/2018/12/vw.mp3"); //"Step" by Vampire Weekend 
}

function particleStep() {
    this.x += this.dx;
    this.y += this.dy / 5;
}

function particleDraw() { //draw particle
    strokeWeight(this.s);
    point(this.x, this.y);
}

function makeParticle(px, py, pdx, pdy, ps) { //create particle with starting pos and velocity
    p = {x: px, y: py,
         dx: pdx, dy: pdy, s: ps,
         step: particleStep,
         draw: particleDraw
        }
    return p;
}

function explode() {
    for (var i = 0; i < np; i++) {// make a particle
        fill(255);
        stroke(255);
        var p = makeParticle(w2, h2, random(-30,50), random(-30,50), random(5,10)); //initial location x/y quadrant velocity x/y, size
        particles.push(p); // push the particle onto particles array 
    }
    for (var i = 0; i < np; i++) { // for each particle
        var p = particles[i];
        p.step();
        p.draw();
    }
}

function record () {
    noStroke();
    fill(0);
    ellipse (w2, h2 , 200); //vinyl
    for (i = 0; i < 8; i++){ 
        push();
        noFill();
        stroke(90);
        strokeWeight(1);
        ellipse(w2, h2, 190 - i * 30);
        pop();  //texture
    }
    fill(200); // blue
    ellipse(w2, h2, 75); //label
    push();
    translate(w2,h2);
    rotate(frameCount * 5);
    fill(150);
    ellipse(15, 0, 5); //label spin
    pop();
    fill(255);
    ellipse (w2, h2, 10); // peg
}

function tonearm () {
    angleMode(DEGREES);
    translate(w2 + 100, h2 - 100);
    fill(255);
    ellipse(0, 0, 30); //swivel
    var tonearmPosition = map(currentSpot, 0, songLength, 0, 28);
    push();
    rotate(tonearmPosition);
    push();
    rectMode(CENTER);
    rect(0,125, 12, 25); //cartridge
    pop();
    strokeWeight(3);
    stroke(255);
    line(0, 0, 0, 125); //bar
    pop();
}

function header () {
    image(img,10,10,20,20);
    fill(255);
    textSize(12);
    text(title[option], 35, 20); //display title 12pt
    textSize(9);
    text(artist[option], 35, 30); //display artist 9pt
}


function setup() {
    createCanvas(w, h);
    for (i = 0; i < nb; i++) {  //generate bubbles 
        x[i] = random(width); //randomly 
        y[i] = height; //at the bottom
        dx[i] = random(-.5,.5); //that float sideways randomly 
        dy[i] = random(-2,-1); // and float virtically faster
        col[i] = color(random(255)); //randomly filled in greyscale
    }
}

function draw() {
    background(10,0,0);
    stroke(0);
    strokeWeight(10);
    explode();
    var vol = amp.getLevel();
    var bdiam = map(vol, 0, 1 , 5, 18);
	var vdiam = map(vol, 0, 1, 200, 250); //vinyl amp diameter
    
    for (i = 0; i < nb; i++) {  
        fill(col[i]);
        noStroke();
        ellipse(x[i], y[i], bdiam);
        x[i] += dx[i];
        y[i] += dy[i];
        
    	if (x[i] > width) { //bounce off right wall
        	x[i] = width - (x[i] - width);
        	dx[i] = -dx[i];

    	} else if (x[i] < 0) { //bounce off left wall
        	x[i] = -x[i];
        	dx[i] = -dx[i];

    	}
    	if (y[i] > height) { //bounce off bottom
        	y[i] = height - (y[i] - height);
        	dy[i] = -dy[i];
       
    	} else if (y[i] < 0) { //float off top, appear at bottom
    		y[i] = height;
    	}
	}
	push();
    noStroke();
    fill(180);
    ellipse(w2,h2,vdiam,vdiam);
    pop();
    header();
    record();
    tonearm();         
}

function mouseClicked() {
	particles = []; //clear particles array
	explode(); //create particle explosion
    option ++; //next option when clicked
    if(option > 3){ 
        option = 0;
    }
    if(option == 0){
    	for(i = 0; i < nb; i++){
    		col[i] = color(0, 0, random(255)); //random blue
    		dx[i] = tempo[option] * random(-.1,.1) / 10; //horiz to tempo
    	}
        vw.stop(); //stop "step"
        amy.play(); // play "valerie"
    }
    if(option == 1){
    	for(i = 0; i < nb; i++){
    		col[i] = color(random(255),0,0); //random red
    		dx[i] = tempo[option] * random(-.1,.1) / 10; // horiz to tempo
    	}
        amy.stop(); //stop "valerie"
        elvis.play(); //play "hound dog"
    }
    if(option == 2){
    	for(i = 0; i < nb; i++){
    		col[i] = color(random(255)); //random greyscale
    		dx[i] = tempo[option] * random(-.1,.1) / 10; //horiz to tempo
    	}
        elvis.stop(); //stop "hound dog"
        vw.play(); //play "step"
    }
    if(option == 3){
        vw.stop(); //stop "step"
    	for(i = 0; i < nb; i++){
    		col[i] = color(255); //bubbles fill white
    		dx[i] = random(-.1,.1); //horiz moment unrelated to tempo
    	}
    }
}

Redesigning Spotify Chromecast

This projects is a brief redesign of Spotify’s current Chromecast interface. Pictured below is the current state of the Spotify Chromecast player, which displays the current song, some controls, its information, its album cover, and the album covers of tracks adjacent to it in the queue.

With Spotify Chromecast so frequently being used while hosting a social event, I would argue that the current interface is distracting from the event, or redundant at the least. The current layout would easily enable guests to continuously check which song is coming next, and which songs have already played, freely guiding listeners out of the enjoying the music in the moment. In addition to this, much of the information on the screen is only necessary for the DJ to know, and it is already being provided on their phone’s interface.

With this being said, I looked to create a new interface for Spotify when used on Chromecast that would allow listeners to stay in the moment of the music, while still providing an complimentary atmosphere to that the of the social event.

As the user plays songs, the generated bubbles behind the record and one large bubble behind the record itself jump to the amplitude of the music. The small floating bubbles move horizontally on their upward waltz in speed relation to their tempo.

This project functions as a mock-up of my Chromecast Spotify player as a living environment. Unfortunately, I was not able to configure the p5.js with the Spotify API, as it was out of the scope of 15-104, and thus only these three preloaded songs may be queued. These tracks were chosen with the intent of providing a brief range of visual possibilities this program can generate.

Controls

• select anywhere on the canvas to play the next song, thus changing the color, size and flow of bubbles

stageMaster

// Justin Yook
// jyook@andrew.cmu.edu
// Section C
// Final Project: Stage Master

var dancerArr = []; // Array of dancer objects 
var siz = 20; // Diameter of dancers (fixed)
var cFrame = 0; // Current frame = current count (index)
var tFrames = 8; // Total number of frames = eight count
var c; //Current canvas

function setup() {
    c = createCanvas(480, 360);
}

function draw() {
    background(255);
    // Create Grid 
    // Horizontal lines
    for (var i = 0; i < height; i+=30) {
        stroke(200);
        strokeWeight(1);
        line(0, i, width, i);
    }
    // Vertical lines
    for (var i = 0; i < width; i+=30) {
        stroke(200);
        strokeWeight(1);
        line(i, 0, i, height);
    }

    // Create bottom rectangle
    fill(65, 105, 225);
    rect(0, 300, width, height);

    // Create count circles 
    for (var i = 0; i < 8; i++) {  
        fill(255);
        ellipse(i * 50 + 66, 330, 2 * siz, 2 * siz);

        fill(0);
        textSize(14);
        text(i + 1, i * 50 + 62, 335);
    }

    // Create upper rectangle
    fill(65, 105, 225);
    rect(0, 0, width, height - 300);

    // Check and display dancer objects
    for (var i = 0; i < dancerArr.length; i++) {
        dancerArr[i].draw();
    }

    // Display title
    fill(255);
    textSize(20);
    text("STAGE MASTER", width / 3, height / 8);

    // Indicate which eight count you are currently on with green ellipse
    if (cFrame == 0) {
        fill(0, 255, 0);
        ellipse(66, 330, 40, 40);

        fill(0);
        textSize(14);
        text("1", 62, 335);
    }

    if (cFrame == 1) {
        fill(0, 255, 0);
        ellipse(116, 330, 40, 40);

        fill(0);
        textSize(14);
        text("2", 112, 335);
    }

    if (cFrame == 2) {
        fill(0, 255, 0);
        ellipse(166, 330, 40, 40);

        fill(0);
        textSize(14);
        text("3", 162, 335);
    }

    if (cFrame == 3) {
        fill(0, 255, 0);
        ellipse(216, 330, 40, 40);

        fill(0);
        textSize(14);
        text("4", 212, 335);
    }

    if (cFrame == 4) {
        fill(0, 255, 0);
        ellipse(266, 330, 40, 40);

        fill(0);
        textSize(14);
        text("5", 262, 335);
    }

    if (cFrame == 5) {
        fill(0, 255, 0);
        ellipse(316, 330, 40, 40);

        fill(0);
        textSize(14);
        text("6", 312, 335);
    }

    if (cFrame == 6) {
        fill(0, 255, 0);
        ellipse(366, 330, 40, 40);

        fill(0);
        textSize(14);
        text("7", 362, 335);
    }

    if (cFrame == 7) {
        fill(0, 255, 0);
        ellipse(416, 330, 40, 40);

        fill(0);
        textSize(14);
        text("8", 412, 335);
    }
}

function keyPressed() {
    // Add new dancer at (mouseX, mouseY) when pressing spacebar
    if (key == ' ') { 
        dancerArr.push(makeDancer(mouseX, mouseY, siz));
    }

    // Move to next eight count when pressing 'd'
    if (key == 'd') {
        cFrame += 1;
        cFrame = cFrame % tFrames;
        for (var i = 0; i < dancerArr.length; i++) {
            if (dancerArr[i].posArr.length < cFrame) {
                //x
                dancerArr[i].posArr[cFrame][0] = dancerArr[i].posArr[cFrame - 1][0];

                //y
                dancerArr[i].posArr[cFrame][1] = dancerArr[i].posArr[cFrame - 1][1];
            }
        }
    }

    // Move to previous eight count when pressing 'a'
    if (key == 'a') {
        cFrame -= 1;
        if (cFrame < 0) {
            cFrame += 8;
        }
    }

    // Download screenshot of current formation
    if (key == "s") {
        saveCanvas(c, 'formation', 'jpg');
    }
}

// Click and drag dancer object
function mousePressed() {
    for (var i = 0; i < dancerArr.length; i++) {
        if (dist(mouseX, mouseY, dancerArr[i].posArr[cFrame][0], dancerArr[i].posArr[cFrame][1]) <= (dancerArr[i].ps / 2)) {
            dancerArr[i].drag = true;
        }
    }
}

function mouseDragged() {
    for (var i = 0; i < dancerArr.length; i++) {
        if (dancerArr[i].drag == true) {
            for (var j = cFrame; j < tFrames; j++) {
                dancerArr[i].posArr[j][0] = mouseX; 
                dancerArr[i].posArr[j][1] = mouseY; 
            }
        }
    }
}

function mouseReleased() {
    for (var i = 0; i < dancerArr.length; i++) {
        dancerArr[i].drag = false;
    }
}

//----------------------------------------------------------------------
// DANCER OBJECT
function makeDancer(x, y, s) { 
    var dancer = {"px": x, "py": y, "ps": s, "drag": false};
    var posArr = [];
    for (var i = 0; i < tFrames; i++) {
        posArr.push([x, y]);
    }
    dancer.posArr = posArr;
    dancer.draw = dancerDisplay;
    return dancer;
}

function dancerDisplay() {
    fill(0);
    var cpos = this.posArr[cFrame];
    ellipse(cpos[0], cpos[1], this.ps, this.ps);
}

Instructions:

‘space’ key: Add a new dancer at (mouseX, mouseY)

‘d’ key: Move to the next count

‘a’ key: Move to the previous count

’s’ key: Save a screenshot of the current formation

Mouse: Click, hold, and drag inside dancer to move the dancer

First add a dancer on the canvas, at your mouse position; click and drag the dancer to move them around. If you are satisfied with the placement of your dancers, then move to the next count by pressing ‘d’. If you want to change any previous formations, press ‘a’ to move to the previous count. You can also save a screenshot of the current formation by pressing ’s’.

Statement:

“Stage Master” is a tool for choreographers and dancers to visualize dance formations. I really enjoyed creating this project, because it is something that can help me make formations easily, and in an organized manner. The most challenging part of the project was developing how dancer objects were updated for each count because I had to understand nested arrays and objects very well. The current version of the program only works for a single set of eight counts, but in the future, I would want to add a feature that allows the user to navigate through sets of eight counts. In addition, it would be better if I were to include a feature where the user can play and pause music. Overall, the visuals are not that great, and the amount of code is not a lot, but I believe that the function of the program is useful.