Category: FinalProject

sketch

// Alec Albright
// aalbrigh
// Section B
// Project 12 - Final Project

var video;
var nPoints = 100; // number of points used to draw curves

var previous; // previous image from camera
var threshold = 150; // used to determine if a pixel is different enough to consider it "moving"
var motionX = 0; // main coordinate of X motion
var motionY = 0; // main coordinate of Y motion
var lerpX = 0; // X coordinate for smoothing of motion
var lerpY = 0; // Y coordinate for smoothing of motion

var higherLove; // Whitney Houston's "Higher Love"
var low; // Flo Rida's "Low"
var irreplaceable; // Beyonce's "Irreplaceable"
var newBooty; // Bubba Sparxxx's "Ms. New Booty"
var higherVol; // Higher love volume
var lowVol; // low volume
var irrepVol; // irreplaceable volume
var bootyVol; // new booty volume

function preload(){
    higherLove = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/12/Higher-Love.wav");
    low = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/12/Low.wav");
    irreplaceable = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/12/Irreplaceable.wav");
    newBooty = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/12/New-Booty.wav");
}

function soundSetup() { // setup for audio generation
    // making sine
    sine = new p5.Oscillator();
    sine.setType("sine");
    //sine.start();

    // making sawtooth
    sawtooth = new p5.Oscillator();
    sawtooth.setType("sawtooth");
    //sawtooth.start();

    // making square wave
    square = new p5.Oscillator();
    square.setType("square");
    square.freq(440);
    //square.start();
}

function setup(){
    createCanvas(480, 480);
    angleMode(RADIANS);

    video = createCapture(VIDEO);
    video.size(480, 480); // attempt to size the camera. 
    video.hide(); // this hides an unnecessary extra view.
    // prepping to copy previous frame for difference in motion
    previous = createImage(480, 480, RGB);

    useSound();

    higherLove.play();
    higherLove.setVolume(0);
    higherLove.loop();

    low.play();
    low.setVolume(0);
    low.loop();

    irreplaceable.play();
    irreplaceable.setVolume(0);
    irreplaceable.loop();

    newBooty.play();
    newBooty.setVolume(0);
    newBooty.loop();
}

function draw(){
    var count = 0; // number of pixel instances we've looped through
    var sumX = 0; // sum of motion X coordinates
    var sumY = 0; // sum of motion X coordinates

    // making camera actually mirror user
    push();
    translate(width, 0);
    scale(-1, 1);
    image(previous, 0, 0);
    pop();

    loadPixels();
    video.loadPixels(); // this must be done on each frame.
    previous.loadPixels();

    // comparing all pixels to previous image
    for (var x = 0; x < video.width; x ++) {
        for (var y = 0; y < video.height; y ++) {
            var location = (x + y * video.width) * 4;
            // finding previous and current colors
            // previous
            var red1 = previous.pixels[location]; 
            var green1 = previous.pixels[location + 1];
            var blue1 = previous.pixels[location + 2];
            // current
            var red2 = video.pixels[location];
            var green2 = video.pixels[location + 1];
            var blue2 = video.pixels[location + 2];

            var diff = distSquared(red1, green1, blue1, red2, green2, blue2);

            // checking whether they are different enough to call motion
            if (diff > threshold * threshold) {
                sumX += x;
                sumY += y;
                count ++;
            }
        }
    }
    updatePixels();

    // only count it as a different frame if more than 30 pixels have changed
    // find main X and Y coordinate of motion, this will be our control for everything
    if (count > 100) { 
        motionX = sumX / count;
        motionY = sumY / count;
    }
      
    // maintaining mirrored scale for user interface
    push();
    translate(width, 0);
    scale(-1, 1);
    // smoothing out how the point of focus is travelling
    lerpX = lerp(lerpX, motionX, 0.1); 
    lerpY = lerp(lerpY, motionY, 0.1); 

    // drawing point so user knows where the main motion point is
    stroke("black");
    fill("white");
    ellipse(lerpX, lerpY, 20, 20);
    pop();

    push();
    translate(width / 2, height / 2);
    
    // draw all the shapes
    drawHippopede();
    drawEpicycloid();
    drawHypotrochoid();

    pop();

    previous.copy(video, 0, 0, video.width, video.height, 0, 0, video.width, video.height);
    
    // creating slight boundaries for better sound isolation
    if(lerpY < 200 || lerpY > 320) {
        // letting contrast between top and bottom come through
        bootyVol = 0;
        irrepVol = 0;
        newBooty.setVolume(bootyVol);
        irreplaceable.setVolume(irrepVol);

        // as we move up, more higher love/less low
        // volume 0 to 1
        higherVol = map(lerpY, 0, width, 0, 1);
        higherLove.setVolume(1 - higherVol);
        lowVol = map(lerpY, 0, width, 0, 1);
        low.setVolume(lowVol);
    } else {
        // letting contrast between right and left come through
        higherVol = 0;
        lowVol = 0;
        higherLove.setVolume(higherVol);
        low.setVolume(lowVol);

        // as we move right, more new booty/less irreplaceable
        // volume 0 to 1
        bootyVol = map(lerpX, 0, width, 0, 1);
        newBooty.setVolume(1 - bootyVol);
        irrepVol = map(lerpX, 0, width, 0, 1);
        irreplaceable.setVolume(irrepVol);
    }
}

