Category: FinalProject

Final Project

wpf-final.js
//Patrick Fisher, section B, wpf assignment - 13

var bear; //object for the bear
var icebergs = []; //array of objects of icebergs
var middleIce; //variable the stores the position of the platform that is under the bear
var clouds = []; //array of objects of clouds
var score = 0; //score counter based on frame count and the amount of platforms passed

function setup() {
    createCanvas(480,480);
    background(113,147,231);
    bear = makeBear();
    var ib = newBerg(-60,0,120) //creates the starting platform which is the same everytime
    icebergs.push(ib);

    for(var i = 1; i <= 5; i++){ //creates new, random platofrms,
        icebergs.push(newBerg(-60 + (i * 250),floor(random(-20,0)),random(90,150)))
    }

    for(var i = 0; i <= 7; i++){ //aesthetic clouds at the top
        clouds.push(makeCloud(-60 + (i * 250)));
    }
    middleIce = {end: 60, y: 0}; //starting info for the platform that will have colision
}

function draw() {
    background(113,147,231); //sky
    fill(63,181,207);
    rect(0,300,width,height); //ocean

    fill(255,246,2); //sun
    circle(100,75, 50);
    
    push();
    fill(0);
    translate(width/2-75, 300);
    for(var i = 0; i <= 5; i ++){ //for loop to draw the icebergs
        if(icebergs[i].x <= 30 & icebergs[i].end >= -30){ //checks to see if theres a platform under the bear and if so stores it as middle ice
            middleIce.y = floor(icebergs[i].y);
            middleIce.end = floor(icebergs[i].end);
        }

        icebergs[i].draw();
    

        if(icebergs[i].x <= -600){ //deletes a iceberg from the array when it gets too far off screen and makes a new one
            icebergs.shift();
            icebergs.push(newBerg(900,random(-20,0),random(90,150)));

        }

    }
    if(middleIce.end <= -25){ //gets rid of middle ice after its gone past the bear
        middleIce.y = 200;
        score ++;

    }

    for(var i = 0; i <= 7; i++){ //draws clouds
        clouds[i].draw();
    }

    if(clouds.x <= -600){ //deletes a cloud from the array when it gets too far off screen and makes a new one
            clouds.shift();
            clouds.push(makeCloud(600));

        }

    if (bear.y >= 200) { //checks to see if the bear has fallen and if so starts the game over sequence
        bear.isAlive = false;
    }

    if(frameCount < 240){ //4 seconds of the text
        text("Press Space to Jump", 10, 30);
    }

    bear.draw(); 
    pop();

    if(bear.isAlive == false){ //game over sequencse
        background(0);
        fill(63,181,207);
        stroke(255);
        textSize(50);
        textAlign(CENTER);
        text("GAME OVER", width/2, height/2);
        textSize(40);
        text("SCORE: " + score.toString(), width/ 2, height/2 + 75);
        noLoop();
    }
}

function newBerg(bx,by,bw) { //constructor funtion to create icebergs
    var b = {x: bx, y: by, w: bw, end: bx+bw, half: bx + (bw / 2), draw: drawIce, speed: iceSpeed};
    return b;
}

function makeBear() { //constructor to make the bear
    var b = {x: 0, y: 0, dy: 0, isAlive: true, vestOn: false, draw: drawBear}
    return b;
}

function drawBear(){
    push();
    
    this.y += this.dy; //moves the bear down
    if(this.y >= middleIce.y - 3 & this.y <= middleIce.y){ //checks if the bear is over a platform
        this.dy = 0;
    }
    else{ 
        this.dy ++;
    }

    fill(214,207,193); //draws the bear
    legAni(this.x,this.y);
    ellipse(this.x,this.y-17,50,30);
    legAni(this.x + 2,this.y);
    ellipse(this.x+20,this.y-38,5,10);
    ellipse(this.x+30,this.y-38,5,10);
    circle(this.x+25,this.y-30,20);

    
    fill(0);
    circle(this.x+30,this.y-32,5);

    pop();
}

function drawIce() { //draws the ice
    push();
    fill(95,145,150);
    triangle(this.x,this.y,this.end,this.y,this.half, this.y + 160);
    fill(228,224,221);
    triangle(this.x,this.y,this.end,this.y,this.half, this.y - 90);
    push();
    strokeWeight(5);
    line(this.x,this.y,this.end,this.y);
    pop();
    pop();

    this.speed();

}

function keyPressed() { // press spacebar to jump
    if(keyCode ==  32){
        bear.dy = -10;
    }
}

function iceSpeed() { //function that moves and continually speeds up the icebergs every 30 seconds
    var o = floor(frameCount / (30*60));

    this.x -= o+1;
    this.end -= o+1;
    this.half -= o+1;
}

function makeCloud(cx){ //constructor for the clouds
    var c = {x: cx, y: (-350,-250), draw: drawCloud}
    return c;
}

function drawCloud(){ //function to draw the clouds
    push();
    fill(255);  //series of ellipses that draws the cloud
    ellipse(this.x,this.y,60,50);
    ellipse(this.x+30,this.y-10,60,50);
    ellipse(this.x+80,this.y,60,50);
    ellipse(this.x+20,this.y+20,60,50);
    ellipse(this.x+60,this.y+15,60,50);
    push();
    noStroke();
    ellipse(this.x+40,this.y+10,100,55)
    pop();
    pop();

    if(frameCount % 2 == 0){
        this.x --;
    }
}

function legAni(x,y){ //simple leg moving animation
    
    if(frameCount % 4 == 0){
        ellipse(x-18,y-8,10,20);
        ellipse(x+22,y-8,10,20);
    }

    if(frameCount % 4 == 1){
        ellipse(x-18,y-8,10,20);
        ellipse(x+21,y-8,10,20);
    }

    if(frameCount % 4 == 2){
        ellipse(x-17,y-8,10,20);
        ellipse(x+20,y-8,10,20);
    }

    if(frameCount % 4 == 3){
        ellipse(x-15,y-8,10,20);
        ellipse(x+19,y-8,10,20);
    }
}

For my project what inspired me was the polar ice caps melting and seeing pictures of polar bears literally having to jump across water to get to safety. So I decided to create a platform game that was that. It’s pretty simple, just press space to repeatedly jump and land on the next iceberg. The collision detection for the icebergs is very hit or miss, unfortunately. If I had more time I would want to figure out what is going wrong with it as when debugging I could see that the values for the bear and the iceberg I was comparing were equal and yet the bear did not stop falling. Additionally, I had more time I would add a sort of extra life feature, described in my design documents as a life preserver, make the icebergs sink once landed on, and make the bear fully controllable rather than the game being an auto scroller.

Final Project

sketchDownload
//global variables
var houseDayImg;
var houseNightImg;
var dayPeriod = 2000;
var numTrees = 4;
var numStars = 20;
var trees = [];
var stars = [];

class Star {
    constructor() {
        this.x = random(width);
        this.y = random(height/4);
    }

    display() {
        fill(255,255,255);
        ellipse(this.x, this.y, 3, 3);
    }
}

class Tree {
    constructor() {
        var choice = random(1);
        if(choice < 0.5){
            this.x = random(width/3);  
        }else {
            this.x = random(2 * width / 3, width - 10); 
        }
        choice = random(1);
        if(choice < 0.5){
            this.color = color(135, 167, 126);  
        }else {
            this.color = color(73, 126, 97);
        }
        this.y = random(280, 300)
        this.w = random(50, 70);
        this.h = random(60, 90);
    }
       
    display() {
        fill(109, 86, 53);
        rect(this.x - 5, this.y + 10, 10, 50);
        fill(this.color)
        ellipse(this.x, this.y, this.w, this.h);
    }
}

function preload() {
    //preload images
    houseDayImg = loadImage("https://i.imgur.com/DguMSkN.png");
    houseNightImg = loadImage("https://i.imgur.com/eXNWSkN.png");
    panelImg = loadImage("https://i.imgur.com/VFf1Rr8.png");
    batteryImg = loadImage("https://i.imgur.com/rw8ScZs.png");
}

function setup() {
    createCanvas(400, 400);
    for(i = 0; i < numStars; i++){ //draw stars at night
        stars.push(new Star())
    }
    
    for(i = 0; i < numTrees; i++){ //draw trees
        trees.push(new Tree())
    }

}

function draw() {
    time = frameCount % dayPeriod;
    bgDark = time;
    batteryLife = (frameCount + dayPeriod / 4) % dayPeriod;
    if (bgDark > dayPeriod/2) {
        bgDark = dayPeriod - bgDark;
    }
    if (batteryLife > dayPeriod/2) {
        batteryLife = dayPeriod - batteryLife;
    }
    background(207 - bgDark / dayPeriod*255*2, 226 - bgDark / dayPeriod*255*2, 243 - bgDark / dayPeriod*255*2);

    //ground
    fill(143-bgDark*(143-66)/dayPeriod*2, 206-bgDark*(206-95)/dayPeriod*2, 0);
    noStroke();
    ellipse(200, 400, 500, 180);
    
    //panel
    image(panelImg, 125, 156, 80, 80);
    
    //battery
    image(batteryImg, 140, -15, 100, 100);
    fill(255 - batteryLife / dayPeriod * 255 * 2, batteryLife / dayPeriod * 255 * 2, 0);
    rect(167, 18, batteryLife / dayPeriod * 61 * 2, 34);
  
    //during daytime
    if (time < dayPeriod/4 || time > dayPeriod*3/4) {
       
       //house
       image(houseDayImg, 130, 200, 130, 130);

    } else { //during nighttime
       
        //house 
        drawStars();
        image(houseNightImg, 130, 200, 130, 130);
   }

    frameCount += 1;

    //function
    drawSun(time);
    drawTrees();
}


function drawSun(time) { 
   push();
   translate(200, 400);
    rotate(frameCount * 2 * PI / dayPeriod);
   fill(255, 206, 59);
   ellipse(0, -300, 70, 70);
   pop();
}

function drawStars() { //draw stars at random locations in the sky when it becomes night and disappear when it becomes daytime again
    for(i = 0; i < stars.length; i++){
        stars[i].display();
    }
}

function drawTrees(){ //draw trees at random locations every time you refresh 
    for(i = 0; i < trees.length; i++){
        trees[i].display();
    }
}

For the final project, I created an information visualization inspired by Tesla’s solar roof. I wanted to illustrate this scene by using solar roof because I thought this type of clean energy production can help lower the emissions of greenhouse gases and carbon dioxide, and further decrease our reliance to fossil fuels to create a better environment. During the day, the solar roof is charged with solar energy, illustrated by a battery icon being gradually charged up as the sun moves throughout the daytime. Then, when it becomes night, the battery icon will be fully charged, allowing the house to brightly light up even in the dark. For a little detail, after the sun goes down during the day, the stars will show up representing nighttime. Every time the user refreshes the screen, the trees will randomly appear in random locations as well as the stars. This was an amazing opportunity for me to explore using various techniques like array, object, loop, conditional, transformation, and functions, and I think I truly enjoyed creating this illustration. Hope you enjoy! 🙂

Final Project

My project is an interactive story, describing the pre-industrial, industrial, and post-industrial scenes of the society. It is meant to let people see how industrialization has affected our everyday life scene. At the start page, viewers could press a, or b, or c to see the corresponding scene. After each scene is finished, it will automatically return to the start page, and then viewers could press another key option to see a different scene. I got my inspiration from the children’s illustration books. All the scenes are composite by drawn characters. Also, the scenes are drawn with easily understood logic. If I have more time, I probably would add lines to each scene to tell a story, add more animation, like smokes coming out of the factories, and add sounds into it.
storyDownload
/*Name:Camellia(Siyun) Wang; 
Section: C; 
Email Address: siyunw@andrew.cmu.edu;
Assignment-14;*/

//start page
var page = "start";

//scene1
var meadows = [];
var cows1 = [];
var cows1n = [];
var cows2 = [];
var cows2b = [];
var groups = [];
var horses = [];
var horses2 = [];
var cows3 = [];
var birds = [];
var mountains = [];

//scene2
var meadows2 = [];
var cows12 = [];
var cows1n2 = [];
var cows22 = [];
var cows2b2 = [];
var groups2 = [];
var houses = [];
var houses2 = [];
var birds2 = [];
var mountains2 = [];
var factorys = [];
var skys = [];
var towns = [];

//scene3
var angle = 0;
var ices1 = [];
var ices1n = [];
var ices2 = [];
var ices2b = [];
var ices2c = [];
var ices3 = [];
var bears = [];
var penguins = [];
var factorys2 = [];
var seas = [];
var droughts = [];

function preload(){
    //startpage
    sun = loadImage("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/12/sun.png");
    pre = loadImage("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/12/pre-pic.png");
    indus = loadImage("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/12/industrial-pic.png");
    post = loadImage("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/12/post-pic.png");

    //scene1
    backgroundImage = loadImage("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/12/back.jpeg");
    mountain = loadImage("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/12/mountains.png")
    cow1 = loadImage("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/12/cow1.png");
    cow2 = loadImage("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/12/cow2.png");
    sheeps = loadImage("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/12/sheeps.png");
    horse = loadImage("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/12/horse.png");
    meadow = loadImage("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/12/background.png");
    cow3 = loadImage("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/12/cow3.png");
    bird = loadImage("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/12/birds.png");

    //scene2
    sky = loadImage("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/12/sky.png");
    mountain2 = loadImage("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/12/mountain.png");
    meadow2 = loadImage("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/12/meadow.png");
    house = loadImage("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/12/house.png");
    house2 = loadImage("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/12/house2.png");
    factory = loadImage("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/12/factory-1.png");
    town = loadImage("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/12/town.png");

    //scene3
    sea = loadImage("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/12/sea.png");
    bear = loadImage("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/12/polar-bear.png");
    penguin = loadImage("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/12/penguin.png");
    ice1 = loadImage("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/12/iceburg2.png");
    ice2 = loadImage("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/12/iceburg3.png");
    ice3 = loadImage("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/12/iceburg1.png");
    factory2 = loadImage("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/12/factory.png");
    drought = loadImage("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/12/deforestation.png");
}

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

    //scene1
    //the meadow
    var mea = makeMeadow(1,400);
    meadows.push(mea);
    //the mountain
    var mon = makeMountain(120,50);
    mountains.push(mon);
    //cow1
    var cow1 = makeCow1(150,250);
    cows1.push(cow1);
    //cow1n
    var cow1n = makeCow1n(1100,270);
    cows1n.push(cow1n);
    //cow2
    var cow2 = makeCow2(610,240);
    cows2.push(cow2);
    //group
    var gro = makeGroup(650,280);
    groups.push(gro);
    //horse
    var hor = makeHorse(300,190);
    horses.push(hor);
    //horse2
    var hor2 = makeHorse2(900,150);
    horses2.push(hor2);
    //cow3
    var cow3 = makeCow3(1200,325);
    cows3.push(cow3);
    //bird
    var bird = makeBird(1220,25);
    birds.push(bird);


    //scene2
    //the town
    var town = makeTown(810,-20);
    towns.push(town);
    // the sky
    var sky = makeSky(0,100);
    skys.push(sky);
    //the meadow
    var mea2 = makeMeadow2(1,400);
    meadows2.push(mea2);
    //the mountain
    var mon2 = makeMountain2(1,50);
    mountains2.push(mon2);
    //cow12
    var cow12 = makeCow12(50,220);
    cows12.push(cow12);
    //cow1n2
    var cow1n2 = makeCow1n2(150,200);
    cows1n2.push(cow1n2);
    //cow2
    var cow22 = makeCow22(240,220);
    cows22.push(cow22);
    //group
    var gro2 = makeGroup2(600,260);
    groups2.push(gro2);
    //house
    var hou = makeHouse(550,-20);
    houses.push(hou);
    //house2
    var hou2 = makeHouse2(450,50);
    houses2.push(hou2);
    //factory
    var fac = makeFactory(1050,40);
    factorys.push(fac);
    //bird
    var bird2 = makeBird2(1220,25);
    birds2.push(bird2);


    //scene3
    // the sea
    var se = makeSea(1,1);
    seas.push(se);
    //the bear
    var bea = makeBear(600,150);
    bears.push(bea);
    //the penguin
    var pen = makePenguin(50,200);
    penguins.push(pen);
    //ice1
    var ic1 = makeIce1(1,5);
    ices1.push(ic1);
    //ice1n
    var ic1n = makeIce1n(500,120);
    ices1n.push(ic1n);
    //ice2
    var ic2 = makeIce2(250,200);
    ices2.push(ic2);
    //ice2b
    var ic2b = makeIce2b(890,240);
    ices2b.push(ic2b);
    //ice2c
    var ic2c = makeIce2c(830,220);
    ices2c.push(ic2c);
    //ice3
    var ic3 = makeIce3(550,140);
    ices3.push(ic3);
    //factory
    var fac2 = makeFactory2(1000,0);
    factorys2.push(fac2);
    //the drought
    var dro = makeDrought(2000,0);
    droughts.push(dro);

    frameRate(50);
}

