Category: FinalProject

INSTRUCTIONS: Blocks will begin to appear on the screen and approach you! When blocks turn yellow, type the letter displayed on the block to earn a point. You have 5 lives.

sketch

// Nawon Choi
// Section C
// nawonc@andrew.cmu.edu
// Final Project

var numOfStars = 700;
var starSize = 1.2;
var sx = [];
var sy = [];
var sz = [];

var newBlockChance = 100;
var blocks = [];
var blockSize = 50;
var speed = 5;
var lastBlk = 0;
var alphabet = ["a", "b", "c", "d", "e", "f", "g",
                 "h", "i", "j", "k", "l", "m", "n", 
                 "o", "p", "q", "r", "s", "t", "u", 
                 "v", "w", "x", "y", "z"];
var txt;
var ripeBlocks = [];

var level = 1;
var points = 0;
var showPoints;
var lives = 5;
var heart;
var gameOver;
var resetTxt;
var yourScore;
var lvl;

function preload() {
    heart = loadImage("https://i.imgur.com/YvJC0vj.png");
}

function setup() {
    createCanvas(480, 500, WEBGL);
        
    // generate a bunch of randomly placed stars
    for (var i = 0; i < numOfStars; i++) {
        sx.push(random(-width, width));
        sy.push(random(-height, height));
        sz.push(random(-height, height));
    }

    // used for drawing letter on block
    txt = createGraphics(200, 200);
    txt.textSize(75);

    // show points/level at the corner
    showPoints = createGraphics(width, 100);
    showPoints.textSize(60);
    showPoints.fill(255);
    showPoints.textStyle(BOLD);
    lvl = createGraphics(width, 100);
    lvl.textSize(50);
    lvl.fill(255);

    // game over screen text
    gameOver = createGraphics(width + 150, 100);
    gameOver.textSize(100);
    gameOver.fill(255);
    gameOver.textStyle(BOLD);
    resetTxt = createGraphics(width + 150, 100);
    resetTxt.textSize(40);
    resetTxt.fill(255);
    yourScore = createGraphics(width + 150, 100);
    yourScore.textSize(40);
    yourScore.fill(255);


}

function draw() {
    background("#1c2736");
    drawStars();

    if (lives > 0) {
        // draw hearts to represent lives
        for (var i = 0; i < lives; i++) {
            push();
            translate(width / 2 - (30 * (i + 1)), -height / 2 + 25);
            texture(heart);
            plane(30, 30);
            pop();
        }

        // show points/level at the top corner
        push();
        showPoints.background("#1c2736");
        showPoints.text("SCORE = " + points, 10, 60);
        texture(showPoints);
        translate(-width / 2 + 85, -height / 2 + 25);
        plane(150, 30);

        lvl.background("#1c2736");
        lvl.text("LEVEL = " + level, 10, 60);
        texture(lvl);
        translate(0, 25);
        plane(150, 30);
        pop();


        // long road
        push();
        fill("#104670");
        translate(0, 30, -600);
        rotateX(blockSize);
        box(width, 10, 8000);
        pop();

        // highlight zone
        push();
        fill("#497291");
        rotateX(blockSize);
        translate(0, 150);
        box(400, 10, 330); 
        pop();

        // increase level based on points
        var determineLvl = floor(points / 10) + 1;
        if (determineLvl > 3) {
            // only up to 3 levels
            level = 3;
        } else {
            level = determineLvl;
        }

        if (level < 3) {
            // make sure blocks don't overlap
            if (frameCount > (lastBlk + 30)) {
                var newBlock = floor(random(newBlockChance));
                if (newBlock == 1) {
                    lastBlk = frameCount;
                    blocks.push(makeNewBlock());
                }
            }
        } else {
            // blocks can overlap
            var newBlock = floor(random(newBlockChance));
            if (newBlock == 1) {
                lastBlk = frameCount;
                blocks.push(makeNewBlock());
            }
        }

        // draw blocks
        for (var i = 0; i < blocks.length; i++) {
            if (blocks[i].z < 330) {
                blocks[i].draw();
                if (blocks[i].ripe()) {
                    ripeBlocks.push(blocks[i]);
                }
            } else {
                // remove blocks that have gone off the page
                if (blocks[i].scored == 0) {
                    lives--;
                }
                blocks.shift();
            }
        }
    } else {
        // game over screen
        push();
        translate(0, -25);
        gameOver.text("GAME OVER", 0, 80);
        texture(gameOver);
        plane(300, 50);

        resetTxt.text("Press 'R' to restart", 0, 100);
        translate(70, 40);
        texture(resetTxt);
        plane(300, 50);

        yourScore.text("Your score = " + points, 0, 100);
        translate(0, 50);
        texture(yourScore);
        plane(300, 50);
        pop();
    }
}

function resetGame() {
    lives = 5;
    points = 0;
    level = 1;
    blocks = [];
    newBlockChance = 100;
}

function levelUp () {
    // increase difficulty
    newBlockChance -= 5;
}

function blockIsScored() {
    this.scored = 1;
    ripeBlocks.shift();
}

function blockIsRipe() {
    // if block is on the highlighted zone
    if (this.z == 70) {
        return true;
    }
    return false;
}

function drawBlock() {
    push();
    // block changes color based on nearness/if scored
    if (this.scored == 0) {
        if (this.z >= 70) {
            txt.background("yellow");
        } else {
            txt.background("red");
        }
    } else {
        txt.background("green");
    }
        
    // displays letter on the block
    var upper = this.letter.toUpperCase();
    txt.text(upper, 80, 120);
    stroke("#104670");
    texture(txt);
    rotateX(blockSize);
    translate(this.x, this.y, this.z);
    box(blockSize);
    pop();

    // move forward
    this.z += speed;
}

