sketch

//Shannon Ha
//sha2@andrew.cmu.edu
//Section D
// Final Project
var soundLogos = [];
var amplitude; //initialize amplitude
var level; //initialize amp level
var rotatePath = 0;
var h;
var dY; // dot x position
var dX; // dot y position

function preload(){ //load sounds
    soundLogos[1] = loadSound('https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/12/Apple-1-2.wav');
    soundLogos[2] = loadSound('https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/12/Apple-2-text-2.wav');
    soundLogos[4] = loadSound('https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/12/Intel-p2.wav');
    soundLogos[5] = loadSound('https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/12/Microsoft-2-1.wav');
    soundLogos[6] = loadSound('https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/12/Microsoft-3-1.wav');
    soundLogos[7] = loadSound('https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/12/Netflix-1.wav')
    soundLogos[8] = loadSound('https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/12/Nokia-1.wav');
    soundLogos[9] = loadSound('https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/12/Skype-1.wav');
}

function setup() {
  createCanvas(300, 300);
  amplitude = new p5.Amplitude(); // p5.js sound library for amplitude
}

function draw() {
  background(0);
  push();
  translate(width / 2, height / 2); // centers the epicycloid
  drawEpicy();
  pop();
  drawThreeDots();
  drawIntelEllipse();
  drawMicroGrid()
}

function keyPressed(){ // assigns the number keys to respective sound files and animations.
    if (key == '1'){
        soundLogos[1].play();
        drawEpicy();

    } else if (key == '2'){
        soundLogos[2].play();
        dY = height / 2; // makes starting position of dot center of canvas
        dX = width / 2; // makes starting position of dot center of canvas
        drawThreeDots();

    } else if (key == '3'){
        soundLogos[4].play();
        drawIntelEllipse();

    } else if (key == '4'){
        soundLogos[5].play();
        drawMicroGrid();

    } else if (key == '5'){
        soundLogos[6].play();

    } else if (key == '6'){
        soundLogos[7].play();

    } else if (key == '7'){
        soundLogos[8].play();

    } else if (key == '8'){
        soundLogos[9].play();
        }
    }

//animation for apple
function drawEpicy() {
    var a = 60; // variable that controls the size and curvature of shape
    var b = a / 2; // variable that controls the size and curvature of shape
    level = amplitude.getLevel(); //takes the value of measured amp level.
    h = map(level, 0, 3, 20, 900); // maps amplitude to appropriate value
    var ph = h / 2; // links mapped amp value as a variable that controls shape.
    fill(h * 5, h * 10, 200); //fills color according to measured amp.
    noStroke();
    beginShape();
  for (var i = 0; i < 100; i ++) { // for loop to draw vertex for epicycloid
      var t = map(i, 0, 100, 0, TWO_PI); // radian value.
      x = (a + b) * cos(t) - h * cos(ph + t * (a + b) / b);
      y = (a + b) * sin(t) - h * sin(ph + t * (a + b) / b);
        vertex(x, y); //curve line
         }
  endShape();
}

//animation for text
function drawThreeDots(){ //draws the three dots that fall
    fill(255);
    noStroke();
    print(h);
    ellipse(dX - 50, dY, 25, 25);
    ellipse(dX, dY * 1.2, 25, 25);
    ellipse(dX + 50, dY * 1.5, 25, 25);
    dY += 10; // vertical falling
}

function drawIntelEllipse(){
    level = amplitude.getLevel();
    let h = map(level, 1, 8, 5, 50);
    for (var i = 0; i < 15 ; i++){
  		var diam = rotatePath - 30 * i; // creates the spin out effect of the ellipse

      if (diam > 0){ //pushes each new ellipse to show
        noFill();
  		stroke(0, 113, 197); //intel blue
        strokeWeight(2);
        ellipseMode(CENTER)
        push();
        translate(width/8 - 90, height/4 - 10); //position of starting ellipse
        rotate(cos(2.0));// rotation angle
        ellipse(200, 200, diam / h, 40 / h); // the size of the ellipse is affected by amp.
      }
    }
    rotatePath = rotatePath + 2; // controls the speed of the spin out effect.
  }

function drawMicroGrid(){ // suppose to imitate the microsoft grid
    level = amplitude.getLevel();
    let h = map(level, 1, 8, 20, 200);
    noStroke();
    rectMode(CENTER);
    for (var y = 50; y < height + 50; y += 100) { // nested for loop for tiling
       for (var x = 50; x < width + 50; x += 100) {
           fill(x, y + 100, h * 5); // color is affected by amp
           rect(x , y, h * 3, h * 3); // size is affected by amp
       }
   }
}

How does it work:

Press all the number keys from 1 to 8 and watch the patterns move and change to familiar sound logos!

(For some reason there are problems when Safari is used to view my project so please use Chrome or Firefox!)

In my proposal, I wanted to do some sort of sound visualization either in a form of a game or something similar to patatap. Sticking to my proposal, I used some iconic sounds that can be recognized through our day to day usage of technology. I realized how easy it is to overlook the importance of how these sounds inform our usage of technology so I ended up creating a sonic art piece that creates patterns according to the amplitude measured through the sound files.

My final project does not quite achieve the level of fidelity I originally intended my sonic art to have as the visuals are a bit too noisy and I want it to have a simple yet sophisticated look. I spent quite a bit of time trying to figure out how to use sound libraries in p5.js and mapping the amplitude to each of the various patterns, so I had a bit of difficulty debugging the whole code.

finalproj

/*Kimberlyn Cho
ycho2@andrew.cmu.edu
Sarah Kang
sarahk1@andrew.cmu.edu
Section C
Final Project
*/

/*INSTRUCTIONS:
(SARAH KANG) OPENING PAGE

(KIMBERLYN CHO) SCENE 1: 
    -use MOUSE to choose ingredient and click in bowl to place ingredient
    -press ENTER to mix ingredients
    -use MOUSE to add salt and pepper as desired and ENTER to mix again
(KIMBERLYN CHO) SCENE 2:
    -use LEFT and RIGHT arrow keys to move frying pan
    -dumpling is fully fried once "FINISH" button pops up
(SARAH KANG) SCENE 3: 
    -use DOWN arrow key to plate/start
    -use keys 'y, u, m' to finish and eat
*/