function keyPressed(){
    if(key == "0"){
        page = "start";
    }
    else if(key == "a"){
        page = "scene1";
    }
    else if(key == "b"){
        page = "scene2"
    }
    else if(key == "c"){
        page = "scene3"
    }
}


function draw() {
    //startpage:
    if(page == "start"){
        background(143,188,143);
        var i = 0;
        while(i <= width){
            push();
            translate(90+i,310);
            rotate(radians(angle));
            imageMode(CENTER);
            image(sun, 0, 0, 100,100);
            pop();
            angle += 1;
            i = i+150;
        }
        textSize(25);
        text('How Industrialization Changed Our Life',25,70);
        image(pre,30,125,120,150);
        image(indus,180,125,120,150);
        image(post,330,125,120,150);
        textSize(15);
        text('Pre-Industrial',45,120);
        text('Industrial',210,120);
        text('Post-Industrial',345,120);
         //message at bottom
        fill(0);
        textSize(15);
        text("Please type a to see Pre-Industrial, b to see Industrial,",30, height - 35);
        text("and c to see Post-Industrial. Press 0 to reset", 30, height - 15);
    }

    //scene1
    if(page == "scene1"){
         background(backgroundImage);

        updateAndDisplayMountain();
        removeMountainThatHaveSlippedOutOfView();

        updateAndDisplayHorse2();
        removeHorse2ThatHaveSlippedOutOfView();

        updateAndDisplayMeadow();
        removeMeadowThatHaveSlippedOutOfView();

        updateAndDisplayHorse();
        removeHorseThatHaveSlippedOutOfView();

        updateAndDisplayCow2();
        removeCow2ThatHaveSlippedOutOfView();

        updateAndDisplayBird();
        removeBirdThatHaveSlippedOutOfView();

        updateAndDisplayGroup();
        removeGroupThatHaveSlippedOutOfView();

        updateAndDisplayCow1();
        removeCow1ThatHaveSlippedOutOfView();
        updateAndDisplayCow1n();
        removeCow1nThatHaveSlippedOutOfView();

        updateAndDisplayCow3();
        removeCow3ThatHaveSlippedOutOfView();
    }

    else if(page == "scene2"){
        background(255);
        updateAndDisplaySky();
        removeSkyThatHaveSlippedOutOfView();

        updateAndDisplayHouse2();
        removeHouse2ThatHaveSlippedOutOfView();

        updateAndDisplayMountain2();
        removeMountain2ThatHaveSlippedOutOfView();

        updateAndDisplayFactory();
        removeFactoryThatHaveSlippedOutOfView();

        updateAndDisplayTown();
        removeTownThatHaveSlippedOutOfView();

        updateAndDisplayMeadow2();
        removeMeadow2ThatHaveSlippedOutOfView();


        updateAndDisplayHouse();
        removeHouseThatHaveSlippedOutOfView();

        updateAndDisplayCow22();
        removeCow22ThatHaveSlippedOutOfView();

        updateAndDisplayBird2();
        removeBird2ThatHaveSlippedOutOfView();

        updateAndDisplayGroup2();
        removeGroup2ThatHaveSlippedOutOfView();

        updateAndDisplayCow12();
        removeCow12ThatHaveSlippedOutOfView();
        updateAndDisplayCow1n2();
        removeCow1n2ThatHaveSlippedOutOfView();
    }

    else if(page == "scene3"){
        background(255);

        updateAndDisplaySea();
        removeSeaThatHaveSlippedOutOfView();

        updateAndDisplayFactory2();
        removeFactory2ThatHaveSlippedOutOfView();

        updateAndDisplayDrought();
        removeDroughtThatHaveSlippedOutOfView();

        updateAndDisplayIce1();
        removeIce1ThatHaveSlippedOutOfView();

        updateAndDisplayIce1n();
        removeIce1nThatHaveSlippedOutOfView();

        updateAndDisplayIce2();
        removeIce2ThatHaveSlippedOutOfView();

        updateAndDisplayIce2c();
        removeIce2cThatHaveSlippedOutOfView();

        updateAndDisplayIce2b();
        removeIce2bThatHaveSlippedOutOfView();

        updateAndDisplayIce3();
        removeIce3ThatHaveSlippedOutOfView();

        updateAndDisplayBear();
        removeBearThatHaveSlippedOutOfView();

        updateAndDisplayPenguin();
        removePenguinThatHaveSlippedOutOfView();
    }

    
}



//scene 1: Pre-industrial


//the meadow
function makeMeadow(xm,ym) {
    var M = {
        x: xm, 
        y: ym,
        move: meadowMove,
        speed: -1,
        display: meadowDisplay};
    return M;
}

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

function meadowDisplay(xm) {
   image(meadow, this.x, 0,1400,400);
}

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

function removeMeadowThatHaveSlippedOutOfView(){
    for (var i = 0; i < meadows.length; i++){
        if (meadows[i].x == -900) {
            page = "start";
        }
    }
}

//the mountain
function makeMountain(xmo,ymo) {
    var Mo = {
        x: xmo, 
        y: ymo,
        move: mountainMove,
        speed: -1,
        display: mountainDisplay};
    return Mo;
}

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

function mountainDisplay(xmo) {
   image(mountain, this.x, 0,1200,430);
}

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

function removeMountainThatHaveSlippedOutOfView(){
    for (var i = 0; i < mountains.length; i++){
        if (mountains[i].x < -1440) {
            mountains.shift(mountains[i]);
        }
    }
}

//cow1
function makeCow1(xc1,yc1){
    var C1 = {
        x: xc1, 
        y: yc1,
        move: cow1Move,
        speed: -1,
        display: cow1Display};
    return C1;
}

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

function cow1Display(xc1,yc1){
    image(cow1, this.x, this.y,100,80);
}

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

function removeCow1ThatHaveSlippedOutOfView(){
    for (var i = 0; i < cows1.length; i++){
        if (cows1[i].x < -1440) {
            cows1.shift(cows1[i]);
        }
    }
}

//cow1n
function makeCow1n(xc1n,yc1n){
    var C1n = {
        x: xc1n, 
        y: yc1n,
        move: cow1nMove,
        speed: -1,
        display: cow1nDisplay};
    return C1n;
}

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

function cow1nDisplay(xc1,yc1){
    image(cow1, this.x, this.y,100,80);
}

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

function removeCow1nThatHaveSlippedOutOfView(){
    for (var i = 0; i < cows1n.length; i++){
        if (cows1n[i].x < -1440) {
            cows1n.shift(cows1n[i]);
        }
    }
}



//cow2
function makeCow2(xc2,yc2){
    var C2 = {
        x: xc2, 
        y: yc2,
        move: cow2Move,
        speed: -1,
        display: cow2Display};
    return C2;
}

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

function cow2Display(xc2,yc2){
    image(cow2, this.x, this.y,150,150);
}

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

function removeCow2ThatHaveSlippedOutOfView(){
    for (var i = 0; i < cows2.length; i++){
        if (cows2[i].x < -1440) {
            cows2.shift(cows2[i]);
        }
    }
}


//group
function makeGroup(xg,yg){
    var G = {
        x: xg, 
        y: yg,
        move: groupMove,
        speed: -1,
        display: groupDisplay};
    return G;
}

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

function groupDisplay(xg,yg){
    image(sheeps, this.x, this.y,150,150);
}

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

function removeGroupThatHaveSlippedOutOfView(){
    for (var i = 0; i < groups.length; i++){
        if (groups[i].x < -1440) {
            groups.shift(groups[i]);
        }
    }
}


//horse
function makeHorse(xw,yw){
    var W = {
        x: xw, 
        y: yw,
        move: horseMove,
        speed: -1,
        display: horseDisplay};
    return W;
}

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

function horseDisplay(xw,yw){
    image(horse, this.x, this.y,200,200);
}

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

function removeHorseThatHaveSlippedOutOfView(){
    for (var i = 0; i < horses.length; i++){
        if (horses[i].x < -1440) {
            horses.shift(horses[i]);
        }
    }
}

//horse2
function makeHorse2(xw2,yw2){
    var W2= {
        x: xw2, 
        y: yw2,
        move: horse2Move,
        speed: -1,
        display: horse2Display};
    return W2;
}

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

function horse2Display(xw2,yw2){
    image(horse, this.x, this.y,200,200);
}

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

function removeHorse2ThatHaveSlippedOutOfView(){
    for (var i = 0; i < horses2.length; i++){
        if (horses2[i].x < -1440) {
            horses2.shift(horses2[i]);
        }
    }
}

//cows3
function makeCow3(xs,ys){
    var S = {
        x: xs, 
        y: ys,
        move: cow3Move,
        speed: -1,
        display: cow3Display};
    return S;
}

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

function cow3Display(xs,ys){
    image(cow3, this.x, this.y,75,75);
}

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

function removeCow3ThatHaveSlippedOutOfView(){
    for (var i = 0; i < cows3.length; i++){
        if (cows3[i].x < -1440) {
            cows3.shift(cows3[i]);
        }
    }
}


//birds
function makeBird(xf,yf){
    var F = {
        x: xf, 
        y: yf,
        move: birdMove,
        speed: -2.0,
        display: birdDisplay};
    return F;
}

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

function birdDisplay(xf,yf){
    image(bird, this.x, this.y,200,200);
}

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

function removeBirdThatHaveSlippedOutOfView(){
    for (var i = 0; i < birds.length; i++){
        if (birds[i].x < -1440) {
            birds.shift(birds[i]);
        }
    }
}

//scene 2: Industrial


//the town
function makeTown(xt,yt) {
    var T = {
        x: xt, 
        y: yt,
        move: townMove,
        speed: -1,
        display: townDisplay};
    return T;
}

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

function townDisplay(xt,yt) {
   image(town, this.x,this.y ,700,700);
}

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

function removeTownThatHaveSlippedOutOfView(){
    for (var i = 0; i < towns.length; i++){
        if (towns[i].x < -1440) {
            towns.shift(towns[i]);
        }
    }
}

//the factory
function makeFactory(xf,yf) {
    var F = {
        x: xf, 
        y: yf,
        move: factoryMove,
        speed: -1,
        display: factoryDisplay};
    return F;
}

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

function factoryDisplay(xf,yf) {
   image(factory, this.x, this.y,350,350);
}

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

function removeFactoryThatHaveSlippedOutOfView(){
    for (var i = 0; i < factorys.length; i++){
        if (factorys[i].x < -1440) {
            factorys.shift(factorys[i]);
        }
    }
}

// the sky
function makeSky(xs,ys) {
    var S = {
        x: xs, 
        y: ys,
        move: skyMove,
        speed: -1,
        display: skyDisplay};
    return S;
}

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

function skyDisplay(xb) {
   image(sky, this.x, 0,1800,400);
}

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

function removeSkyThatHaveSlippedOutOfView(){
    for (var i = 0; i < skys.length; i++){
        if (skys[i].x < -1440) {
            skys.shift(skys[i]);
        }
    }
}

//the meadow2
function makeMeadow2(xm2,ym2) {
    var M2 = {
        x: xm2, 
        y: ym2,
        move: meadow2Move,
        speed: -1,
        display: meadow2Display};
    return M2;
}

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

function meadow2Display(xm2) {
   image(meadow2, this.x, 0,1400,400);
}

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

function removeMeadow2ThatHaveSlippedOutOfView(){
    for (var i = 0; i < meadows2.length; i++){
        if (meadows2[i].x == -920) {
            page = "start";
        }
    }
}

//the mountain2
function makeMountain2(xmo2,ymo2) {
    var Mo2 = {
        x: xmo2, 
        y: ymo2,
        move: mountain2Move,
        speed: -1,
        display: mountain2Display};
    return Mo2;
}

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

function mountain2Display(xmo2) {
   image(mountain2, this.x, 0,1400,400);
}

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

function removeMountain2ThatHaveSlippedOutOfView(){
    for (var i = 0; i < mountains2.length; i++){
        if (mountains2[i].x < -1440) {
            mountains2.shift(mountains2[i]);
        }
    }
}

//cow12
function makeCow12(xc12,yc12){
    var C12 = {
        x: xc12, 
        y: yc12,
        move: cow12Move,
        speed: -1,
        display: cow12Display};
    return C12;
}

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

function cow12Display(xc12,yc12){
    image(cow1, this.x, this.y,100,80);
}

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

function removeCow12ThatHaveSlippedOutOfView(){
    for (var i = 0; i < cows12.length; i++){
        if (cows12[i].x < -1440) {
            cows12.shift(cows12[i]);
        }
    }
}

//cow1n2
function makeCow1n2(xc1n2,yc1n2){
    var C1n2 = {
        x: xc1n2, 
        y: yc1n2,
        move: cow1n2Move,
        speed: -1,
        display: cow1n2Display};
    return C1n2;
}

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

function cow1n2Display(xc12,yc12){
    image(cow1, this.x, this.y,100,80);
}

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

function removeCow1n2ThatHaveSlippedOutOfView(){
    for (var i = 0; i < cows1n2.length; i++){
        if (cows1n2[i].x < -1440) {
            cows1n2.shift(cows1n2[i]);
        }
    }
}



//cow22
function makeCow22(xc22,yc22){
    var C22 = {
        x: xc22, 
        y: yc22,
        move: cow2Move,
        speed: -1,
        display: cow22Display};
    return C22;
}

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

function cow22Display(xc22,yc22){
    image(cow2, this.x, this.y,150,150);
}

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

function removeCow22ThatHaveSlippedOutOfView(){
    for (var i = 0; i < cows22.length; i++){
        if (cows22[i].x < -1440) {
            cows22.shift(cows22[i]);
        }
    }
}


//group2
function makeGroup2(xg2,yg2){
    var G2 = {
        x: xg2, 
        y: yg2,
        move: group2Move,
        speed: -1,
        display: group2Display};
    return G2;
}

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

function group2Display(xg2,yg2){
    image(sheeps, this.x, this.y,150,150);
}

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

function removeGroup2ThatHaveSlippedOutOfView(){
    for (var i = 0; i < groups2.length; i++){
        if (groups2[i].x < -1440) {
            groups2.shift(groups2[i]);
        }
    }
}


//house
function makeHouse(xh,yh){
    var H = {
        x: xh, 
        y: yh,
        move: houseMove,
        speed: -1,
        display: houseDisplay};
    return H;
}

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

function houseDisplay(xh,yh){
    image(house, this.x, this.y,500,500);
}

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

function removeHouseThatHaveSlippedOutOfView(){
    for (var i = 0; i < houses.length; i++){
        if (houses[i].x < -1440) {
            houses.shift(houses[i]);
        }
    }
}

//house2
function makeHouse2(xh2,yh2){
    var H2= {
        x: xh2, 
        y: yh2,
        move: house2Move,
        speed: -1,
        display: house2Display};
    return H2;
}

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

function house2Display(xh2,yh2){
    image(house2, this.x, this.y,500,500);
}

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