// draws Hippopede
function drawHippopede() {
    var x; // x coordinate of vertex
    var y; // y coordinate of vertex
    var r; // polar coordinate
    var a = lerpX / 3 // main parameter of the curve
    var b = map(a, 0, 480, 100, 200); // circle radius
    var rotation = map(lerpY, 0, 480, 0, TWO_PI); // amount of rotation

    // thickness of line proportional to the circle radius
    strokeWeight(b / 6);
    stroke(255, 255, 255, 150);
    noFill();

    // rotate shape
    push();
    rotate(rotation);

    // start drawing the shape, one point at a time
    beginShape();
    for(var i = 0; i < nPoints; i++){
        var t = map(i, 0, nPoints, 0, TWO_PI);
        
        // find r (polar equation)
        r = sqrt(4 * b * (a - b * sinSq(t)));

        // convert to x and y coordinates
        x = r * cos(t);
        y = r * sin(t);

        // draw a point at x, y
        vertex(x, y);
    }
    endShape();
    pop();
}

// draws hypotrochoid
function drawHypotrochoid() {
    var x; // x coordinate of vertex
    var y; // y coordinate of vertex
    var a = map(lerpX, 0, 480, 20, 100); // radius of the interior circle
    var b = 3; // radius of the petals
    var h = lerpX / 10; // distance from center of interior circle
    var red = map((lerpX + lerpY) / 2, 0, 480, 0, 255); // how much red
    var blue = map(lerpY, 0, 480, 0, 255); // how much blue
    var alpha = map(lerpX, 0, 480, 50, 150); // how opaque
    var rotation = map(lerpY, 100, 300, 0, TWO_PI); // amount of rotation

    strokeWeight(2)
    stroke(255, 255, 255, 150);

    // control color and opacity with mouse location
    fill(red, 0, blue, alpha);

    // control rotation with lerpY
    push();
    rotate(rotation);

    // create the shape itself
    beginShape();
    for(var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);

        // use parametric euqations for hypotrochoid to find x and y
        x = (a - b) * cos(t) + h * cos((a - b) / b * t);
        y = (a - b) * sin(t) - h * sin((a - b) / b * t);

        // draw a point at x, y
        vertex(x, y)
    }
    endShape(CLOSE);
    pop();
}

// draws an epicycloid
function drawEpicycloid() {
    var x; // x coordinate of vertex
    var y; // y coordinate of vertex
    var a = map(lerpX, 0, 480, 20, 100); // radius of interior circle
    var b = map(lerpY, 0, 480, 5, 30); // radius of petals
    var blue = map((lerpX + lerpY) / 2, 0, 480, 0, 255); // how much blue
    var red = map(lerpY, 0, 480, 0, 255); // how much red
    var rotation = map(lerpY, 100, 300, 0, TWO_PI); // how muhc rotation

    // control color with mouse location
    strokeWeight(10)
    stroke(red, 0, blue, 150);

    // control rotation with mouse location
    push();
    rotate(rotation);

    // start drawing shape
    beginShape();
    for(var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);

        // find coordinates using epicycloid parametric equations
        x = (a + b) * cos(t) - b * cos((a + b) / b * t);
        y = (a + b) * sin(t) - b * sin((a + b) / b * t);

        // draw a point at x, y
        vertex(x, y);
    }
    endShape();
    pop();
}