//KIMBERLYN CHO GLOBAL VARIABLES\\
//ingredient image links
var ingredients = [
    "https://i.imgur.com/kbiRJNO.png?3",
    "https://i.imgur.com/BqKFhGa.png?3",
    "https://i.imgur.com/X37RSp0.png?2",
    "https://i.imgur.com/1hN8NJV.png?5",
    "https://i.imgur.com/zlwmpov.png?3"];
//current ingredient selection
var currIngredient;
//content of bowl
var texts = [];
//shifting frying pan positions
var xpos = 200;
var ypos = 150;
//dumpling location on frying pan
var dxpos = 200;
//measure frying time (number of frying pan shifts)
var frytime = 1;
//toggle to control when scene3 is drawn
var updatedraw = true;
//toggles to control scenes
var toggle = true;
var toggle2 = true;
//drag effect of dumpling on frying pan
var shift = false;
var startTime = -1000;
var startXPos;
var transitionLength = 1.0;
var direction = 200;

function preload() {
    //KIMBERLYN CHO IMAGES
    //loading images into variables
    mushroom = loadImage(ingredients[0]);
    greenonion = loadImage(ingredients[1]);
    steak = loadImage(ingredients[2]);
    salt = loadImage(ingredients[3]);
    pepper = loadImage(ingredients[4]);

    //SARAH KANG IMAGES
    var plate = "https://i.imgur.com/kvmDFlr.jpg";
    var chopsticks = "https://i.imgur.com/cWrGYFq.jpg";
    var dinnertime = "https://i.imgur.com/QCuDyQk.jpg";
    var dumps = "https://i.imgur.com/wIrlEFb.jpg";
    var hand1 = "https://i.imgur.com/MmOZHtp.jpg"
    var hand2 = "https://i.imgur.com/FBDI4yN.jpg"
    var hand3 = "https://i.imgur.com/bYtuDzt.jpg"
    var kid = "https://i.imgur.com/BiavReL.jpg"
    var finaldump = "https://i.imgur.com/0ZQYp9Y.jpg"
        Img = loadImage(plate);
        Img2 = loadImage(chopsticks);
        Img3 = loadImage(dinnertime);
        Img4 = loadImage(dumps);
        Img5 = loadImage(hand1);
        Img6 = loadImage(hand2);
        Img7 = loadImage(hand3);
        Img8 = loadImage(kid);
        Img9 = loadImage(finaldump);
}

function setup() {
    createCanvas(400, 300);
    background(0);
    scene0setup();
}

function draw() {
    scene1();
    //scene3
    if (updatedraw == false) {
        background(0);
        scene2();
        toggle2 == false;
    };
}

//START PAGE (SARAH KANG)
function scene0setup() {
    //plate
    image(Img, 0, 50);
    //title
    textSize(60);
    textFont('Arial');
    textAlign(CENTER);
    stroke(255);
    strokeWeight(3);
    fill(0);
    text("\"DUMPLING\"", 200, 150);
    //chopsticks
    image(Img2, 200, 0);
    //start button
    noFill();
    rect(320, 260, 60, 24);
    textSize(10);
    strokeWeight(0.4);
    text("START", 350, 276);
}

//SCENE 1: ADDING AND MIXING FILLING (KIMBERLYN CHO)

//SCENE 1 BACKGROUND
function scene1setup() {
    //bowl
    background(0);
    noStroke();
    fill(240);
    ellipse(width / 2, height / 2, 200);
    fill(255);
    ellipse(width / 2, height / 2, 100);
    stroke(0);
    noFill();
    ellipse(width / 2, height / 2, 180);
    stroke(255);
    //next button
    rect(320, 260, 60, 24);
    textSize(10);
    strokeWeight(0.4);
    textAlign(CENTER);
    text("NEXT", 350, 276);
    //ingredient selection
    image(mushroom, 10, 10);
    image(greenonion, 10, 60);
    image(steak, 12, 130);
    image(salt, 340, 20);
    image(pepper, 337, 90);

    fill(255);
    textAlign(LEFT);
    textSize(10);
    text("1. click ingredient of choice, then place it in bowl with another click", 20, 280);
    text("2. to mix, press the ENTER key", 20, 290);
}   

//SCENE 1 INTERACTION
function scene1() {
    //updating ingredient selection based on where user clicks
    if (mouseIsPressed) {
        fill(0);
        if (mouseX > 10 & mouseX < 60 &&
            mouseY > 15 && mouseY < 55) {
            currIngredient = "\"mushroom\""
        };
        if (mouseX > 10 & mouseX < 60 &&
            mouseY > 65 && mouseY < 120) {
            currIngredient = "\"green onion\""
        };
        if (mouseX > 10 & mouseX < 60 &&
            mouseY > 130 && mouseY < 160) {
            currIngredient = "\"beef\""        
        };
        if (mouseX > 340 & mouseX < 370 &&
            mouseY > 20 && mouseY < 70) {
            currIngredient = "\"salt\""
        };
        if (mouseX > 340 & mouseX < 360 &&
            mouseY > 95 && mouseY < 140) {
            currIngredient = "\"pepper\""
        };
    };
}
//*see mousepressed fuction for code that updates and draws content of bowl
//*see keypressed function for code that mixes content of bowl

//SCENE 2: FRYING DUMPLING

//SCENE 2 BACKGROUND
function scene2() {
    //frying pan
    noStroke();
    fill(240);
    ellipse(xpos, ypos, 200);
    rectMode(CENTER);
    rect(xpos, 250, 25, 100);
    fill(255);
    ellipse(xpos, ypos, 150);
    fill(0);
    text("\"DUMPLING\"", dxpos, ypos);
    fill(255);
    textAlign(LEFT);
    textSize(12);
    text("press left and right arrow keys to fry until ready to plate!", 20, 20);

    //indication of when dumpling is done frying
    if  (frytime > 5) {
        stroke(255);
        noFill();
        strokeWeight(1);
        rectMode(CORNER);
        rect(320, 260, 60, 24);
        textSize(10);
        strokeWeight(0.4);
        textAlign(CENTER);
        text("PLATE", 350, 276);
        noLoop();
    } else {
        stroke(255);
        noFill();
        strokeWeight(1);
        rectMode(CORNER);
        rect(320, 260, 60, 24);
        textSize(10);
        strokeWeight(0.4);
        textAlign(CENTER);
        text("NEXT", 350, 276);
    };
    //updating position of dumpling on frying pan with a drag effect
    if (shift & startTime > 0) {
        var currentTime = millis()/1000 - startTime;
        var slide = map(currentTime, 0, transitionLength, 0, 1);
        dxpos = lerp(dxpos, direction, slide);
        if (currentTime > transitionLength) {
            shift = false;
        };
    };
}