function makeNewBlock() {
    var block = {
        x: floor(random(-100, 100)),
        y: floor(random(-150, 25)),
        z: -2000,
        letter: alphabet[floor(random(26))],
        ripe: blockIsRipe,
        score: blockIsScored,
        scored: 0,
        draw: drawBlock
    }
    return block;
}

function drawStars() {
    fill(200);
    noStroke();
    for (var i = 0; i < numOfStars; i++) {
        push();
        translate(sx[i], sy[i], sz[i]);
        sphere(starSize);
        pop();
    }
}

function keyTyped() {
    if (lives == 0) {
        // reset game
        if (key == "r") {
            resetGame();
        }
    } else {
        // check if a block was pressed correctly/timely
        for (var i = 0; i < ripeBlocks.length; i++) {
            if (key == ripeBlocks[i].letter) {
                points++;
                ripeBlocks[i].score();
                if (points % 10 == 0) {
                    levelUp();
                }   
            }
        }
    }   
}

For my final project I created a 3D typing game. I tried to recreate Blade Saber, a similar VR game where players slash through the blocks using a VR “saber”. For a long time, I tried to have the player score points by dragging their mouse through the block, but due to complexities of 3D in p5js (translations, rotations, etc) it was way out-of-scope for this project. I decided to simplify this to be a keyboard-based game instead. Enjoy!

TILES

sketch

// Joanne Chui
// Section C
// Final Project

var gridLength = 400;

var myLBlue = 0
var myBlue = 0
var myOrange = 0

var tileCount = 0; //amount of columns and rows
var crtPattern = 0; //amount of tiles highlighted
var counter = 0;
var roundNum = 1;

let ready = false;
let wrongAnswer = false;

myGrid = [];
userGrid = [];

function setup(){
  createCanvas(550, 405);
  background(80, 20, 10);
  textSize(32);
  fill('white');
  text("T I L E S", 415, 40);
  textSize(10);
  text("MEMORIZE THE PATTERN", 415, 70);
  text("PRESS R WHEN READY", 420, 90);
  text("CLICK TO CHANGE TILE", 418, 110);
  textSize(20);
  text("ROUND", 440, 180);

  tileCount = int(random(3, 6));
  crtPattern = int(.4 * (tileCount * tileCount));

  myLBlue = color(25, 120, 145);
  myBlue = color(15, 60, 100);
  myOrange = color(200, 80, 50);

  stroke(90, 100, 90);
  for(i = 0; i < tileCount; i++){
    myGrid.push([]);
    userGrid.push([]);
    for(j = 0; j < tileCount; j++){
      myGrid[i].push(myBlue);
      userGrid[i].push(myBlue);
    }
  }
}

function draw(){
  strokeWeight(5);
  rect(440, 185, 70, 70);
  fill('white');
  noStroke();
  textSize(50);
  if(roundNum < 10){
    text(roundNum, 462, 237);
  }else{
    text(roundNum, 447, 237);
  }

  if(ready){
    drawGrid();
  }else{
    drawPatternGrid();
  }

  //GAME OVER
  if(wrongAnswer){
    //have solution pop up
    drawPatternGrid();
    //game over text
    noStroke();
    fill(80, 20, 10)
    rect(0, 170, 410, 60);
    fill("white");
    textSize(34);
    text("GAME OVER", 115, 210);
  }

  //border
  fill(myBlue);
  strokeWeight(10);
  line(4, 4, gridLength, 4);
  line(gridLength, 4, gridLength, gridLength);
  line(gridLength, gridLength, 4, gridLength);
  line(4, gridLength, 4, 4);

}


function drawPatternGrid(){
  stroke(10, 35, 60);
  strokeWeight(7);
  for(i = 0; i < tileCount; i++){
    for(j = 0; j < tileCount; j++){
      patternGenerator();
      fill(myGrid[i][j])
      rect(i * (gridLength/tileCount), j * (gridLength/tileCount), gridLength/tileCount, gridLength/tileCount);
    }
  }

}

//creates the solution pattern of tiles
var keyI = 0;
var keyJ = 0;
var x = 0;
function patternGenerator(){
  while(x < crtPattern){
    keyI = int(random(tileCount));
    keyJ = int(random(tileCount));
    if(myGrid[keyI][keyJ] != myOrange){
      myGrid[keyI][keyJ] = myOrange;
      x += 1;
    }
  }
}

//base grid for guessing
function drawGrid(){
  stroke(10, 35, 60);
  strokeWeight(7);
  for(i = 0; i < tileCount; i++){
    for(j = 0; j < tileCount; j++){
      mouseHover();
      fill(userGrid[i][j]);
      rect(i * (gridLength/tileCount), j * (gridLength/tileCount), gridLength/tileCount, gridLength/tileCount);
    }
  }
}

//highlights tiles if mouse hovers over them
function mouseHover(){
  if(mouseX < (i+1) * gridLength/tileCount & 
     mouseX > i * gridLength/tileCount && 
     mouseY < (j+1) * gridLength/tileCount &&
     mouseY > j * gridLength/tileCount){
    if(userGrid[i][j] != myOrange){
      userGrid[i][j] = myLBlue;
    }
 
  }else{
    if(userGrid[i][j] != myOrange){
      userGrid[i][j] = myBlue;
    }
  }
}


//selecting tiles
function mousePressed(){
 for(i = 0; i < tileCount; i++){
    for(j = 0; j < tileCount; j++){
      if(mouseX < (i+1) * gridLength/tileCount & 
       mouseX > i * gridLength/tileCount && 
       mouseY < (j+1) * gridLength/tileCount &&
       mouseY > j * gridLength/tileCount){
        if(counter < crtPattern - 1){
          if(userGrid[i][j] != myOrange){
            if(myGrid[i][j] == myOrange){
              userGrid[i][j] = myOrange;
              counter += 1;
              print(counter);
              print(crtPattern);
              }else{
              wrongAnswer = true;
              }
            }
          }else{
            ready = false;
            myGrid = [];
            userGrid = [];
            roundNum += 1;
            for(i = 0; i < tileCount; i++){
              myGrid.push([]);
              userGrid.push([]);
              for(j = 0; j < tileCount; j++){
                myGrid[i].push(myBlue);
                userGrid[i].push(myBlue);
              }
            }
            counter = 0;
            x = 0;
        }
      }
    }
  }
}