function removeHouse2ThatHaveSlippedOutOfView(){
    for (var i = 0; i < houses2.length; i++){
        if (houses2[i].x < -1440) {
            houses2.shift(houses2[i]);
        }
    }
}


//birds2
function makeBird2(xb,yb){
    var B = {
        x: xb, 
        y: yb,
        move: bird2Move,
        speed: -2.0,
        display: bird2Display};
    return B;
}

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

function bird2Display(xb,yb){
    image(bird, this.x, this.y,200,200);
}

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

function removeBird2ThatHaveSlippedOutOfView(){
    for (var i = 0; i < birds2.length; i++){
        if (birds2[i].x < -1440) {
            birds2.shift(birds2[i]);
        }
    }
}


//scene 3: Post-industrial

//the drought
function makeDrought(xd,yd) {
    var D = {
        x: xd, 
        y: yd,
        move: droughtMove,
        speed: -1,
        display: droughtDisplay};
    return D;
}

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

function droughtDisplay(xd,yd) {
   image(drought, this.x,this.y ,1000,400);
}

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

function removeDroughtThatHaveSlippedOutOfView(){
    for (var i = 0; i < droughts.length; i++){
        if (droughts[i].x == -450) {
            page = "start";
        }
    }
}

//the factory
function makeFactory2(xf2,yf2) {
    var F2 = {
        x: xf2, 
        y: yf2,
        move: factory2Move,
        speed: -1,
        display: factory2Display};
    return F2;
}

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

function factory2Display(xf2,yf2) {
   image(factory2, this.x, this.y,1000,400);
}

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

function removeFactory2ThatHaveSlippedOutOfView(){
    for (var i = 0; i < factorys2.length; i++){
        if (factorys2[i].x < -1440) {
            factorys2.shift(factorys2[i]);
        }
    }
}

// the sea
function makeSea(xs,ys) {
    var S = {
        x: xs, 
        y: ys,
        move: seaMove,
        speed: -1,
        display: seaDisplay};
    return S;
}

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

function seaDisplay(xb) {
   image(sea, this.x, 0,1400,400);
}

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

function removeSeaThatHaveSlippedOutOfView(){
    for (var i = 0; i < seas.length; i++){
        if (seas[i].x < -1440) {
            seas.shift(seas[i]);
        }
    }
}

//the bear
function makeBear(xb,yb) {
    var B = {
        x: xb, 
        y: yb,
        move: bearMove,
        speed: -1,
        display: bearDisplay};
    return B;
}

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

function bearDisplay(xb,yb) {
   image(bear, this.x, this.y,200,200);
}

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

function removeBearThatHaveSlippedOutOfView(){
    for (var i = 0; i < bears.length; i++){
        if (bears[i].x < -1440) {
            bears.shift(bears[i]);
        }
    }
}

//the penguin
function makePenguin(xp,yp) {
    var P = {
        x: xp, 
        y: yp,
        move: penguinMove,
        speed: -1,
        display: penguinDisplay};
    return P;
}

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

function penguinDisplay(xp,yp) {
   image(penguin, this.x, this.y,400,400);
}

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

function removePenguinThatHaveSlippedOutOfView(){
    for (var i = 0; i < penguins.length; i++){
        if (penguins[i].x < -1440) {
            penguins.shift(penguins[i]);
        }
    }
}

//ice1
function makeIce1(xc1,yc1){
    var C1 = {
        x: xc1, 
        y: yc1,
        move: ice1Move,
        speed: -1,
        display: ice1Display};
    return C1;
}

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

function ice1Display(xc1,yc1){
    image(ice1, this.x, this.y,400,400);
}

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

function removeIce1ThatHaveSlippedOutOfView(){
    for (var i = 0; i < ices1.length; i++){
        if (ices1[i].x < -1440) {
            ices1.shift(ices1[i]);
        }
    }
}

//ice1n
function makeIce1n(xc1n,yc1n){
    var C1n = {
        x: xc1n, 
        y: yc1n,
        move: ice1nMove,
        speed: -1,
        display: ice1nDisplay};
    return C1n;
}

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

function ice1nDisplay(xc1,yc1){
    image(ice1, this.x, this.y,200,200);
}

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

function removeIce1nThatHaveSlippedOutOfView(){
    for (var i = 0; i < ices1n.length; i++){
        if (ices1n[i].x < -1440) {
            ices1n.shift(ices1n[i]);
        }
    }
}



//ice2
function makeIce2(xc2,yc2){
    var C2 = {
        x: xc2, 
        y: yc2,
        move: ice2Move,
        speed: -1,
        display: ice2Display};
    return C2;
}

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

function ice2Display(xc2,yc2){
    image(ice2, this.x, this.y,200,200);
}

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

function removeIce2ThatHaveSlippedOutOfView(){
    for (var i = 0; i < ices2.length; i++){
        if (ices2[i].x < -1440) {
            ices2.shift(ices2[i]);
        }
    }
}


//ice2b
function makeIce2b(xw,yw){
    var W = {
        x: xw, 
        y: yw,
        move: ice2bMove,
        speed: -1,
        display: ice2bDisplay};
    return W;
}

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

function ice2bDisplay(xw,yw){
    image(ice2, this.x, this.y,200,200);
}

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

function removeIce2bThatHaveSlippedOutOfView(){
    for (var i = 0; i < ices2b.length; i++){
        if (ices2b[i].x < -1440) {
            ices2b.shift(ices2b[i]);
        }
    }
}

//ice2c
function makeIce2c(xw2,yw2){
    var W2= {
        x: xw2, 
        y: yw2,
        move: ice2cMove,
        speed: -1,
        display: ice2cDisplay};
    return W2;
}

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

function ice2cDisplay(xw2,yw2){
    image(ice2, this.x, this.y,200,200);
}

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

function removeIce2cThatHaveSlippedOutOfView(){
    for (var i = 0; i < ices2c.length; i++){
        if (ices2c[i].x < -1440) {
            ices2c.shift(ices2c[i]);
        }
    }
}


//ice3
function makeIce3(xf,yf){
    var F = {
        x: xf, 
        y: yf,
        move: ice3Move,
        speed: -1.0,
        display: ice3Display};
    return F;
}

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

function ice3Display(xf,yf){
    image(ice3, this.x, this.y,300,300);
}

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

function removeIce3ThatHaveSlippedOutOfView(){
    for (var i = 0; i < ices3.length; i++){
        if (ices3[i].x < -1440) {
            ices3.shift(ices3[i]);
        }
    }
}

Final Project

sketch

// Name: Aysha Zackria
// AndrewID: azackria
// Section D

var firelocationx = [];
var firelocationy = [];
var smoke = {
    locationx:[], 
    locationy:[], 
    size: 75
}
var counter = 1;
var xoff = 0;
var firesize = 12;
var treelocationx = [];
var treelocationy = [];
var r = 133;
var g = 214;
var b = 139;
var waterr = 131;
var waterg = 228;
var waterb = 234;
var smokecolor = 240;

function setup() {
    createCanvas(500, 500);
    for (var i = 0; i < 25; i++) {
        firelocationx.push(random(20, 480));
        firelocationy.push(random(45, 330));
        treelocationx.push(random(20, 480));
        treelocationy.push(random(35, 330));
    }
}

function draw() {
    background(r, g, b);
    r = map(firelocationx.length, 25, 100, 133, 43);
    g = map(firelocationx.length, 25, 100, 214, 24);
    b = map(firelocationx.length, 25, 100, 139, 8);
    noStroke();
    fill(0);
    if (firelocationx.length < 30) {
        text("Slowly drag the fire into the water to put it out.", 10, 15);
    } else if (firelocationx.length >= 30 & firelocationx.length <= 35) {
        text("Drag the fire into the water to put it out.", 10, 15);
    } else if (firelocationx.length > 35 & firelocationx.length < 40) {
        text("Drag the fire into the water.", 10, 15);
    } else if (firelocationx.length >= 40) {
        text("Put the fire out.", 10, 15);
    }
    noStroke();
    fill(waterr, waterg, waterb);
    waterr = map(firelocationx.length, 25, 100, 131, 25);
    waterg = map(firelocationx.length, 25, 100, 228, 54);
    waterb = map(firelocationx.length, 25, 100, 234, 92);
    rect(0, 350, 500, 150); // water
    let nx = noise(xoff) * 600;
    let ny = noise(xoff+10) * 500;
    if ((counter % 20) == 0) {
        smoke.locationx.push(nx);
        smoke.locationy.push(ny);
    }
    for (var i = 0; i < treelocationx.length; i++) {
        drawtree(i);
    }
    for (var i = 0; i < firelocationx.length; i++) {
        drawfire(i);
        if (mouseIsPressed & dist(firelocationx[i], firelocationy[i], 
            mouseX, mouseY) < 12) {
            firelocationx[i] = mouseX;
            firelocationy[i] = mouseY;
        }
        if (firelocationy[i] > 350) {
            firelocationy.splice(i, 1);
            firelocationx.splice(i, 1);
        }
    }
    fill(smokecolor, 100);
    smokecolor = map(firelocationx.length, 25, 100, 240, 100);
    for (var i = 0; i < smoke.locationx.length; i++) {
        circle(smoke.locationx[i], smoke.locationy[i], smoke.size);
    }
    counter += 1;
    xoff += 0.1;
    if ((counter % 100) == 0) {
        firelocationx.push(random(20, 480));
        firelocationy.push(random(35, 330));
    }
}

function drawtree(i) {
        strokeWeight(4);
        stroke(165, 115, 75);
        line(treelocationx[i], treelocationy[i] - 2, 
            treelocationx[i], treelocationy[i] - 10);
        stroke(50, 100, 50);
        fill(50, 100, 50);
        triangle(treelocationx[i], treelocationy[i] - 15, treelocationx[i] - 3, 
            treelocationy[i] - 10, treelocationx[i] + 3, treelocationy[i] - 10);
        triangle(treelocationx[i], treelocationy[i] - 10, treelocationx[i] - 3, 
            treelocationy[i] - 5, treelocationx[i] + 3, treelocationy[i] - 5);
}

function drawfire(i) {
    fill(255, 100, 0); 
    noStroke();
    push();
    translate(firelocationx[i], firelocationy[i]);
    scale(firelocationx.length / 15);
    circle(0, 0, firesize);
    triangle(-(firesize / 2), -1, (firesize / 2), -1, 0, -20);
    pop();
}

My program is a game that includes fire and smoke appearing at regular intervals on a background of grass and trees. The fire can be extinguished by dragging it into the water area. The game is designed to not be winnable to reflect my growing feeling of hopelessness in regards to the climate crisis. The smoke ultimately obscures a good portion of the screen while the colors of the background and water grow darker to mimic soot buildup. The text direction in the top left corner also changes to convey a sense of urgency as the user gets more frustrated. I didn’t end up implementing any separate sound or image files, so the program can be run normally. If I had more time, I would probably add simple sounds to accompany the fires appearing and disappearing.

Final Project

sketch
var birds = []
var trees = []
var deadTrees = []
var timberJacks = []
var angle = 70
var angle2 = 50
var x = 30
var y = 50
function setup() {
    createCanvas(600, 500)
    frameRate(10)
}
function draw() {
    //draw backgrounds
    push()
    drawDesertAndSky()
    drawNightWorld()
    drawSun()
    pop()
    //rotating lines for the sun
    push()
    translate(150,0)
    for (y = 50; y <= 300; y += 2){
        rotate (radians(angle))
        stroke (255, 215, 0)
        line (30, y, x+2, y)
    }
    pop()
    push()
    for (x = 30; x <= 400; x += 5){
        rotate (radians(angle2))
        stroke (255, 255, 100)
        line (x-25, x-40, x-40, 0.8*40)
    }
    pop()
    //draw trees and deadtrees 
    push()
    for (var i = 0; i < trees.length; i++){
        trees[i].displays()
    }
    pop()
    push()
    for (var i = 0; i < deadTrees.length; i++){
        deadTrees[i].showss()
    }
    pop()
    //draw timberjacks
    push()
    updateAndDisplayTimberJacks()
    addNewTimberJackWithSomeRandomProbability()
    pop()
    //draw birds    
    push()
    updateAndDisplayBirds(); 
    removeBirdsThatHaveSlippedOutOfView();
    addNewBirdsWithSomeRandomProbability();
    pop()
    //texts
    push()
    fill(0,100,0)
    textSize(18);
    strokeWeight(3)
    stroke(0,100,0)
    text("CURRENT WORLD",100,70)
    textSize(16);
    text("WE DON'T WANT OUR WORLD DESTROYED!",10,100)
    strokeWeight(2)
    text("Click to Plant Trees Here! :)",40,150)
    fill(0)
    textSize(20)
    strokeWeight(3)
    stroke(0)
    text("FALLEN WORLD",430,50)
    textSize(16);
    strokeWeight(2)
    text("Klik to pLanT dEAd TrEEs:(",400,80)
    pop()
}

//functions that draw the background
function drawDesertAndSky(){
    noStroke()
    fill(237, 201, 155)//desert
    rect(0,170,400,330)
    fill(135,206,235)//sky
    rect(0,0,400,170)
}
function drawNightWorld(){
    noStroke()
    fill(48,25,52)
    rect(400,170,200,330)
    fill(216,191,216)
    rect(400,0,200,170)
}
function drawSun(){
    translate(150,0)
    fill(255,200,0)//sun
    ellipse(0,0,100,100)
    line(50,50,85,85)
    line(75,20, 125, 30)
    line(20,75, 25 ,125)
}

//interactive mousePressed function to draw trees
function mousePressed(){
    if (mouseX <= 400){
        var tree_instance = makeTree(mouseX, constrain(mouseY,150,550), 0)//plant live trees on the ground
        trees.push(tree_instance)
    }else{
        var deadTree_instance = makeDeadTree(mouseX, constrain(mouseY,180,550))
        deadTrees.push(deadTree_instance)
    }
}

//the tree & dead tree functions
function makeTree(tx, ty, th){
    var tree = {x: tx, y: ty, height: th, 
            displays: treeDraw}
    return tree
}
function treeDraw(){ 
    fill(0,255,0)
    triangle(this.x,this.y-this.height,this.x-7,this.y+15-this.height,this.x+7,this.y+15-this.height)
    fill(50,30,0)
    rect(this.x-2,this.y+15-this.height,4,10+this.height)
    //trees grow
    if(this.height <= 10){
        this.height+=0.1
    }
}
function makeDeadTree(tx, ty){
    var deadTree = {x: tx, y: ty,
            showss: deadTreeDraw}
    return deadTree
}
function deadTreeDraw(){
    push()
    fill(129)
    triangle(this.x+10,this.y-4,this.x+10,this.y+8,this.x+25,this.y)
    rect(this.x,this.y,10,4)
    pop()
}

//timberjacks
function makeTimberjack(jx, jy){
    var timberJack = {x: jx, y: jy, 
            display: timberJackDraw,
            speedX: random(3,6),
            speedY: random(-1,1),
            move: timberJackMove}
    return timberJack
}
function timberJackDraw(){
    push()
    strokeWeight(1)
    ellipse(this.x,this.y,9,12)
    //body
    line(this.x,this.y+6,this.x,this.y+20)//body
    line(this.x,this.y+15,this.x+5,this.y+15)//left hand
    line(this.x,this.y+15,this.x+5,this.y+12)//right hand
    line(this.x,this.y+20,this.x+5,this.y+27.5)//right leg
    line(this.x,this.y+20,this.x-5,this.y+27.5)//left leg
    //eyes
    ellipse(this.x-1.5,this.y-1,0.5,0.5)
    ellipse(this.x+1.5,this.y-1,0.5,0.5)
    arc(this.x, this.y+5, 6, 7.5, PI+1,-1)
    //hair
    line(this.x,this.y-6,this.x,this.y-11)
    line(this.x-1.5,this.y-5.5,this.x-5,this.y-9)
    line(this.x+1.5,this.y-6.5,this.x+5,this.y-9)
    pop() 
    //electric saw
    push()
    noStroke()
    fill(0)
    rect(this.x+5,this.y+10,5,8)
    rect(this.x+7,this.y+12,11,4)
    triangle(this.x+18,this.y+12,this.x+18,this.y+16,this.x+23,this.y+12)
    pop()
}
function timberJackMove() {
    this.x += this.speedX;
    this.y += this.speedY
}
function addNewTimberJackWithSomeRandomProbability() {
    // With a probability, add a new timberjack to the end.
    var newTimberJackLikelihood = 0.05; 
    if (random(0,1) < newTimberJackLikelihood) {
        timberJacks.push(makeTimberjack(0,random(200,470)));
    }
}
function updateAndDisplayTimberJacks(){
    // Update the timberjacks' positions, and display them.
    for (var i = 0; i < timberJacks.length; i++){
        timberJacks[i].move();
        timberJacks[i].display();
    }
}
function removeTimberJacksThatHaveSlippedOutOfView(){
    var timberJacksToKeep = [];
    for (var i = 0; i < timberJacks.length; i++){
        if (timberJacks[i].x > 0) {
            timberJacksToKeep.push(timberJacks[i]);
        }
    }
    timberJacks = timberJacksToKeep;
}