//SCENE 2 INTERACTION
//**see keypressed function for code that shifts frying pan

function scene3setup() {
    background(0);
    //plate with silverware
    image(Img3, 0, 10);
    //instruction
    fill(255);
    textAlign(LEFT);
    textSize(12);
    text("press down arrow to plate, then type the letter that pops up", 15, 285);
}

function mousePressed() {
//INTERACTION PART OF SCENE 1 CONT.
    //constraining ingredients to bowl
    if (mouseX > 150 & mouseX < 250 &&
        mouseY > 100 && mouseY < 200) {
        //updating array to store content of bowl even if ingredients are added after mix
        texts.push(currIngredient);
        //adding selected ingredient into bowl
        text(currIngredient, mouseX, mouseY);
    };

//SCENE TRANSITIONS
    //start to scene 1
    if ((mouseX > 320 & mouseX < 380 && mouseY > 260 && mouseY < 280) && (toggle == true)) {
        scene1setup();
    };
    //scene 1 to scene 2
    if ((mouseX > 320 & mouseX < 380 && mouseY > 260 && mouseY < 280) && (toggle == false)) {
        updatedraw = false;
    };

    //scene 2 to scene 3
    if ((mouseX > 320 & mouseX < 380 && mouseY > 260 && mouseY < 280) && (frytime > 5)) {
        updatedraw = true;
        scene3setup()
    };

}

function keyPressed() {
//INTERACTION PART OF SCENE 1 CONT.
    //mixing content of bowl
    if (keyCode === ENTER) {
        //clearing bowl
        scene1setup();
        //redrawing contents of bowl with randomization to mimic mixing
        for (var i = 0; i < texts.length; i++) {
            fill(0);
            text(texts[i], floor(random(150, 250)), floor(random(100, 200)));
        };
        toggle = false;
    };

//INTERACTION PART OF SCENE 2
    //shifting pan and dumpling position
    if (keyCode == LEFT_ARROW) {
        //updating frying pan location
        xpos = 150;
        //initiating drag effect on dumpling
        shift = true;
        direction = 150;
        startTime = millis()/1000;
        startXPos = xpos;
        frytime +=1;
        toggle2 = false;
    };
    if (keyCode == RIGHT_ARROW) {
        //updating frying pan location
        xpos = 250;
        //initiating drag effect on dumpling
        direction = 250;
        shift = true;
        startTime = millis()/1000;
        startXPos = xpos;
    };

//INTERACTION PART OF SCENE 3
    //keypress to start
    if (keyCode == DOWN_ARROW) {
            image(Img4, 145, 115); //dumpling
            stroke(255);
            textSize(20);
            text("\"Y\"", 300, 40);
    }
    //sequence of typing
    if (keyCode == 'y') {
    }
    if (keyCode == 'u') {
    }
    if (keyCode == 'm') {        
    }
}
function keyTyped() {
    if (key === 'y') {
        stroke(255);
        textSize(20);
        text("\"U\"", 300, 250);
    }
    if (key === 'u') {
        stroke(255);
        textSize(20);
        text("\"M\"", 75, 250);
    }    
    if (key === 'm') {
        //kid thumbs up
        image(Img8, 10, 10);
        //plate of dumplings
        image(Img9, 125, 100);
        noStroke();
        fill(0);
        rect(0, 270, 400, 30);
        fill(255, 194, 194);
        textAlign(CENTER);
        textSize(20);
        text("time to eat!", 200, 285);
    }  
}

For our final project, we were inspired by the classic Nintendo game, Cooking Mama and wanted to recreate an unconventional, more conceptual version of the cooking experience. We were also inspired by the abstract approach in representing visuals often seen in high fashion, such as Off-White; the dumpling being cooked is represented by the literal word “dumpling”. We struggled a lot with putting our scenes together and working out the transitions, but after some compromise and editing, we were able to put together a fun game.

This project functions as a Climate Change Visualizer, where the user is able to understand the extents of their environmental impact in a game like exaggeration of excessive consumption. The user’s actions to increase their ecological footprint, are translated to an increased rate of change in the number of tonnes of CO2 emitted. Each aspect of the Anthropocene (transport, fossil fuels, and agriculture) are represented by icons and are associated with facts that are cycled through in an array. At the end of the clicking cycle, there is a sarcastic game-like “YOU WIN!” message that points to the absurdity of excessive human consumption that ultimately leads to the degradation of the planet. The hope is that this climate change visualizer helps people to understand the gravity and severity of their impact relative to climate change.  Part of the user’s involvement makes it necessary to refresh the page in order to restart the game. The squares that change in size and movement based on mouse location are indicative of icecaps that get smaller in size as “ecological footprint” increases. 

shariqs-pgreenwa

// Shariq Shah | Paul Greenway
// shariqs | pgreenwa
// shariqs@andrew.cmu.edu | pgreenwa@andrew.cmu.edu

// Project-12-Final Project
// Climate Change Visualizer

//Variables


//Ice movement intensity variable
let movementIntensity = 0;


// Environmental impacts multipliers
var impactSize = [6,9,12,400];

//Step Variable
var n = 0;

//Starting C02 Value
var co2 = 2332947388070;

//Images


//Impact Icon Links
var impactImageLinks = [
"https://i.imgur.com/BQBpdiv.png", "https://i.imgur.com/De2zFwf.png", "https://i.imgur.com/a0ab0DC.png", 'https://i.imgur.com/SRVUOkn.png'
  ]
//Impact Facts
var impactFacts = [ "","                               Livestock contributes nearly 2/3 of agriculture's greenhouse & 78% of its methane emissions", "                       In total, the US transportation sector produces nearly thirty percent of all US global warming emissions", "The consumption of fossil fuel by the United States has been 80%. Fossil fuels are the most dangerous contributors to global warming"
  ]
//Impact Tags
var impactNames = [
  "agriculture", "transportation", "fossil        fuels", "you win"];

var impactImages;

//Images Preload

function preload() {
    impactImages =         loadImage(impactImageLinks[n]);
    currentImpactImageIndex = 0;
}