//switch grid
function keyTyped(){
  if(key === "r" || key === "R"){
    ready = true;
    }else{
      ready = false;
  }
}

This is a memorization game to test a user’s spatial recall ability. A pattern of tiles is first shown, and once the user has committed the pattern to memory, pressing the “r” key will render the grid blank, and the user must recreate the pattern by clicking on the tiles. If the pattern matches the original pattern, a new pattern is generated. Once the user clicks an incorrect tile, the game is over. The division of the grid is randomized.

sketch

/*
Aaron Lee
Section C
sangwon2@andrew.cmu.edu
Final Project
*/

var canvaswidth = 640;
var canvasheight = 480;

var myCaptureDevice;
var brightnessThreshold = 50;
var darknessThreshold = 45;
var theBrightnessOfTheColorAtPxPy = 100;
var px = 30;
var py = 30;

var gamelogo;
var spacefighter;
var invader = [];
var missile = [];
var score = 0;

var img_Invader, img_spacefighter, img_Missile,img_background;


function setup() {//creating camera for the background
   createCanvas(canvaswidth, canvasheight);
   myCaptureDevice = createCapture(VIDEO);
   myCaptureDevice.size(canvaswidth, canvasheight); // attempt to size the camera. 
   myCaptureDevice.hide(); // this hides an unnecessary extra view.
   
}

function preload(){ //preloading the reference images
    img_Invader = loadImage("https://i.imgur.com/hBZOUxR.png");
    img_spacefighter = loadImage("https://i.imgur.com/wJPVqdo.png");
    img_Missile = loadImage("https://i.imgur.com/0O0UGN4.png");
    gamelogo = loadImage("https://i.imgur.com/hBZOUxR.png");
}

spacefighter = {
    x : 140,
    width : 30,
    y : 400,
    height: 30,
    draw : function() {
        image(img_spacefighter, this.x, this.y, this.width, this.height);
    }
}

//--------------------------------------//invader
function Invader(I) {
    I.active = true;
    I.x =random(640);
    I.y = 0;
    I.width = 50;
    I.height = 50;
    I.speed = 2;
    I.inBounds = function(){
        return I.x >= 0 & I.y >= 0 && I.x < canvaswidth - I.width && I.y < canvasheight - I.height;
    }
    I.draw = function(){
        image(img_Invader, I.x, I.y, I.width, I.height);
    }
    I.update = function(){
        I.active = I.active & I.inBounds();
        I.y += I.speed;
    }
    return I;

    function trlUpdate() { //this is the part where the code unfortunately doesn't work
   //fetch the color of the pixel at the (px,py)
   var theColorAtPxPy = myCaptureDevice.get(this.px, this.py);
   //compute its birghtness
   theBrightnessOfTheColorAtPxPy = brightness(theColorAtPxPy);
   //if the textrainletter is in a bright area, move downwards
   if (theBrightnessOfTheColorAtPxPy > brightnessThreshold) {
   this.py++;
   }
   //else if it's in a dark area, move up until we're in a light area
   while (theBrightnessOfTheColorAtPxPy < darknessThreshold & py > 0) {
     theColorAtPxPy = myCaptureDevice.get(px, py)
     theBrightnessOfTheColorAtPxPy = brightness(theColorAtPxPy);
     this.py--;  
   }
   //reset to initial place if falls off the screen
   if (this.py >= height) {
   this.py = 0;
   }
}
}

//--------------------------------------//missile
function Missile(I){
    I.active = true;
    I.x = spacefighter.x;//because both the missile and spacefighter share same origin
    I.y = spacefighter.y;
    I.width = 30;
    I.height = 30;
    I.speed = 10;
    I.inBounds = function(){
        return I.x >= 0 & I.y >= 0 && I.x < canvaswidth - I.width && I.y < canvasheight -  I.height;
    }
    I.update = function(){
        I.active  = I.active & I.inBounds();
        I.y -= I.speed;
    }
    I.draw = function(){
        image(img_Missile, I.x, I.y, I.width, I.height);
    }
    return I;
}


//--------------------------------------//shooting
function shooting(Invader, Missile){
    return Missile.x + Missile.width >= Invader.x & Missile.x < Invader.x + Invader.width &&
            Missile.y + Missile.height >= Invader.y && Missile.y < Invader.y + Invader.height;
}

function draw(){
    clear();
    myCaptureDevice.loadPixels();
   image(myCaptureDevice, 0,0);
   image(gamelogo, 30, 30);
    fill("red");
    textStyle(BOLD);
    textFont('Sprint2');
    textSize(20);
    text("HIGH SCORE : " + score, canvaswidth / 2 - 80, 20);
    if(keyIsDown(LEFT_ARROW)){              //left key configuration
        if(spacefighter.x - 3 >= 0)
            spacefighter.x -= 3;
        else
            spacefighter.x = 0;
    }
    if(keyIsDown(RIGHT_ARROW)){              //right key configuration
        if(spacefighter.x + 3 <= canvaswidth-spacefighter.width)
            spacefighter.x += 3;
        else
            spacefighter.x = canvaswidth - spacefighter.width;
    }
    if(keyIsDown(UP_ARROW)){              //up key configuration
        if(spacefighter.y - 5 >= 0)
            spacefighter.y -= 5;
        else
            spacefighter.y = 0;
    }
    if(keyIsDown(DOWN_ARROW)){              //down key configuration
        if(spacefighter.y + 5 <= canvasheight-spacefighter.height)
            spacefighter.y += 5;
        else
            spacefighter.y = canvasheight - spacefighter.height;
    }
    if(keyIsDown(32)){
        missile.push(Missile({}));
    }
    spacefighter.draw();              //draw spacefighter
    missile.forEach(function(Missile){//draw and update the missiles
        Missile.update();
        Missile.draw();
    });

    if(Math.random()<0.07){
        invader.push(Invader({}));
    }
    invader = invader.filter(function(Invader){
        return Invader.active;
    });
    invader.forEach(function(Invader){
        Invader.update();
        Invader.draw();
    });

    missile.forEach(function(Missile){
        invader.forEach(function(Invader){
            if(shooting(Invader, Missile)){
                Invader.active = false;
                Missile.active = false;
                score++;
            }
        });
    });

    invader.forEach(function(Invader){
        if(shooting(Invader, spacefighter)){
            Invader.active = false;
            noLoop();
            textStyle(BOLD);
            textFont('Sprint2');
            textSize(40);
            fill("red");
            text("continue? press f5", width / 2 - 160, height /2);
        }
    });
}

