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.

Final Project

fp luca

var s = 0;//score
var trasharr = [];//store trash into array
var buildingsarr = [];
var speed;

function setup() {
    createCanvas(400, 400);
    rectMode(CENTER);
    noStroke();
    frameRate(10);

    for (var i = 0; i < 3; i++){
        trasharr[i] = initializeTrash();
    }

    for (var i = 0; i < 15;i++){
        buildingsarr[i] = initializeBuildings();
    }
}


function draw() {

    background(0);

    //establish scene

    sky();

    scene();

    for (var i = 0; i < 3; i++){
        drawTrash(trasharr[i]);
        moveTrash(trasharr[i], speed)
    }

    for (var i = 0; i < 15; i++){

        drawBuildings(buildingsarr[i],i);
    }

    fill(0,255,0);
    text("Player Score:" + s,20,20);

    

}

function initializeTrash(){
    var trash = {x:60,y:random(250,400),
             w:30,h:30,
             r:random(0,255),g:random(0,255),
             b:random(0,255)};

    return trash;//store trash       
             
}

function drawTrash(trash){
    
    fill(trash.r,trash.g, trash.b);
    rect(trash.x,trash.y, trash.w, trash.h);

    speed = 5;

    if (trash.x >= 350){
        trash.x = 60
        speed = -speed;
    }
}


function moveTrash(trash, speed){
    trash.x += speed;
}

function scene(){
    //sea
    fill(69, 123, 157);
    rect(200,300,400,200);
}

function initializeBuildings(){
    //cityscape

    var buildings = {x:random(-30,50),y:0,w:50,h:random(30,180)}

    return buildings;//store buildings
}

function drawBuildings(buildings,i){//including forloop "i" for building x para.

    push();
    rectMode(CORNER);
    translate(width/2,height/2);
    rotate(radians(180));

    fill(0);
    rect(i*buildings.x,buildings.y,buildings.w,buildings.h);
    pop();

}

function sky(){
    //fill changes according to time of day.
    var hr = hour();

    if (hr >= 0 & hr < 4){
        fill(1,8,79);
    } else if (hr >= 4 & hr < 8){
        fill(0,173,255);
    } else if (hr >= 8 & hr < 12){
        fill(255,255,112);
    } else if (hr >= 12 & hr < 16){
        fill(255,221,64);
    } else if (hr >= 16 & hr < 20){
        fill(255,121,84);
    } else if (hr >= 20 & hr < 23){
        fill(107, 73, 132);
    } else if (hr >= 23){
        fill(99,30,80);
    }

    rect(200,100,400,200);
}

function mousePressed(trash){
    if (dist(mouseX,mouseY,trash.x,trash.y)<30){
        //remove trash
        trash.y = 450;
        s = s + 1;
    }
}

I want to focus on the problem of plastic pollution in our ocean ecosystem in this project. This issue inspires me because plastic containers and packaging are essential to our daily lives, and we rarely recycle them correctly. Many plastic wastes end up incinerated, buried in landfills, or floating in the ocean. Our mistakes and carelessness are causing harm to the planet’s natural ecosystems, which is getting increasingly common in the Anthropocene. In my project, I added visual elements to show that humans cause this problem, such as the city in the background. If I had more time to work on this project, I would use vertices to create my trash to give them a more realistic look. Also, I would make the trash move more randomized so the game could be more engaging and unpredictable. Many of the interactions and visual effects that I plan to achieve did not work as expected, primarily because of my time management on this project. In hindsight, I should make edits to my program more regularly to give myself more time to reflect and improve.

Final Project

For my final project, I wanted to show that climate change is not just a singular concept, but rather a buildup of many different factors and situations, as well as how they are related to one another. First, trees are cut down to clear space for more buildings, people in these buildings require electricity which requires the burning of fossil fuels, and the release of carbon dioxide into the air exacerbates global warming and melts glaciers that increase ocean levels.

The user goes through these 3 scenes and interacts with them, worsening the situation. At the end of each scene, they are presented with statistics of each action and they realize those consequences. Perhaps the polar bear is a metaphor for humans and at the end when the polar bear “drowns”, the user is asked “Are you sorry now?” telling them to rethink their actions before it is too late.

If I had more time, I would have liked to make my graphics more detailed. I would have also liked to include sound but I was having too many problems with looping the sounds so I decided not to include them.

sketch

//Catherine Liu
//jianingl@andrew.cmu.edu
//Section D
//Final Project

//An interactive narrative consisting of 3 scenes

var scene = 1;
var frameNum = 0;

var trees = []; //array to hold objects for trees
var treeCount = 0; //keeping track of framecount specifically for trees
var buildings = []; //array to hold objects for buildings

var lightSwitch = false; //tracking if switch is on or off
var smokeTrail1 = []; //array for holding smoke trail
var smokeTrail2 = []; //array for holding smoke trail

var seaHeight; //tracking height of sea
var gameFail = 0; //tracking if polar bear has drowned
var finalFrame = false; //tracking framecount to show final frame
var finalCount = 0; //tracks count of final frame

//making sine wave for ocean (code refrenced from p5js.org)
var xspacing = 5; // Distance between each horizontal location
var w; // Width of entire wave
var theta = 0.0; // Start angle at 0
var amplitude = 25.0; // Height of wave
var period = 500.0; // How many pixels before the wave repeats
var dx; // Value for incrementing x
var yvalues; // Using an array to store height values for the wave

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

    //adds trees to array
    for (i = 0; i < 5; i++) {
        var rx = random(width);
        trees[i] = makeTree(rx);
    }

    // create an initial collection of buildings
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        buildings[i] = makeBuilding(rx);
    }

    //sets up smoke object
    for (i = 170; i > 50 ; i-=15) {
        smoke1 = { x: 400 + random(-10,10),
                  y: i,
                  size: random(30,50)
                }
        smokeTrail1.push(smoke1)

        smoke2 = {x: 500 + random(-10,10),
                  y: i,
                  size: random(30,50)
                }
        smokeTrail2.push(smoke2)
    }

    //setting up sine wave 
    w = width + 16;
    dx = (TWO_PI / period) * xspacing;
    yvalues = new Array(floor(w / xspacing));
}

function draw() {

    //tracking framecount for scenes to show up
    frameNum += 1

    if (frameNum == 200){
        scene = 1.5
    }

    if (frameNum == 250){
        scene = 2;
    }

    if (frameNum == 450){
        scene = 2.5
    }

    if (frameNum == 500) {
        scene = 3;
    }

    if (finalFrame) {
        finalCount += 1;
    }

    //Scene 1: Cutting down trees
    if (scene == 1) {
        background(230,230,250);
        noStroke();
        fill(0,100,0);
        rect(0,height-50,width,50)

        //show trees until a certain point and switch to buildings
        if (treeCount <= 120) {
            textSize(20);
            textAlign(CENTER);
            text("Try cutting down trees with the saw", width/2, 30);
            updateAndDisplayTrees();
            removeTrees();
            addNewTree();
            treeCount += 1
        }
        if (treeCount > 120) {
            fill(50);
            rect(0,height-50,width,50)
            text("There's no more trees to cut...", width/2, 30);
            updateAndDisplayBuildings();
            removeBuildings();
            addNewBuildings(); 
        }

        //function for making saw
        drawSaw(); 
    }

    if (scene == 1.5) {
        background(0);
        textSize(20);
        textAlign(CENTER);
        fill(255);
        text("More than 3.5 billion trees are cut down annually",width/2,height/2);
        text("for human needs and urban development", width/2, height/2+30)
    }

    //Scene 2: Factory producing smoke
    if (scene == 2) {
        //function for creating smoke
        factorySmoke();

        fill(255)
        text("Click the light switch...", 120,90);
        text("watch the window",120,120);
    }

    if (scene == 2.5) {
        background(0);
        textSize(20);
        textAlign(CENTER);
        fill(255);
        text("62% of our electricity comes from fossil fuels",width/2,height/2);
        text("1.5 million metric tons of C02 are released annually",width/2,height/2+30)
    }

    //Scene 3: rising ocean levels and melting glaciers
    if (scene == 3) {
        noStroke();
        frameRate(10);
        background(70,130,180);
        textSize(20);
        textAlign(CENTER);
        fill(255);
        text("Keep the polar bear above the water, or else...",width/2,30)

        //drawing mountains
        fill(100,146,198);
        triangle(0,height,150,50,300,height);
        triangle(450,height,550,100,650,height);
        fill(135,206,235);
        triangle(100,height,300,150,500,height);

        //draw polar bear that follows mouse
        polarBear();

        //drawing wave
        seaHeight = map(frameNum,500,700,height,-10);
        fill(193,223,255);
        calcWave();
        renderWave(seaHeight);
        
        // if polar bear drowns too many times or ocean rises canvas top, scene ends
        if (gameFail>=10 || seaHeight <= 0) {
            background(0);
            fill(255);
            text("The ocean is expected to rise 15-25cm by 2050",width/2,height/2);
            finalFrame = true;
        }
    }

    if (finalCount>20) {
        background(0);
        text("Are you sorry now?", width/2, height/2);
    }
}

function treeDisplay() {
    //draw each tree
    //checking for saw intersection with tree
    treeUpdate();

    frameRate(10);
    
    //tree spawns initially but if saw intersects with tree, only draw trunk
    if (this.intersect == false) {
        noStroke();
        fill(194, 178, 128);
        push();
        translate(this.x,height-40);
        rect(0,-this.vert,this.hor,this.vert);
        fill(0,this.color,100);
        ellipse(this.hor,-this.vert,this.crown1,this.crown2);
        pop();
    } else if (this.intersect == true) {
        fill(101,67,33);
        push();
        translate(this.x,height-40);
        rect(0,-this.vert/2,this.hor,this.vert/2);
        pop();
    }
}

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

function makeTree(treeX) {
    var tree= {x:treeX,
                hor: random(10,20),
                vert: random(150,250),
                speed: -3,
                color: random(255),
                crown1: random(80,100),
                crown2: random(50,80),
                intersect: false,
                move: treeMove,
                display: treeDisplay,
                update: treeUpdate,
            }
    return tree
}

function updateAndDisplayTrees() {
    for (var i = 0; i < trees.length; i++){
    trees[i].update();
    trees[i].display();
    trees[i].move();
    }
}