//Setup, Load in Images
function setup() {
  createCanvas(600, 600);
 
  currentImpactImage = impactImages;
  currentImpactImage.loadPixels();
 
  strokeWeight(0.25);
  stroke(dist(width/2, height/2, mouseX, mouseY), 10, 200);
  noFill();
}
 
 
function draw() {
 
  //Background color + opacity setup  
  background(255,0,0,10);
  tint(500, 20);

  //Dynamic ice grid setup 
  for (let x = 0; x <= width; x = x + 50) {
    for (let y = 0; y <= height; y = y + 50) {

      const xAngle = map(45, 0, width, -4 *         PI* 3, 4 * PI * 3, true);
      const yAngle = map(45, 0, height, -4 *         PI, 4 * PI, true);

      const angle = xAngle * (x / width) +           yAngle * (y / height);


      const myX = x + 20 * cos(2 * PI/4 *           movementIntensity + angle/10);
      const myY = y + 20 * sin(2 * PI/2 *           movementIntensity + angle/10);     
      stroke(0,255,255,200);
      strokeWeight(n);
      fill('white');
      rectMode(CENTER);
     
      rect(myX, myY, dist(myX, myY, mouseX,         mouseY)/impactSize[n],dist(myX, myY,           mouseX, mouseY)/impactSize[n]); // draw       particle5
    }
  }
 
  //Impact Icons Config + draw
  imageMode(CENTER);
  currentImpactImage.resize(100, 100);
  image(currentImpactImage, mouseX, mouseY);
 

  
  textFont('Helvetica');
  
  noStroke();
  
  fill('white');
  
  rect (width/2, 500, width, 60);
  
  fill('black');
  
  textSize(25);
  
  //C02 Emmited updating Text

  text('TONNES OF CO2 EMITTED : ' + co2, 40, 509);
  fill(255);
  //C02 emmision text backdrop

  rect(width/2, 100, width, 40);
  fill(0);
  textSize(10);
  text(impactFacts[n], width/2 - 295, 105);
  
  //C02 Count Multiplier
  co2 = co2 + 10 * n * 20;
  
  textSize(32);
    
  
  //game over text
  if (n == 4) {
    fill(0);
    text('YOU WIN! ICE CAPS MELTED.', mouseX - 200,           mouseY + 100);
  
    textFont('Helvetica');
    }
  
    else {
    
    textSize(6 * n);
    text('PRESS TO INCREASE YOUR ECOLOGICAL FOOTPRINT!',       mouseX - 120 * n, mouseY + 100);
  
  }
  
  //Ice Movement Intensity Multiplier
  movementIntensity = movementIntensity + 0.01 +n/150;

}

//Mouse Click functions

function mousePressed(){
   
    //change impact icons on click
    impactImages = loadImage(impactImageLinks[n]);
    currentImpactImage = impactImages;

    currentImpactImage.loadPixels();
    //increase step on click
    n = n + 1;
   
    if (n > 4) {
        n = 0;
    }

}

sketch

Due to being unable to upload programs with libraries on WordPress, you need to click on the ‘sketch’ hyperlink to enjoy this program.

For my final project, I wanted to expand upon the Raining Letters assignment. I wanted to experiment with the camera more, and I decided to create an application that lets the user draw with their face. Moving your face around lets you draw, pressing the spacebar clears your art. The canvas changes color each time the page loads and is based on halftone art (which has a grid of circles). You can also use the slider to change the thickness of the brush (face brush :0).

The program and the libraries linked to it can be found in this zip file:

rpai_final

sketch

//Steven Fei & Mike Jin
//Section A & C
//Final Project
//zfei@andrew.cmu.edu & fjin@andrew.cmu.edu
var starNumber = 150;//number of the stars on the background
var starsize = 1.5;//size of the stars
var sx = [];//array to define the x position of the stars
var sy = [];//array to define the y position of the stars
var sz = [];//array to define the z position of the stars
var amplitude = 3.14 * 3;//define the moving margin of the stars
var waveSpeed;//define the moving speed of the stars on the background
var theta = 0;//define the moving angle of the stars
var glowDefiner = [];//define the true false value for whether to let the star glow
var glowSize = 22;//glowing size of the stars
var newStars = [];//array for making new stars
var mouseXList = [];//arrays to store mouseX value
var mouseYList = [];//arrays to store mouseY value
var img; //load image for the earth texture mapping 
var w = 600 / 7 // devivded the canvas into seven regions and from left to right, the pitches of the piano sound will progressively become higher  
var mySndC; //Piano note C
var mySndD; //Piano note D
var mySndE; //Piano note E
var mySndF; //Piano note F
var mySndG; //Piano note G
var mySndA; //Piano note A
var mySndB; //Piano note B
var newExplod = [];//array for making new explosion at the background
var mouseXListEx = [];//arrays to store mouseX value
var mouseYListEx = [];//arrays to store mouseY value

function preload(){
//coded by Mike
//preload the soundtrack of each piano notes to the file
    mySndC = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/12/c-1.wav");
    mySndD = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/12/d-1.wav");
    mySndE = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/12/e-1.wav");
    mySndF = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/12/f-1.wav");
    mySndG = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/12/g-1.wav");
    mySndA = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/12/a-1.wav");
    mySndB = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/12/b-1.wav");
    mySndC.setvolume(1);
    mySndD.setvolume(1);
    mySndE.setvolume(1);
    mySndF.setvolume(1);
    mySndG.setvolume(1);
    mySndA.setvolume(1);
    mySndB.setvolume(1);
}

function setup() {
//load the background image for the texture mapping of the earth
//coded by Mike
    img = loadImage("https://i.imgur.com/lamlO83.jpg");
    createCanvas(600, 600,WEBGL);

//create values for the positions of the stars on the background
//coded by Steven
    for (var i = 0; i < starNumber; i++){
        sx.push(random(-width * 0.75, width * 0.75));
        sy.push(random(-height, height));
        sz.push(random(-width, height/2));
        var toggle = random(1.0);
        //define whether the stars on the background will glow
        if(toggle < 0.9){
            glowDefiner.push(false);
        }else{
            glowDefiner.push(true);
        }
    }
    for(var j = 0; j < glowDefiner.length; j++){
    print(glowDefiner[j]);
    }
}