//birds
function removeBirdsThatHaveSlippedOutOfView(){
    var birdsToKeep = [];
    for (var i = 0; i < birds.length; i++){
        if (birds[i].x > 0) {
            birdsToKeep.push(birds[i]);
        }
    }
    birds = birdsToKeep; // remember the surviving birds
}
function updateAndDisplayBirds(){
    // Update the birds' positions, and display them.
    for (var i = 0; i < birds.length; i++){
        birds[i].move();
        birds[i].display();
    }
}
function addNewBirdsWithSomeRandomProbability() {
    // With a probability, add a new bird to the end.
    var newBirdLikelihood = 0.02; 
    if (random(0,1) < newBirdLikelihood) {
        birds.push(makeBird(width,random(20,160),0));
    }
}
// method to update position of birds every frame
function birdMove() {
    this.x -= this.speedX;
    this.y += this.speedY
}
// draw the birds
function birdDisplay() {
    push()
    fill(this.c)
    triangle(this.x,this.y,this.x+6,this.y+1.5,this.x+6,this.y-1.5)//beak
    ellipse(this.x+9,this.y,7,7) //head
    ellipse(this.x+17,this.y+4,15,8)//body
    arc(this.x+18, this.y, 10, 10, -0.7, PI-0.7,CHORD)//wings
    ellipse(this.x+8,this.y-1,1,1)//eyes
    pop()
}
//make new bird with different location, color, speedXY
function makeBird(birthLocationX,birthLocationY,color) {
    var bird = {x: birthLocationX,
                y: birthLocationY,
                c: color,
                speedX: random(5,8),
                speedY: random(-1.5,1.5),
                move: birdMove,
                display: birdDisplay}
    return bird;
}

Since the theme for the project is climate change, I want to write an interactive program that presents scenery that compares a current world and a fallen world to warn people about the consequence of climate change.
The inspiration comes from the trees I was drawing in project 11. I thought of trees immediately when the topic was said to be climate change. Then I had the idea that comparison would be the best way to send out a message of warning. Therefore, the timber jacks in my program were born to play the role of antagonist; the night world is created to demonstrate the potential consequence if we don’t take climate change seriously.
For the interaction part, I want users to be able to plant trees themselves. In the current world, they can plant a tree by clicking on the canvas and the tree would grow gradually to a maximum height. But if the user tries to plant trees in the fallen world, the trees would turn out to be dead trees. This is to imply that once climate change gets to a point, there is no turning back (for a long long time).
Though I did a lot of decorations like the birds and the transformations and loops just for the rays of sunlight, I feel like I could make the scenery more real if I have more time. I might want to use sin wave to draw the desert; I might draw more detailed timber jacks; I might add clouds. But overall, I feel like the program is quite complete, as the message is delivered and I believe that I’ve done all 6 technical merits.

Final Project

sketch

// gnmarino
// Gia Marino
// section D

var cords = [];
function setup() {
    createCanvas(223.2, 223.2);

    // need counter so there doesn't need to be another loop
    var counter = 0;

    // stores in an array all the cordinate points of the squares
    for(var x = 0; x < 93; x++){
        for(var y = 0; y < 93; y++){
            cords[counter]= new Object();
            cords[counter].x = (x * 2.4);
            cords[counter].y = (y * 2.4);
            counter += 1
        }
    }
}
var squares = [];   // array stores makeSquare

function draw() {
    background(20);

    if(cords.length == 1){
        fill(255);
        textSize(10);
        text('Every square represents 24 metric tons',10, 15);
        text('of CO2 emissions produced from the US daily', 10, 30);
        for(var i = 0; i < 8649; i++){
            squares[i].moveSqr();
        }
        noLoop();
    }

    // makes a new array with every square object with a random xy cordinate
    squares.push(makeSquare(int(random(cords.length))));

    // displays a new square with the previous old squares
    // and displays new opactities
    for(var i = 0; i < squares.length; i++){ 
        squares[i].display();
        squares[i].changeOpacity();
    }
}

function moveSquares(){

    // scales visualization down and moves it
    for(var i = 0; i < 8649; i++){
        push();
        scale(.5);
        translate(112, 150);
        squares[i].display();
        pop();
        if(this.x < width/2 & this.x > 5){
            this.x --
        }
        if(this.x > width/2 && this.x < width-5){
            this.x ++ 
        }

    }
    noLoop();
}

function changeColor(){
    // once a square has been in frame for 15 seconds 
    // it starts to lower opacity to 40
    this.age ++
    if(this.age > 15 & this.opacity > 40){
        this.opacity -= 1;
    }

    // at the end all the squares return to opacity 230
    if(cords.length == 2){
        this.opacity = 230;
    }
}

function displaySquare(){
    fill(this.red, this.green, this.blue, this.opacity);
    noStroke();
    rect(this.x, this.y, 2.4, 2.4);
}

function makeSquare(cordNum){
    var square = {x: cords[cordNum].x,
                  y: cords[cordNum].y,
                  red: random(255),
                  blue: random(255),
                  green: random(255),
                  opacity: 255, 
                  age: 0,
                  display: displaySquare,
                  changeOpacity: changeColor,
                  moveSqr: moveSquares}

   // once a square cord is extracted from the array
   // it is removed so it isn't reused
    cords.splice(cordNum, 1);
    return square;
}