Instruction: 1) please allow camera access 2) you are a space fighter on an important mission. Use arrows keys for maneuver, and space bar to terminate space invaders 3) player who gets the higher score wins

*what didn’t work: 1)the pixels of the player in the background were supposed to buffer the velocity of the space invaders 2)the camera notification setting distracts the player in the beginning when the page is refreshed

I personally had lot of fun making this game as it really provoked my child experience with retro arcade games. I wanted to be selective in use of color, font and art in order to mimic the retro feelings.

sketch

// Ammar Hassonjee | lee chu
// section c
// ahassonj@andrew.cmu.edu | lrchu@andrew.cmu.edu
// final project


var mode = 0; // variable for cycling through frames

// variables for the beachBall ball scene
// choosing an initial point to launch the ball from
var ballx = 240;
var bally = 100;
var dir1 = 1; // direction of ball
var dir2 = 1; // direction of ball
var speedx = 1; // speed of the ball
var speedy = 0.5;
var size = 100; // size of the ball

// variables for rain scene
var raindrops = []; // array to store rain objects
var rainSpeed = 5; // tracking the speed of the rain
var increment = 0.01; //incrementing the rain values
var tone = 255; // the color of the lightning
var strweight = 30; // stroke weight of the lightning bolt
var cloudNumber; //
var cloudwidth;
var cloudheight;
var frame = 8; // keeping track of the frame count

var myCaptureDevice;
var px = [];
var py = [];
var theColorAtPxPy;
var theBrightnessOfTheColorAtPxPy;
var brightnessThreshold;
var darknessThreshold = 10;

// variables for determining silhouette
var borderX = [];
var borderY = [];
// variables for particles
var parties = [];
var ex = 20;
var why = 20;


function setup() {
    createCanvas(480, 360);
    myCaptureDevice = createCapture(VIDEO);
    myCaptureDevice.size(480, 360); // attempt to size the camera. 
    myCaptureDevice.hide(); // this hides an unnecessary extra view.


    // three variables declared to initialize the lighting function
    var xi = random(40, 440);
    var xii = random(30, 450);
    var xiii = random(20, 460);

    //bImage.resize(480, 360);
}


function isColor(c) {
    return (c instanceof Array);
}


//--------------------------------------------------------------------
function draw() {
    background(220);
    myCaptureDevice.loadPixels();

    image(myCaptureDevice, 0, -0, width, height);  // draw the camera at 1:1 resolution

    // ammar's code
    if (mode === 0) {
        initialScene();
    }
    if (mode === 1) {
        // varying the clouds for each time the rain scene is called
        // done before rainFall is called to ensure this code doesn't loop again
        cloudNumber = random(3, 8);
        cloudwidth = random(105, 140);
        cloudheight = random(60, 95);
        //calling the beach ball scene
        ballSlap();
    }
    if (mode === 2) {
        rainFall();
    }

    // lee's code
    findBorder(); // finding silhouette of person
    if (mode === 3) {
    	// particle effects
    	addParti();
	    updateAndDisplayParti();
	    removeParti();
    }
    if (mode === 4) {
    	// censoring effect
    	censor();
    }
}


function mousePressed() {
    mode = (mode + 1) % 5; // code to swtich between modes
}


//-------AMMAR'S CODE----------------------------------------------------------------------
// NOTE: the code works best if users are wearing dark clothing against a light background
function initialScene() { // initial scene for webcam text
    textAlign(CENTER, CENTER);
    textSize(15);
    fill(100);
    text("WELCOME TO AMMAR AND LEE'S WEBCAM MACHINE", width / 2, height / 2);
    text("Press the mouse to cycle between scenes", width / 2, height * .8);
    text("Press 'O' to increase darkness threshold", width / 2, height * .85);
    text("Press 'P' to decrease darkness threshold", width / 2, height * .9);
    text("Press 'R' to detect threshold automatically", width / 2, height * .95);
}

function ballSlap() {
  // Creating the ball and setting its movement by changing
        //  ballx and bally variables
    beachBall(ballx, bally, size);
    ballx += dir1 * speedx;
    bally += dir2 * speedy;

    // Making ball bounce off the right
    if (ballx >= width - size / 2 || ballx <= size / 2) {
        dir1 = -dir1;
      }

      // Making the ball bounce off the top and bottom
    if (bally < size / 2 || bally > height - size / 2) {
        dir2 = -dir2;
      }

    var colorAtBall = myCaptureDevice.get(ballx, (bally + size / 2));
    if (isColor(colorAtBall)) {
            // setting the brightness to a variable and testing if it meets the
            //    the threshold values
            brightnessAtBall = brightness(colorAtBall);
            // if the ball hits the user's head (darker pixel) the ball will bounce up
            if (brightnessAtBall < darknessThreshold & dir2 > 0) {
                dir2 = -dir2;
                speedy = random(0.5, 5);
                speedyx = random(-4, 2);
              }
    }
}