function draw(){
    background(0);
    noStroke();
    normalMaterial();
    centerCube();//create a center star to give a sense of what perspective we are looking at
    makeCamera();//use the makeCamera function to change the viewport angle
    makeearth();
    push();
    //draw the stars on the background
    for(var i = 0; i < starNumber; i++){
        //coded by Steven
        push();
        waveSpeed = map(sz[i], -width, height/2, 15000, 60000);//define the moving speed of the stars
        theta += (TWO_PI / waveSpeed);//define the moving angle of the stars
        if(theta > amplitude){
            theta = -theta;//set the moving margins of the stars
        }
        sy[i] += sin(theta);//set the moving value to the positions
        sx[i] += cos(theta);//set the moving value to the positions
        translate(sx[i], sy[i], sz[i]);
        //coded by Mike
        if(glowDefiner[i]){
            fill(255, 200, 130, 4);
            sphere(glowSize);//draw glow light of the sphere
        }
        fill("white");
        smooth();
        sphere(starsize);//draw the stars
        pop();
    }
    pop();

    push();
    //make the planet
    if (mouseXListEx.length != 0){
        for(var k = 0; k < newExplod.length; k++){
            newExplod[k].updateExplo();//animate the expansion of the stars
            push();
            translate(newExplod[k].x, newExplod[k].y,0);
            rotateX(frameCount * 0.05 + k*2);//rotate the new star
            rotateY(frameCount * 0.05 + k*2);//rotate the new star
            newExplod[k].draw();//animate the emergence of the stars
            pop();
        } 
    }
    if(newExplod.length > 2){
        newExplod.shift();
    }
    pop();

    push();
    // make the explosion
    if (mouseXList.length != 0){
        for(var k = 0; k < newStars.length; k++){
            newStars[k].updateStar();//animate the expansion of the explosion in the background 
            push();
            translate(newStars[k].x, newStars[k].y,0);
            newStars[k].draw();//animate the emergence of the stars
            pop();
        } 
    }
    if(newStars.length > 4){
        newStars.shift();
    }
    pop();
    
}

function makeCamera(){
//coded by Steven
    camX = map(mouseX, 0, width, -width/2, width/2);//changing camera position x
    camY = map(mouseY, 0, height, -height/2, height/2);//changing camera position y
    camZ = height/2;//changing camera position z
    camera(camX, camY, camZ,0,0,0,1,1,0);//allow the viewport angle to change
}

//make object to create new stars
function makeNewStar(x, y, radius){
//coded by Steven
    var newstar = {x: x,
                    y: y,
                    r: radius,
                    updateStar: updateStar,
                    draw: drawNewStar};
    return newstar;
}

function makeNewExplo(x, y, radius){
//coded by Mike
    var newExplo = {x: x,
                    y: y,
                    r: radius,
                    updateExplo: updateExplo,
                    draw: drawNewExplo};
    return newExplo;
}

//function to draw new star
function drawNewStar(){
//coded by Mike
    var color1 = random(150, 255);
    var color2 = random(100,180);
    var color3 = random(100,200);
    var density = random(14,20);//allow different numbers of the spheres to appear on the star
    for(var i = 0; i < density; i++){
        var lengthValue = map(i, 0, density, -PI, PI); //set longitudinal value
        for(var j = 0; j< density; j++){
            var widthValue = map(j, 0, density, -PI/2, PI/2);// set horizontal value
            var pX = this.r * sin(lengthValue) * cos(widthValue);
            var pY = this.r * sin(lengthValue) * sin(widthValue);
            var pZ = this.r * cos(lengthValue);
            push();
            fill(color1, color2, color3);
            translate(pX, pY, pZ);
            sphere(1.6);
            pop();
        }
    }
}

function drawNewExplo(){
//coded by Mike
    var color4 = random(100, 255);
    var color5 = random(100,180);
    var color6 = random(100,200);
    var density = random(12, 15);//allow different numbers of the spheres to appear for the explosion
    for(var i = 0; i < density; i++){
        var lengthValue = map(i, 0, density, -PI, PI); //set longitudinal value
        for(var j = 0; j< density; j++){
            var widthValue = map(j, 0, density, -PI/2, PI/2);// set horizontal value
            var pX1 = this.r * sin(lengthValue) * cos(widthValue * 0.5) * 0.5;
            var pY1 = this.r * sin(lengthValue * 0.5) * sin(widthValue) * 0.5;
            var pZ1 = this.r * cos(lengthValue);
            push();
            fill(color4, color5, color6);
            translate(pX1, pY1, pZ1);
            box(2, 2, 2);
            pop();
        }
    }
}
function updateExplo(){
//coded by Mike
    this.r += random(1,2);//allow the new explosion to expand
}

function updateStar(){
//coded by Mike
    this.r += random(0.5,2);//allow the new star to expand
}
function mousePressed(){
//coded by Steven
    var newStarMaking = [];//empty list for the making new star when mouse is pressed
    var newMouseXList = [];
    var newMouseYList = [];
    var newExploMaking = [];
    var newmouseXListEx = [];
    var newmouseYListEx = [];
    var clickEx;//check whether there is existing new stars
    var click;//check whether there is existing new stars
    
    if(mouseXList.length == 0){
        click = 0;//count whether the times of starting the object
        newStarMaking.push(newStars[0]);//assign values to new arrays to store valid value
        newMouseXList.push(mouseXList[0]);//assign values to new arrays to store valid value
        newMouseYList.push(mouseYList[0]);//assign value to new arrays to store valid value
    }
    else{
        //define the initiating position according to the mouse position
        for(var l = 0; l < newStars.length; l++){
            var distance = dist(mouseX - width/3, mouseY - height/3, newStars[l].x, newStars[l].y);
            if(distance <= 30){
                click = 1;
            }else{
                click = 0;
                newStarMaking.push(newStars[l]);//assign values to the new array
                newMouseXList.push(mouseXList[l]);//assign values to the new array
                newMouseYList.push(mouseYList[l]);//assign values to the new array
            }
        }
        //get the valid value back to the list
        newStars = newStarMaking;
        mouseXList = newMouseXList;
        mouseYList = newMouseYList;
    }
    //avoid invalid value
    if(click == 0){
        mouseXList.push(mouseX - width/3);
        mouseYList.push(mouseY - width/3);
        var newStar = makeNewStar(mouseX - width/3, mouseY-width/3, 30);
        newStars.push(newStar);
    }

    //add value to empty list
    if(mouseXListEx.length == 0){
        clickEx = 0;
        newExploMaking.push(newExplod[0]);
        newmouseXListEx.push(mouseXListEx[0]);
        newmouseYListEx.push(mouseYListEx[0]);
    }
    else{
    //assign initiating position according to the mouse postion
        for(var w = 0; w < newExplod.length; w++){
            var distance = dist(mouseX - width/3, mouseY - height/3, newExplod[w].x, newExplod[w].y);
            if(distance <= 30){
                clickEx = 1;
            }else{
                clickEx = 0;
                newExploMaking.push(newExplod[w]);
                newmouseXListEx.push(mouseXListEx[w]);
                newmouseYListEx.push(mouseYListEx[w]);
            }
        }
        //assign values back to the list
        newExplod = newExploMaking;
        mouseXListEx = newmouseXListEx;
        mouseYListEx = newmouseYListEx;
    }
    //avoid invalid value
    if(clickEx == 0){
        mouseXListEx.push(mouseX - width/3);
        mouseYListEx.push(mouseY - width/3);
        var newExplo = makeNewExplo(mouseX - width/3, mouseY-width/3, 300);
        newExplod.push(newExplo);
    }

    //coded by Mike
    //load the sound and defines the regions of the sound 
    if(mouseX > 0 & mouseX < w){
            mySndC.play();
        }
        if(mouseX > w & mouseX < 2 *w){
            mySndD.play();   
        }
        if(mouseX > 2 * w & mouseX < 3 * w){
            mySndE.play();
        }
        if(mouseX > 3 * w & mouseX < 4 * w){
            mySndF.play();
        }
        if(mouseX > 4 * w & mouseX < 5 * w){
            mySndG.play();
        }
        if(mouseX > 5 * w & mouseX < 6 * w){
            mySndA.play(); 
        }
        if(mouseX > 6 * w & mouseX < 7 * w){
            mySndB.play(); 
        }
}