function removeTrees() {
    //if tree goes off canvas, remove it
    var treesToKeep = [];
    for (var i = 0; i < trees.length; i++){
        if (trees[i].x + trees[i].crown2 > 0) {
            treesToKeep.push(trees[i]);
        }
    }
    trees = treesToKeep; 
}

function addNewTree() {
    //add new trees after trees move off canvas
    var newTreeLikelihood = 0.06; 
    if (random(0,1) < newTreeLikelihood) {
        trees.push(makeTree(width));
    }
}

function drawSaw() {
    fill(100);
    rect(mouseX, mouseY,80,20);
    for (i = mouseX+5; i < mouseX + 85; i += 10) {
         circle(i, mouseY+20, 10);
    }
    fill("red")
    rect(mouseX-30,mouseY,40,20,20);

}

function updateAndDisplayBuildings(){
    // Update the building's positions, and display them.
    for (var i = 0; i < buildings.length; i++){
        buildings[i].move();
        buildings[i].display();
    }
}

function removeBuildings(){
    //remove buildings as they go off screen
    var buildingsToKeep = [];
    for (var i = 0; i < buildings.length; i++){
        if (buildings[i].x + buildings[i].breadth > 0) {
            buildingsToKeep.push(buildings[i]);
        }
    }
    buildings = buildingsToKeep; // remember the surviving buildings
}

function addNewBuildings() {
    // With a very tiny probability, add a new building to the end.
    var newBuildingLikelihood = 0.007; 
    if (random(0,1) < newBuildingLikelihood) {
        buildings.push(makeBuilding(width));
    }
}

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

function buildingDisplay() {
    // draw the building and some windows
    var floorHeight = 40;
    var bHeight = this.nFloors * floorHeight; 
    fill(this.wallCol); 
    noStroke() 
    push();
    translate(this.x, height - 40);
    rect(0, -bHeight, this.breadth, bHeight);
    fill(this.windowCol); 
    for (var i = 0; i < this.nFloors; i++) {
        rect(5, -15 - (i * floorHeight), this.breadth - 10, 10);
    }
    pop();
}

function makeBuilding(birthLocationX) {
    var bldg = {x: birthLocationX,
                breadth: 50,
                speed: -3,
                nFloors: round(random(2,8)),
                windowCol: random(200,255),
                wallCol: random(100,150),
                move: buildingMove,
                display: buildingDisplay}
    return bldg;
}

function factorySmoke() {

    //tracking height of smoke so it moves down every frame
    var smokeLevel = map(frameNum,250,450,0,150); 

    if (lightSwitch == false) { //if light is off
        frameRate(20);
        noStroke();
        background(176,196,222);

        fill(100);
        //moving smoke up the canvas by adding random dx and dy
        for (i = 0; i < smokeTrail1.length; i++) {
            var randomDx = (random(5));
            var randomDy = (random(-5,0));
            smokeTrail1[i].x += randomDx;
            smokeTrail1[i].y += randomDy;
            //reset x and y position if smoke leaves canvas
            if (smokeTrail1[i].y <= 10) {
                smokeTrail1[i].x = 400 + random(-10,10);
                smokeTrail1[i].y = 150;
            }
            circle(smokeTrail1[i].x, smokeTrail1[i].y, 50)
        }

        for (i = 0; i < smokeTrail2.length; i++) {
            var randomDx = (random(5));
            var randomDy = (random(-5,0));
            smokeTrail2[i].x += randomDx;
            smokeTrail2[i].y += randomDy;
            //reset x and y position if smoke leaves canvas
            if (smokeTrail2[i].y <= 10) {
                smokeTrail2[i].x = 500 + random(-10,10);
                smokeTrail2[i].y = 200;
            }
            circle(smokeTrail2[i].x, smokeTrail2[i].y, 50)
        }

        //smoke funnels
        fill(10);
        rect(370,160,50,150);
        rect(470,210,50,120);

        //drawing smoke accumulating at top of window
        calcWave();
        fill(100);
        beginShape();
        vertex(width,0);
        vertex(0,0);
        for (let x = 0; x <= yvalues.length; x++) {
            vertex(x * xspacing,  smokeLevel+ yvalues[x])
        }
        endShape(CLOSE);

        //walls
        fill(178,157,105);
        rect(0,0,width,30);
        rect(0,0,width-370,height);
        rect(0,width,-10,height);
        rect(0,height,width,-(height-310));

        //light switch
        fill(255);
        rect(70,140,70,100);
        fill(210);
        rect(75,190,60,45);

    }else if (lightSwitch == true) { //if light is turned on
        frameRate(20);
        noStroke();
        background(176,196,222);

        fill(50);
        //moving smoke up the canvas by adding random dx and dy
        for (i = 0; i < smokeTrail1.length; i++) {
            var randomDx = (random(5));
            var randomDy = (random(-5,0));
            smokeTrail1[i].x += randomDx;
            smokeTrail1[i].y += randomDy;
            //reset x and y position if smoke leaves canvas
            if (smokeTrail1[i].y <= 10) {
                smokeTrail1[i].x = 400 + random(-10,10);
                smokeTrail1[i].y = 150;
            }
            circle(smokeTrail1[i].x, smokeTrail1[i].y, 100)
        }

        for (i = 0; i < smokeTrail2.length; i++) {
            var randomDx = (random(5));
            var randomDy = (random(-5,0));
            smokeTrail2[i].x += randomDx;
            smokeTrail2[i].y += randomDy;
            //reset x and y position if smoke leaves canvas
            if (smokeTrail2[i].y <= 10) {
                smokeTrail2[i].x = 500 + random(-10,10);
                smokeTrail2[i].y = 200;
            }
            circle(smokeTrail2[i].x, smokeTrail2[i].y, 100)
        }

        //smoke funnels
        fill(10);
        rect(370,160,50,150);
        rect(470,210,50,120);

        //drawing smoke accumulating at top of window
        calcWave();
        fill(50);
        beginShape();
        vertex(width,0);
        vertex(0,0);
        for (let x = 0; x <= yvalues.length; x++) {
            vertex(x * xspacing,  smokeLevel+ yvalues[x])
        }
        endShape(CLOSE);

        //walls
        fill(247,224,169);
        rect(0,0,width,30);
        rect(0,0,width-370,height);
        rect(0,width,-10,height);
        rect(0,height,width,-(height-310));

        //lightswitch
        fill(255);
        rect(70,140,70,100);
        fill(210);
        rect(75,145,60,45);
    }
}

function treeUpdate() {
    //if saw intersects with tree, change the state of variable to true
    if (mouseX+40 > this.x & mouseX+40< this.x + this.hor) {
       this.intersect = true;
    }
}

function mousePressed() {
    //turn light switch on and off if mouse is pressed on lightswitch
    if (mouseX>70 & mouseX<140 && mouseY>190 && mouseY<240) {
        lightSwitch = true;
        skySmoke = 1;
    } else if (mouseX>70 & mouseX<140 && mouseY>140 && mouseY<190) {
        lightSwitch = false;
        skySmoke = 0;
    }
}

function polarBear() {
    //draws polar bear
    fill(255);
    ellipse(mouseX,mouseY,100,70);
    circle(mouseX-50,mouseY-30,50);
    circle(mouseX-70,mouseY-50,20);
    circle(mouseX-35,mouseY-50,20);
    rect(mouseX-40,mouseY+20,10,20,10);
    rect(mouseX+30,mouseY+20,10,20,10);
    fill(70,130,180);
    circle(mouseX-60,mouseY-30,5);
    circle(mouseX-40,mouseY-32,5);
    ellipse(mouseX-50,mouseY-25,10,5)

    //if polar bear moves below ocean surface, increase count of fails
    if (mouseY-70 >= seaHeight) {
        gameFail +=1;
    }
}

function calcWave() {
  // Increment theta (try different values for
  // 'angular velocity' here)
  theta += 0.2;

  // For every x value, calculate a y value with sine function
  let x = theta;
  for (let i = 0; i < yvalues.length; i++) {
    yvalues[i] = sin(x) * amplitude;
    x += dx;
  }
}

function renderWave(yPos) {
  noStroke();
  beginShape();
  vertex(0,height);
  // A simple way to draw the wave with an ellipse at each location
  for (let x = 0; x <= yvalues.length; x++) {
    vertex(x * xspacing, yPos + yvalues[x])
  }
  vertex(width,height);
  endShape(CLOSE);
}










Final Project

sketch
// WARNING: FOR SOME REASON THE PROGRAM IS VERY LAGGY ON CHROME. HOWEVER, WORKS VERY SMOOTHLY WITH SAFARI.

var trash=["https://i.imgur.com/4OExNH5.png", "https://i.imgur.com/mNxZdnx.png", "https://i.imgur.com/2utBIl1.png", "https://i.imgur.com/onA6aUl.png"];
var recyclebin=["https://i.imgur.com/p6HfTlh.png"];
var canfact=['https://i.imgur.com/PUJEJM4.png'];
var milkfact=['https://i.imgur.com/C5jKZj9.png'];
var waterfact =['https://i.imgur.com/VcUrBbs.png'];
var winefact =['https://i.imgur.com/pWmodnq.png'];
var background =['https://i.imgur.com/Mz0ml4E.png'];

var trash1;
var trash2; 
var trash3;
var trash4;
var speed= 7;

var place=[];
var ntrash=200;
var x=0;
var speed=7;

function preload() {
    trash1=loadImage(trash[0]); // wine
    trash2=loadImage(trash[1]); // water
    trash3=loadImage(trash[2]); // milk 
    trash4=loadImage(trash[3]); // can
    recyclebin = loadImage('https://i.imgur.com/p6HfTlh.png');
    background = loadImage('https://i.imgur.com/Mz0ml4E.png')

    winefact = loadImage('https://i.imgur.com/pWmodnq.png');
    waterfact = loadImage('https://i.imgur.com/VcUrBbs.png');
    milkfact = loadImage('https://i.imgur.com/C5jKZj9.png');
    canfact = loadImage('https://i.imgur.com/PUJEJM4.png');
}

function setup() {
    createCanvas(800, 500);
    var n = 0;
    for (var i = 0; i < 1000; i++){ //
        place[i] = makePlace(n);
        n -= 200;
    }
    frameRate(30);
}