function beachBall(x, y, diameter) { // function for creating rendering the beach ballx
    var ballcolors = ["RED", "BLUE", "YELLOW"];
    noStroke();
    fill(255);
    ellipse(x, y, diameter, diameter);
    fill(ballcolors[0]);
    arc(x, y, diameter, diameter, radians(30), radians(90));
    fill(ballcolors[1]);
    arc(x, y, diameter, diameter, radians(150), radians(210));
    fill(ballcolors[2]);
    arc(x, y, diameter, diameter, radians(270), radians(330));
    fill(255);
    ellipse(x, y, diameter / 5, diameter / 5);
}

function keyPressed() { // allowing the user to alter the beachball size with keys
    // increasing the ball size if the a key is pressed
    if (key === 'a' || key === 'A') {
        if (size < 200) {
            size += 10;
        }
    }

    // decreasing the ball size if the d key is pressed
    if (key === 'd' || key === 'D') {
        if (size > 50) {
            size -= 5;
        }
    }

    // this code allows the user to edit the darkness threshold in order to fix bugs in the webcam
    if (key === 'o' || key === 'O') {
        if (darknessThreshold < 100) {
            darknessThreshold += 2;
        }
    }

    // decreasing the darkness threshold
    if (key === 'p' || key === 'P') {
        if (darknessThreshold > 10) {
            darknessThreshold -= 2;
        }
    }

    // finding threshold automatically
    if (key ==='r' || key === 'R') {
    	findThreshold();
    }

}

function rainFall() { // function for creating the rain scene
    clouds(cloudNumber, cloudwidth, cloudheight); // calling the cloud function
    // these lines of called call the function for the rain objects to make ensure
    //    the rain continuously falls
    updateRain();
    removeRain();
    addRain();

    // these if statements remap the speed of the rain to change as time passes
    rainSpeed += increment;
    if (rainSpeed >= 15) {
        increment = -0.01;
    }
    if (rainSpeed <= 5) {
        increment = 0.01;
    }

    // code to implement the lighting function at a random timeout
    // this first if statement sets the lighting variables to an initial value
    //      and increments the frame variable
    if (frameCount % 200 === 0) {
        frame++;
        tone = 255;
        xi = random(40, 440);
        xii = random(30, 450);
        xiii = random(20, 460);
        strweight = 30;
    }

    // a separate frame variable is used to make sure the lighning stays for multiple frames
    if (frame % 3 === 0) {
        // a random variable is used to make sure the lightning is called unpredictably
        var chance = random(0, 2);
        lightning(strweight, tone, xi, xii, xiii);
        tone -= 4; // altering the lighting render values for aesthetic effect
        strweight -= 1;
    }

}

function makeRain(xpos, ypos) { // function for making the rain objects
    var rain = {x: xpos, y: ypos, move: rainMove, display: rainDraw};
    return rain;
}

function rainDraw() { // function for drawing the rain particles
    noStroke();
    fill(0, 0, 240);
    push();
    translate(this.x, this.y);
    rotate(radians(15));
    ellipse(0, 0, 2, 10);
    pop();
}

function rainMove() { // moving the rain by the rain speed global variable
    this.y += rainSpeed;
}

function updateRain() {
  // for loop that calls train track objects and moves/displays them
    for (var i = 0; i < raindrops.length; i++) {
        var colorAtRain = myCaptureDevice.get(raindrops[i].x, raindrops[i].y);
        raindrops[i].move();
        if (isColor(colorAtRain)) {
              // setting the brightness to a variable and testing if it meets the
              //    the threshold values
              brightnessAtRain = brightness(colorAtRain);

              // this ensures the rain stops falls on top of the figure in the WEBCAM
              //    by comparing to the pixel brightness
              if (brightnessAtRain >= darknessThreshold) {
                  raindrops[i].display();
                }
              }

      }
}

function addRain() { // function for adding rain objects to raindrops array
    for (var i = 0; i < 6; i++) {
       raindrops.push(makeRain(random(0, width), 0));
    }
}

function removeRain() { // function for removing objects from the array
    var rainKeep = [];
    for (var i = 0; i < raindrops.length; i++) {
        if (raindrops[i].y < 380) {
            rainKeep.push(raindrops[i]);
        }

      }
    raindrops = rainKeep; // reassigning the raindrops array to the duplicate array
}

// this function calls the lighting from a list of values that create polylines
function lightning(weight, brightness, xpos, xpos2, xpos3) {
    noFill();
    strokeWeight(weight);
    stroke(brightness);
    var x2 = xpos + random(-10, 10);
    var x3 = xpos2 + random(-20, 25);
    var x4 = xpos3 + random (-30, 40);
    var y1 = random(height / 4, height / 3);
    var y2 = random(height / 8 * 5, height * 2 / 3);
    line(xpos, 0, x2, y1);
    line(x2, y1, x3, y2);
    line(x3, y2, x4, height);
}

// function that calls the clouds from a list of variables
function clouds(number, length, cheight) {
    noStroke();
    for (var i = 0; i < number + 1; i++) {
        fill( map(i, 0, number, 100, 150));
        var cloudx = map(i, 0, number, 0, width);
        ellipse(cloudx, 0, length, cheight + 15 * (i % 3));
    }
}


//-------LEE'S CODE----------------------------------------------------------------------

function findBorder() {
	borderX = [];
	borderY = [];
	// finds the silhouette of person based on darkness threshold in intervals of 5
	for (var i = 0; i < width; i += 5) {
		for (var j = 0; j < height; j += 5) {
			if (brightness(myCaptureDevice.get(i, j)) < darknessThreshold & 
				borderX.length < i / 5) {
					borderX.push(i);
					borderY.push(j);
			}
		}
	}
}