//function to make a center planet to have some understanding of the perspective
//coded by Mike
function centerCube(){
    //make sure the location of the center planet is always at the center of the canvas
    push();
    var locX = mouseX - height / 2;
    var locY = mouseY - width / 2;
    ambientLight(50);
    directionalLight(255, 0, 0, 0.25, 0.25, 0);
    pointLight(0, 0, 255, locX, locY, 250);
    ambientMaterial(100);
    strokeWeight(0.5);
    stroke(255);
    smooth();
    sphere(40);
    pop();
    //first ring surronding the planet
    push();
    rotateZ(frameCount * 0.01);
    rotateX(frameCount * 0.01);
    rotateY(frameCount * 0.01);
    strokeWeight(0.5);
    smooth();
    stroke(255);
    torus(60, 0.5);
    pop();
    //second ring surronding the planet
    push();
    rotateZ((100+ frameCount) * 0.01);
    rotateX((100 + frameCount) * 0.01);
    rotateY((100+ frameCount) * 0.01);
    smooth();
    strokeWeight(0.5);
    stroke(255);
    torus(70, 0.5);
    pop();
    //third ring surronding the planet
    push();
    rotateZ((200+ frameCount) * 0.01);
    rotateX((200 + frameCount) * 0.01);
    rotateY((200+ frameCount) * 0.01);
    smooth();
    strokeWeight(0.5);
    stroke(255);
    torus(80, 0.5);
    pop();
    //fourth ring surronding the planet
    push();
    rotateZ((300+ frameCount) * 0.01);
    rotateX((300 + frameCount) * 0.01);
    rotateY((300+ frameCount) * 0.01);
    smooth();
    strokeWeight(0.5);
    stroke(255);
    torus(90, 1);
    pop();
}
//function to make a earth adjacent to the center planet 
//coded by Mike and Steven 
function makeearth(){
    push();
    translate(width / 2, height / 3, -150);
    rotateX(frameCount * 0.05);
    rotateY(frameCount * 0.05);
    texture(img);
    sphere(20);
    pop();
}

For this project, I wanted to create a recycling game that educates all age levels upon proper recycling, which is one of the basic ways that we can all contribute to protect our environment. Through the process, I learned a lot, especially how there are a lot of trash items that are not recyclable—this emphasized the importance of reusing items and reducing waste in general. The user can simply explore the environment, drag any waste item and drop it in any of the waste bins below. If the waste is thrown in the wrong bin, information will automatically show up on the top to guide the user, while also giving extra tips for reducing such trash. 

sketch

//Sammie Kim
//Section D
//sammiek@andrew.cmu.edu
//Final Project

//Global Variables
var FOOD = 0; //Index number within the waste bin type array
var PLASTIC = 1;
var PAPER = 2;
var TRASH = 3;
var score = 0;
var styrofoamBox = createStyrofoamBox();
var tissue = createTissue();
var hanger = createHanger();
var newspaper = createNewspaper();
var pizzaBox = createPizzaBox();
var plasticBag = createPlasticBag();
var plasticBottle = createPlasticBottle();
var paperBag = createPaperBag();
var appleCore = createApple();
var coffeeCup = createCoffee();
var fishbones = createFishbones();
var toothpaste = createToothpaste();
var mirror = createMirror();
var bubblewrap = createBubbleWrap();
var foodBin = createFoodBin();
var plasticBin = createPlasticBin();
var paperBin = createPaperBin();
var trashBin = createTrashBin();
var wastes = [styrofoamBox, tissue, hanger, newspaper, pizzaBox, plasticBag,
              plasticBottle, paperBag, appleCore, coffeeCup, fishbones,
              toothpaste, mirror, bubblewrap];
var wasteBins = [foodBin, plasticBin, paperBin, trashBin];
//Boolean Variables
var correct = false;
var selected = false;

//Use objects to create different wastes and wastebins with specific traits
function createStyrofoamBox() {
    var styrofoamBox = {
        url: "https://i.imgur.com/Lb1P88W.png",
        initX: 78,
        initY: 102,
        x: 78,
        y: 102,
        selected: false,
        stay: true,
        dragging: false,
        informing: false,
        type: TRASH,
        note: "Styrofoam is a non-recyclable material because it contains "
              + "polysteryene, which is non-biodegradable."
        }
    return styrofoamBox;
}

function createTissue() {
    var tissue = {
        url: "https://i.imgur.com/s6rZAJu.png",
        initX: 145,
        initY: 95,
        x: 145,
        y: 95,
        selected: false,
        stay: true,
        dragging: false,
        informing: false,
        type: TRASH,
        note: "Dirty tissues should be thrown in trash."
        }
    return tissue;
}

function createHanger() {
    var hanger = {
        url: "https://i.imgur.com/dE1sDsn.png",
        initX: 253,
        initY: 163,
        x: 253,
        y: 163,
        selected: false,
        stay: true,
        dragging: false,
        informing: false,
        type: TRASH,
        note: "Plastic hangers are not purely plastic, and their curved ends "
              + "can be problematic in recycling equipment. "
        }
    return hanger;
}