// defines sin^2 using trigonometric identities
function sinSq(x) {
    return((1 - cos(2 * x)) / 2);
}

function distSquared(x1, y1, x2, y2) {
    let dx = x2 - x1;
    let dy = y2 - y1;
    return (dx * dx) + (dy * dy);
}

For the Final Project, I wanted to do something that had to deal with music, as it is my primary focus at CMU, but I also wanted to try doing something computationally complex that I would certainly be challenged by. Thus, the idea to create a motion detection music player was born! I also wanted to keep it fun, so I decided to play music related to each quadrant: “Irreplaceable” – Beyonce for the left (to the left, to the left…), “Higher Love” – Whitney Houston for the top, “Low” – Flo Rida for the bottom, and “Ms. New Booty” – Bubba Sparxxx for the right (get it right, get it right get it tight). For better user interfacing, I also included a floating point that denotes where the program has tracked the average motion.

The process was most difficult in rendering and comparing one frame to its previous frame in order to create a successful motion detection program. It was interesting mapping the visualization to the motion detection as well, giving each song its own visual identity.

In order to run the program, you must allow the website to access your video camera. However, I have included a demo video below for those who would rather see that.

sketch

//Minjae Jeong
//Section B
//minjaej@andrew.cmu.edu
//Final Project

var human = []; //array to save x y position
var count = 0;
var transp = 255; //transparency

function preload() {
    //simplified world map
    worldMap = loadImage("https://i.imgur.com/Kviuun0.png");
}

function setup() {
    createCanvas(600, 348);
    textAlign(CENTER);
}

function draw() {
    background(132, 181, 229); //rgb of image's body of water
    tint(255, transp); //this makes the water to fill up as you click
    image(worldMap, 0, 30);

    //title
    textSize(24);
    fill('red');
    text("UNTIL WHEN CAN THE EARTH SUPPORT US?", width / 2, 27);//Have you thought about it

    //Draw human + CO2
    strokeWeight(1);
    for (var i = 0; i < human.length; i++) {
        xx = human[i][0];
        yy = human[i][1];
        fill('black');
        drawHuman(xx, yy);
        drawco2(xx, yy - 5);
    }

    //display global warming text
    if (count > 20 & count < 40) {
        textSize(20);
        fill("red");
        text("GLOBAL WARMING", 350, 330);
        // count = count + 1;
    }

    //display "No more penguins and polar bears." Could be very soon
    if (count > 40 & count < 60) {
        textSize(20);
        fill("red");
        text("NO MORE PENGUINS & POLAR BEARS", 320, 50);
    }

    //display "No more place to live"
    //(Elon Musk please)
    if (count > 70 & count < 100) {
        textSize(27);
        fill("red");
        text("NO MORE PLACE TO LIVE", width / 2, height / 2);
    }

    //changes background color to black
    if (count > 90 & count < 100) {
        fill("black");
        rect(0, 0, width, height);
        fill("red");
        text("NO MORE PLACE TO LIVE", width / 2, height / 2);
    }

    //"What will you do?"
    if (count >= 100){
        fill('black');
        rect(0, 0, width, height);
        fill('red');
        textSize(30);
        text("WHAT WILL YOU DO?", width / 2, height /2);
    }
}

//draw human
function drawHuman(x, y) {
    ellipse(x, y, 5);
    rect(x - 2, y + 5, 4, 11);
    line(x - 2, y + 7, x - 8, y + 2);
    line(x + 2, y + 7, x + 8 , y + 2);
}

//CO2
function drawco2(x, y) {
    textSize(9);
    text("+ CO2", x, y);
}

function mousePressed() {
    human.push([mouseX, mouseY]); //Save mouseX, mouseY
    transp = transp - 3.3; //Water fills up the land
    count += 1;
}

For the final project, I made an interactive map that I wish to deliver some message. Click to add people on the map, keep on adding as it represents human population on the Earth.

My final project is little different from the proposal, because the original idea, which was to indicate temperature rise and deforestation, did not have clear message compared to what it actually shows. So I rather made a simple interactive map that shows what is happening as we grow on the Earth.

sketch

//Julia Nishizaki
//Section B
//jnishiza@andrew.cmu.edu
//Final Project - ABCs of Climate Change