function draw() {
    image(background,0,0);
    placeShow(); 
    image(recyclebin, mouseX, mouseY);

    if (mouseIsPressed & mouseX<400 && mouseY<250) {
        image(winefact, 0, 0);
    } 

    if (mouseIsPressed & mouseX>400 && mouseY<250) {
        image(waterfact,0,0);
    }

    if (mouseIsPressed & mouseX<400 && mouseY>240) {
        image(milkfact,0,0);
    }

    if (mouseIsPressed & mouseX>400 && mouseY>250) {
        image(canfact,0,0);
    }
}

function placeGo(){
    this.x+=this.dx;
}
function placeShow(){
    for(var i = 0; i < place.length; i++){
        place[i].go();
        place[i].show();
        // plate[i].mP();
    }
}

function makePlace(px){
    var place={x: px, y:1, w:1, h:1,
    dx: 7, go:placeGo, show:drawPlace,
    trash: random([trash1, trash2, trash3, trash4]),
    }
    return place;
}

function drawPlace(){
    push();
    fill(0);
    noStroke();
    ellipse(this.x, this.y, this.w, this.h);
    stroke(185);
    noFill();
    ellipse(this.x, this.y, 0.75*this.w, 0.75*this.h);
    if (this.trash==trash1){
            image(trash1, this.x-50, 0);
        }
    if (this.trash==trash2){
        image(trash2, this.x-50, 0);
         }
    if (this.trash==trash3){
        image(trash3, this.x-50, 0);
         }
    if (this.trash==trash4){
        image(trash4, this.x-50, 0);
         } 

function keyPressed() {
  clear();
    }
}

For my final project I decided to narrow in specifically of human consumption waste and recycling. The program is a conveyer belt of a recycling incinerator, the images are all hand drawn through illustrator and procreate. It is simple to run, when you click the screen different facts about the 4 different products will show up: cardboard, glass, plastic, and metal. I also included the mouse to be a recycling bin to add as context clues to what is happening. The art style I was inspired by is my color palette for my animations I do for design. If I had more time I would make buttons which correlate to the random recyclable material functions and have each fact correlate. I would also make a larger frame to show the recycling process and make it much larger than just one simple conveyer belt.
Please Note:
The program works very smoothly with safari but is very laggy on chrome. (I already checked in with a TA about this)

Capitalism is Killing the Planet

sketch

Hey! My idea for this project was to make a few digital climate action “posters”. I had a lot of fun with these and ended up making three that shuffle as you click the mouse:

Make Polluters Pay:

This poster generates smoke objects with random size and transparency from chimnies (that also represent bar graphs to show increasing global temperatures). The smoke obscures the message that shows who is responsible for polluting the earth, while leaving a greenwashed corporate message still visible.

Capitalism is Killing the Planet:

The second poster is supposed to show advanced capitalism’s ability to mask crises behind the veil of economic stability. As you move the mouse towards the top right-hand corner one of the triangles becomes more chaotic while the second one in front remains still. I included a Joseph Schumpeter line that captures this pretty well.

California Wildfires:

The last poster reads from a csv file of the 2020 CA wildfires. Each location is mapped to the canvas and then randomly generated circles flash around it to create the fires.

I hope you enjoy!!

var numPosters = 3;
var poster = 0;
var firstClick;

//smoke vars
var smoke = [];

var dx = 5;
var dy = 7;

var impact;

//fire vars
    //data variables
var fires;
var numRows;

var bgx = []; //background coordinates
var bgy = [];

    //rectangle in center
var margin;
var rectX;
var rectY;

    //canvas
var marginT;
var marginS;

    //colors
var tanColor;
var textRed;

//capitalism vars
var triangleRand;

var barcode
var barcodeWidth = 100;

var bottomTextCA;
var mainTextCA;
var topTextCA;

var bottomBottomTextCap;
var topTextCap;

var smokeBG;

function preload() {
    //uncomment for local
    //used fonts in original file, replaced with images for wordpress bcs of file issues
    /*
    dosis = loadFont('fonts/Dosis-ExtraBold.ttf');
    dosisL = loadFont('fonts/Dosis-Light.ttf');
    gothic = loadFont('fonts/LetterGothicStd.otf');
    akkordeon = loadFont('fonts/Akkordeon.otf');
    impact = loadFont('fonts/impact.ttf');
    

    fires = loadTable('data/2021cafires2.csv', 'header');

    bottomTextCAImg = loadImage('img/CAfiresBottomText.png');
    mainTextCAImg = loadImage('img/CAfiresMainText.png');
    topTextCAImg = loadImage('img/CAfiresTopText.png');

    bottomMainTextCapImg = loadImage('img/CapBotttomMainText.png');
    topTextCapImg = loadImage('img/capTopText.png');

    smokeBG = loadImage('img/smokeBG.png');
    */
    //uncomment for WP

    fires = loadTable('https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/12/2021cafires2.csv', 'header');
    barcode = loadImage('https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/12/barcode.png');
    bottomTextCAImg = loadImage('https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/12/CAfiresBottomText.png');
    mainTextCAImg = loadImage('https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/12/CAfiresMainText.png');
    topTextCAImg = loadImage('https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/12/CAfiresTopText.png');

    bottomMainTextCapImg = loadImage('https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/12/CapBotttomMainText.png');
    topTextCapImg = loadImage('https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/12/capTopText.png');

    smokeBG = loadImage('https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/12/smokeBG.png');

}

function setup() {
    firstClick = true;

    //smoke
    createCanvas(400,600);
    background(220);

    //fires
    noStroke();
    numRows = fires.getRowCount();
    background('black');
    //frameRate(16);

    marginS = 15;
    marginT = 1.5*marginS;
    rectX = width-2*marginS;
    rectY = 500;

    tanColor = color(230, 226, 220);
    textRed = color(255,50,0);

    //storeBackground();
}

function draw() {
    switch (poster) {
        case 0:
            push();
            smokePoster();
            pop();
            break;
        case 1:
            push();
            capitalismPoster();
            pop();
            break;
        case 2:
            push();
            cafiresPoster();
            pop();
            break;
    }

    if (firstClick) {
        push();
        fill(0, 0, 0, 200);
        rectMode(CENTER);
        rect(width/2, height-10, width, 30);
        fill(textRed);
        textSize(22);
        textAlign(CENTER, CENTER)
        text('click to browse through the posters', width/2, height-10);
        pop();
    } else {
        return;
    }
}

function mousePressed() {
    poster += 1;
    if (poster == numPosters) {
        poster = 0;
    }
    firstClick = false;
    print(firstClick.toString());
}

//smoke functions untill line 112
function drawBars() {
    fill('black');
    var w = 60;
    var h;
    for (var i = 0; i < 5; i++) {
        h = map(exp(i), 0, exp(4), 0, height*0.8);
        rect(22+75*i, height - h, w, h);
    }
}

function writeText() {
    var textRed = color(138, 76, 76);
    var textGreen = color(128, 194, 129);

    image(smokeBG, 0, 0);

    /*
    push();
    //translate(0, 0.3*height);
    textSize(64);
    fill(textRed);
    //textFont(impact);
    text('CORPORATIONS', 10, 60);
    text('WARM OUR', 10, 120);  fill(textGreen); text('WE ARE', 300, 120);      fill(textRed);
    text('PLANET!', 10, 180);   fill(textGreen); text('ARE PURSUING', 220, 180);fill(textRed);
    text('MAKE', 10, 240);      fill(textGreen); text('ACTIVELY', 170, 240);    fill(textRed);
    text('POLLUTERS', 10, 300); fill(textGreen); text('WORKING', 300, 300);     fill(textRed);
    text('PAY!', 10, 360);      fill(textGreen); text('TO REDUCE', 140, 360);
    text('OUR CARBON FOOTPRINT', 10, 420);
    text('FOOTPRINT BY EXPLORING', 10, 480);
    text('EXPLORING FREE', 10, 540);
    text('MARKET SOLUTIONS', 10, 600);

    //textSize(30);
    //text('CARBON DIVIDEND NOW', 10, 240)
    pop();
    */
}

function makeSmoke(birthX, birthY) {
    var smoke = {x: birthX,
                y: birthY,
                r: 5,
                t: random(0, 70),
                speedX: random(1,3),
                speedY: random(3,5),
                move: smokeMove,
                display: smokeDisplay}
    return smoke;
}

function smokeDisplay() {
    push();
    translate(this.x, this.y);
    noStroke();
    fill(100, 100, 100, this.t);
    ellipse(0, 0, this.r);
    pop();
}

function smokeMove() {
    this.x -= this.speedX;
    this.y -= this.speedY;
    this.r += random(this.speedX, this.speedY)-1;
}

function newSmoke(colX, colY) {
    var prob = 0.3;
    if (random(0,1) < prob) {
        smoke.push(makeSmoke(random(colX, colX+60), colY+10));
    }
}

function removeSmoke(){
    var smokeToKeep = [];
    for (var i = 0; i < smoke.length; i++){
        if (smoke[i].x > -100) {
            smokeToKeep.push(smoke[i]);
        }
    }
    smoke = smokeToKeep;
}

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

function smokePoster() {
    background(220);

    writeText();

    updateAndDisplaySmoke();
    removeSmoke();
    for (var i = 2; i < 5; i++) {
        h = map(exp(i), 0, exp(4), 0, height*0.8);
        newSmoke(25+75*i, height - h);
    }

    drawBars();
}

//CA fires functions
function drawCircles(lat, long, size) {
    for (var j = 0; j < 2; j++) {
        fill(255, random(0, 140), 0);
        ellipse(lat + random(-3, 3),
                long - random(0, 7),
                random(0, 12));
    }
    //filter(BLUR,5);
    //fill('red');
    //ellipse(lat, long, size);
}

function topText() {
    image(topTextCAImg, 0, 0);

    /*
    //textFont('dosis');
    textSize(10);
    fill(255,50,0);

    textAlign(LEFT, CENTER);    text('2020', marginS, marginT/2);
    textAlign(CENTER, CENTER);  text('CALIFORNIA WILDFIRES', width/2, marginT/2)
    textAlign(RIGHT, CENTER);   text('WFIGS', width-marginS, marginT/2);
    */
}