function createNewspaper() {
    var newspaper = {
        url: "https://i.imgur.com/FkD5sJK.png",
        initX: 0,
        initY: 253,
        x: 0,
        y: 253,
        selected: false,
        stay: true,
        dragging: false,
        informing: false,
        type: PAPER,
        note: "Newspapers should be recycled in paperbin."
        }
    return newspaper;
}

function createPizzaBox() {
    var pizzaBox = {
        url: "https://i.imgur.com/ZRjCbEW.png",
        initX: 172,
        initY: 102,
        x: 172,
        y: 102,
        selected: false,
        stay: true,
        dragging: false,
        informing: false,
        type: TRASH,
        note: "Pizzabox cannot be recycled due to its wet and greasy cardboard "
              + "that cannot be processed in recycling equipment. "
              + "It can also attract insects and rodents."
        }
    return pizzaBox;
}

function createPlasticBag() {
    var platicBag = {
        url: "https://i.imgur.com/PDtsB6D.png",
        initX: 94,
        initY: 172,
        x: 94,
        y: 172,
        selected: false,
        stay: true,
        dragging: false,
        informing: false,
        type: PLASTIC,
        note: "Most recycling facilities can only handle rigid materials that can "
              + "be separated, so plastic bags and wraps are generally not accepted. "
              + "But we can always reuse them for collecting trash."
        }
    return platicBag;
}

function createPlasticBottle() {
    var plasticBottle = {
        url: "https://i.imgur.com/6OEa9bA.png",
        initX: 393,
        initY: 95,
        x: 393,
        y: 95,
        selected: false,
        stay: true,
        dragging: false,
        informing: false,
        type: PLASTIC,
        note: "Empty plastic bottles belong in the plastic bin. "
        + "The better option is to carry reusable waterbottles."
        }
    return plasticBottle;
}

function createPaperBag() {
    var paperBag = {
        url: "https://i.imgur.com/QsPO9ph.png",
        initX: 364,
        initY: 153,
        x: 364,
        y: 153,
        selected: false,
        stay: true,
        dragging: false,
        informing: false,
        type: PAPER,
        note: "Clean paper bags belong in the paper bin. Still, the best "
        + "option would be to reuse them."
        }
    return paperBag;
}

function createApple() {
    var appleCore = {
        url: "https://i.imgur.com/QX98sKU.png",
        initX: 274,
        initY: 258,
        x: 274,
        y: 258,
        selected: false,
        stay: true,
        dragging: false,
        informing: false,
        type: FOOD,
        note: "Any type of leftover food belong in the organic waste bin."
        }
    return appleCore;
}

function createCoffee() {
    var coffeeCup = {
        url: "https://i.imgur.com/sys0QnS.png",
        initX: 351,
        initY: 87,
        x: 351,
        y: 87,
        selected: false,
        stay: true,
        dragging: false,
        informing: false,
        type: TRASH,
        note: "Unlike most paper items, paper cups are usually coated in platic "
              + "to hold liquid to prevent leaking. "
              + "Although many cafes are beginning to use compostable cups, "
              + "the best option is carrying coffee mugs or reusable bottles."
        }
    return coffeeCup;
}

function createFishbones() {
    var fishbones = {
        url: "https://i.imgur.com/wju8gLe.png",
        initX: 205,
        initY: 264,
        x: 205,
        y: 264,
        selected: false,
        stay: true,
        dragging: false,
        informing: false,
        type: FOOD,
        note: "Any type of leftover food belong in the organic waste bin."
        }
    return fishbones;
}

function createToothpaste() {
    var toothpaste = {
        url: "https://i.imgur.com/na3BnTw.png",
        initX: 104,
        initY: 260,
        x: 104,
        y: 260,
        selected: false,
        stay: true,
        dragging: false,
        informing: false,
        type: PLASTIC,
        note: "Toothpaste tubes should be properly cleaned out before "
              + "being placed in the plastic recycling bin."
        }
    return toothpaste;
}

function createMirror() {
    var mirror = {
        url: "https://i.imgur.com/NAh1S2x.png",
        initX: 142,
        initY: 130,
        x: 142,
        y: 130,
        selected: false,
        stay: true,
        dragging: false,
        informing: false,
        type: TRASH,
        note: "Mirrors cannot be recycled due to the coating used on glass "
              + "to make it reflective. Be sure to wrap broken mirror pieces "
              + "before throwing them in the garbage."
        }
    return mirror;
}

function createBubbleWrap() {
    var bubblewrap = {
        url: "https://i.imgur.com/cvJ1Iou.png",
        initX: 336,
        initY: 245,
        x: 336,
        y: 245,
        selected: false,
        stay: true,
        dragging: false,
        informing: false,
        type: TRASH,
        note: "Although many plastics are recylable, bubble wraps and bags "
              + "cannot be recyled due to their thin films that can get tangled "
              + "in recycling machines."
        }
    return bubblewrap;
}

function createPaperBin() {
    var paperBin = {
        url: "https://i.imgur.com/AgJIG61.png",
        x: 229,
        y: 342,
      }
    return paperBin;
}

function createPlasticBin() {
    var plasticBin = {
        url: "https://i.imgur.com/6x6FPJW.png",
        x: 117,
        y: 342,
    }
    return plasticBin;
}

function createFoodBin() {
    var foodBin = {
        url: "https://i.imgur.com/sSve89v.png",
        x: 8,
        y: 342,
    }
    return foodBin;
}

function createTrashBin() {
    var trashBin = {
        url: "https://i.imgur.com/jm4NMB8.png",
        x: 343,
        y: 342,
    }
    return trashBin;
}

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

function draw() {
    //load images for background, wastes, and waste bins
    background(220);
    image(backgroundPic, 0, 0);
    for (var i = 0; i < wasteBins.length; i++) {
        image(wasteBinsPics[i], wasteBins[i].x, wasteBins[i].y);
    }
    //Show explanation on top of the canvas if informing is true
    for (var i = 0; i < wastes.length; i++) {
        if (wastes[i].informing) {
            fill(220);
            noStroke();
            rect(0, 0, 450, 60);
            fill(0);
            text(wastes[i].note, 10, 10, 440, 480);//wrapping text within canvas
        }
        if (wastes[i].stay) { //if stay is true, images are all shown on canvas
            image(wastePics[i], wastes[i].x, wastes[i].y);
            if (wastes[i].dragging) {
                //update waste with current mouse locations
                wastes[i].x = mouseX - wastePics[i].width / 2;//offset amount
                wastes[i].y = mouseY - wastePics[i].height / 2;
        }
      }
    }
    if (correct) {
        text("Correct!", 10, 20); //shows up when answer is correct
    }
    fill(255);
    text("Score: " + score, 10, 90); //show scoreboard
}