//variables for climate change effects, uses true/false statements to make effects appear/disappear
var cE = {
    lakeColor: false, //algae blooms
    flowers: false, //biodiversity
    clouds: false, //carbon footprint
    trees: true, //deforestation
    gas: false, //greenhouse gases
    mtn: false, //hazardous waste
    hill: false, //invasive species
    jeopardy: false, //jeopardy
    house: false, //population growth
    sky: false, //smog
    field: false, //toxic pollutants
    building: false, //urban sprawl
    lake: false, //water levels
    deadz: false, //zones that are dead
}

//variables to help with effects of climate change
var lakeWidth = 200; //initial width of lake
var lakeHeight = 35; //height of lake
var skyHeight = 0; //height of sky for smog
var cloudX = 475; //starting x position for cloud
var gasX = 475; //starting x position for gas cloud
var jtranslu = 0; //starting opacity for "smoke screen", jeopardy

//variables for the window and its dimensions
var win = {
    ws: 125, //distance from window to right and left sides of canvas
    wt: 40, //distance from window to top of canvas
    wb: 160, //distance from window to bottom of canvas
    frm: 5, //width of window frame
    dis: 5, //displacement outside of canvas
}

//variables for colors used throughout, especially for objects that change color
var colors = {
    hill: 80, //light green hill (HSB)
    mtnb: 70, //purple mountains (HSB)
    sky: '#8ED9EF', //light blue of sky
    smogop: 80, //opacity of smog in background
    field: 'green', //green
    lakeh: 55, //hue value of lake (HSB)
    lakes: 50, //saturation value of lake (HSB)
    lakeb: 100, //brightness value of lake (HSB)
    fieldb: 60, //brightness value of field (HSB)
    wall: 230, //light gray of walls
    table: 150, //dark gray of table 
    flower: 'purple', //purple flowers
    plnflw: 'green', //green flowers
    type: '#8BC63F', //light green of type
}

//arrays that store letters and each letter's climate change info
var alphabetLetters = ["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 letterInfo = [ //stores copy on climate change ABCs
    "Algae Blooms: toxic algae can poison water and create dead zones", 
    "Biodiversity: the variety of life on the planet", 
    "Carbon Footprint: the amount of carbon dioxide each of us produces", 
    "Deforestation: the reduction of trees due to natural forces or human activity", 
    "Extinctions: the death of all individuals of a species", 
    "Fossil Fuels: nonrenewable fuels that are burned for energy like coal and gas", 
    "Greenhouse Gases: gases like methane, trap heat and warm the atmosphere", 
    "Hazardous Waste: waste that pose a risk to human health and the environment", 
    "Invasive Species: any organism not native to an ecosystem that causes harm", 
    "Jeopardy: danger of loss, harm, or failure", 
    "Keystone Species: a species that is critical to the survival of other species", 
    "Landfill: a site where wastes are dumped for permanent disposal", 
    "Microplastics: very small pieces of plastic that pollute the environment", 
    "Nonrenewable: resources that can't be replenished onced used", 
    "Ozone Layer: a thin protective layer of gas above Earth that filters UV radiation", 
    "Population Growth: an increase in the total human population", 
    "Quotas Insufficient: limits and restrictions in environmental policies not met", 
    "Runoff: stormwater from cities or farms that carry pollutants into water systems", 
    "Smog: dust, smoke, or chemical fumes that pollute the air", 
    "Toxic Pollutants: contaminate areas and cause death, disease, or birth defects", 
    "Urban Sprawl: expansion of auto-dependent developments over large areas of land", 
    "Vulnerability: susceptibility to harm from exposure to stresses", 
    "Water Level Rise: rising sea levels due to global warming and melting glaciers", 
    "Xenobiotic: non-natural or man-made substances found in the environment", 
    "Yield: amount of crops produced per unit area", 
    "Zones that are Dead: dead zones are caused by hypoxia, or lack of oxygen in water",
    ];

function setup() {
    createCanvas(600, 480);
    frameRate(30);   
}

function draw() {
    background(colors.sky); //sets the background as a light blue
    
    prepEnvironEffects(); //connects each key to a variable

    drawLandscape(); //creates all elements of the landscape 
    drawRoom(); //creates all elements of the room
    
    typedLetterAlphabet(); //displays the alphabet
    typedLetterInfo(); //displays the words and definitions
}