function mainText() {
    image(mainTextCAImg, marginS, marginT + rectY - mainTextCAImg.height);
    /*
    textSize(60);
    //textFont('akkordeon');
    textStyle(NORMAL);
    fill(tanColor);
    textAlign(LEFT, BOTTOM);

    push();

    translate(marginS, marginT+rectY);

    var offset = 0;

    text("WHOSE", 10, -3*45);
    text("LAND", 10, -2*45);
    text("ARE WE", 10, -45);
    text("BURNING?", 10, 0);

    pop();
    */
}

//not used
function movingText() {
    push();
    //rotate(radians(90));

    textSize(30);
    textFont('impact');
    fill('red');
    text("thoughts and prayers", xText1, 40);
    text("thoughts and prayers", xText2, 40);
    xText1 -= 1;
    xText2 -= 1;

    if (xText1 < -265) {
        xText1 = width;
    } //if (xText2 < -265) {
//        xText2 = width;
//    }

    pop();
}

function drawFlag(x, y, s) {

    push();
    translate(x, y);
    scale(s);
    rectMode(CORNER);
    fill(textRed);

    rect(0, 130, 250, 20);
    drawStar(50, 40, 2);

    noFill();
    stroke(textRed);
    strokeWeight(10*s);
    rect(0, 0, 250, 150);
    noStroke();

    pop();

}

function drawStar(x, y, s) {
    var rOut = 10;
    var rIn = 5;

    push();
    translate(x,y);
    scale(s);
    rotate(radians(180));

    beginShape();
    for (var i = 0; i < 5; i++) {
        vertex( rOut*cos((2*PI*i/5)+(PI/2)),
                rOut*sin((2*PI*i/5)+(PI/2)));
        vertex( rIn*cos((2*PI*i/5)+(PI/2)+(2*PI/10)),
                rIn*sin((2*PI*i/5)+(PI/2)+(2*PI/10)));
    }
    endShape(CLOSE);

    pop();
}

function bottomText() {
    image(bottomTextCAImg, width - bottomTextCAImg.width, height - bottomTextCAImg.height);
    /*
    var lines = "NO BAILOUT\nDEMOCRATIZE POWER\nPEOPLE OVER PROFITS";

    noStroke();
    textStyle(ITALIC);
    textAlign(RIGHT, TOP);
    fill(textRed);
    textSize(14); //14
    textLeading(18);
    //textFont('dosis');

    text(lines, marginS+rectX, marginT+rectY+15);
    */

}

//not used
function storeBackground() {
    for (var x = 0; x < width; x++) {
        for (var y = 0; y < height; y++) {
            if (random(0,1) < 0.1) {
                bgx.push(x);
                bgy.push(y);
            }
        }
    }
}

//not used
function drawBackgound() {
    for (var i = 0; i < bgx.length; i++) {
        stroke('black');
        point(bgx[i], bgy[i]);
        noStroke();
    }
}

function cafiresPoster() {
    //drawBackgound();

    push();
    translate(width/2, rectY/2 + marginT);

    background(tanColor);
    fill('black');
    rectMode(CENTER);
    rect(0, 0, rectX, rectY);

    rotate(radians(-90));
    scale(0.7);

    for (var i = 0; i < numRows/3; i+=3) {
        var lat = fires.getNum(i, "X");
        var lon = fires.getNum(i, "Y");

        //var size = fires.getNum(i, "poly_GISAcres")

        var mappedLat = map(lat, -124, -114, -width/2, width/2);
        var mappedLon = map(lon, 32.55, 42, -height/2, height/2);
        //var mappedSize = map(size, 0, 223180, 20, 30);
        drawCircles(mappedLon, mappedLat, 5);
    }

    pop();

    topText();
    mainText();

    bottomText();
    noFill(); stroke(textRed);
    //drawStar(300, marginT + rectY + 40, 3);
    noStroke();
    //movingText();

    drawFlag(marginS+1, marginT+rectY+17, 0.3);
}

//capitalism is killing the planet
function drawTriangle(x, y, s, n) { //dont look at this function :///

    push();
    translate(x,y);
    scale(s);
    noFill();

    beginShape();

    vertex(-50 + random(n), 50+random(n));//point
    for (var i = -49; i < 49; i+=10) {
        vertex(i + random(n), 50 + random(n));
    }
    vertex(50 + random(n), 50 + random(n)); //point
    vertex(43.75 + random(n),39.375 + random(n));
    vertex(37.5 + random(n), 28.75 + random(n));
    vertex(31.25 + random(n), 18.125 + random(n));
    vertex(25 + random(n), 7.5 + random(n));
    vertex(12.5 + random(n), -13.5 + random(n));
    vertex(6.25 + random(n), -24.25 + random(n));
    vertex(3.125 + random(n), -29.625 + random(n));
    vertex(0 + random(n), -35 + random(n)); //point
    vertex(-3.125 + random(n), -29.625 + random(n));
    vertex(-12.5 + random(n), -13.5 + random(n));
    vertex(-25 + random(n), 7.5 + random(n));
    vertex(-31.25 + random(n), 18.125 + random(n));
    vertex(-37.5 + random(n), 28.75 + random(n));
    vertex(-43.75 + random(n),39.375 + random(n));

    endShape(CLOSE);

    pop();
}

function drawConcentricTriangles(x, y, n) {
    push();
    for (var i = 0; i < 6; i++) {
        strokeWeight(i);
        drawTriangle(x, y, 0.8*(6-i), n);
    }
    pop();
}

function mainTextCap() {
    image(bottomMainTextCapImg, 0, height - bottomMainTextCapImg.height);
    /*
    textSize(40);
    fill('black');
    noStroke();
    //textFont(gothic);
    textAlign(LEFT, TOP);
    text('capitalism is', 10, height/2 + 30);
    text('killing', 10, height/2 + 30 + 45);
    text('the planet', 10, height/2 + 30 + 2*45);
    */
}

function topTextCap() {
    image(topTextCapImg, 0, 0);
    /*
    textSize(12);
    fill('black');
    noStroke();
    //textFont(dosisL);
    textAlign(LEFT, TOP);
    text('CAN CAPITALISM SURVIVE?', 10, 10);
    text('NO, I DO NOT THINK IT CAN.', 10, 22);

    textAlign(RIGHT, TOP);
    text('ITS VERY SUCCESS UNDERMINES', width - 10, 10);
    text('THE SOCIAL INSTITUTIONS WHICH', width - 10, 22);
    text('PROTECT IT', width - 10, 34);
    */
}

function bottomTextCap() {
    textSize(12);
    fill('black');
    noStroke();
    //textFont(dosisL);
    textAlign(RIGHT, BOTTOM);
    text('1942', width - 10, height - 10 - 12 - 12);
    text('JOSEPH SCHUMPETER', width - 10, height - 10 - 12);
    text('CAPITALISM, SOCIALISM AND DEMOCRACY', width - 10, height - 10);
}

function capitalismPoster() {
    background('orange');
    noFill();

    mainTextCap();
    topTextCap();

    stroke('black');

    //silent at bottom left corner
    while (mouseX < 0 & mouseY < 0) {
        triangleRand = 0;
    }

    triangleRand = max(mouseX, height - mouseY)/100;

    stroke(tanColor); //tan
    drawConcentricTriangles(5*width/9, 120, triangleRand);

    stroke(255, 204, 64); //yellow
    drawConcentricTriangles(4*width/9, 120, 0);

    //image(barcode, 15, height-barcodeWidth-10, 30, barcodeWidth);
    //bottomTextCap()
}

Final Project

How to play: In order to win the game, the player must move the polar bear to its home (the iceberg) while avoiding the obstacles. The polar bear can be moved in four directions using the arrow keys. When the polar bear comes into contact with an obstacle, the number of lives will decrease and the background will slightly turn blue (representing ice melting). There’s a total of 60 lives to start with, and there’s also a timer that counts down from a minute. If the number of lives or time runs out before the polar bear reaches home, then the game is over.

final project
// variables for images
var bear; 
var home; 
var factory;
var fire;
var bottle;

//variable for bear & obstacles
var bearx = 90;
var beary = 550;
var fires = [];
var factories = [];
var bottles = [];

// variables for background color
var colorR = 255;
var colorG = 253;
var colorB = 240;
var stepR;
var stepG;
var stepB;

// variable for timer
var timer = 60;

// variable for lives
var lives = 60; 

// variables for winning
var victory = false;
var angle = 0;

function preload() {
    bear = loadImage("https://i.imgur.com/P6jBMLN.png");
    home = loadImage("https://i.imgur.com/GZBJAQt.png");
    factory = loadImage("https://i.imgur.com/8uJDtMZ.png");
    fire = loadImage("https://i.imgur.com/P8Og7bN.png");
    bottle = loadImage("https://i.imgur.com/Q3Qch7G.png");
}

function setup() {
    createCanvas(500, 600);
    imageMode(CENTER);
    home.resize(170, 0);
    bear.resize(100, 0);
    fire.resize(60, 0);
    factory.resize(60, 0);
    bottle.resize(60, 0);
    // get dimensions of images
    print("fire width" + " " + fire.width);
    print("fire height" + " " + fire.height); 
    print("bear width" + " " + bear.width);
    print("bear height" + " " + bear.height);
    print("factory width" + " " + factory.width);
    print("factory height" + " " + factory.height); 
    print("bottle width" + " " + bottle.width);
    print("bottle height" + " " + bottle.height); 
    
    // make obstacles 
    for (var i = 0; i < 3; i ++) {
        var startposition = random(0, width/5)*5;
        var startspeed = random(0, 3);
        fires.push(makeFire(startposition, 0, startspeed));
    }

    for (var i = 0; i < 3; i ++) {
        var startposition = random(0, width/5)*5;
        var startspeed = random(0, 3);
        factories.push(makeFactory(startposition, 0, startspeed));   
    }

    for (var i = 0; i < 3; i ++) {
        var startposition = random(0, width/5)*5;
        var startspeed = random(0, 3);
        bottles.push(makeBottle(startposition, 0, startspeed));   
    }
}