function findThreshold() {
	var brightest = 50;
    var darkest = 50;
    var xColors = [];
    var xx = [];
    // stores brightnesses of all colors along a line in the image displayed
    for (var j = 0; j < width; j += 5) {
        xColors.push(brightness(myCaptureDevice.get(j, height / 2)));
        xx.push(j);
    }
    // finds brightest and darkest pixels
    for (var k = 0; k < xColors.length; k ++) {
        if (xColors[k] > xColors[brightest]) {
            brightest = k;
        }
        if (xColors[k] < xColors[darkest]) {
            darkest = k;
        }
    }
    // elementary ratio to determine thresholds
    brightnessThreshold = (xColors[brightest] - xColors[darkest]) / 3 + xColors[darkest];
    darknessThreshold = (xColors[brightest] - xColors[darkest]) / 5 + xColors[darkest] - 10;
}

function addParti() {
	// creating particles along top of person
	var likelihood = 0.45;
	for (var i = 0; i < borderX.length; i ++) {
		if (random(1) < likelihood) {
			parties.push(createParticle(borderX[i], borderY[i]));
		}
	}
}

function removeParti() {
	// removes particle when size decreases below 1
	var partiesToKeep = [];
	for (var i = 0; i < parties.length; i ++) {
		if (parties[i].size > 1) {
			partiesToKeep.push(parties[i]);
		}
	}
	parties = partiesToKeep;
}

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

function createParticle(birthX, birthY) {
	var parti = {x: birthX, y: birthY, size: round(random(5, 15)),
				speed: -5, move: partiMove, display: partiDisplay,
				color: myCaptureDevice.get(birthX, birthY)}
	return parti;
}

function partiMove() {
	// move particle and decrease size
	this.y += this.speed;
	this.size -= 1;
}

function partiDisplay() {
	strokeWeight(0);
	fill(this.color);
	push();
	translate(this.x, this.y);
	rotate(millis() / 1000 * 2 * PI);
	rectMode(CENTER);
	rect(0, 0, this.size, this.size);
	pop();
}

function censor() {
	// divides area below silhouette into 25 by 25 squares and extracts colors
	for (var i = 0; i < borderX.length; i += 5) {
		for (var j = borderY[i]; j < height; j += 25) {
			push();
			translate(borderX[i], j);
			rectMode(CENTER)
			fill(myCaptureDevice.get(borderX[i], j));
			rect(0, 0, 25, 25);
			pop();
		}
	}
}

Ammar Hassonjee and Lee Chu collaborated on this webcam machine. It consists of four scenes: a beachball headbutting game, a rainy day, snapped by Thanos, and an unnecessary censorship. Click the mouse to cycle through the scenes. Press the keys O and P to increase or decrease the darkness threshold depending on the lighting of your setting. Press the key R to automatically detect the darkness threshold, although this process may not be perfect.

Click, hold and drag on the white circle to move it, but don’t move it too quickly or it will reset. Move it to the black circle to complete and randomize the box placement again. I intended to have collision on the white rectangles but have so-far been unsuccessful in the implementation of that.

My goal with this project was to make a quick and easy game where you moved the ball through a series of obstacles and, upon reaching the goal, the map re-set and you could do it again. I have tried to tune the boxes so that there is always a path through them to the goal, but RNG is often a difficult thing to work with and a more careful approach of creating different ‘levels’ to cycle through may have been a more effective method.

sketch

/*		Austin Garcia
		Section C
		aegarcia@andrew.cmu.edu
		Assignment or Project
*/

var ballX = 10;
var ballY = 10;
var diameter = 10;
var goalX = 380;
var goalY = 380;
var boxNum = 15;


function drawSquares() {
    noStroke();
    fill(255);
    rect(this.x, this.y, this.w, this.h);
};

function makeSquares() {
    var squares = {
      x: random(0, 200),
      y: random(15, 380),
      w: 10,
      h: random(100),
      draw: drawSquares,

    }
    return squares;
};



function drawBoxes() {
    noStroke();
    fill(255);
    rect(this.x, this.y, this.w, this.h);
};

function makeBoxes() {
    var boxes = {
      x: random(0, 350),
      y: random(15, 380),
      w: random(100, 150),
      h: 10,
      draw: drawBoxes,
    }
    return boxes;
};

var boxes = [];
var squares = [];


function setup() {
    createCanvas(400, 400);

    for(var i = 0; i < boxNum; i++) {
    var b = makeBoxes();
    var s = makeSquares();
    squares.push(s);
    boxes.push(b);
  }
}

function draw() {
    background(20, 180, 0);

    for(var i = 0; i < boxNum; i++) {
      var b = boxes[i];
      var s = squares[i];
      s.draw();
      b.draw();
   }
// mouse circle
    fill(255);
    if(dist(ballX, ballY, mouseX, mouseY)< diameter & mouseIsPressed)  {
      ballX = mouseX;
      ballY = mouseY;
  }
    //ball
    ellipse(ballX, ballY, diameter,diameter);
    //goal circle
    fill(0);
    ellipse(goalX, goalY, diameter*2, diameter*2);

    //goal circle effect
    if(dist(ballX, ballY, goalX, goalY) < 18)  {
      ballX = 10;
      ballY = 10;
      for (var i = 0; i < boxNum; i++) {
          boxes[i].x = random(0, 350);
          boxes[i].y = random(15, 380);
          boxes[i].w = random(100, 150);
          boxes[i].h = 10;

          squares[i].x = random(0, 200);
          squares[i].y = random(15, 380);
          squares[i].w = 10;
          squares[i].h = random(100);
        }
      }
      //Attempt at getting collision to work
/*    for (var i = 0; i < boxNum; i++) {
      if(dist(mouseX+5, mouseY+5, boxes[i].x, boxes[i].y) > boxes[i].w & boxes[i].h) {
        ballX = 10;
        ballY = 10;
      }
    }
      */

    }
function mouseReleased() {
   ballX = 10;
   ballY = 10;
 };