function prepEnvironEffects() {//when a particular key is pressed, the variable associated with that key switches from false to true
    if (key == 'a') { //algae blooms
            cE.lakeColor = true;
        } 
    if (key == 'b') { //biodiversity
            cE.flowers = true;
        }
    if (key == 'c') { //carbon footprint
            cE.clouds = true;
        } 
    if (key == 'd') { //deforestation
            cE.trees = false;
        } 
    if (key == 'g') { //greenhouse gases
            cE.gas = true;
        } 
    if (key == 'h') { //hazardous waste
            cE.mtn = true;
        } 
    if (key == 'i') { //invasive species
            cE.hill = true;
        } 
    if (key == 'j') { //jeopardy
            cE.jeopardy = true;
        } 
    if (key == 'p') { //population growth
            cE.house = true;
        } 
    if (key == 's') { //smog
            cE.sky = true;
        } 
    if (key == 't') { //toxic pollutants
            cE.field = true;
        } 
    if (key == 'u') { //urban sprawl
            cE.building = true;
        } 
    if (key == 'w') { //water level rise
            cE.lake = true;
        } 
    if (key == 'z') { //zones that are dead
            cE.deadz = true;
    }
}

//Creates elements in the landscape, and calls for changes to those elements
function drawLandscape() {
    makeClouds(); //creates clouds for carbon footprint and greenhouse gas, letters c and g
    changeSky(); //creates smog screen in background, letter s
    changeMtnHill(); //changes color of mountains and hills, letters h and i

    var landscapeScale1 = 0.004; //detail in hills
    var landscapeScale2 = 0.018; //detail in mountains

    //creates mountains in the background
    colorMode(HSB, 100);
    stroke(70, 30, colors.mtnb);
    strokeWeight(1);
    for (var x = 0; x < width; x ++) {
        var l = (x * landscapeScale2);
        var y = map(noise(l), 0, 1, height * 0.2, height * 0.5); //constrains hills
        line(x, y, x, height); //creates vertical lines, forming a solid shape
    }

    colorMode(RGB);
    makeBuilding(); //creates buildings when letter u is pressed

    //creates hills in the middleground
    colorMode(HSB, 100); //switches color mode to HSB to help with color changes
    stroke(25, 50, colors.hill);
    for (var x = 0; x < width; x ++) {
        var l = (x * landscapeScale1);
        var y = map(noise(l), 0, 1, height * 0.4, height * 0.6); //constrains hills
        line(x, y, x, height); //creates vertical lines, forming a solid shape
    }

    //creates field in foreground
    noStroke();
    fill(28, 100, colors.fieldb); //field color
    rect(0, height * 0.55, width, height * 0.35);
    changeField(); //changes color of field, letter t
    
    //creates lake
    fill(colors.lakeh, colors.lakes, colors.lakeb);
    ellipse(175, 286, lakeWidth, lakeHeight);
    changeLake(); //changes color and size of lake, letters a, w, and z

    colorMode(RGB); //switches color mode back to RGB
    makeFlowers(); //makes flowers, alternating colors, becomes one color with letter b
    makeHouse(); //makes houses, letter p
    makeTrees(); //makes single yellow tree in foreground, tree disappears with letter d 
    smokeScreen(); //creates a semi-transparent grey layer with letter j
}

//makes and moves the clouds
function makeClouds() {
    if (cE.clouds == true) { //makes a cloud for carbon footprint, letter c
        drawClouds(cloudX, 120, 150, 50, 150);
        cloudX = cloudX - 2;
        if (cloudX < win.ws - 150) {
            cloudX = 475;
        }
    }
    if (cE.gas == true) { //makes a cloud for greenhouse gases, letter g
        drawClouds(gasX, 180, 220, 75, 100);
        gasX = gasX - 1;
        if (gasX < win.ws - 220) {
            gasX = 475;
        }
    }
}

//draws the clouds
function drawClouds(locationX, locationY, width, height, color) {
    push();
    fill(color);
    translate(locationX, locationY);
    rect(0, - height, width, height, 50, 50, 50, 50);
    pop();
}

//adds "smog" in background
function changeSky() {
    if (cE.sky == true) {
        fill(80, colors.smogop);
        noStroke();
        rect(0, height * 0.55 - skyHeight, width, skyHeight);
        skyHeight = constrain(skyHeight, 0, 300) + 3;
    }
}