function draw() {
    background(colorR, colorG, colorB); // initial cream color

    // game over melted ice will be blue => (177, 224, 230)
    stepR = (255 - 177) / 60;
    stepG = (253 - 224) / 60;
    stepB = (240 - 230) / 60;

    // timer 
    textSize(20);
    textAlign(CENTER);
    text("Timer: " + timer, 430, 580);
    text("Lives: " + lives, 330, 580);
        
    if (frameCount % 60 == 0 & timer > 0) {
        timer -= 1; // counts down 
    } 
    if (timer == 0) { // if times run out, game ends
        gameover();
    }

    image(home, width/2, 70); 
    image(bear, bearx, beary);

    // controlling bear's position through arrow keys 
    if (keyIsPressed & victory == false) {
        if (keyCode === LEFT_ARROW && bearx >= 50) {
            bearx -= 2;
        }
        if (keyCode === RIGHT_ARROW & bearx <= width - 50) {
            bearx += 2;
        }
        if (keyCode === UP_ARROW & beary >= 28.5) {
            beary -= 2;
        }
        if (keyCode === DOWN_ARROW & beary <= height - 28.5) {
            beary += 2;
        }
    }
    
    if (bearx >= width/2 - 20 & bearx <= width/2 + 20 && beary >= 50 && beary <= 90) { // if bear reaches home
        win();
    }

    obstacles(fires, 44);
    obstacles(factories, 35);
    obstacles(bottles, 26.5);
}

// function to show & update obstacles + interaction 
function obstacles(array, size) {
    for (var i = 0; i < array.length; i++) {
        array[i].show();
        array[i].update();
        if ((bearx >= array[i].x - 80 & bearx <= array[i].x + 80) && (beary >= array[i].y - size && beary <= array[i].y + size)) {
            if (colorR >= 177 || colorG >= 224 || colorB >= 230) {
                colorR -= stepR;
                colorG -= stepG;
                colorB -= stepB;
                lives -= 1;
            } else {
                gameover(); break;
            }
        } 
    }
}


// fire object
function makeFire(fx, fy, fspeed) {
    var fireobject = {x: fx, y: fy, speed: fspeed, show: fireShow, update: fireUpdate};
    return fireobject;
}

function fireShow() {
    image(fire, this.x, this.y);
}

function fireUpdate() {
    this.y += this.speed;
    if (this.y - 44 >= height) {
        this.y = -44;
    }
}

// factory object 
function makeFactory(facx, facy, facspeed) {
    var factoryobject = {x: facx, y: facy, speed: facspeed, show: factoryShow, update: factoryUpdate};
    return factoryobject;
}

function factoryShow() {
    image(factory, this.x, this.y);
}

function factoryUpdate() {
    this.y += this.speed;
    if (this.y - 35 >= height) {
        this.y = -35;
    }
}

// bottle object
function makeBottle(bx, by, bspeed) {
    var bottleobject = {x: bx, y: by, speed: bspeed, show: bottleShow, update: bottleUpdate};
    return bottleobject;
}

function bottleShow() {
    image(bottle, this.x, this.y);
}

function bottleUpdate() {
    this.y += this.speed;
    if (this.y - 26.5 >= height) {
        this.y = -26.5;
    }
}

// game over function
function gameover() {
    background(212, 36, 17); // red background if game over
    textSize(45);
    text("GAME OVER!", width/2, height/2);
    //stopping everything else
    fires = [];
    factories = [];
    bottles = [];
    victory = true;
    noLoop();
}

// you win function 
function win() {
    background(149, 217, 143); // green background if win
    textSize(45);
    text("YOU WIN!", width/2, height/2);
    // rotating the bear if win
    push();
    translate(width/2, 200);
    rotate(radians(angle));
    imageMode(CENTER);
    image(bear, 0, 0);
    pop();
    angle += 5;
    //stopping everything else
    fires = [];
    factories = [];
    bottles = [];
    victory = true;
}

Since the theme of our final project was climate change, I wanted to incorporate different causes of climate change through the form of an interactive game where the polar bear symbolizes the victims of global warming. The polar bear has to avoid obstacles including pollution from a factory, plastic waste in the ocean, and forest fires, in order to safely reach home. It’s difficult to win the game, which symbolizes how we’ve neglected this issue for so long that it’s now quite impossible to reverse the impact.

If I had more time to work on this project, I might add positive objects such as renewable energy sources that the bear can touch and will increase the number of lives or the remaining time, representing potential actions to reverse or reduce climate change.

Final Project 14