sing

//Jasmine Lee
//jasmine4@andrew.cmu.edu
//Section C
//Final Project

var nodes = []; //array to hold node objects
var node1c = 1; //node sound counters
var node2c = 1;
var node3c = 1;
var node4c = 1;
var node5c = 1;
var node6c = 1;
var node7c = 1;
var node8c = 1;
var node9c = 1;
var node10c = 1;
var waves; //sound variables
var windchimes;
var rain;
var campfire;
var chant;
var crickets;
var birdwhistle;
var cafe;
var church;
var stream;
var c1; //gradient colors
var c2;
var x1; //gradient controls
var inter;
var c;
var xarray = []; //arrays to hold bubble positions
var yarray = [];
var ydir = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1];
var r = 0; //bubble colors
var g = 0;
var b = 0;
var bubbY; //controls bubblesNC movement
var bubbY2;
var h; //time
var m;
var s;

function preload() {
    waves = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/12/waves.mp3")
    windchimes = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/12/windchimes.wav")
    rain = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/12/rain.wav")
    campfire = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/12/campfire.wav")
    chant = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/12/chant.mp3")
    crickets = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/12/crickets.wav")
    birdwhistle = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/12/birdwhistle.wav")
    cafe = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/12/cafe.m4a")
    church = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/12/church.wav")
    stream = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/12/stream.wav")
}

function setup() {
    createCanvas(600, 450);
    background(255);

    //creates node objects and gives them parameters
    nodes = [{x: 70, y: 70, d: 40}, //top row of nodes
             {x: 230, y: 120, d: 90},
             {x: 390, y: 75, d: 50},
             {x: 520, y: 130, d: 40},
             {x: 125, y: 235, d: 50}, //middle row of nodes
             {x: 400, y: 230, d: 80},
             {x: 550, y: 270, d: 30}, //bottom row of nodes
             {x: 80, y: 380, d: 80}, 
             {x: 250, y: 330, d: 40},
             {x: 450, y: 370, d: 50},
             ]

    //shows the nodes initially when page is refreshed
    for (var i = 0; i < nodes.length; i ++) {
        fill(200);
        noStroke();
        ellipse(nodes[i].x, nodes[i].y, nodes[i].d)
        }
}

function draw() {
    //gradient background
    c1 = color(255, 255, 255);
    c2 = color(220 + (mouseX * 0.04), 240, 255);
    setGradient(c1, c2);

    //functions that control whether the nodes are colored/white
    n1a();
    n2a();
    n3a();
    n4a();
    n5a();
    n6a();
    n7a();
    n8a();
    n9a();
    n10a();

    //bubbles that follow the mouse
    cursorP();

    //bubbles controlled by clock
    bubblesNC();

    //text
    motivationalText();
}

function mousePressed() {
    //functions that control whether the nodes play/pause sounds
    n1s();
    n2s();
    n3s();
    n4s();
    n5s();
    n6s();
    n7s();
    n8s();
    n9s();
    n10s();
}

function mouseDragged() {
    //adds mouse old coordinates into bubble arrays to create new bubbles
    xarray.push(mouseX)
    yarray.push(mouseY)
}

function setGradient(c1, c2) {
    //creates interactive background gradient
    noFill();
    for (var y = 0; y < height; y++) {
        var inter = map(mouseY, 0, height, 0, 1);
        var c = lerpColor(c1, c2, inter);
        stroke(c);
        line(0, y, width, y);
    }
}

//node 1 appearance
function n1a() { 
    noStroke();
    if (node1c % 2 == 0) {
        fill(255);
    } else {
        fill(245, 204, 240); //periwinkle
    }
    ellipse(70, 70, 40, 40);
}

//node 1 sound
function n1s() { 
    if (mouseX > 50 & mouseX < 90 && mouseY > 50 & mouseY < 90) {
        node1c = node1c + 1;
        if (node1c % 2 == 0) {
            waves.loop();
        } else {
            waves.pause();
        }
    } 
}

//node 2 appearance
function n2a() { 
    if (node2c % 2 == 0) {
        fill(255);
    } else {
        fill(233, 255, 255); //robin's egg blue
    }
    ellipse(230, 120, 90, 90);
}

//node 2 sound
function n2s() { 
    if (mouseX > 185 & mouseX < 275 && mouseY > 75 & mouseY < 165) {
        node2c = node2c + 1;
        if (node2c % 2 == 0) {
            windchimes.loop();
        } else {
            windchimes.pause();
        }
    }
}

//node 3 appearance
function n3a() {
    if (node3c % 2 == 0) {
        fill(255);
    } else {
        fill(217, 240, 255); //light blue
    }
    ellipse(390, 75, 50, 50);
}

//node 3 sound
function n3s() {
    if (mouseX > 365 & mouseX < 415 && mouseY > 50 && mouseY < 100) {
        node3c = node3c + 1;
        if (node3c % 2 == 0) {
            rain.loop();
        } else {
            rain.pause();
        }
    }
}

//node 4 appearance
function n4a() {
    if (node4c % 2 == 0) {
        fill(255);
    } else {
        fill(246, 224, 252); //light pink-purple
    }
    ellipse(520, 130, 40, 40);
}

//node 4 sound
function n4s() {
    if (mouseX > 500 & mouseX < 540 && mouseY > 110 & mouseY < 150) {
        node4c = node4c + 1;
        if (node4c % 2 == 0) {
            campfire.loop();
        } else {
            campfire.pause();
        }
    }
}

//node 5 appearance
function n5a() {
    if (node5c % 2 == 0) {
        fill(255);
    } else {
        fill(217, 195, 242); //light purple
    }
    ellipse(125, 235, 50, 50);
}

//node 5 sound
function n5s() {
    if (mouseX > 100 & mouseX < 175 && mouseY > 210 & mouseY < 260) {
        node5c = node5c + 1;
        if (node5c % 2 == 0) {
            chant.loop();
        } else {
            chant.pause();
        }
    }
}