//changes colors of mountains and hills
function changeMtnHill() {
    if (cE.mtn == true) { //changes mountain colors
        colors.mtnb = constrain(colors.mtnb, 20, 70) - 5;
    }
    if (cE.hill == true) { //changes hill colors
        colors.hill = constrain(colors.hill, 30, 80) - 5;
    }
}

//makes the buildings for urban sprawl
function makeBuilding() {
    if (cE.building == true) { //from left to right
        drawBuildings(125, 37, 130, 180);
        drawBuildings(162, 62, 110, 150);
        drawBuildings(224, 50, 120, 200);
        drawBuildings(274, 37, 100, 130);
    }
}

//draws buildings
function drawBuildings(locationX, buildW, buildH, color) {
    push();
    noStroke();
    fill(color);
    translate(locationX, height * 0.58);
    rect(0, - buildH, buildW, buildH);
    //windows in buildings
    fill(255);
    for (var x = 0; x < (buildW / 6) - 1; x ++) {
        for (var y = 0; y < 200; y ++) {
            rect(2 + x * 6, - buildH + 4 + y * 8, 3, 4);
        }
    }
    pop();
}

//changes lake size and color
function changeLake() {
    if (cE.lake == true) { //makes larger for water level
        lakeWidth = constrain(lakeWidth, 200, 350) + 5;
    }
    if (cE.lakeColor == true) { // becomes green for algae
        colors.lakeh = constrain(colors.lakeh, 30, 55) - 0.75;
    }
    if (cE.deadz == true) { //becomes dark for dead zones
        colors.lakes = constrain(colors.lakes, 50, 100) + 5;
        colors.lakeb = constrain(colors.lakeb, 35, 100) - 5;
    }
}

//changes color of field
function changeField() { 
    if (cE.field == true) {
        colors.fieldb = constrain(colors.fieldb, 20, 60) - 2;
    }
}

//makes row of flowers at base of hills
function makeFlowers() {
    for (var i = 0; i < 20; i ++) {
        strokeWeight(2);
        for (var g = 0; g < 6; g ++) {
            if (i % 2) { //alternates colors of flowers to represent biodiversity
                stroke(colors.plnflw);
                push();
                translate(win.ws + i * 25, height * 0.55);
                rotate(g * 60);
                line(0, 0, 0, 3);
                pop();   
            } else {
                stroke(colors.flower);
                push();
                translate(win.ws + i * 25, height * 0.55);
                rotate(g * 60);
                line(0, 0, 0, 3);
                pop();   
            }
        }
    }
    if (cE.flowers == true) { //changes color of flowers to single color, removal of biodiversity
        colors.flower = colors.plnflw; 
    }
}

//makes houses for population growth
function makeHouse() {
    if (cE.house == true) {
        drawHouses(320, height * 0.58, '#FCAD77', '#E8762A', 0.9); //left
        drawHouses(375, height * 0.57,'#7BE0FF', '#1CB8E8', 0.8); //right
        drawHouses(350, height * 0.59,'#B09DCC', '#9274C1', 1.0); //middle
    }
}

//draws houses
function drawHouses(locationX, locationY, colorHouse, colorDoor, houseScale) {
    push();
    noStroke();
    fill(colorHouse);
    translate(locationX, locationY);
    scale(houseScale);
    rect(0, -20, 40, 20);
    fill('white');
    triangle(-5, -20, 45, -20, 20, -30);
    rect(24, -15, 10, 10);
    fill(colorDoor);
    rect(8, -15, 8, 15);
    pop();   
}

//makes tree in foreground of landscape
function makeTrees() {
    if (cE.trees == true) { //the tree disapears when key is pressed, as key switches variable to false
        push();
        rectMode(CENTER);
        translate(440, 110);
        noStroke();
        fill(249, 176, 30); //yellow of tree
        rect(0, 0, 130, 200, 40, 40, 40, 40);
        //tree branches
        strokeWeight(15);
        stroke(124, 20, 22);
        line(0, -50, 0, 225);
        strokeWeight(10); //thinner branches
        line(0, 80, 40, 40);
        line(0, 20, -40, -20);
        pop();
    }  
}

function smokeScreen() { //creates grey screen
    if (cE.jeopardy == true) {
        noStroke();
        jtranslu = constrain(jtranslu, 0, 80) + 15;
        fill(150, jtranslu);
        rect(win.ws, win.wt, 350, 300)
    }
}