function preload() {
    //Preload all the images by pushing the objects' URL into new array
    var backgroundURL = "https://i.imgur.com/4jWCbcI.png"
    backgroundPic = loadImage(backgroundURL);
    wastePics = [];
    for (var i = 0; i < wastes.length; i++) {
        wastePics.push(loadImage(wastes[i].url));
    }
    wasteBinsPics = []
    for (var i = 0; i < wasteBins.length; i++) {
        wasteBinsPics.push(loadImage(wasteBins[i].url));
    }
}

function mousePressed() {
    //Use mousePressed to drag each trash item within the canvas
    //I created parameters for each trash image, so that the mouse can click
    //within the area of each trash image.
    for (var i = 0; i < wastes.length; i++) {
        wastes[i].informing = false; //Clear information when mouse is pressed.
        var x0 = wastes[i].x; //top left X coordinate
        var y0 = wastes[i].y; //top right Y coordinate
        var x1 = wastes[i].x + wastePics[i].width; //top right X coordinate
        var y1 = wastes[i].y + wastePics[i].height; //bottom y coordinate
        if (!selected & x0 < mouseX && mouseX < x1 && y0 < mouseY && mouseY < y1) {
            selected = true; //trash is selected within the image boundaries
            wastes[i].dragging = true;
        }
    }
}

function mouseReleased() {
    //Use mouseReleased to evaluate whether the chosen trash is
    //dropped into the correct bin.
    //Like previously, I created specific parameters for trashbin images.
    selected = false;
    for (var i = 0; i < wastes.length; i++) {
        if (wastes[i].dragging) {
            wastes[i].dragging = false;
            var corrBin = wasteBins[wastes[i].type];
            var corrBinPic = wasteBinsPics[wastes[i].type];
            var x0 = corrBin.x;
            var y0 = corrBin.y;
            var x1 = corrBin.x + corrBinPic.width;
            var y1 = corrBin.y + corrBinPic.height;
            if (y0 < mouseY & mouseY < y1) {
                //Since all trashbins have the same Y height, I differentiated
                //the correct bin by determining the X locations
                if (x0 < mouseX && mouseX < x1) { //Correct Bin
                    correct = true;
                    wastes[i].stay = false; //waste will disappear
                    wastes[i].informing = false; //information will not show
                    score += 1; //score is updated by one when answer is correct
                } else {
                    //if incorrect, information will show up, and
                    //the waste image will go back to its initial location
                    correct = false;
                    wastes[i].informing = true;
                    wastes[i].x = wastes[i].initX; //initial X coordinate
                    wastes[i].y = wastes[i].initY; //initial Y coordinate
                }
            } else {
                correct = false; //the default status
            }
        }
    }
}

For this final project, I would really like to work with generative text. I am interested in working with books that are already in the public domain, and instead of using my program to generate new text or rearrange old text, I want to use my program to specify where the letters should exist on the page. I would like the letter placement to reflect ecological data on the rising temperatures due to the climate crisis. I would like to create a reconstruction of a cultural artifact / book where ever page signifies another year into the future, and the letters y placement slowly increases according to the amount of degrees the temperature in the place that book was written will rise. I am interested in the fragility of human existence and human culture, and how all of human memory and collective history is threatened by the climate crisis.. I want to display this vulnerability with this modified version of a book.

For my final project, I want to do something with sounds, more specifically, iconic sounds that we are accustomed to hearing through our daily usage of technology (think Apple startup sound, Intel sound, Netflix sound, Wii sound etc.). I want to create some sort of sound remix game that allows players to randomly press on keys to play the iconic sounds while some sort of interactive graphic related to the company that owns the sound will be displayed (kind of like Patatap). Another idea I have is to make a sound matching game where players have to match trimmings of iconic sounds to each brand/company that it is associated with by clicking on keys that will be linked to each brand/company. I don’t actually know if I am allowed to use these sounds (if there are copyright issues or not), so my final project will very much depend of which of these sounds I will be able to find free sourcing for.

The artists both display abstract visuals for sounds and songs. For Julien Bayle’s “ALPHA”, I really appreciate the ragged line drawings that take on black and white visuals. Julien Bayle also seemed to have used algorithmic sequencing to construct not only the visual, but also the sounds. This artist seemed to successfully create very different, complex 2D and 3D shapes that match the beats of the sounds, but could have used these complex shapes to form a more interesting narrative that happens throughout the piece.

For Cody Courmier’s piece (“Abstract Visual Sound”), I appreciate the simple shapes and colors used for the song “Tangerines”. All these shapes and movements seem more animated and less randomized, compared to Julien Bayle’s work. There seems to be a clear beginning and finish to the piece, as if it was to visually act as an introduction to something, such as an ad, rather than to just provide visuals for the song. Overall, I think for this piece the theme could have been more specified to revolve around the mood of the song, but seemed to flow better in rhythm. 

When looking for projects that inspired me for my final project I came across a collection of projects called interactive haikus. This is a collection of very short interactive pieces. They are inspired by the short and concise mastering of haikus. This collection is curated by William Uricchio a professor of Comparative Media Studies at MIT and MIT game lab.

All 12 of the videos are really simple but fun and exciting. I want my final project to be a simple and playful. These projects also follow a loose narrative through the imagery and sound.

One haikus I really liked was Cat’s Cradle by Thibaut Duverneix, David Drury, Jean-Maxime Couillard and Stephane Poirier. It is a interactive constellation builder combined with a interactive musical instrument. I like how the user gets to control what is happening and create their own music/experience. It is also very intuitive and simple. The use of sound is also really effective here.

The other project that I was inspired by was called The Seasonal Stroller by Theo Le De Fuentes and Illustrated by Barbra Govin. This project simulates walking on a path and going on a little journey. Again, I love how simple and peaceful this project is. The is more of a narrative used in this piece. This project also has little hidden surprises throughout, which is something I want to incorporate in mine.