For my final project I made a data visualization of the daily carbon emissions in the US. I found a statistic that stated “Passenger cars produced 762.3 million metric tons of CO2 in 2019 [in the US]” (https://www.statista.com/statistics/1235091/us-passenger-car-ghg-emissions-by-vehicle-type/). I was overall inspired by how much the US’s lack of public transportation contributes to CO2 emissions.

I did the math and found that the US produces 24 metric tons of CO2 per second (52,910 lbs). So I figured out how to fit this perfectly on a square canvas with squares and found that if I had a canvas with the size of 223.2 x 233.3 and each square was 2.4, then it would be the correct ratio.

I decided to not make my visualization actually run second by second because it would look kinda boring. So, I sped it up, however each square does proportional represent one second of c02 emissions.

I decided to make my squares fade each time so you could see all the new squares popping in more clearly, because the point of the visualization is to see how many squares there are to represent really how much CO2 is produced each day!

Then at the end I minimize so you can see it all together and then you see the statistic so you know what the pretty animation represented.

Final Project

sketchDownload

//Yanina Shavialenka
//Section B

var numPressed = 1; //Counts number pressed
var r = 174;
var g = 198;
var b = 207;
var cycle = false; //records whether a cycle has occured

//Picture variables
var earth;
var hand;
var airplane;
var car;
var beach;
var factory;
var smoke;
var deforestation;

//Array of pictures and objects
var thermometer = [];
var loadTherm = [];
var planes = [];
var hands = [];
var loadHand = [];
var loadSmokes = [];
var texts = [];

//Function that preloads images
function preload() {
    hand = loadImage("https://i.imgur.com/yj0wtAM.png");
    earth = loadImage("https://i.imgur.com/kHdVss0.png");
    airplane = loadImage("https://i.imgur.com/5UTfPON.png");
    car = loadImage("https://i.imgur.com/FFnoxXk.png");
    beach = loadImage("https://i.imgur.com/vpAjq6W.jpg");
    factory = loadImage("https://i.imgur.com/UAwSjh7.png");
    arrow = loadImage("https://i.imgur.com/QALHzw2.png");
    smoke = loadImage("https://i.imgur.com/RH9Ikd8.png");
    deforestation = loadImage("https://i.imgur.com/ybzFc92.jpg");

    var thermFiles = [];
    thermFiles[0] = "https://i.imgur.com/Gbbbv1a.png";
    thermFiles[1] = "https://i.imgur.com/SFaNzVE.png";
    thermFiles[2] = "https://i.imgur.com/FqY5tgi.png";
    thermFiles[3] = "https://i.imgur.com/BR7AC3a.png";
    thermFiles[4] = "https://i.imgur.com/tsBaLsK.png";
    thermFiles[5] = "https://i.imgur.com/QQs5VxM.png";

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

    var handFiles = [];
    handFiles[0] = "https://i.imgur.com/V3shALS.png";
    handFiles[1] = "https://i.imgur.com/qWRT7Nb.png";
    handFiles[2] = "https://i.imgur.com/obwct4k.png";
    handFiles[3] = "https://i.imgur.com/GwpjItB.png";
    handFiles[4] = "https://i.imgur.com/ip5YRk2.png";
    handFiles[5] = "https://i.imgur.com/sYgwV8p.png";

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

//Functions that make objects to specific images
function makeThermometer(num) {
    var c = { x: 85, y: 150, imageNum: num,
            drawFunction: drawThermometer
    }
    return c;
}

function makeHand(num) {
    var c = { x: 265, y: 350, imageNum: num,
            drawFunc: drawHand
    }
    return c;
}

function makeSmoke(x1,y1) {
    var c = { x: x1, y: y1,
            drawFun: drawSmoke,
            stepFun: stepSmoke
    }
    return c;
}

//Functions that draw objects
function drawThermometer() {
    image(thermometer[this.imageNum],this.x,this.y);
}

function drawHand() {
    image(hands[this.imageNum],this.x,this.y);
}

function drawSmoke() {
    image(smoke,this.x,this.y);
}

//Function that moves smoke at specific intervals
function stepSmoke() {
    if(numPressed == 2){
        this.x += 0.1;
        this.y += 1;
    }
    if(numPressed == 3){
        this.y += 1;
    }
    if(numPressed == 4){
        this.x -= 0.15;
        this.y += 1;
    }
    if(numPressed == 5){
        this.x -= 0.5;
        this.y += 1;
    }
}

//Loads canvas and initial objects
function setup() {
    createCanvas(600, 600);
    background(r,g,b);
    loadTherm.push(makeThermometer(0));
    loadHand.push(makeHand(0));
    initialSmokes();
}

function draw() {
    imageMode(CENTER);

    //Resizes objects
    airplane.resize(140,125);
    car.resize(80,45);
    factory.resize(145, 65);
    deforestation.resize(80, 80);
    beach.resize(100, 80);
    smoke.resize(40,100);

    //Square that helps with not stacking new objects over initial
    fill(174,198,207);
    square(0,0,600);
    noFill();

    //Resizes all Thermometers
    for(var i = 0 ; i < thermometer.length ; i++) {
        thermometer[i].resize(300,300);
    }

    //Draws functions
    for(var i = 0 ; i < loadTherm.length ; i++) {
        loadTherm[i].drawFunction();
        loadTherm.splice(0,loadTherm.length-1); //Deletes previous thermometers to not overlap
    }

    //Draws hand
    for(var i = 0 ; i < loadHand.length ; i++) {
        loadHand[i].drawFunc();
    }

    //Remakes initial smoke objects if cycle is completed
    if(cycle) {
        initialSmokes();
        cycle = false;
    }
    
    image(earth,300,420);
    image(airplane, 140, 100);
    image(car, 210, 80);
    image(factory, 300, 55);
    push();
    rotate(radians(7));
    image(deforestation, 400, 20);
    image(beach, 500, 100);
    pop();
    fill(0);
    textSize(18);
    texts.push(text('4 Main Components:',430,450));
    noFill();

    //Draws smokes objects
    for(var i = 0 ; i < loadSmokes.length ; i++) {
        loadSmokes[i].drawFun();
    }

    //Moves smoke and text based on number pressed condition
    if(numPressed == 2) {
        fill(0);
        textSize(16);
        texts.push(text('•Transportation',430,470))
        noFill();
        while( loadSmokes[numPressed - 2].y < 340 ){
            loadSmokes[numPressed - 2].stepFun();
            loadSmokes[numPressed - 2].drawFun();
        }
    }
    if(numPressed == 3) {
        fill(0);
        textSize(16);
        texts.push(text('•Factories',430,480))
        noFill();
        while( loadSmokes[numPressed - 2].y < 320 ){
            loadSmokes[numPressed - 2].stepFun();
            loadSmokes[numPressed - 2].drawFun();
        }
    }
    if(numPressed == 4) {
        fill(0);
        textSize(16);
        texts.push(text('•Deforestation',430,490))
        noFill();
        while( loadSmokes[numPressed - 2].y < 330 ){
            loadSmokes[numPressed - 2].stepFun();
            loadSmokes[numPressed - 2].drawFun();
        }
    }
    if(numPressed == 5) {
        fill(0);
        textSize(16);
        texts.push(text('•Other livelihoods',430,500))
        noFill();
        while( loadSmokes[numPressed - 2].y < 370 ){
            loadSmokes[numPressed - 2].stepFun();
            loadSmokes[numPressed - 2].drawFun();
        }
    }
}
function keyTyped() {
    //Resets smokes and changes cycle to true to show that a cycle has occured
    if(numPressed == 0){
        loadSmokes.splice(0,loadSmokes.length);
        cycle = true; 
    }
    //Changes thermometer and hand to next image
    if(key == 'g' || key == 'G') {
        print(numPressed);
        loadTherm.push(makeThermometer(numPressed));
        loadHand.push(makeHand(numPressed));
        loadTherm.splice(0,loadTherm.length-1); //Deletes previous thermometers to not overlap
        numPressed++;
    }
    //Resests after cycle
    if(numPressed == 6){
        numPressed = 0;
    }
}

//Function to draw initial smokes
function initialSmokes() {
    loadSmokes.push(makeSmoke(210,140));
    loadSmokes.push(makeSmoke(295,130));
    loadSmokes.push(makeSmoke(380,145));
    loadSmokes.push(makeSmoke(460,240));
}

This final project’s theme is climate change and I decided to show in my work, an interactive image, how human actions affect the Earth and cause climate change. In the image, you can see a picture of a human palm inside of which there’s our planet Earth – this represents the idea that everything is in our hands and that everything we do affects our planet: we can either save it and give it protection or kill it. Either way, everything depends on us. On the first four fingers, from pointer to pinky, we can see the smoke of evaporation coming down from top to middle towards the Earth and each finger in this group of four represents four components that cause global climate change: transportation such as cars and planes, factories, deforestation, and other livelihoods of a person such as construction works, food, the garbage that isn’t getting recycled, increased use of electricity, etc. Starting from the pointer finger, an interactive image will start working when a user clicks on a key “g” or “G” which stands for “Go”, the first smoke will go down towards the Earth and the arrow on the thumb will make a small step towards the thermometer which increases in temperature. Moreover, with every click we can see the name of each component pop up on the screen to tell the user what it is. Then when the user clicks on the key again, the second smoke will slide down towards the Earth, the arrow makes another step, and the temperature gets higher. The same thing will happen to the third and fourth click. However, when the user clicks on the key fifth time, the arrow on the thumb will make the final step from the Earth towards to top of the finger which will make the temperature on the thermometer fill to the top which represents the maximum hotness. This project shows that those four human components affect the Earth in a negative way and when we combine them all together, it increases the speed with which the temperature gets higher.
I was inspired to do this project because as a little girl I always liked winters due to a big amount of snow: I would go snow sliding to the hills with my family every year and it was so much fun! However, in the past few winters, there were only a few days when it snowed meaning our Earth is getting warmer day by day and we cannot do some of our favorite winter activities anymore.
If I had more time to do this project then I would have added more pictures such as I would do more research to find more components that affect the Earth but so far I decided to stick with 4 big, main, and obvious factors.

Week 14: Final Project: Trash Removal

My Final Project Modified for WordPress

//Chuong Truong;
//cbtruong;
//FINAL PROJECT;
//Modified for WordPress;

//array that holds all existing trash objects;
var trashPieces = [];

//this array holds all of the indices of trash objects that have been clicked on - removed;
//then it uses the splice method of arrays to remove that object 
//and erase it from the trashPieces array;
//and the screen as well;
//this effectively removes it;
var trashPiecesRemoval = [];

//gameOver condition that is used for the game overall;
//when true it ends the game and transfers the screen to facts;
var gameOver = false;

//number of current trash objects on screen;
var trashNumCurrent = 0;

//number of trash objects removed;
var trashGone = 0;

//variables that holds the time;
//numSecondsPast is how many seconds have passed;
var numSecondsPast = 0;
//while numSecondsAllowed is how many seconds are left for the player;
//the initial number of seconds allowed for the player is 120 or 2 minutes;
//the reason for two seperate variables is more flexibility for time as a feature;
var numSecondsAllowed = 120;
//the frameCount variable needed for the timer Function that counts time;
var frameCount = 0;

//the variable that determines how many trash objects can be drawn at a time;
var spawnNum = 20;

function setup() {
    //modified canvas size;
    createCanvas(600, 600);
    //creates sea background;
    background(91, 161, 176);
    
    //creates the first initial trash objects;
    for (var l = 0; l < 20; l++){
        makeTrash(random(80, 520), random(80, 520), floor(random(5)), 
            floor(random(0,8)), floor(random(0,8)), random(360), true);
    }


    //sets the frameRate to 30;
    frameRate(30);
    
}

function draw() {
    //calls the display function;
    displays();
    
    //print method used for debugging, it shows how many seconds have passed;
    print(numSecondsPast);
    //increases the frameCount every iteration;
    frameCount++;

    //calls the countTime function that counts the time;
    countTime(frameCount);
    
    //This is the main checker for whether the game is over or not;
    //Namely, it checks for if the time left is 0 or not by way of comparing;
    //the number of seconds allowed - numSecondsAllowed;
    //and the number of seconds that have passed - numSecondsPast;
    //if there is still time, then gameOver is false;
    //And the game runs as usual;
    if (numSecondsAllowed > numSecondsPast){
        gameOver = false;
        //draws all of the existing trash objects;
        for (var m = 0; m < trashNumCurrent; m++){
            var pT = trashPieces[m];
            pT.drawFunction();
        }
    
        //removes any trash objects deemed nonexistant;
        //also uses background to reset the drawing board and removed previous 'drawings' of the object;
        for (var r = 0; r < trashPiecesRemoval.length; r++){
            background(91, 161, 176);
            trashGone++;
            trashPieces.splice(trashPiecesRemoval[r], 1);
        }

        //completely wipes out the trashPiecesRemoval array to allow it to be filled with indices again;
        while (trashPiecesRemoval.length > 0){
           trashPiecesRemoval.shift();
        }
        
        //calls the spawnMoreTrash function;
        spawnMoreTrash();
        }
        //if the time left is 0, then it calls the factScreen function that ends the game;
        else {
            factScreen(facts(floor(random(0, 9))));
    }

    //prints out the current trashPieces array length for debugging;
    trashNumCurrent = trashPieces.length;
    print(trashPieces.length);
    
    //this switch and case checks for the total amount of trash removed;
    //if it passes certain milestones, the spawnNum of trash increases with a one time added bonous of more time;
    switch (trashGone){
        case 40: spawnNum = 25; numSecondsAllowed + 60; break;
        case 80: spawnNum = 30; numSecondsAllowed + 50; break;
        case 120: spawnNum = 35; numSecondsAllowed + 40; break;
        case 1600: spawnNum = 40; numSecondsAllowed + 30; break;
    }

}

//draws the scoreboards, title, time left, and directions;
function displays (){
    stroke(1);
    strokeWeight(0.5);

    //code for top left display of trash removed and trash left;
    fill(255);
    rect(10, 10, 150, 45);

    fill(0);
    var trashNumDisplay = 'Trash Left: ' + trashNumCurrent;
    text(trashNumDisplay, 15, 45);
    var scoreDisplay = 'Trash Removed: ' + trashGone;
    text(scoreDisplay, 15, 25);

    //code for upper middle display of the title of the game;
    fill(240, 133, 11);
    rect(276.5, 15, 100, 35);
    
    fill(0);
    text("Trash-Pick-Up", 285.5, 35);

    //code for upper right display of time left for trash removal;
    fill(255);
    rect(510, 10, 80, 35);

    fill(0);
    var timeLeftDisplay = 'Time: ' + (numSecondsAllowed - numSecondsPast);
    text(timeLeftDisplay, 520, 32.5);

    //code that gives the game directions;
    fill(200, 186, 234);
    rect(60, 555, 480, 40);

    fill(0);
    var directions = 'Click on the red dots to remove the trash before time runs out!  Watch out for misclicks!';  
    var directions2 = 'If you do not see any trash but the trash left is not 0, hit any key to respawn them!';
    text(directions, 65, 570);
    text(directions2, 65, 585);
}


//All of the code below was originally in seperate files to ensure readability and ease of access;
//Due to WordPress, I had to combine all 4 files into 1;

//file that creates the trash objects;

//constructor for the trash object;
//it takes 6 numbers and a boolean value;
//xPost and yPos is the object's main position as it is the first vertex in a given object;
//each object is a randomly constructed shape made with the beginShape() and endShape() function;
//it then takes cPre, a random number that determines its color;
//After that comes the "random points" - which are random numbers added or subtracted to the starting vertex;
//These numbers are stored in an array;
//There are 2 sets of 8 different arrays, one for x and one for y;
//ang is the angling of each object;
//existBol is the boolean value that determines if the object still exists or not;
//it has a drawFunction, drawTrash which handles the drawing;
//it also has a changeFunction. mousePressed, which changes its state as an instance still on the screen;
//and as an existant object within any of the arrays;
function makeTrash (xPos, yPos, cPre, pointsPresetX, pointsPresetY, ang, existBol){
    var t = {x: xPos, y: yPos, col: cPre, 
        pXA: pointsPresetX, pYA: pointsPresetY,
        a: ang, e: existBol, 
        drawFunction: drawTrash, changeFunction: mousePressed};
    trashPieces.push(t);
}

//the drawTrash function is the drawFunction of each trash object;
function drawTrash (){
    //this initial condition decides if it is still on screen (being drawn);
    if (this.e == true){
        stroke(0);

        //switch and case for the color of a given trash object;
        switch (this.col) {
            case 0: fill(228, 200, 98); break;
            case 1: fill(169, 142, 144); break;
            case 2: fill(156, 161, 117); break;
            case 3: fill(135, 206, 250); break;
            case 4: fill(255, 255, 255); break;
        }
  
        //this creates each object, by using beginShape() and endShape(), with numbers that are added to the original vertex;
        //a 7 pointed shape is made;
        //Due to the presence of 8 arrays and a seperate number that determines which array is for x and for y, there are 64 possible combinations;
        //The numbers for each array set is entered and it returns an array to be used for each specific trash object;

        //for the x values added to the original vertex;
        switch(this.pXA){
            case 0: var x = [20, -30, 10, 50, -60, 70]; break;
            case 1: var x = [30, -40, 40, 20, 30, 50]; break;
            case 2: var x = [50, -60, 25, 65, -35, 40]; break;
            case 3: var x = [-30, 70, -30, 40, -25, 65]; break;
            case 4: var x = [20, 30, 10, -50, 60, 30]; break;
            case 5: var x = [60, -20, 35, 20, 45, -20]; break;
            case 6: var x = [-20, 30, 10, -50, 60, 30]; break;
            case 7: var x = [60, -20, 35, 20, 45, -20]; break;
        }
        //for the y values added to the original vertex;
        switch(this.pYA){
           case 0: var y = [40, 30, 10, -25, 30, 20]; break;
           case 1: var y = [35, 25, 10, 50, -70, -40]; break;
           case 2: var y = [20, -0, 10, -10, 40, 20]; break;
           case 3: var y = [-30, 50, 20, 25, 25, -30]; break;
           case 4: var y = [20, 35, -25, -35, 20, 10]; break;
           case 5: var y = [30, -45, 20, -45, 35, 40]; break;
           case 6: var y = [40, 35, 30, -40, 60, -50]; break;
           case 7: var y = [-50, -10, 20, 35, 40, 30]; break;
        }
    
        //with the color and vertex arrays determined, the actual shape is made;
        //it is put within a push and pop for extra variation by way of rotation;
        //the actual tricks for rotation are then applied;
        push();
        translate(this.x, this.y);
        rotate(radians(this.a));
        beginShape();
        vertex(0, 0);
        for (var i = 0; i < 8; i++){
            vertex(0 + x[i], 0+ y[i]);  
        }
        endShape(CLOSE);
        //an additional red circle is added at the original vertex to make it easier to click on;
        fill(255, 0, 0);
        circle(0, 0, 5);
        pop();
    }
}

//this function is the function that changes each object;
//it decides whether each object still exists or not after each click;
function mousePressed() {
    //I made the mouseX and mouseY coordinates into mX and mY respectively for easier typing;
    var mX = mouseX;
    var mY = mouseY;
    
    //the flag variable that becomes true if the player clicks on anything but a trash object's red dot;
    //it is false at the beginning to ensure that a new click is not automatically a misclick;
    var secondOff = false;

    //as the player clicks the mouse, a for loop checks the entire trashPieces array - which;
    //holds all of the existing trashPieces;
    //it checks whether mX and mY are close to the original x and y of any given trash;
    //if the distance is less than 30, then it sets the specific trash object to false;
    //it then pushes the object's index into the trashPiecesRemoval array;
    //this array holds all of the indices of trash objects that have been clicked on - removed;
    //then it uses the splice method of arrays to remove that object and erase it from the trashPieces array;
    //and the screen as well;
    //this effectively removes it;
    for (var i = 0; i < trashPieces.length; i++){
        var rI = i;
        pT = trashPieces[i];
        if (dist(mX, mY, pT.x, pT.y) < 10){
            pT.e = false;
            trashPiecesRemoval.push(rI);
        }
        //if the player clicks and does not remove a piece of trash, it sets the flag variable called secondOff;
        //this in turn makes the following if statement outside of the for loop execute, taking a second off the clock;
        else {
            secondOff = true;
        }
    }
    
    //this function takes a second off of the clock for misclicks;
    if (secondOff == true){
        numSecondsPast++;
    }
}

//this function spawns more trash everytime all of the trash has been removed and the trashPieces array is empty;
function spawnMoreTrash (){
    //it checks to see if the game is over;
    //if true it executes the rest of the code;
    if (gameOver != true){
        //it checks if trashPieces is empty;
        //if true, it creates more trash according to the spawnNum variable;
        if (trashPieces.length == 0){
            for (var l = 0; l < spawnNum; l++){
                makeTrash(random(80, 620), random(80, 520), floor(random(5)), 
                floor(random(0,8)), floor(random(0,8)), random(360), true);
            }
            //this adds more time once a new set of trash has been spawned;
            numSecondsAllowed = numSecondsAllowed + (spawnNum - 10);
            //this gives a change of randomly increasing the spawnNum as well;
            if (floor(random(51)) > 25){
                spawnNum += 2;
            }
        }
    }
}

//a vital function, the keyPress function resets the board;
//Once any key is pressed, the board is redrawn with the same amount of trash pieces left;
//as well as the same amount of time left;
//this is key as there are times where a glitch occurs where all but one or two trash pieces;
//are drawn - meaning they cannot progress as the time winds down;
//Due to not being drawn, the player unfairly loses due to the glitch;
//this keyPress function prevents this by redrawing the board with the same amount of time and trash;
function keyPressed(){
    //this variable is the total amount of trash that has to be redrawn, it is made 0;
    //to ensure that everytime it is called, the number of trash that needs to be redrawn is allowed to change;
    var trashLeftReset = 0;

    //This for loop does the same thing as the loop that removes clicked-on trash;
    //instead of specifically clicked on trash, it removes all of them;
    //It counts how many were removed;
    //Due to this being intended for trash objects that do not appear;
    //It initiates the first step of redrawing them on the board;
    //Therefore, if used for any other purpose, such as cheating, it does nothing but reset the board;
    for (var i = 0; i < trashPieces.length; i++){
        pT = trashPieces[i];
        trashPiecesRemoval.push(pT);
        //this variable offsets the fact that everytime trash is removed, the trash removal counter goes up;
        //this is to prevent cheating as well as the trashGone variable is key for other conditions;
        trashGone--;
        
        //for each piece of trash removed, the counter for trash that needs to be redrawn goes up as well;
        //this is for the following for loop that draws any undrawn trash objects;
        trashLeftReset++;
    }

    //this for loop does the second step of redrawing the board, namely drawing any unremoved and undrawn trash pieces;
    //albiet as a different object altogether;
    for (var l = 0; l < trashLeftReset; l++){
        makeTrash(random(80, 620), random(80, 520), floor(random(5)), 
        floor(random(0,8)), floor(random(0,8)), random(360), true);
    }
}

//separate code file that deals with writing out the facts after the player loses;

//the facts function itself takes a random number and then uses a case and switch for;
//the corresponding fact related to pollution in the ocean;
//I chose to use case and switch due to its simplicity;
function facts (inputNum){
    var factString = "";
    switch(inputNum) {
        case 0: factString = "We dump 8 million tons or 17.6 billion pounds of \nplastic into oceans every year."; return factString; break;
        case 1: factString = "Plastics are responsible for over 80% of the negative \neffects on sea animals."; return factString; break;
        case 2: factString = "By 2050, estimations say that there will be more \nplastic than fish in the ocean when it comes to \nweight alone."; return factString; break;
        case 3: factString = "Over 100,000 marine animals die from eating plastic \nor being trapped by it every year."; return factString; break;
        case 4: factString = "Plastic takes approximately 400 years to degrade\n - when it does in the ocean, more harmful chemicals\n are released."; return factString; break;
        case 5: factString = "Around 70% of ocean garbage are uncleanable \nbecause they sink into the seabed."; return factString; break;
        case 6: factString = "90% of seabirds have plastics in their stomachs."; return factString; break;
        case 7: factString = "300 million tons of plastic is created \nevery year - about 50% is single use."; return factString; break;
        case 8: factString = "Microplastics have been found in Arctic sea ice."; return factString; break;
    }     
}

//related to facts, it takes the fact string and uses it as text;
//this function is the function that causes the game to end;
//it draws the relevant screen and ends the game with a noLoop() call;
function factScreen (factInput){
    background(53, 56, 57);
    fill(255);
    strokeWeight(2);
    stroke(255, 0, 0);
    rect(200, 270, 300, 60);
    stroke(0);
    strokeWeight(0.5);
    fill(0);
    text(factInput, 210, 290);
    stroke(255);
    noLoop();
}


//facts cited from:
//https://www.conservation.org/stories/ocean-pollution-11-facts-you-need-to-know
//https://www.rubicon.com/blog/ocean-pollution-facts/
//https://www.conserve-energy-future.com/various-ocean-pollution-facts.php
//https://www.condorferries.co.uk/marine-ocean-pollution-statistics-facts
//https://www.ehn.org/ocean-plastic-pollution-2654378379/what-can-be-done


//code for the timer that is utilized in the game as a condition for losing;
//the function takes the input of the frameNumber - which is the count of;
//every iteration of the draw loop (the main loop of the game);
//everytime the frameNumber hits 60, numSecondsPast is increased by 1;
//the function also takes the a boolean variable called resetBoolean;
//if the boolean entered is true, it resets the global variable numSecondsPast to 0;
//this is to ensure that everytime a new timer is set, the number of seconds passed 
//is also reset;

function countTime (frameNumber){
    if ((frameNumber % 60) == 0){
        numSecondsPast++;
    }
}


//I got the inspiration for the timer from a program called "countdown timer"
//by user marynotari on the p5js.org site;
//the link for the code: https://editor.p5js.org/marynotari/sketches/S1T2ZTMp-

[Note, I have modified my Project to make it functional for WordPress, the original Canvas size was meant to be 700 by 600, but had to be changed to 600 to 600, therefore, many values regarding specific spots on the canvas has been changed.]

For inspiration, I ran through what I knew about climate change.
Rather than focusing on ways to combat it, I really wanted to tell the effects of it. So, I decided to make an interactive game that showed the depressing facts about ocean pollution. Most of the facts deal with plastics, which are the main objects of the game, the trash objects are supposed to represent.

The game is a simple score as high as possible before time runs out.
The player is given initially 20 trash pieces on a screen and must click on them (the red dots that is their origin as they are shapes made with the beginShape() function). By clicking on them, they are removed and once the number of trash that needs to be removed hits 0, a new set is spawned (if any are undrawn, clicking a key will spawn them in by redrawing the board). Furthermore, there is a timer, so if time runs out (and it always will) the player loses. If any of their clicks are not on the red origin of a trash object, then they have a second deducted from their time. Once losing, they face a black screen with a single text block that tells a fact about ocean pollution.

The fact that the trash is hard to click on is meant to show how hard it is to clean up/fight ocean pollution once it has made its way fully into the ocean. Furthermore, the time limit and countdown are meant to show that we really need to fix ocean pollution now. Finally, the spawning of trash (with the number of a set increasing certain times) is meant to show how the problem is becoming worse and worse. Overall, the program is meant to show that ocean pollution is something that we must fix now because the problem is truly getting worse and harder to solve.

If I had more time, I would have added extra features like making it so that trash can “dissappear” meaning that they are no longer removable/clean-upable, just like in real life as trash in the ocean sink to the seafloor and are impossible to remove. I would’ve also found a way for “true” randomization of the trash, as right now the trash is 7-point polygons that have a set number of versions (64). True randomization is a variable number of points in each polygon and where those points are relation to the original vertex.

I hope you enjoyed my project!

I got the ocean pollution facts from:
https://www.conservation.org/stories/ocean-pollution-11-facts-you-need-to-know
https://www.rubicon.com/blog/ocean-pollution-facts/
https://www.conserve-energy-future.com/various-ocean-pollution-facts.php
https://www.condorferries.co.uk/marine-ocean-pollution-statistics-facts
https://www.ehn.org/ocean-plastic-pollution-2654378379/what-can-be-done

Final Project: Reddit – Spaces of Climate Crisis

sketch

//Tim Nelson-Pyne
//tnelsonp
//Section C

var linksAntofu = ['https://i.imgur.com/Px1nV2B.jpg',
        'https://i.imgur.com/0Xd0GrB.png',
        'https://i.imgur.com/tAZFqHS.png',
        'https://i.imgur.com/mQenYYL.png',
        'https://i.imgur.com/49UZ1CQ.png',
        'https://i.imgur.com/zCeIB47.png',
        'https://i.imgur.com/bW5fsDf.png',
        'https://i.imgur.com/QqtjU1X.png',
        'https://i.imgur.com/PexfMHV.png',
        'https://i.imgur.com/KKu6Az2.png',
        'https://i.imgur.com/w55Ylwi.png',
        'https://i.imgur.com/86yrIIy.png',
        'https://i.imgur.com/xv63US1.png',
        'https://i.imgur.com/LfTmJHW.png',
        'https://i.imgur.com/qL8OCUJ.png',
        'https://i.imgur.com/RZlY9w8.png',
        'https://i.imgur.com/XTz4fVe.png',
        'https://i.imgur.com/8FZDSTa.png',
        'https://i.imgur.com/qBusraJ.png',
        'https://i.imgur.com/BpzmTcT.png',
        'https://i.imgur.com/YpxCZ1L.png',
        'https://i.imgur.com/8DXeLem.png',
        'https://i.imgur.com/a9pINWL.png',
        'https://i.imgur.com/jUFq33O.png',
        'https://i.imgur.com/xjQqAO1.png',
        'https://i.imgur.com/WXqNRVx.png',
        'https://i.imgur.com/gbkrwCj.png',
        'https://i.imgur.com/6gz20Vz.png',
        'https://i.imgur.com/UisuyPK.png',
        'https://i.imgur.com/tLvo8ln.png',
        'https://i.imgur.com/t2uQLf3.png',
        'https://i.imgur.com/mcsxD55.png',
        'https://i.imgur.com/rXMGQXS.png',
        'https://i.imgur.com/gbNnKhs.png',
        'https://i.imgur.com/9sp5SBc.png',
        'https://i.imgur.com/UEQJKrt.png'];


var linksClimatememes = [  'https://i.imgur.com/PyyxiE2h.png ',
 'https://i.imgur.com/Qaij15yh.jpg ',
 'https://i.imgur.com/9qBZVsfh.jpg ',
 'https://i.imgur.com/BHMNtHbh.jpg ',
 'https://i.imgur.com/lWpftgdh.jpg ',
 'https://i.imgur.com/7UoMKfdh.jpg ',
 'https://i.imgur.com/ljK0Pxmh.png ',
 'https://i.imgur.com/jC0tndfh.jpg ',
 'https://i.imgur.com/GEH3qEeh.jpg ',
 'https://i.imgur.com/4iAHEGsh.jpg ',
 'https://i.imgur.com/rEfIJiAh.png ',
 'https://i.imgur.com/FxxbBPgh.jpg ',
 'https://i.imgur.com/MZYveu9h.jpg ',
 'https://i.imgur.com/r4d9cuMh.jpg ',
 'https://i.imgur.com/TtWnYNQh.jpg ',
 'https://i.imgur.com/XWvhFzyh.jpg ',
 'https://i.imgur.com/lTNprgCh.jpg ',
 'https://i.imgur.com/z6vGesEh.jpg ',
 'https://i.imgur.com/JFel7Tch.jpg ',
 'https://i.imgur.com/PswaFlUh.jpg ',
 'https://i.imgur.com/dRpfRJ4h.jpg ',
 'https://i.imgur.com/McW5KTuh.jpg ',
 'https://i.imgur.com/Jy2LqDZh.jpg ',
 'https://i.imgur.com/P4bDHvQh.jpg ',
 'https://i.imgur.com/qHRRRMyh.jpg ',
 'https://i.imgur.com/gIa53RXh.png ',
 'https://i.imgur.com/bWA8mW1h.jpg ',
 'https://i.imgur.com/ZWKScsth.jpg ',
 'https://i.imgur.com/MaWfObgh.jpg ',
 'https://i.imgur.com/FyJglCGh.jpg ',
 'https://i.imgur.com/GuC0B1Uh.jpg ',
 'https://i.imgur.com/7ToxgQah.jpg ',
 'https://i.imgur.com/Vpn0Wslh.jpg ',
 'https://i.imgur.com/JMgByNHh.jpg ',
 'https://i.imgur.com/aHrVja4h.png ',
 'https://i.imgur.com/moAPzg9h.jpg ',
 'https://i.imgur.com/lj31aS9h.jpg ',
 'https://i.imgur.com/tvYMvjAh.jpg ',
 'https://i.imgur.com/2RKCCfGh.png ',
 'https://i.imgur.com/ZwIM1Plh.jpg ',
 'https://i.imgur.com/Ebojz1gh.jpg ',
 'https://i.imgur.com/uq4CIM3h.png ',
 'https://i.imgur.com/kyQ3Teih.jpg ',
 'https://i.imgur.com/H6vxpfEh.png ',
 'https://i.imgur.com/bifhKt0h.jpg ',
 'https://i.imgur.com/42350bEh.jpg ',
 'https://i.imgur.com/9jwG8PUh.png ',
 'https://i.imgur.com/ZBCUV8uh.png ',
 'https://i.imgur.com/6N1ldU6h.jpg ',
 'https://i.imgur.com/pq3NAamh.jpg ',
 'https://i.imgur.com/eOK1u5yh.jpg ',
 'https://i.imgur.com/pUWXHaKh.jpg ',
 'https://i.imgur.com/O23YUVNh.png ',
 'https://i.imgur.com/6HmLOVQh.png ',
 'https://i.imgur.com/YebJamjh.png ',
 'https://i.imgur.com/mfrCdV4h.png ',
 'https://i.imgur.com/3pOQ1Mph.png ',
 'https://i.imgur.com/LmdujUKh.png ',
 'https://i.imgur.com/ARcSLCWh.png ',
 'https://i.imgur.com/ZtRgLC9h.jpg ',
 'https://i.imgur.com/YxGZoaVh.jpg ',
 'https://i.imgur.com/h2tYvXah.jpg ',
 'https://i.imgur.com/WBpgFlah.png ',
 'https://i.imgur.com/oVDPrYzh.png ',
 'https://i.imgur.com/Jk2FS3gh.png ',
 'https://i.imgur.com/1yX6MrVh.jpg ',
 'https://i.imgur.com/ILVScKVh.jpg ',
 'https://i.imgur.com/MeAjx8jh.jpg ',
 'https://i.imgur.com/xl4E56Yh.jpg ',
 'https://i.imgur.com/2Hz0IgQh.png ',
 'https://i.imgur.com/I1PlN5rh.jpg ',
 'https://i.imgur.com/yGFtN21h.png ',
 'https://i.imgur.com/oGhbiGgh.jpg ',
 'https://i.imgur.com/iUOHEibh.jpg ',
 'https://i.imgur.com/X45RvOAh.jpg ',
 'https://i.imgur.com/8DMjVJsh.jpg ',
 'https://i.imgur.com/73Q2YJch.jpg ',
 'https://i.imgur.com/fOsT7Hrh.jpg ',
 'https://i.imgur.com/WdGVHsch.png ',
 'https://i.imgur.com/eqCtXMPh.png ',
 'https://i.imgur.com/x23X9B9h.png ',
 'https://i.imgur.com/EkVUfkxh.png ',
 'https://i.imgur.com/GCsbwG7h.png ',
 'https://i.imgur.com/PMKg9UNh.jpg ',
 'https://i.imgur.com/1gRZiWXh.png ',
 'https://i.imgur.com/sq7Jz1nh.jpg ',
 'https://i.imgur.com/cAmr84ah.jpg ',
 'https://i.imgur.com/7RuXyB0h.jpg ',
 'https://i.imgur.com/6EYcWgah.jpg ',
 'https://i.imgur.com/6jSUIZyh.jpg ',
 'https://i.imgur.com/kcQpLZhh.jpg ',
 'https://i.imgur.com/m03xcE9h.jpg ',
 'https://i.imgur.com/zRAdgyZh.jpg ',
 'https://i.imgur.com/IqbDugGh.jpg ',
 'https://i.imgur.com/DXQ2lOqh.jpg ',
 'https://i.imgur.com/lxrlGJoh.jpg ',
 'https://i.imgur.com/3hXMfSth.jpg ',
 'https://i.imgur.com/EpqBdiRh.jpg ',
 'https://i.imgur.com/ZebsPX7h.jpg ',
 'https://i.imgur.com/PkvNfBJh.gif '
];

var linksSustainability = [ 'https://i.imgur.com/u5ItRuxh.jpg ',
 'https://i.imgur.com/Sy2HAlOh.jpg ',
 'https://i.imgur.com/okRlVEwh.jpg ',
 'https://i.imgur.com/cqwu0PFh.jpg ',
 'https://i.imgur.com/8MLqLhDh.jpg ',
 'https://i.imgur.com/4VuEzAsh.jpg ',
 'https://i.imgur.com/wnBbGJrh.jpg ',
 'https://i.imgur.com/7kGAMzSh.jpg ',
 'https://i.imgur.com/K7gts3mh.jpg ',
 'https://i.imgur.com/xBVrR2nh.jpg ',
 'https://i.imgur.com/pesVKmMh.jpg ',
 'https://i.imgur.com/V3R0cmvh.jpg ',
 'https://i.imgur.com/8zg2suYh.jpg ',
 'https://i.imgur.com/pX0kCEfh.jpg ',
 'https://i.imgur.com/3GdN8qvh.jpg ',
 'https://i.imgur.com/jGyj8hnh.jpg ',
 'https://i.imgur.com/xXfWBuxh.jpg ',
 'https://i.imgur.com/sPqgaqHh.png ',
 'https://i.imgur.com/KQncyTIh.png ',
 'https://i.imgur.com/AR01WlJh.jpg ',
 'https://i.imgur.com/3MmIiwUh.png ',
 'https://i.imgur.com/slhBBPqh.jpg ',
 'https://i.imgur.com/t6u3oxzh.png ',
 'https://i.imgur.com/3nNdcyRh.jpg ',
 'https://i.imgur.com/rkg4eAjh.jpg ',
 'https://i.imgur.com/cHEVMDBh.png ',
 'https://i.imgur.com/N7eMTs7h.jpg ',
 'https://i.imgur.com/ogxU6RRh.png ',
 'https://i.imgur.com/8ngBECJh.jpg ',
 'https://i.imgur.com/o8Vkagfh.jpg ',
 'https://i.imgur.com/wM7Bmgqh.jpg ',
 'https://i.imgur.com/uyIYSKZh.jpg ',
 'https://i.imgur.com/vdYDEobh.jpg ',
 'https://i.imgur.com/QzpCWBfh.jpg ',
 'https://i.imgur.com/5efCFeuh.jpg ',
 'https://i.imgur.com/3hk2vV5h.jpg ',
 'https://i.imgur.com/Rshe6LZh.jpg ',
 'https://i.imgur.com/ksGZsi2h.jpg ',
 'https://i.imgur.com/8BKlC8dh.jpg ',
 'https://i.imgur.com/Xhlrw2ch.jpg ',
 'https://i.imgur.com/nAQkleoh.png ',
 'https://i.imgur.com/ALrM2ZVh.jpg ',
 'https://i.imgur.com/RDHt4gkh.jpg ',
 'https://i.imgur.com/RvhIH9Zh.jpg ',
 'https://i.imgur.com/6QUMPLvh.jpg ',
 'https://i.imgur.com/jeutft7h.jpg ',
 'https://i.imgur.com/CqHFhl2h.jpg ',
 'https://i.imgur.com/BvHTZYzh.jpg ',
 'https://i.imgur.com/fwHR3yLh.jpg ',
 'https://i.imgur.com/YbxXzldh.jpg ',
 'https://i.imgur.com/o2HLl8ih.jpg ',
 'https://i.imgur.com/nUXGmUPh.png ',
 'https://i.imgur.com/lludSoch.png ',
 'https://i.imgur.com/h71BBcwh.jpg ',
 'https://i.imgur.com/PnNSME0h.png ',
 'https://i.imgur.com/oWiVymeh.jpg ',
 'https://i.imgur.com/EqQAgL8h.png ',
 'https://i.imgur.com/CtWcdqbh.jpg ',
 'https://i.imgur.com/rm9fh7Yh.jpg ',
 'https://i.imgur.com/QxFQijNh.jpg ',
 'https://i.imgur.com/cUbY2IWh.jpg ',
 'https://i.imgur.com/vC7pm9rh.jpg ',
 'https://i.imgur.com/cRflWrYh.jpg ',
 'https://i.imgur.com/GwOoWn9h.jpg ',
 'https://i.imgur.com/gODh17vh.jpg ',
 'https://i.imgur.com/FG9KyUQh.jpg ',
 'https://i.imgur.com/fFH1aOVh.jpg ',
 'https://i.imgur.com/MUmP036h.jpg ',
 'https://i.imgur.com/aOuxAbgh.png ',
 'https://i.imgur.com/ucoyWPwh.jpg ',
 'https://i.imgur.com/b05HpLch.png ',
 'https://i.imgur.com/NBbJ1Lfh.jpg ',
 'https://i.imgur.com/Es3df3oh.jpg ',
 'https://i.imgur.com/K3yI4lyh.jpg ',
 'https://i.imgur.com/XKW28VOh.jpg ',
 'https://i.imgur.com/87LcYAAh.jpg ',
 'https://i.imgur.com/xVCXpPVh.jpg ',
 'https://i.imgur.com/lxbiBpah.jpg ',
 'https://i.imgur.com/V95daFph.jpg ',
 'https://i.imgur.com/d2W3sDyh.jpg ',
 'https://i.imgur.com/9E6y9erh.jpg ',
 'https://i.imgur.com/8Vjyqpvh.jpg ',
 'https://i.imgur.com/XUdcjFsh.jpg ',
 'https://i.imgur.com/ww98APSh.jpg ',
 'https://i.imgur.com/WEKVyKnh.jpg ',
 'https://i.imgur.com/o32AxXNh.jpg ',
 'https://i.imgur.com/3fZnCV7h.jpg ',
 'https://i.imgur.com/6oT4ONvh.jpg ',
 'https://i.imgur.com/MQxKPbth.jpg ',
 'https://i.imgur.com/WjPaXjYh.jpg ',
 'https://i.imgur.com/jUZLwEnh.jpg ',
 'https://i.imgur.com/v8ImRoTh.jpg ',
 'https://i.imgur.com/M4qTDFvh.png ',
 'https://i.imgur.com/4rT4mS6h.jpg ',
 'https://i.imgur.com/J06CZzxh.png ',
 'https://i.imgur.com/9Renalth.jpg ',
 'https://i.imgur.com/5zNyTR9h.png ',
 'https://i.imgur.com/8CsG3avh.jpg '
 ];


var linksZerowaste = ['https://i.imgur.com/wzEG0fnh.jpg ',
 'https://i.imgur.com/ldT12DGh.jpg ',
 'https://i.imgur.com/jKVJPgWh.jpg ',
 'https://i.imgur.com/3Ls8Ppjh.jpg ',
 'https://i.imgur.com/KRwnOUVh.jpg ',
 'https://i.imgur.com/L9WpXfCh.jpg ',
 'https://i.imgur.com/I4cW198h.jpg ',
 'https://i.imgur.com/ozwogIqh.jpg ',
 'https://i.imgur.com/ZQaAvPEh.jpg ',
 'https://i.imgur.com/FUcPvh3h.jpg ',
 'https://i.imgur.com/M1lrTPrh.jpg ',
 'https://i.imgur.com/Ec63ChZh.jpg ',
 'https://i.imgur.com/mCsfBtWh.jpg ',
 'https://i.imgur.com/UWNLxwKh.png ',
 'https://i.imgur.com/YUcTkPWh.jpg ',
 'https://i.imgur.com/LKdnpDhh.jpg ',
 'https://i.imgur.com/rdXJr2yh.jpg ',
 'https://i.imgur.com/4OcqGH7h.png ',
 'https://i.imgur.com/6tZtgf9h.jpg ',
 'https://i.imgur.com/ChQKo8rh.jpg ',
 'https://i.imgur.com/QOUjZRQh.jpg ',
 'https://i.imgur.com/aAAYH9gh.jpg ',
 'https://i.imgur.com/AIR4eIQh.jpg ',
 'https://i.imgur.com/YvpyquRh.jpg ',
 'https://i.imgur.com/BGTcKyMh.jpg ',
 'https://i.imgur.com/m1IrcLNh.jpg ',
 'https://i.imgur.com/EP9D08Lh.jpg ',
 'https://i.imgur.com/HlHRbVWh.jpg ',
 'https://i.imgur.com/c3B2sDAh.jpg ',
 'https://i.imgur.com/C4EqrvNh.jpg ',
 'https://i.imgur.com/S1uaKeOh.jpg ',
 'https://i.imgur.com/YAr0Oy4h.jpg ',
 'https://i.imgur.com/xNwGEMzh.jpg ',
 'https://i.imgur.com/Sv9auv7h.jpg ',
 'https://i.imgur.com/xqT7WL2h.jpg ',
 'https://i.imgur.com/DWksaYWh.jpg ',
 'https://i.imgur.com/7TVEfgQh.jpg ',
 'https://i.imgur.com/K8UlQjAh.jpg ',
 'https://i.imgur.com/V9zPYbbh.gif ',
 'https://i.imgur.com/XdfZXr9h.jpg ',
 'https://i.imgur.com/yb0SpJEh.jpg ',
 'https://i.imgur.com/PdUH01vh.jpg ',
 'https://i.imgur.com/YXJJ9M0h.jpg ',
 'https://i.imgur.com/dPCuze5h.jpg ',
 'https://i.imgur.com/QjlyHAbh.jpg ',
 'https://i.imgur.com/ViBoITAh.jpg ',
 'https://i.imgur.com/SyiRo3Mh.jpg ',
 'https://i.imgur.com/Jk5pAUBh.jpg ',
 'https://i.imgur.com/nzhPcXOh.jpg ',
 'https://i.imgur.com/pfGXEpYh.jpg ',
 'https://i.imgur.com/5lkeRYOh.jpg ',
 'https://i.imgur.com/HhaBZzSh.jpg ',
 'https://i.imgur.com/ZKwxy29h.png ',
 'https://i.imgur.com/KwnwNkFh.jpg ',
 'https://i.imgur.com/zRzluPuh.jpg ',
 'https://i.imgur.com/FepuX0Gh.jpg ',
 'https://i.imgur.com/Qn33yrWh.jpg ',
 'https://i.imgur.com/pvHiqg7h.jpg ',
 'https://i.imgur.com/gpgC3uSh.jpg ',
 'https://i.imgur.com/cMTYM0Xh.jpg ',
 'https://i.imgur.com/z2GYs36h.jpg ',
 'https://i.imgur.com/VV7NFwQh.jpg ',
 'https://i.imgur.com/6tiazS2h.jpg ',
 'https://i.imgur.com/MKky5LOh.jpg ',
 'https://i.imgur.com/JCDTymih.jpg ',
 'https://i.imgur.com/8L9kFr9h.jpg ',
 'https://i.imgur.com/VOacrgqh.png ',
 'https://i.imgur.com/8jgKQksh.jpg ',
 'https://i.imgur.com/1yOlrJGh.jpg ',
 'https://i.imgur.com/hACJ15Th.jpg ',
 'https://i.imgur.com/Vh9ZLw7h.jpg ',
 'https://i.imgur.com/haReVl4h.jpg ',
 'https://i.imgur.com/DyjRnuxh.jpg ',
 'https://i.imgur.com/oFS6ufAh.jpg ',
 'https://i.imgur.com/WbtmoYHh.jpg ',
 'https://i.imgur.com/AIoMYv0h.jpg ',
 'https://i.imgur.com/hN3uJCEh.jpg ',
 'https://i.imgur.com/PgvY3yEh.jpg ',
 'https://i.imgur.com/DJi8S41h.jpg ',
 'https://i.imgur.com/9bepsP5h.jpg ',
 'https://i.imgur.com/f8Tneuyh.jpg ',
 'https://i.imgur.com/kaBCMQ7h.jpg ',
 'https://i.imgur.com/REVapE7h.jpg ',
 'https://i.imgur.com/1YrDImeh.jpg ',
 'https://i.imgur.com/UZILEiRh.jpg ',
 'https://i.imgur.com/ObagwtPh.jpg ',
 'https://i.imgur.com/nVnhimuh.jpg ',
 'https://i.imgur.com/z3QPxUgh.jpg ',
 'https://i.imgur.com/94vgjhCh.jpg ',
 'https://i.imgur.com/tmOk03Nh.jpg ',
 'https://i.imgur.com/CMCwrywh.jpg ',
 'https://i.imgur.com/eC1tUT2h.jpg ',
 'https://i.imgur.com/FIyhlI5h.jpg ',
 'https://i.imgur.com/O1JdCMTh.jpg ',
 'https://i.imgur.com/jGbCzceh.jpg ',
 'https://i.imgur.com/wyCjwSuh.jpg ',
 'https://i.imgur.com/R1sXYi9h.png ',
 'https://i.imgur.com/HHJH4DAh.jpg ',
 'https://i.imgur.com/vPSDKudh.jpg ',
];

var linksSignage = ['https://i.imgur.com/hAQYGunh.png ',
 'https://i.imgur.com/k6ILqJ4h.png ',
 'https://i.imgur.com/bRB7k12h.png ',
 'https://i.imgur.com/MG71pFGh.png ',
 'https://i.imgur.com/nSWgLP4h.png ',
 'https://i.imgur.com/nSWgLP4h.png ',

];

var size = 1800;
var sz2 = size / 2;

var frameCount = 0;
var displayCount = 51;

var cam;
var yOffset = -600;

var voice;

var memesAntofu = [];
var randIndexAntofu = [];
var antofuLocation = [4 * size, yOffset, 0];

var memesClimatememes = [];
var randIndexClimatememes = [];
var climatememesLocatoin = [2 * size, yOffset, 0];

var memesSustainability = [];
var randIndexSustainability = [];
var sustainabilityLoacation = [0, yOffset, 0];

var memesZerowaste = [];
var randIndexZerowaste = [];
var zerowasteLocation = [-2 * size, yOffset, 0];

var imagesSignage = [];

var texCount = 0;


var testArray = [];




function preload () {

    //load images for each space
    for (i = 0; i < linksAntofu.length; i++) {
        var newMeme = loadImage(linksAntofu[i]);
        memesAntofu.push(newMeme);
    }
    for (i = 0; i < linksClimatememes.length; i++) {
        var newMeme = loadImage(linksClimatememes[i]);
        memesClimatememes.push(newMeme);
    }
    for (i = 0; i < linksSustainability.length; i++) {
        var newMeme = loadImage(linksSustainability[i]);
        memesSustainability.push(newMeme);
    }
    for (i = 0; i < linksZerowaste.length; i++) {
        var newMeme = loadImage(linksZerowaste[i]);
        memesZerowaste.push(newMeme);
    }
    for (i = 0; i < linksSignage.length; i++) {
        var newSign = loadImage(linksSignage[i]);
        imagesSignage.push(newSign);
    }
    

}


function setup() {
    createCanvas(1000, 700, WEBGL);
    cam = createCamera();

    //creates arrays of raondom index values for each space
    for (i = 0; i < displayCount; i++) {
            var newIndex1 = round(random(0, memesSustainability.length)); 
            randIndexSustainability.push(newIndex1);

            var newIndex2 = round(random(0, memesClimatememes.length)); 
            randIndexClimatememes.push(newIndex2);

            var newIndex3 = round(random(0, memesAntofu.length));
            randIndexAntofu.push(newIndex3);

            var newIndex4 = round(random(0, memesZerowaste.length));
            randIndexZerowaste.push(newIndex4);
    }
    

    
}

function boxGrid(w, d, tex, randIndex) {
    //divides left and right walls into grid of boxes w/ opening for door
    var indexCount = 0;
    push();
    for (var ix = 0; ix < 2; ix ++){
        push();
        for (var iy = 0; iy < 9; iy ++){
            translate(0, 0, size / 4.5);
            if (indexCount == 13) {
                noFill();
            }
            else {
                texture(tex[randIndex[texCount]]);
                box(w, size /2, d);
            }
            texCount ++
            indexCount ++
        }
        pop();
        translate(0, size / 2, 0);
    }
    pop();

}


function subSpace (tex, randIndex, x, y, z) {
    //creates the geometry for each space
    push();
    translate(x, y, z);
    texCount = 0;

    noStroke();

    //floor
    texture(tex[randIndex[texCount]]);
    push();
    translate(0, sz2, sz2);
    box(size, 20, 2 * size);
    texCount ++
    pop();

    //back wall
    texture(tex[randIndex[texCount]]);
    push();
    translate(0, 0, 3 * sz2);
    box(-size, size, -20);
    texCount++
    texture(tex[randIndex[texCount]]);
    translate(0, -size, 0);
    box(size, size, 20);
    texCount++
    pop();

    //front wall
    texture(tex[randIndex[texCount]]);
    push();
    translate(0, 0, -sz2);
    box(size, size, 20);
    texCount++
    texture(tex[randIndex[texCount]]);
    translate(0, -size, 0);
    box(size, size, 20);
    texCount++
    pop();

    //right wall
    push();
    translate(sz2, -sz2 + (size / 4), -sz2 - (size / 9));
    boxGrid(20, size / 4.5, tex, randIndex);
    texCount++
    pop();

    //left wall
    push();
    translate(-sz2, -sz2 + (size / 4), -sz2 - (size / 9));
    boxGrid(-20, -size / 4.5, tex, randIndex);
    pop();

    //roof
    push();
    translate(-sz2 + size / 10, -sz2 - size/10, sz2);
    for (i = 0; i < 7; i++) {
        box(size/5, size/5, 2 * size);
        texture(tex[randIndex[texCount]]);
        if (i <= 1) {
            translate(size/5, -size/5, 0);            
        }
        else {
            translate(size/5, size/5, 0);    
        }
        texCount++
    }
    pop();



    pop();

}

function hallSpace(sign, x, y, z) {
    //creates geometry for the halls and associated signage
    var wHall = size / 4.5;
    var lHall = size;
    var hHall = size / 3;
    var wHall2 = wHall / 2;
    var lHall2 = lHall / 2;
    var hHall2 = hHall / 2;

    push();
    translate(x, y + hHall, z);
    fill(255);
    noStroke();

    //ceiling
    push();
    translate(0, -hHall2 - 9, 0);
    box(lHall + 16, 20, wHall);
    pop();
    
    //floor
    push();
    translate(0, hHall2 + 9, 0);
    box(lHall + 16, -20, wHall);
    pop();

    //front wall
    push();
    translate(0, 0, -wHall2 - 9);
    box(lHall + 16, hHall, -20);
    pop();

    //back wall
    push();
    translate(0, 0, wHall2 + 9);
    box(lHall + 16, hHall, 20);
    pop();

    //signage 1
    push();
    translate(lHall2 + 10, - hHall2 - size / 12, 0);
    -texture(imagesSignage[sign]);
    box(-10, size / 6, -size / 4.5);

    pop();

    //signage 2
    push();
    translate(-lHall2 - 10, -hHall2 - size / 12, 0);
    texture(imagesSignage[sign + 1]);
    box(10, size / 6, size / 4.5);
    pop();

    pop();

}


function moveFunction () {
    //allows camera to be moved with keyboard

    boundaryFunction();
    var dx = 8;
    var dz = 8;

    var px = 0.02;
    var py = 0.02;

    //move left
    if (keyIsDown(65)) {
        cam.move(-dx, 0, 0);
    }
    //move right
    if (keyIsDown(68)) {
        cam.move(dx, 0, 0);
    }
    //move back
    if (keyIsDown(83)) {
        cam.move(0, 0, dz);
    }
    //move forward
    if (keyIsDown(87)) {
        cam.move(0, 0, -dz);
    }
    
    //camera rotate left
    if (keyIsDown(LEFT_ARROW)) {
        cam.pan(px);
    }
    //camera rotate right
    if (keyIsDown(RIGHT_ARROW)) {
        cam.pan(-px);
    }
    //camera rotate down
    if (keyIsDown(DOWN_ARROW)) {
        cam.tilt(py);
    }
    //camera rotate up
    if (keyIsDown(UP_ARROW)) {
        cam.tilt(-py);
    }
    //maintains camera at the same height allways
    cam.eyeY = 0;
}

function boundaryFunction() {
    //stops user form passing through walls
    if (cam.eyeX > -5 * sz2 & cam.eyeX < -3 * sz2) {
        if (cam.eyeZ < - 0.8 * sz2) {
            cam.eyeZ = - 0.8 * sz2
        }
        if (cam.eyeZ > 2.8 * sz2) {
            cam.eyeZ = 2.8 * sz2;
        }
        if (cam.eyeZ < (sz2 - size / 9) || cam.eyeZ > (sz2 + size / 9)) {
            if (cam.eyeX < -4.8 * sz2) {
                cam.eyeX = -4.8 * sz2;

            }
            if (cam.eyeX > -3.2 * sz2) {
                cam.eyeX = -3.2 * sz2;
            }
        }
    }
    else if (cam.eyeX > -sz2 & cam.eyeX < sz2) {
        if (cam.eyeZ < - 0.8 * sz2) {
            cam.eyeZ = - 0.8 * sz2
        }
        if (cam.eyeZ > 2.8 * sz2) {
            cam.eyeZ = 2.8 * sz2;
        }
        if (cam.eyeZ < (sz2 - size / 9) || cam.eyeZ > (sz2 + size / 9)) {
            if (cam.eyeX < -0.8 * sz2) {
                cam.eyeX = -0.8 * sz2;

            }
            if (cam.eyeX > 0.8 * sz2) {
                cam.eyeX = 0.8 * sz2;
            }
        }
        
    }
    else if (cam.eyeX > 3 * sz2 & cam.eyeX < 5 *sz2) {
        if (cam.eyeZ < - 0.8 * sz2) {
            cam.eyeZ = - 0.8 * sz2
        }
        if (cam.eyeZ > 2.8 * sz2) {
            cam.eyeZ = 2.8 * sz2;
        }
        if (cam.eyeZ < (sz2 - size / 9) || cam.eyeZ > (sz2 + size / 9)) {
            if (cam.eyeX < 3.2 * sz2) {
                cam.eyeX = 3.2 * sz2;

            }
            if (cam.eyeX > 4.8 * sz2) {
                cam.eyeX = 4.8 * sz2;
            }
        }

    }
    else if (cam.eyeX > 7 * sz2 & cam.eyeX < 9 *sz2) {
        if (cam.eyeZ < - 0.8 * sz2) {
            cam.eyeZ = - 0.8 * sz2
        }
        if (cam.eyeZ > 2.8 * sz2) {
            cam.eyeZ = 2.8 * sz2;
        }
        if (cam.eyeZ < (sz2 - size / 9) || cam.eyeZ > (sz2 + size / 9)) {
            if (cam.eyeX < 7.2 * sz2) {
                cam.eyeX = 7.2 * sz2;

            }
            if (cam.eyeX > 8.8 * sz2) {
                cam.eyeX = 8.8 * sz2;
            }
        }

    }
    else {
        if (cam.eyeZ < (sz2 + 60 - size / 9)) {
            cam.eyeZ = (sz2 + 60 - size / 9)
        }
        if (cam.eyeZ > (sz2 - 60 + size / 9)){
            cam.eyeZ = (sz2 - 60 + size / 9);
        }
        if (cam.eyeX < - 6.5 * sz2) {
            cam.eyeX = - 6.5 * sz2;
        }
        if (cam.eyeX >  10.5 * sz2) {
            cam.eyeX =  10.5 * sz2;
        }

    }


}

function frameCounter() {
    //generates new random array of indexes to display new imagery every 450 frames
    frameCount++

    if (frameCount % 450 == 0) {
        for (i = 0; i < displayCount; i++) {
            var newIndex1 = round(random(0, memesSustainability.length)); 
            randIndexSustainability.shift();
            randIndexSustainability.push(newIndex1);

            var newIndex2 = round(random(0, memesClimatememes.length)); 
            randIndexClimatememes.shift();
            randIndexClimatememes.push(newIndex2);

            var newIndex3 = round(random(0, memesAntofu.length)); 
            randIndexAntofu.shift();
            randIndexAntofu.push(newIndex3);

            var newIndex4 = round(random(0, memesZerowaste.length)); 
            randIndexZerowaste.shift();
            randIndexZerowaste.push(newIndex4);

        }
    }
}

function draw() {
    background(190, 220, 255);
    //draw spaces
    hallSpace(4, -3 * size, yOffset, size / 2);
    subSpace(memesZerowaste, randIndexZerowaste, zerowasteLocation[0], zerowasteLocation[1], zerowasteLocation[2]);
    hallSpace(0, -size, yOffset, size / 2);
    subSpace(memesSustainability, randIndexSustainability, sustainabilityLoacation[0], sustainabilityLoacation[1], sustainabilityLoacation[2]);
    hallSpace(1, size, yOffset, size / 2);
    subSpace(memesClimatememes, randIndexClimatememes, climatememesLocatoin[0], climatememesLocatoin[1], climatememesLocatoin[2]);
    hallSpace(2, 3 * size, yOffset, size / 2);
    subSpace(memesAntofu, randIndexAntofu, antofuLocation[0], antofuLocation[1], antofuLocation[2]);
    hallSpace(4, 5 * size, yOffset, size / 2);

    //allows movement
    moveFunction();
    //generates new random index arrays
    frameCounter(); 
}

With my project I attempted to create a spatial-visual representation of different online discourses and imagery surrounding climate change. I used four sets of images scraped from four different subreddits relating to climate change r/ZeroWaste r/Sustainability, r/ClimateMemes, and r/Antofu. These subreddits all have different ideological tendencies that inform people’s discussions of climate change. If I had more time for this project I would have liked to incorporate some of the individual character of the subreddits into the geometry of the spaces and I would have liked to add some minimal contextualizing text that displays as an overlay when moving from one subredddit space to another in order to add some of my own opinions to frame the experience of each space.

To move through the space use WASD
To rotate the camera use the Arowkeys

Final Project: Air Pollution Simulator

sketch
var plastic = ["https://i.imgur.com/n3n2yAx.png", 
                "https://i.imgur.com/GO1fho6.png",
                "https://i.imgur.com/HTF7LVN.png",
                "https://i.imgur.com/lPCz5Kl.png",
                "https://i.imgur.com/uOAHfcT.png",
                "https://i.imgur.com/714d3E7.png",
                "https://i.imgur.com/mxW1JT4.png",
                "https://i.imgur.com/2diHO2t.png",
                "https://i.imgur.com/YfCSzcQ.png",
                "https://i.imgur.com/TZovsxa.png",
                "https://i.imgur.com/lK07FmR.png"];
var waste1;
var waste2;
var waste3;
var waste4;
var waste5;
var waste6;
var waste7;
var waste8;
var waste9;
var waste10;
var waste11;

var humanfiles = [];
var human = [];
var vehiclefiles = [];
var vehicles = [];
var wheel;
var instruction;

var newBackground = [];
var newCharacter = [];

var c1,c2;
var mode = false;
var instructionMode = true;

function preload() {
    //waste images
    waste1 = loadImage(plastic[0]);
    waste2 = loadImage(plastic[1]);
    waste3 = loadImage(plastic[2]);
    waste4 = loadImage(plastic[3]);
    waste5 = loadImage(plastic[4]);
    waste6 = loadImage(plastic[5]);
    waste7 = loadImage(plastic[6]);
    waste8 = loadImage(plastic[7]);
    waste9 = loadImage(plastic[8]);
    waste10 = loadImage(plastic[9]);
    waste11 = loadImage(plastic[10]);

    //characters
    humanfiles[0] = "https://i.imgur.com/gGl600Z.png";
    humanfiles[1] = "https://i.imgur.com/6yqtw3q.png";

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

    //vehicle
    vehiclefiles[0] = "https://i.imgur.com/gnO3lJm.png";
    vehiclefiles[1] = "https://i.imgur.com/S1GOMdC.png";

    for (var i = 0; i < vehiclefiles.length; i++) {
        vehicles[i] = loadImage(vehiclefiles[i]);
    }
    wheel= loadImage("https://i.imgur.com/Wkpp7B1.png");
    instruction = loadImage("https://i.imgur.com/QcOMxYC.png");
}
//Factory made of waste
function generateBackground(bx, bdx) {
    var b = {
        x: bx, 
        y:height-75,
        dx: bdx,
        items: random([waste1, waste2, waste3, waste4, waste5, waste6, waste7, waste8, waste9, waste10, waste11]),
        moveFunction: moveBackground,
        drawFunction: drawBackground
    }
    return b;

}

function moveBackground() { //generative landscape
    if (keyIsDown(RIGHT_ARROW)) {
        this.x -= this.dx; 
               
    } else if (keyIsDown(LEFT_ARROW)) {
        this.x += this.dx;
    }
    
}


function drawBackground() {
    var smallSize = 20;
    var bigSize = 30
    push();
    if (this.items == waste1) {
        image(waste1, this.x, 325-waste1.height);
    } else if (this.items == waste2) {
        image(waste2, this.x, 325-waste2.height);
    } else if (this.items == waste3) {
        image(waste3, this.x, 325-waste3.height);
    } else if (this.items == waste4) {
        image(waste4, this.x, 325-waste4.height);
    } else if (this.items == waste5) {
        image(waste5, this.x, 325-waste5.height);
    } else if (this.items == waste6) {
        image(waste6, this.x, 325-waste6.height);
    } else if (this.items == waste7) {
        image(waste7, this.x, 325-waste7.height);
    } else if (this.items == waste8) {
        image(waste8, this.x, 325-waste8.height);
    } else if (this.items == waste9) {
        image(waste9, this.x, 325-waste9.height);
    } else if (this.items == waste10) {
        image(waste10, this.x, 325-waste10.height);
    } else if (this.items == waste11) {
        image(waste11, this.x, 325-waste11.height);
    }

    pop();
    

}

function itemShow() {
    for(var i = 0; i < 100; i++) {
        newBackground[i].moveFunction();
        newBackground[i].drawFunction();
    }
}

//Character skating
function makeSkateCharacter (cx, cdx) {
    var c = {
        x: cx,
        dx: cdx,
        y: height-150,
        movingRight: true,
        stepSkateFunction: stepSkateCharacter,
        drawSkateFunction: drawSkateCharacter
    }
    return c;
}

function stepSkateCharacter () {
    if (keyIsDown(RIGHT_ARROW)) {
        this.movingRight = true;
        if (this.x < width/2) {
            this.x += this.dx;
        } 
    }
}

function drawSkateCharacter () {
    image(vehicles[0], this.x-25, height-80, 70, 25);
    image(human[0], this.x, this.y);

    
}

//Character riding bike
function makeBikeCharacter (mx, wmx, mdx) {
    var m = {
        x: mx,
        wx: wmx,
        dx: mdx,
        y: height-150,
        movingRight: true,
        stepBikeFunction: stepBikeCharacter,
        drawBikeFunction: drawBikeCharacter,
    }
    return m;

}


function stepBikeCharacter () {
    if (keyIsDown(RIGHT_ARROW)) {
        this.movingRight = true;
        push(); //bike wheel rotating
        imageMode(CENTER);
        translate(this.wx+18, this.y+73);
        r+=0.5;
        rotate(r);
        image(wheel, 0, 0, 35, 35);
        pop();
        push();
        imageMode(CENTER);
        translate(this.wx+103, this.y+73);
        r+=1;
        rotate(r);
        image(wheel, 0, 0, 35, 35);
        pop();

        if (this.x < width/2) {
            this.x += this.dx;
        } 

    }

}
var r = 0;

function drawBikeCharacter () {
    if (this.movingRight == true) {
        image(vehicles[1], this.x-40, height-120, 120, 60);
        image(human[1], this.x, this.y);
        
        
    } else {
        push();
        translate(600, 0);
        scale(-1, 1);
        image(vehicles[1], this.x-25, height-80, 200, 100);
        image(human[1], this.x, this.y);
        pop();

    }

}




function setup() {
    createCanvas(600, 400);
    frameRate(15);
    var n = 0;
    for (var i = 0; i < 100; i++) {
        var x = generateBackground(n, 5);
        newBackground.push(x);
        if (newBackground[i].items == waste1) { //placement of each waste factory
            n += waste1.width-2;
        } else if (newBackground[i].items == waste2) {
            n += waste2.width-2;
        } else if (newBackground[i].items == waste3) {
            n += waste3.width-2;
        } else if (newBackground[i].items == waste4) {
            n += waste4.width-2;
        } else if (newBackground[i].items == waste5) {
            n += waste5.width-2;
        } else if (newBackground[i].items == waste6) {
            n += waste6.width-2;
        } else if (newBackground[i].items == waste7) {
            n += waste7.width-2;
        } else if (newBackground[i].items == waste8) {
            n += waste8.width-2;
        } else if (newBackground[i].items == waste9) {
            n += waste9.width-2;
        } else if (newBackground[i].items == waste10) {
            n += waste10.width-2;
        } else if (newBackground[i].items == waste11) {
            n += waste11.width-2;
        }
    }

    var d = makeSkateCharacter(width/2, 3);
    var e = makeBikeCharacter(width/2, width/2-40, 5);

    newCharacter.push(d);
    newCharacter.push(e);
   

}

function draw() {
    var cAmount = 100;
    
    c1 = color(80);
    //gradient color change & fleeting effect on the factory in sustainable future
    c1.setAlpha(10 + 10 * sin(millis() / 1000)); 
    c2 = color(230);
    c4 = color(225,247,255);
    c3 = color(0, 171, 245);
    c3.setAlpha(10 + 10 * sin(millis() / 1000));

    var year = 2050;
    var title = "WHICH FUTURE DO YOU CHOOSE TO LIVE IN?";
  
        
    
    noStroke();
    if (mode) {        
         for(let y=0; y<height; y++){ //gradient background
            n = map(y,0,height,0,1);
            let newc = lerpColor(c3,c4,n);
            stroke(newc);
            line(0,y,width, y);
        }
        fill(255);
        textSize(270);
        text(year, width/2, height-82);
        textSize(25);
        textAlign(CENTER);
        text(title, width/2, height-300);
        itemShow();
        fill(100);
        noStroke();
        rect(0, height-76, width, 76);
        newCharacter[0].stepSkateFunction();
        newCharacter[0].drawSkateFunction();
    } else {
        background(0);
        for(let y=0; y<height; y++){
            n = map(y,0,height,0,1);
            let newc = lerpColor(c1,c2,n);
            stroke(newc);
            line(0,y,width, y);
        }
        fill(255);
        textSize(270);
        text(year, width/2, height-82);
        textSize(25);
        textAlign(CENTER);
        text(title, width/2, height-300);
        itemShow();
        fill(100);
        noStroke();
        rect(0, height-76, width, 76);
        newCharacter[1].drawBikeFunction();
        newCharacter[1].stepBikeFunction();

    }

    if (instructionMode) {
        push();
        imageMode(CENTER);
        image(instruction, width/2, height/2);
        pop();    }

    if (keyIsDown(81)) { //show instruction page
        push();
        imageMode(CENTER);
        image(instruction, width/2, height/2);
        pop();
     } 
    
    
}

//toggle between bike and skate
function keyPressed() {
    if (key == ' ') {
        if (mode == false) {
            mode = true;
        } else if (mode == true) {
            mode = false;
        }
    } 

}

function mousePressed() {
    if (instructionMode == true){
        instructionMode = false;
    }

}

When I heard that the topic for this project is climate change, I was instantly reminded of previous poster work on air pollution, in which I used everyday waste material to draw factories as a metaphor.

This program is a future simulator that shows two alternative versions of 2050’s air quality based how sustainable our lifestyle is. I wanted to continue this use of symbols, so I decided to create a character that interacts with this environment by creating a character that rides a vehicle that is also a metaphor for wasteful lifestyle and a sustainable one. The user of this program can toggle between a character that rides a skateboard made out of a reusable water bottle and a character that rides a motorcycle made of waste like aluminum can wheels. As the user presses down the right arrow key, they can see that the character is moving in the generative landscape. As they toggle the space bar, they can change the vehicle, and see how the air quality changes depending on how much single use products we use. In the sustainable future factories made out of trash starts to wither away, in contrast to how static they are in the polluted version. The main goal of this program is to alert people of the drastic difference our everyday behavior can make to our environment and future and provoke action.in goal of this program is to alert people of the drastic difference our everyday behavior can make to our environment and future and provoke action.