//creates all aspects of the room - window, window frame, walls, table, poster, instructions
function drawRoom() { 
    rectMode(CORNER);
    noStroke();
    
    //walls of the room
    fill(colors.wall);
    rect(-win.dis, -win.dis, win.ws + win.dis, height + win.dis * 2);
    rect(width - win.ws, -win.dis, win.ws + win.dis, height + win.dis * 2);
    rect(0, height - win.wb, width, win.wb);
    rect(0, 0, width, win.wt);
    
    //gray "table" below window where alphabet and definitions appear
    fill(colors.table); //medium gray
    rect(0, height - 130, width, 130);

    //white lines that divide window
    stroke(255);
    strokeWeight(4);
    line(width / 2, win.wt - win.frm, width / 2, height - win.wb + win.frm);
    line(win.ws - win.frm, (height - win.wb) / 2 + win.wt / 2, width - win.ws + win.frm, (height - win.wb) / 2 + win.wt / 2);
    //white border around the window
    strokeWeight(10);
    line(win.ws - win.frm, win.wt - win.frm, win.ws - win.frm, height - win.wb + win.frm);
    line(width - win.ws + win.frm, win.wt - win.frm, width - win.ws + win.frm, height - win.wb + win.frm);
    line(win.ws - win.frm, win.wt - win.frm, width - win.ws + win.frm, win.wt - win.frm);
    line(win.ws - win.frm, height - win.wb + win.frm, width - win.ws + win.frm, height - win.wb + win.frm);

    drawPoster(); //draws the poster to the left of window
    drawInstructions(); //draws instructions on the gray "table"
}

function drawPoster() { //creates poster telling you to refresh
    push();
    noStroke();
    rectMode(CENTER);
    angleMode(DEGREES);
    textAlign(CENTER);
    fill(255);
    translate(60, 165);
    rotate(-3); //rotates poster slightly
    rect(0, 0, 75, 100);
    //pin at the top of the poster
    fill(colors.table); 
    ellipse(0, -40, 5, 5);
    //writing in gray telling you to refresh
    textSize(12);
    textLeading(15); //sets leading
    var poster = "Refresh\npage\nto\nrestart"; //puts each word on a new line
    text(poster, 0, -17);
    pop();
}

function drawInstructions() { //creates instructions
    textAlign(CENTER);
    noStroke();
    fill(255);
    var textLocation = 375;
    textSize(12);
    text("Press and hold down keys to see some ABCs of climate change", width / 2, textLocation);
}

//creates alphabet
function typedLetterAlphabet() {
    for (var i = 0; i < 26; i ++) {
        textAlign(CENTER);
        textSize(20);
        noStroke();
        var alphabetLocation = 400;
        var x = map(i, 0, alphabetLetters.length, 50, width - 30);
        if (keyCode === 65 + i) { //when key is down, letter turns grey
            fill(100);
            text(alphabetLetters[i], x, alphabetLocation);
        } else { //all letters green when not pressed
            fill(colors.type);
            text(alphabetLetters[i], x, alphabetLocation);
        } 
    }
}

//creates climate change info
function typedLetterInfo() {
    textAlign(CENTER);
    textSize(15);
    fill(255);
    for (var i = 0; i < 26; i ++) {
        if (keyCode === 65 + i) {
            text(letterInfo[i], width / 2, height - 45);  
        } 
    }   
}

//when key released, already pressed letters disapear
function keyReleased() { //replaces already clicked letters and their info with spaces in the respective arrays
    for (var i = 0; i < 26; i ++) {
        if (keyCode == 65 + i) {
            alphabetLetters.splice(i, 1, " ");
            letterInfo.splice(i, 1, " ");
        }       
    }
}

For this project, I initially wanted to use sound and the typing keyboard in order to create an instrument out of sounds related to the environmental crisis. However, I decided to instead pivot towards creating an interactive and visual display of some “ABCs” of climate change. When you type and hold down a key, a word that starts with that letter will appear, along with that word’s definition. For a little less than half of the letters in the alphabet, something related to the word will happen on the landscape that is visible outside of the window. I wanted to keep the interactions fairly simple, while still conveying some of the effects of climate change, global warming, and our actions as a society.