//node 6 appearance
function n6a() {
    if (node6c % 2 == 0) {
        fill(255);
    } else {
        fill(241, 223, 242); //pale pink
    }
    ellipse(400, 230, 80, 80);
}

//node 6 sound
function n6s() {
    if (mouseX > 360 & mouseX < 440 && mouseY > 190 & mouseY < 270) {
        node6c = node6c + 1;
        if (node6c % 2 == 0) {
            crickets.loop();
        } else {
            crickets.pause();
        }
    }
}

//node 7 appearance
function n7a() {
    if (node7c % 2 == 0) {
        fill(255);
    } else {
        fill(189, 220, 255); //baby blue
    }
    ellipse(550, 270, 30, 30);
}

//node 7 sound
function n7s() {
    if (mouseX > 535 & mouseX < 565 && mouseY > 255 & mouseY < 285) {
        node7c = node7c + 1;
        if (node7c % 2 == 0) {
            birdwhistle.loop();
        } else {
            birdwhistle.pause();
        }
    }
}

//node 8 appearance
function n8a() {
    if (node8c % 2 == 0) {
        fill(255);
    } else {
        fill(238, 210, 242); //mauve
    }
    ellipse(80, 380, 80, 80);
}

//node 8 sound
function n8s() {
    if (mouseX > 40 & mouseX < 120 && mouseY > 340 & mouseY < 420) {
        node8c = node8c + 1;
        if (node8c % 2 == 0) {
            cafe.loop();
        } else {
            cafe.pause();
        }
    }
}

//node 9 appearance
function n9a() {
    if (node9c % 2 == 0) {
        fill(255);
    } else {
        fill(235, 154, 240); //light blue-purple
    }
    ellipse(250, 330, 40, 40);
}

//node 9 sound
function n9s() {
    if (mouseX > 230 & mouseX < 270 && mouseY > 310 & mouseY < 350) {
        node9c = node9c + 1;
        if (node9c % 2 == 0) {
            church.loop();
        } else {
            church.pause();
        }
    }
}

//node 10 appearance
function n10a() {
    if (node10c % 2 == 0) {
        fill(255);
    } else {
        fill(206, 228, 237); //pale blue
    }
    ellipse(450, 370, 50, 50);
}

//node 10 sound
function n10s() {
    if (mouseX > 425 & mouseX < 475 && mouseY > 345 & mouseY < 395) {
        node10c = node10c + 1;
        if (node10c % 2 == 0) {
            stream.loop();
        } else {
            stream.pause();
        }
    }
}

//controls cursor generated bubbles and their movement
function cursorP() {
    for (var i = 0; i < xarray.length; i ++) {
        //gives floating bubbles flashing colors
        r = random(220, 255);
        g = random(220, 255);
        b = random(220, 255);
        fill(r, g, b);

        //creates bubbles when mouse is dragged
        ellipse(xarray[i], yarray[i], i, i)

        //makes bubbles bounce off bottom of canvas
        if (yarray[i] > (450 - (i / 2))) {
            ydir[i] = -(ydir[i]);
            yarray[i] = (450 - (i / 2)) - 1;
        } else {
            yarray[i] = yarray[i] + ydir[i]; 
        }

        //makes bubbles bounce off top of canvas
        if (yarray[i] < (i / 2)) {
            ydir[i] = -(ydir[i]);
            yarray[i] = (i / 2) - 1;
         } else {
            yarray[i] = yarray[i] + ydir[i];
        }

        //makes bubbles bounce off nodes
        for (var j = 0; j < nodes.length; j ++) {
            if ((dist(xarray[i], yarray[i], nodes[j].x, nodes[j].y)) < (((nodes[j].d) / 2) + (i / 2))) {
                ydir[i] = -(ydir[i]);
                if (ydir[i] > 0) {
                    //lets bubbles bounce off bottom of nodes
                    yarray[i] = yarray[i] + (i / 2) + 1; 
                } else {
                    //lets bubbles bounce off top of nodes
                    yarray[i] = yarray[i] - (i / 2) - 1; 
                }
            }
        }
    }

    //deletes bubbles if there are more than 25
    if (xarray.length > 25) {
        xarray.shift();
        yarray.shift();
    }
}

function bubblesNC() {
    h = hour();
    m = minute ();
    s = second ();

    //moves 7.5 pixels down for every second that passes
    bubbY = s * 7.5;
    bubbY2 = 450 - (s * 7.5);

    noStroke();
    //white bubbles
    fill(255, 255, 255, 100);
    ellipse(70, bubbY, 200, 200);
    ellipse(200, bubbY + 20, 80, 80);
    ellipse(450, bubbY - 40, 320, 320);
    ellipse(300, bubbY2, 80, 80);
    ellipse(30, bubbY2, 130, 130);
    ellipse(520, bubbY + 5, 100, 100);
    ellipse(370, bubbY2 - 15, 220, 220);
}

function motivationalText() {
    //adds text to center of the screen
    textAlign(CENTER, CENTER);
    textSize(30);
    textStyle(BOLDITALIC);
    fill(255, 255, 255);
    text('hello', 300, 195);
    fill(255, 255, 255);
    text('hello', 300, 225);
    fill(255, 255, 255, 200);
    text('hello', 300, 255);

}

For my final project, I intended to create a dreamlike atmosphere. The sounds that the nodes play are a mystery, with the user having to click them to discover what they are. The project acts as a sort of music sampler to allow the user to play whatever tracks they’d like to hear at the same time. Once the music is on, the node disappears into the white background, with the user having to interact with the color changing background to find the node again. When the mouse is dragged, many bubbles are created that bounce around the canvas and off the music nodes to create visual interest for the user. When all the sounds are being played and the mouse is used to make the background white, an interesting “screensaver” is created with the negative space.