My final project is both about light pollution and the aurora borealis. The details are revealed through the facts displayed when you click on the moon. The facts related to the aurorae detail how the same phenomenon that causes aurorae also cause ozone layer depletion. Additionally, the electron precipitation introduced during aurora enters the Earth’s thermosphere may cause further depletion of the ozone layer. (https://www.innovationnewsnetwork.com/evidence-of-earths-auroras-causing-mesospheric-ozone-layer-depletion/14279/). To talk about aurorae, we must also talk about light pollution. Particularly in cities, it’s difficult to see such views or any stars at all in the night sky. Pittsburgh has dealt with both these subjects; you can’t see stars at night, and recently aurorae was visible just north of the city.

sketch
//Julianna Bolivar
//jbolivar@andrew.cmu.edu
//Section D
//Final Project

var buildings = [];
var buildingsShowing = [];
var stars = [];
var starsShowing = [];
var counter = 0;
var starsCounter = 0;
var moonAngle = 0;

//gradient variables
const X_AXIS = 2;
let c1, c2;

var facts = ["Light pollution impacts animal behaviors, such as migration patterns, wake-sleep cycles, and habitat formation.", 
"Increased amounts of light at night lowers melatonin production, resulting in sleep deprivation, stress, anxiety, etc.", 
"Nocturnal light interrupts sleep and confuses the circadian rhythm in humans and animals.",
"Astronomers are concerned with light pollution as it reduces their ability to view celestial objects.", 
"The phenomena that causes aurorae also causes ozone layer depletion.",
"The ozone layer protects life on Earth from damaging UV light.",
"The electron precipitation that escapes into the thermosphere during aurora may cause further ozone layer depletion.",
"The aurora borealis was recently visible as low as in Pittsburgh."];
var index = 0;





var moonImg;
function preload(){
  //load image
  moonImg = loadImage("https://i.imgur.com/1lsi57S.png");
}

function setup() {
    createCanvas(640,240);
    frameRate(30);

    //lerp color for aurorae sky
    c1 = color(98, 6, 137); //purple
    c2 = color(1, 153, 82); //green
    
    //buildings
    for (var i = 0; i < 20;i++){
        var bldngs = random(width);
        buildings[i] = makeBuildings(bldngs);
    }

    //stars
    for (var i = 0; i < 20;i++){
        var strs = random(width);
        stars[i] = makeStars(strs);
    }
}

function draw() {
    fill(6, 11, 49);
    rect(0,0, 640, 240);

    //if mouse is at top, stars and aurorae appear
    if (mouseY<height/2){
        setGradient(0, 0, 710, 400, c2, c1, X_AXIS); 
        updateAndDrawStars();
        removeStarsOffScreen();
        addNewStars();
    }

    //moon spins
    push();
    translate(50, 50);   
    rotate(moonAngle);
    imageMode(CENTER);
    image(moonImg, 0, 0, 50, 50);
    pop();
    moonAngle+=.05;
   
    noStroke();
    updateAndDrawBuildings();
    removeBuildingsOffScreen();
    addNewBuildings();

    //facts cycle
    push();
    fill(255);
    textAlign(CENTER);
    textSize(9);
    textFont("Georgia");
    text(facts[index], width/2, 50);
    pop();
}

//gradient for new background
function setGradient(x, y, w, h, c1, c2, axis) {
  noFill();
    // Left to right gradient
    for (let i = x; i <= x + w; i++) {
      let inter = map(i, x, x + w, 0, 1);
      let c = lerpColor(c1, c2, inter);
      stroke(c);
      line(i, y, i, y + h);
    }
  }

function updateAndDrawBuildings(){
    for(var i=0; i < buildingsShowing.length; i++){
        buildingsShowing[i].move();
        buildingsShowing[i].draw();
    }

}

function removeBuildingsOffScreen(){
    var buildingsToKeep = [];
    for (var i = 0; i < buildingsShowing.length; i++){
        if (buildingsShowing[i].x+20 > 0) {
            buildingsToKeep.push(buildingsShowing[i]);
        }
    }
    buildingsShowing = buildingsToKeep; // remember showing buildings
}

function addNewBuildings(){
    counter+=1;
    if (counter % 65 == 0){
        buildingsShowing.push(makeBuildings(width, 0));
    }
}

//building object
function makeBuildings(bx, by){
    var buildings = {x:bx, y:by, 
        breadth: 50,
        nFloors: round(random(2,8)),
        bColor: random(50,125),
        speed: -1.0,
        move: buildingsMove,
        draw: drawBuildings }
    return buildings;

}

//building characteristics
function drawBuildings(){
    var floorHeight = 20;
    var bHeight = this.nFloors * floorHeight; 
    fill(this.bColor); 
    push();
    translate(this.x, height);
    noStroke();
    rect(0, -bHeight, this.breadth, bHeight);
    for (var i = 0; i < this.nFloors; i++) {
        fill(mouseY/height*200);
        rect(5, -15 - (i * floorHeight), this.breadth - 10, 10);
    }
    pop();

}

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


//stars 
function updateAndDrawStars(){
    for (var i = 0; i < starsShowing.length; i++) {
        starsShowing[i].move();
        starsShowing[i].draw();
    }
}

function removeStarsOffScreen(){
    var starsToKeep = [];
    for (var i = 0; i < starsShowing.length; i++){
        if (starsShowing[i].starsX + 10 > 0) {
            starsToKeep.push(starsShowing[i]);
        }
    }
    starsShowing = starsToKeep;
}

function addNewStars(){
  starsCounter+=1;
    if (starsCounter % 5 == 0){
        starsShowing.push(makeStars(random(width), random(height)));
    }
}

//stars object
function makeStars(sx, sy){
    var s = {starsX: sx,
             starsY: sy,
             starsSpeed: -1,
             move: starsMove,
             draw: starsDraw}
    return s;
}

function starsMove(){
    this.starsX += this.starsSpeed;
}

function starsDraw(){
    fill(255);
    noStroke(); 
    circle(this.starsX, this.starsY, random(1,2));
}



//click on moon to flip through facts
function mousePressed(){
    if (mouseX<75&mouseX>25&&mouseY<75&&mouseY>25){
        index = floor(random(facts.length));
        if (index == facts.length) {
            index = 0;
        }
    }
}

Final Project: Iceberg

sketchDownload

// ICE VAR
var terraine = [];          // array for ice terraine y coordinates
var noiseParam = 0;         // x value of noise func
var noiseStep = .02;        // how much x increases by
var icesize = noiseStep*2500;

// OBJECT VAR
var washer;
var handwasher;
    var bubble;
var bubs = [];
var waterbottle;
var reusebottle;
var car;
var bus;
var shoponline;
var shoplocal;

var allobj = [];            // holds all objects once they are created
var len;                    // length of allobj array
var n = 0;                  // initial spot in allobj array
var q;
var isMouseClicked = -1; // boolean for click

// AUDIO VAR
var waterdrop;  
var watersplash;      


// OBJECT FUNCTIONS
function makeWasher(cx, cy) {
    washer = { x: cx, 
               y: cy,
               show: drawWasher,
               melt: 4,
               txt: "Use electric washer" }
    return washer;
}

function makeHandwasher(cx, cy) {
    for (var i=0; i<30; i++) {
        bubx = random(-35, 35);
        buby = -random(-.5, 3)*i;
        var bub = makeBubble(bubx, buby);
        bubs.push(bub);
    }
    handwasher = { x: cx, 
                   y: cy,
                   show: drawHandwasher,
                   melt: 1,
                   txt: "Hand-wash clothing"  }
    return handwasher;
}

function makeBubble(bubx, buby) {;
    bubble = {x: bubx,
              y: buby,
              sz: random(2, 6),
              show: drawBubble }
    return bubble;
}

function makeWaterbottle(cx, cy) {
    waterbottle = {x: cx, 
                   y: cy, 
                   show: drawWaterbottle,
                   melt: 3,
                   txt: "Plastic water bottle"}
    return waterbottle;
}

function makeReusebottle(cx, cy) {
    reusebottle = {x: cx, 
                   y: cy, 
                   show: drawReusebottle,
                   melt: 1,
                   txt: "Reusable water bottle"}
    return reusebottle;
}

function makeCar(cx, cy) {
    car = {x: cx, 
           y: cy, 
           show: drawCar,
           melt: 5,
           txt: "Drive a car"}
    return car;
}

function makeBus(cx, cy) {
    bus = {x: cx, 
           y: cy, 
           show: drawBus,
           melt: 1,
           txt: "Take public transportation"}
    return bus;
}

function makeOnline(cx, cy) {
    shoponline = {x: cx, 
           y: cy, 
           show: drawOnline,
           melt: 10,
           txt: "Shop online"}
    return shoponline;
}

function makeLocal(cx, cy) {
    shoplocal = {x: cx, 
           y: cy, 
           show: drawLocal,
           melt: 1,
           txt: "Shop local"}
    return shoplocal;
}


// PRELOAD FOR AUDIO FILES
function preload() {
    waterdrop = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/splash.wav");
    watersplash = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/12/bigsplash.mp3");
}

// SETUP
function setup() {
    createCanvas(400, 400);
    strokeWeight(2);
    rectMode(CENTER);
    textAlign(CENTER);
    textFont('Georgia');
    textSize(13);
    useSound();

    // fill terraine array w coordinates for ice:
    for (var i=0; i<icesize; i++) {
        var n = noise(noiseParam);      // n is between 0 and 1
        var value = map(n, 0, 1, height/3, height);     // draws onto canvas nicely
        terraine.push(value);           // value is the y coordinate at x=i
        noiseParam += noiseStep;
    }

    // create objects:
    washer = makeWasher(125, 100);
    handwasher = makeHandwasher(275, 100);
    waterbottle = makeWaterbottle(265, 100);
    reusebottle = makeReusebottle(135, 100);
    car = makeCar(125, 100);
    bus = makeBus(275, 100);
    shoponline = makeOnline(290, 100);
    shoplocal = makeLocal(115, 100);

    allobj = [washer, handwasher, 
              reusebottle, waterbottle, 
              car, bus, 
              shoplocal, shoponline];
    len = allobj.length;
}

// SOUND SETUP
function soundSetup() { // setup for audio file
    waterdrop.setVolume(0.5);
    watersplash.setVolume(0.5);
}


// DRAW
function draw() {

    // blue sky:
    background(100, 175, 240);

    // ice:
    drawIce();

    // it melts:
    meltIce();

    // draw objects:
    if (terraine.length > 1) {
        q = n%(len);        // loops through array by 2s
        allobj[q].show();
        allobj[q+1].show();
    }
}

// WHEN USER CLICKS
function mousePressed() {
    let onObj = checkClick();
    if (onObj == true) {
        isMouseClicked = -isMouseClicked;
        n += 2;                 // loops through array by 2s
        isMouseClicked = -isMouseClicked;
    }

}

function checkClick() {
    if (mouseX>75 & mouseX<175 && mouseY>50 && mouseY<150) {
        meltMore(allobj[q]);
        return true;
    }
    if (mouseX>225 & mouseX<325 && mouseY>50 && mouseY<150) {
        meltMore(allobj[q+1]);
        return true;
    }
}


// DRAW ICE
function drawIce() {
    fill(255);
    stroke(0);
    strokeWeight(1);
    beginShape();
    vertex(-5, height);
    vertex(-5, terraine[0]);
    for (var j=0; j<terraine.length-1; j++) {
        vertex(j*5, terraine[j]);
    }
    vertex((terraine.length-1)*icesize, terraine[terraine.length]);
    vertex((terraine.length-1)*5, height);
    endShape();

    // check if completely melted:
    checkIce();
}

// MELT ICE constantly
function meltIce() {
    // when ice is melted, 'game' over
    if (terraine.length == 1) { return }
    // as ice melts, water drop audio is played
    if (frameCount%250==0) {
        terraine.pop();
        waterdrop.play();
    }
}

// MELT MORE! when environmentally more harmful choice is picked
function meltMore(obj) {
    for (var k=0; k<obj.melt; k++) {
        terraine.pop();
    }
    if (obj.melt == 1) { waterdrop.play() }
    else { watersplash.play() }
}

// CHECK IF COMPLETELY MELTED
function checkIce() {
    if (terraine.length <= 1) {
        rect(width/2, height/2, 350, 350);
        textAlign(CENTER);
        textSize(35);
        fill(0);
        text("Oh No!", width/2, 150);
        textSize(16);
        fill(150, 0, 0);
        text("Looks like your choices caused global warming.", width/2, 175);
        textSize(20);
        fill(0);
        text("Next time, try to make better choices.", width/2, 215);
        textSize(13);
        text("You were already trying to make good choices?", width/2, 300);
        text("You picked the best options that were avaiable to you?", width/2, 325);
        textSize(18);
        fill(150, 0, 0);
        text("Have better options next time I guess.", width/2, 350);
        textSize(11);
        noStroke();
        fill(255);
        text("Refresh this page for another try!", width/2, 390);
        noLoop();
    }
}

// DRAW OBJECTS:
// washer
function drawWasher() {
    push();
    translate(this.x, this.y);

    fill(220);
    square(0, 0, 100, 5);

    fill(150);
    circle(0, 0, 75);

    // water in washer:
    noStroke();
    fill(75, 125, 225);
    beginShape();
    vertex(-30, 0);
    vertex(-30, 0);
    curveVertex(-24, 2);
    curveVertex(-18, 0);
    curveVertex(-12, 2);
    curveVertex(-6, 0);
    curveVertex(0, 2);
    curveVertex(6, 0);
    curveVertex(12, 2);
    curveVertex(18, 0);
    curveVertex(24, 2);
    vertex(30, 0);
    curveVertex(26, 16);
    curveVertex(15, 26);
    curveVertex(0, 30);
    curveVertex(-15, 26);
    curveVertex(-26, 16);
    vertex(-30, 0);
    vertex(-30, 0);
    endShape();

    // door partially see-through:
    stroke(0);
    fill(175, 200, 255, 175);
    circle(0, 0, 60);

    // glare on glass door
    noStroke();
    push();
    rotate(radians(40));
    fill(200, 215, 255);
    ellipse(0, -15, 30, 5);
    ellipse(0, -20, 15, 3);
    pop();

    // bottons + stuff

    fill(200, 0, 0);
    circle(40, -40, 3);
    fill(75);
    circle(35, -40, 3);
    circle(30, -40, 3);
    fill(150);
    circle(35, -33, 7);

    // text
    fill(0);
    text(this.txt, 0, 62);

    pop();
}

// handwash basin
function drawHandwasher() {
    push();
    translate(this.x, this.y);

    // basin
    fill(200);
    quad(-50, 0, 50, 0, 35, 40, -35, 40);
    arc(0, 0, 100, 25, 0, PI);
    arc(0, 0, 100, 15, PI, 2*PI);

    // clothes
    noStroke();
    fill(58, 101, 74);
    quad(-30, -7, -15, -8, -15, 10, -32, 8);
    fill(200, 100, 150);
    quad(-20, -8, -7, -9, -5, 10, -25, 10);

    // water
    fill(100, 140, 240);
    beginShape();
    vertex(-45, 6);
    vertex(-45, 5);
    curveVertex(-36, 5);
    curveVertex(-27, 6);
    curveVertex(-18, 5);
    curveVertex(-9, 6);
    curveVertex(0, 5);
    curveVertex(9, 6);
    curveVertex(18, 5);
    curveVertex(27, 6);
    curveVertex(36, 5);
    vertex(45, 5);
    curveVertex(29, 10);
    curveVertex(0, 12);
    curveVertex(-29, 10);
    vertex(-45, 5);
    vertex(-45, 6);
    endShape();

    // suds + bubbles
    fill(200, 215, 255);
    stroke(100, 140, 240);
    strokeWeight(.25);
    for (var i=0; i<30; i++) {
        bubs[i].show()
    }

    // text
    fill(0);
    strokeWeight(1);
    text(this.txt, 0, 62);
    pop();
}

// bubble
function drawBubble() {
    circle(this.x, this.y, this.sz);
}

// plastic bottle
function drawWaterbottle() {
    // cap
    stroke(0);
    strokeWeight(1);
    fill(240);
    rect(this.x, this.y-45, 15, 10);

    // body of bottle
    fill(225, 230, 255);
    arc(this.x, this.y-18, 42, 47, radians(290), radians(250), OPEN);
    beginShape();
    vertex(this.x+21, this.y-15);
    vertex(this.x+21, this.y-15);
    curveVertex(this.x+20, this.y+6);
    curveVertex(this.x+23, this.y+30);
    curveVertex(this.x+19, this.y+50);
    curveVertex(this.x, this.y+50);
    curveVertex(this.x-19, this.y+50);
    curveVertex(this.x-23, this.y+30);
    curveVertex(this.x-20, this.y+6);
    vertex(this.x-21, this.y-15);
    vertex(this.x-21, this.y-15);
    endShape();

    // lines on cap
    stroke(190);
    for (var l=0; l<14; l+=2) {
        line(this.x-6 + l, this.y-41, this.x-6 + l, this.y - 47);
    }

    // wrapper
    fill(75, 125, 200);
    noStroke();
    beginShape();
    vertex(this.x+21, this.y-15);
    vertex(this.x+21, this.y-15);
    vertex(this.x+20, this.y-2);
    vertex(this.x+20, this.y+8);
    vertex(this.x+22, this.y+20);
    vertex(this.x-22, this.y+20);
    vertex(this.x-20, this.y+8);
    vertex(this.x-20, this.y-2);
    vertex(this.x-21, this.y-15);
    vertex(this.x-21, this.y-15);
    endShape();

    // details
    stroke(190, 210, 250);
    noFill();
    arc(this.x, this.y-18, 30, 47, radians(-65), radians(-10));
    arc(this.x, this.y-18, 10, 47, radians(-80), radians(-20));
    arc(this.x, this.y-18, 10, 47, radians(200), radians(260));
    arc(this.x, this.y-18, 30, 47, radians(190), radians(245));
    arc(this.x, this.y+23, 70, 9, radians(10), radians(170));
    arc(this.x, this.y+30, 60, 10, radians(10), radians(170));
    arc(this.x, this.y+37, 55, 11, radians(10), radians(170));

    //wrapper details
    strokeWeight(2);
    stroke(90, 145, 220);
    beginShape();  
    vertex(this.x+15, this.y+10);
    vertex(this.x+15, this.y+10);
    curveVertex(this.x+10, this.y);
    curveVertex(this.x-8, this.y-5);
    vertex(this.x-15, this.y-10);
    vertex(this.x-15, this.y-10);
    endShape();
    beginShape();  
    vertex(this.x+15, this.y+10);
    vertex(this.x+15, this.y+10);
    curveVertex(this.x+8, this.y+5);
    curveVertex(this.x-10, this.y);
    vertex(this.x-15, this.y-10);
    vertex(this.x-15, this.y-10);
    endShape();

    // text
    fill(0);
    strokeWeight(1);
    text(this.txt, this.x, this.y+62);
}

// reusable bottle
function drawReusebottle() {
    stroke(0);
    strokeWeight(1);   

    // water
    fill(100, 155, 230);
    stroke(90, 145, 220);
    beginShape();
    vertex(this.x-23, this.y-18);
    vertex(this.x-23, this.y-18);
    curveVertex(this.x-17, this.y-19);
    curveVertex(this.x-10, this.y-18);
    curveVertex(this.x, this.y-19);
    curveVertex(this.x+10, this.y-18);
    curveVertex(this.x+17, this.y-19);
    vertex(this.x+23, this.y-18);
    vertex(this.x+23, this.y-18);
    endShape();
    noStroke();
    beginShape();
    vertex(this.x+23, this.y-18);
    vertex(this.x+23, this.y-18);
    curveVertex(this.x+24, this.y+30);
    curveVertex(this.x+19, this.y+50);
    curveVertex(this.x-19, this.y+50);
    curveVertex(this.x-24, this.y+30);
    vertex(this.x-23, this.y-18);
    vertex(this.x-23, this.y-18);
    endShape();

    // body of bottle
    noStroke();
    fill(200, 100, 150, 100);
    arc(this.x, this.y-18, 46, 45, radians(185), radians(-5), OPEN);
    noFill();
    stroke(0);
    arc(this.x, this.y-18, 46, 45, radians(290), radians(0), OPEN);
    arc(this.x, this.y-18, 46, 45, radians(180), radians(250), OPEN);
    fill(200, 100, 150, 100);
    beginShape();
    vertex(this.x+23, this.y-20);
    vertex(this.x+23, this.y-20);
    curveVertex(this.x+24, this.y+30);
    curveVertex(this.x+19, this.y+50);
    curveVertex(this.x-19, this.y+50);
    curveVertex(this.x-24, this.y+30);
    vertex(this.x-23, this.y-20);
    vertex(this.x-23, this.y-20);
    endShape();

    // lines on body of bottle
    stroke(190, 90, 140, 200);
    for (var u=0; u<12; u+=1) {
        line(this.x-15, this.y-15+(u*5), this.x-22, this.y-15+(u*5));
    }

    // stickers!
    // smiley face
    stroke(0);
    strokeWeight(.5);
    fill(250, 225, 0);
    push();
    translate(this.x+16, this.y+20);
    rotate(radians(32));
    arc(0, 0, 20, 20, radians(8), radians(287), OPEN);
    arc(0, 0, 13, 13, radians(10), radians(170));
    strokeWeight(1);
    line(-2, 0, -2, -2);
    line(2, 0, 2, -2);
    pop();

    // flower
    push();
    fill(225, 125, 255);
    translate(this.x+9, this.y+36);
    rotate(radians(-20));
    let rot = 0;
    for (var r=0; r<7; r++) {
        push();
        rotate(radians(rot));
        ellipse(6, 0, 8, 4);
        pop();
        rot += 360/7;
    }
    fill(175, 200, 100);
    circle(0, 0, 5);
    pop();

    // cap
    noFill();
    strokeWeight(2);
    stroke(200);
    arc(this.x+14, this.y-50, 29, 25, radians(200), radians(90));
    stroke(0)
    strokeWeight(1);
    arc(this.x+14, this.y-50, 28, 23, radians(200), radians(90));
    arc(this.x+14, this.y-50, 33, 27, radians(200), radians(90));
    fill(200);
    rect(this.x, this.y-52, 15, 5, 2);
    rect(this.x, this.y-45, 25, 15, 2);
    stroke(225);
    strokeWeight(6);
    line(this.x, this.y-40, this.x, this.y-45);
    line(this.x-8, this.y-40, this.x-8, this.y-45);
    line(this.x+8, this.y-40, this.x+8, this.y-45);
    stroke(0);
    strokeWeight(1);
    rect(this.x, this.y-38, 28, 2, 3);

    // text
    fill(0);
    text(this.txt, this.x, this.y+62);
}

// car
function drawCar() {
    let carcol = color(150, 0, 0);
    let detailcol = color(100, 0, 0);

    // exhaust pipe
    fill(120);
    noStroke();
    rect(this.x+60, this.y+27, 5, 3);

    // body of car
    stroke(detailcol);
    fill(carcol);
    beginShape();
    vertex(this.x-40, this.y);
    vertex(this.x-40, this.y+1);
    curveVertex(this.x-20, this.y-22);
    curveVertex(this.x+25, this.y-22);
    curveVertex(this.x+48, this.y);
    curveVertex(this.x+57, this.y+3);
    curveVertex(this.x+58, this.y+10);
    curveVertex(this.x+59, this.y+25);
    curveVertex(this.x+45, this.y+30);
    curveVertex(this.x-60, this.y+30);
    curveVertex(this.x-65, this.y+8);
    vertex(this.x-40, this.y+1);
    vertex(this.x-40, this.y+1);
    endShape();

    // windows
    stroke(150, 160, 200);
    fill(150, 160, 200);
    beginShape();
    vertex(this.x-35, this.y+1);
    vertex(this.x-35, this.y+1);
    curveVertex(this.x-15, this.y-19);
    curveVertex(this.x+20, this.y-19);
    curveVertex(this.x+40, this.y-1);
    curveVertex(this.x+30, this.y+1);
    vertex(this.x-35, this.y+1);
    vertex(this.x-35, this.y+1);
    endShape();
    fill(carcol);
    stroke(carcol);
    strokeWeight(4);
    line(this.x+2, this.y+2, this.x+2, this.y-22);
    strokeWeight(2);
    line(this.x+33, this.y+2, this.x+33, this.y-16);

    // lights
    noStroke();
    fill(230, 230, 175);
    push();
    translate(this.x-62, this.y+9);
    rotate(radians(-35));
    ellipse(0, 0, 10, 7);
    ellipse(-7, 1, 3, 3);
    pop();
    rect(this.x+57, this.y+21, 5, 7, 2);
    rect(this.x+57, this.y+15, 2, 4, 2);

    // handles 
    stroke(detailcol);
    line(this.x-5, this.y+7, this.x, this.y+7);
    line(this.x+4, this.y+7, this.x+9, this.y+7);

    // wheels
    fill(25);
    stroke(0);
    ellipse(this.x+35, this.y+30, 25, 25);
    ellipse(this.x-40, this.y+30, 25, 25);
    let wrot = 0;
    for (var j=0; j<5; j++) {
        push();
        translate(this.x+35, this.y+30);
        rotate(radians(wrot));
        line(-10, 0, 10, 0);
        pop();
        push();
        translate(this.x-40, this.y+30);
        rotate(radians(wrot));
        line(-10, 0, 10, 0);
        pop();
        wrot+=360/10;
    }

    // text
    fill(0);
    strokeWeight(1);
    text(this.txt, this.x, this.y+62);
}

// bus
function drawBus() {
    let buscol = color(50, 75, 255);
    let busdetails = color(20, 40, 200);

    // exhaust pipe
    fill(120);
    noStroke();
    rect(this.x+50, this.y-27, 3, 5);

    // bus body
    fill(buscol);
    stroke(busdetails);
    strokeWeight(2);
    rect(this.x, this.y, 120, 50, 2);

    //details
    line(this.x-45, this.y+8, this.x+55, this.y+8);
    strokeWeight(1);
    line(this.x-45, this.y+10, this.x+55, this.y+10);

    // windows
    stroke(150, 160, 200);
    strokeWeight(2);
    fill(150, 160, 200);
    rect(this.x-57, this.y-5, 5, 25);
    for (var r=0; r<10; r++) {
        rect(this.x-41+(10*r), this.y-3, 7, 15);
    }

    // wheels
    fill(25);
    stroke(0);
    ellipse(this.x+38, this.y+30, 15, 15);
    ellipse(this.x+22, this.y+30, 15, 15);
    ellipse(this.x-45, this.y+30, 15, 15);
    ellipse(this.x-29, this.y+30, 15, 15);
    strokeWeight(1);
    let wrot = 0;
    for (var j=0; j<5; j++) {
        push();
        translate(this.x+38, this.y+30);
        rotate(radians(wrot));
        line(-7, 0, 7, 0);
        pop();
        push();
        translate(this.x+22, this.y+30);
        rotate(radians(wrot));
        line(-7, 0, 7, 0);
        pop();
        push();
        translate(this.x-45, this.y+30);
        rotate(radians(wrot));
        line(-7, 0, 7, 0);
        pop();
        push();
        translate(this.x-29, this.y+30);
        rotate(radians(wrot));
        line(-7, 0, 7, 0);
        pop();
        wrot+=360/10;
    }

    // lights
    noStroke();
    fill(230, 230, 175);
    ellipse(this.x-58, this.y+15, 7, 10);
    rect(this.x-59, this.y+15, 5, 10, 3);
    rect(this.x+57, this.y+21, 5, 7, 2);

    // text
    fill(0);
    strokeWeight(1);
    text(this.txt, this.x, this.y+62);
}

// plane
function drawOnline() {
    fill(200);
    stroke(0);

    push();
    translate(this.x, this.y)
    //back wing
    arc(-9, 10, 150, 16, radians(90), radians(270));
    push();
    translate(-25, 13);
    rotate(radians(31));   
    arc(-6, 0, 40, 14, radians(270), radians(90));
    circle(-6, 0, 14);
    pop();
    //small tail wing back
    arc(55, 35, 45, 10, radians(90), radians(270));
    push();
    rotate(radians(31));
    //body
    arc(10, 0, 150, 40, radians(175), radians(357));
    rotate(radians(-6));
    arc(10, 0, 150, 40, radians(4), radians(185));
    noStroke();
    ellipse(-60, -3, 10, 14);
    stroke(0);
    line(-65, -1, -65, -6);
    rotate(radians(6));
    // windows
    strokeWeight(.5);
    fill(150, 160, 200);
    quad(-61, -6, -65, -1, -40, -1, -40, -6);
    for (var r=0; r<10; r++) {
        ellipse((10*r)-30, -7, 6, 7);
    }
    pop();
    //back fin thingy
    stroke(0);
    fill(200);
    push();
    translate(52, 13);
    rotate(radians(22));
    beginShape();
    vertex(0, 0);
    vertex(0, 0);
    curveVertex(15, -3);
    vertex(30, -15);
    vertex(30, 16);
    vertex(30, 16);
    endShape();
    pop();
    //small tail wing front
    arc(70, 35, 45, 10, radians(260), radians(100));
    //front wing
    arc(12, 8, 175, 20, radians(220), radians(0));
    arc(12, 8, 175, 15, radians(0), radians(50));
    push();
    translate(25, 13);
    rotate(radians(31));  
    arc(-10, 0, 40, 14, radians(270), radians(90));
    circle(-10, 0, 14);
    pop();  

    // text
    fill(0);
    strokeWeight(1);
    text(this.txt, 0, 62);    
  
    pop();
}

// store
function drawLocal() {
    square(this.x, this.y, 100);
    noFill();
    push();
    translate(this.x, this.y);

    // building
    fill(150, 170, 150);
    stroke(0);
    rect(0, 15, 100, 70);
    stroke(125, 145, 125);
    for(var l=0; l<11; l++) {
        line(-49, -15+(l*6), 49, -15+(l*6));
    }

    //roof
    stroke(0);
    fill(150, 100, 50);
    quad(-60, -20, 60, -20, 50, -50, -50, -50);

    //door
    stroke(15, 75, 15);
    fill(15, 75, 15);
    rect(0, 37, 16, 25);
    arc(0, 25, 16, 30, radians(180), radians(0));
    stroke(0);
    line(7, 30, 2, 30);


    //windows
    strokeWeight(.5);
    fill(150, 160, 200);
    rect(-30, 15, 30, 40);
    rect(30, 15, 30, 40);
    for (var m=0; m<3; m++) {
        line(-38+(m*8), 35, -38+(m*8), -5);
        line(38-(m*8), 35, 38-(m*8), -5);
        line(-45, 5+(m*10), -15, 5+(m*10));
        line(45, 5+(m*10), 15, 5+(m*10));
    }

    //signs in windows
    fill(180);
    line(15, 15, 30, 25);
    line(45, 15, 30, 25);
    rect(30, 25, 15, 8);
    line(-15, 15, -30, 25);
    line(-45, 15, -30, 25);
    rect(-30, 25, 15, 8);
    noStroke()
    fill(150, 0, 0);
    textAlign(CENTER);
    textSize(4);
    text('OPEN!', -30, 26);
    fill(0);
    textSize(3);
    text('Hours:', 28, 25);
    stroke(0);
    line(26, 26, 35, 26);
    line(26, 27, 35, 27);
    fill(100);

    // text
    fill(0);
    textSize(13);
    strokeWeight(1);
    text(this.txt, 0, 62);

    pop();
}


My program depicts an iceberg that is melting, and presents the player with common choices that people have to make on a regular basis. The canvas reacts to the decisions that the player makes. The choices all have varying environmental impacts, and they correspond to the melting of the iceberg. If the player picks the environmentally more harmful choice, more of the ice falls into the ocean. If the player chooses an environmentally friendly option, the ice continues to melt at the same rate. This interactive program is not a winnable game. The ice will always melt. As it melts, a splash sound is played. **

I chose this design as my project because I wanted to highlight the way that industries pressure individuals to make good personal choices while producing products that only cause more damage. Individual choices will not stop climate change. To help preserve our planet, we need to rethink the entire system of the global enocomy.

The program must use a local server to run, and two sound files should be included in the folder to make the splashing noises when the ice melts. There are instructions included on the opening page.

I am really happy with how this project turned out. I only have a few choice that are presented to the player, but my goal was to make at least four sets of options, and that is what I have done. I screen recorded a majority of my process, and I have included a time-lapsed video at the bottom of this post.

** for the WordPress upload, my splash sound file was not working so I used a substitute file with a similar sound.

Time lapse of my process

Final Project 14

Game Code

let noiseY;
let noiseSpeed = 0.07;
let noiseHeight = 20;
let bubbles = [];
let enemies = [];
let score = 0;






function setup() {
    createCanvas(600, 600);
    //background(10, 50, 255);
    noiseY = height * 3.2 / 4;
    
//}

    
    // spawn the enemies or in this case trash/waste
    for (let e = 0; e < 15; e++) {
        let enemy = {
            x: random(0, width),
            y: random(-600, 0),
            c: color(random(255), random(255), random(255))
        };
        enemies.push(enemy);
    }

}

function drawOceanWaves() {
    // draw ocean waves
    for (let i = 0; i < 4; i++) {
        let offsetY = i * 90;
        noFill();
        //fill('blue')
        stroke(255, 20);
        strokeWeight(height / 2);
        beginShape();
        curveVertex(2, height / 2);
        for (let x = 0; x < width; x += 40) {
            let y = noise(frameCount * noiseSpeed + x + i) * noiseHeight + noiseY + offsetY;
            curveVertex(x, y);
        }
        curveVertex(width, height / 4);
        endShape();
    }
}








function draw() {
    

    background(10, 20, 200);

    // draw ocean waves
    
    drawOceanWaves ();

    fill('blue');
    strokeWeight(0);
    // draw player
    rectMode(CENTER);
    ellipse(mouseX, height - 20, 20);


    // draw bubbles update
    for (let bubble of bubbles) {
        bubble.y -= 15;
        circle(bubble.x, bubble.y, 20);
        //fill('blue');
    }
        fill(255);

    // draw enemies update
    for (let enemy of enemies) {
        enemy.y += 4;
        fill(enemy.c);
        square(enemy.x, enemy.y, 40);
        if (enemy.y > height) {
            fill(255);
            text("Game Over!", width / 2.5, height / 2);
            noLoop();
        }
    }

    // collisions
    for (let enemy of enemies) {
        for (let bubble of bubbles) {
            if (dist(enemy.x, enemy.y, bubble.x, bubble.y) < 80) {
                enemies.splice(enemies.indexOf(enemy), 1);
                bubbles.splice(bubbles.indexOf(bubble), 1);
                let newEnemy = {
                    x: random(0, width),
                    y: random(-800, 0),
                    c: color(random(255), random(255), random(255))
                };
                enemies.push(newEnemy);
                // each hit counts as 1
                score += 1;
            }
        }
    }
    fill(255);
    textSize(30);    
    text(score, 20, 30);

}
    // shoot bubbles
function keyPressed() {
    if (key ===  " ") {
        let bubble = {
        x: mouseX,
        y: height - 50,
    };
    bubbles.push(bubble);

    }


    
}

So originally I was going to create an image with trash being left out in the ocean to represent ocean pollution. I dropped that idea since I felt like it was too simple and I couldn’t run a local server in the past. I finally decided that I wanted to code a game. The idea was to represent squares as waste being thrown in the ocean and there’s a player who has to shoot down as many waste before it reaches past the canvas. I re wrote all of my code and started from scratch. I watched tutorials on youtube and looked up on google on how to use for of loop on JavaScript. When coding the game I had a lot of issues especially with the text and textsize syntax. I found out later that my brackets were off and were interfering with my other parameters. I finally got the game to work and I’ve never felt this satisfied with myself since coding for me is a whole different language and a very difficult skill to learn. How the game works is that you have to shoot as many squares (trash) before it reaches past the canvas. You drag MouseX to move around the canvas. There is also a score on the top left. Each hit counts as 1. You press spacebar to shoot the bubbles. If the squares go past the canvas “Game Over!”. If I had more time to work on this game I would want to add a healthbar for the player or randomize the speed of the squares. Its a simple game but I am proud of the results.