Author: Geode

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

Project-10-Sonic Story

sketch

//Tim Nelson-Pyne
//tnelsonp@andrew.cmu.edu
//section C
//Assignment-10-Project
//a sound bomb drops from the sky as a zombie rises from the grave
//the sound bomb makes a musical explosion and the zombie dances to the beat

var noteImg
var explosionImg
var danceGifImg
var danceGif
var fall
var explosion
var tam
var beat


var i = 0;


function preload() {
    noteImg = loadImage("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/eighthNote.png");
    explosionImg = loadImage("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/musicExplosion.png");
    danceGifImg = loadImage("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/Mojo_the_zombie.gif");  
    fall = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/falling.wav");
    explosion = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/explosion.wav");
    tam = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/Tam95bpm.wav");
    beat = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/Beat189bpm.wav")
    danceGif = createImg("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/Mojo_the_zombie.gif");
    danceGif.hide();
}

function setup() {
    createCanvas(480, 600);
    useSound();
    background(255);
    frameRate(60);
}

function soundSetup() { 
    
}


function draw() {
    //adds one to i each frame
    i ++;
    background(3, 0, 50);
    imageMode(CENTER);
    //makes the background flash multi colors when the sound bomb drops
    if(i >= 600 & i % 30 < 15) {
        fill(random(100, 255), random(100, 255), random(100,255));
        rect(0,0, 480, 400);
    }
    fill(23, 150, 20);
    noStroke();
    rect(0, 400, 480, 200);
    fill(100);
    rect(250, 325, 100, 150);
    //writes RIP on grave
    fill(0);
    textAlign(CENTER);
    text("RIP", 300, 375);
    //static zombie image rises from the grave
    if (i < 600){
        image(danceGifImg, 300, 700 - map(i, 0, 600, 0, 350), 400, 400);
        fill(23, 150, 20);
        rect(0, 500, 480, 100); 
    }
    //plays the cartoon falling noise and tambourine loop @ start
    if (i == 1) {
        fall.play();
        tam.play();
    }
    //displays the noteImg falling
    if (i < height - 25){
        image(noteImg, 100, i, 50, 50);
    }
    //when the noteImg hits the ground the explosion sound plays
    if (i == height - 25) {
        explosion.play();
    }
    //when the noteImg hits the ground the explosion image flashes
    if (i >= height - 25 & i % 30 < 15 && i < 800) {
        image(explosionImg, 100, height-150, 300, 300);
    }
    //a moment after the noteImg hits the groud the beat starts
    if (i == 600){
        beat.play();
    }
    //and the zombie dances
    if(i >= 600) {
        danceGif.show();
        danceGif.position(0,100);
    }
    //after the beat is over everything goes black
    if (i >= 1800) {
        danceGif.remove();
        fill(0);
        rect(0, 0, 480, 600);
        noLoop();
    }


    
}

Project 09 Portrait

sketch

//Tim Nelson-Pyne
//tnelsonp@andrew.cmu.edu
//section C
//Assignment-09-Project



var img;
var x = [];
var y = [];
    



function preload() {
    //loads the walking Images
    img = loadImage('https://i.imgur.com/gCoIwkQ.jpg');
    
}

function setup() {
    createCanvas(480, 480);
    img.resize(width, height);
    background(255);
    img.loadPixels();

    
}




function draw() {
    //ellipse width
    var w = 1;
    //change in ellipse width
    var dw = .8;
    
    for(var row = 0; row < width; row += 5) {
        for (var col = 0; col < height; col +=5) {
            //gets the color of the current pixel location
            var pix = img.get(col, row);
            //generates an inverse color reading of the image
            var invR = 255 - pix[0];
            var invG = 255 - pix[1];
            var invB = 255 - pix[2];
            noStroke();
            fill(invR, invG, invB);
            //draws the inverse image in background
            rect(col, row, 5, 5)
            fill(pix);
            //changes the width of ellipses
            w += dw;
            if (w > 6 || w < 1) {
                dw = - dw;
            }

            ellipse(col, row, w, 6);
        }
    }

    



noLoop();
}

LO 9

Asking the Neural Network to Imagine a Chimera

Ex.icon

This project consists of a combination of text, AI generated images, and screenshots that work together to explore the idea of a chimera. It is a sort of back and forth between human and machine that interrogates the differences between human perception and machine perception and the opportunities that either offer for imagination and also interrogation of the existing repertoire of ideas and images. I find this combination of written theory and imagery particularly compelling because unlike many artworks this allows the viewer to follow the thought process of the artist in a much more direct way. The text situates the images in the context of the thought process rather than assuming that the viewer has all of the prerequisite knowledge to know how to interpret them. This particular artist has very little information about them online so it is not really possible to do a comprehensive biography. However, their artist statement tells us that their work uses various forms of play to decode the mythology of dualisms built into society, and interrogate human existence within late capitalism and technology. They work across many mediums, but much of the work seems to be related to experience within digital spaces.

Artist Website:

https://ex-icon.com/

Project:

https://ex-icon.com/asking-the-neural-network-to-imagine

LO 8

Eyeo 2019 “Feeling at Home”
Lauren McCarthy

Lauren McCarthy is an artist, the creator of the p5.js library, and an associate professor at UCLA. According to her website her practice “examines social relationships in the midst of surveillance, automation, and algorithmic living”. In her lecture for eyeo she talks about a couple of her projects. These include a service that allows people to request to be followed by her for a day, a suite of smart-home devices called Lauren that she personally monitors and controls, and video of a series of dates in which she paid Mechanical Turk workers to watch her and give her live advice. I admire how her projects tend to be objectively hilarious, but also offer really novel ways of considering our relationship to technology. I also appreciate how within her talk she discusses a number of her works, but also ties them together as part of a larger narrative about her practice. She successfully avoids the artist talk becoming just a list of projects, but still gives us a good overview of her work.

https://lauren-mccarthy.com/

Lauren McCarthy’s Eyeo Festival Lecture
“Social Turkers” by Lauren McCarthy

Project 07

sketch

//Tim Nelson-Pyne
//tnelsonp@andrew.cmu.edu
//Section C
//Project-07-Composition With Curves

//size of hypocycloid
var a;
//number of cusps in the hypocycloid
var n;
//x coordinate of points on graph
var x;
//y coordinate of points on graph
var y;
//total number of points to generate
var nPoints;

function setup() {
  createCanvas(480, 480);
  background(0);
  nPoints = 1000;

  
}

function drawHypocycloid (a, n) {
  push();
  translate(240, 240);
  stroke(255, 0, 0);
  strokeWeight(0.2);
  //changes the fill color based on mouseX
  fill(map(mouseX, 0, 480, 0, 255), 0, map(mouseX, 0, 480, 0, 255));
  

  for (var i = 0; i <= nPoints; i++) {
    t = map(i, 0, 1000, radians(0), radians(13 * 360))
    //equation for x value of hypocycloid
    x = (a/n) * ((n-1) * cos(t) - cos((n-1)*t));
    //equation for y value of hypocycloid
    y = (a/n) * ((n-1) * sin(t) - sin((n-1)*t));
    //draws hypocycloid using elipses centered at points along the graph
    ellipse(x, y, map(abs(x), 0, 240, 0, 25), map(abs(y), 0, 240, 0, 25));
    
  }
  pop();
}

function draw() {
  background(0);
  //sets a based on mouseY
  a = map(mouseY, 0, 480, 20, 100);
  //sets n based on mouseX for first shape
  n = map(mouseX, 0, 480, HALF_PI, 5);
  //draw first shape
  drawHypocycloid(a, n);
  //sets n based on mouseX for second shape
  n = map(mouseX, 0, 480, -10, -HALF_PI);
  //draw second shape
  drawHypocycloid(a, n);

  
}

I created an interactive visualization of multiple hypocycloids.

LO 7

Fleshmap Listen

Fernanda Viegas and Martin Wattenburg

This data visualization maps the frequency of references to specific body-parts within different musical genres. I think this gives some interesting and entertaining insight into how the body is talked about in music. This data visualization probably required some type of AI to recognize and categorize words that refer to specific body parts. I think this is an example of data visualization being used creatively to get at an unusual question.

http://hint.fm/projects/listen/

LO 6: Random Access Music

by Nam Jun Paik

The 1963 installation “Random Access Music” by Nam Jun Paik consists of many strips of audiotape, containing found sounds, randomly arranged on a wall. In front of the wall is an open reel audio deck with the playback head detached so that the viewer can play the tape on the wall by moving the playback head along the strips of audiotape. Thus the viewer becomes the composer, changing the sound being played by how and where they move the playback head. The only explicitly random thing here is the arrangement of the audiotape, but the element of interactivity here takes the final product out of the control of the artist in much the same way that randomness does. The viewer doesn’t know what is on the tape so they have no way of making an informed decision on how to move the playback head, so the resulting sound that is played approaches randomness. I think this piece is a really cool early example of interactive artwork, and a creative use or mis-use of technology.

https://www.guggenheim.org/artwork/9536

“Random Access Music” by Nam Jun Paik, seen here in 2000 at the Guggenheim Museum

Project 06: Abstract Clock

For my abstract clock I chose to use a database of song lyrics that mention specific times of day. The clock breaks up the day into 886 equal units of time, the number of song lyrics in the data set, and displays each lyric one after another. The background color also changes with the time of day being referenced in the song. As a result the time measured by this clock is not the actual time of day, but rather the time of day represented within our popular musical cannon mapped to a real 24 hour day. Hours that are referenced more often last longer on this clock and those only mentioned a few times pass by quickly.

sketch

//Tim Nelson-Pyne
//tnelsonp@andrew.cmu.edu
//Section C
//Project-06-Abstract Clock



function preload() {
  //loads a .txt file that contains a large sampling of song lyrics 
  //that refer to specific times of day
  timeLyrics = loadStrings('https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/10/timeLyrics.txt')
}

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

function draw() {

  //gets the total amount of seconds that have ellapsed that day
  var s = second();
  var m = minute();
  var h = hour();
  m = m * 60
  h = h * 3600
  var totalS = m + h + s;
  

  var i = map(totalS, 0, 86400, 0, 886);
  i = round(i);
  
  //changes background color based on the time that the song lyrics are refering to
  if (i < 421 || i > 780) {
    //its nightime
    fill(0);
  }
  if (i >= 421 & i < 481) {
    //its 5am
    fill(10, 0, 50);
  }
  if (i >= 481 & i < 538) {
    //its 6am
    fill(141, 163, 152);
  }
  if (i >= 538 & i < 562) {
    //its 7 am
    fill(217, 133, 69);
  }
  if (i >= 562 & i < 595) {
    //its 8 am
    fill(249, 192, 107);

  }
  if (i >= 595 & i < 628) {
    //its 9 am
    fill(255, 230, 190);
  }
  if (i >= 628 & i < 631){
    //its 10 am
    fill(255, 255, 200);

  }
  if (i >= 631 & i < 722) {
    //its day
    fill(255);
  }
  if (i >= 722 & i < 747) {
    //its 5pm
    fill(255, 230, 190);
  }
  if (i >= 747 & i < 761) {
    //its 6pm
    fill(238, 108, 32);

  }
  if (i >= 761 & i <= 780) {
    //its 7pm
    fill(100, 15, 36);
  }
  
  textSize(15);
  noStroke();
  //redraws the background
  rect(0, 0, width, height);

  //changes the type color based on what the background color is
  if (i < 421 || i > 780) {
    fill(255);
  }
  else {
    fill(100);
  }

  //displays a song lyric
  //each lyric gets the same amount of time on screen
  //the lyrics repeat each day
  textAlign(CENTER);
  text(timeLyrics[i], 0, 10, width, height);
  
  
  
}

LO 05: Man Mask

LO 5

Man Mask

By Rachel Rossin

“Man Mask” is a VR piece by Rachel Rossin in which the viewer inhabits (literally is placed inside) a call of duty avatar. The piece takes the viewer on “a guided meditation through landscapes taken from the game Call of Duty: Black Ops, drained of violence and transformed into an ethereal dream world”. I think that the idea of taking assets and environments from a video game and recontextualizing them for a completely different effect is pretty interesting. It allows for commentary on the particular piece of media, but also the freedom to depart from it. This piece was created in part as a reaction to the artist’s own experience playing first person shooters and taking on a male avatar online in search for neutrality. I also think it is interesting how it places the viewer visibly inside the avatar, so you are more immersed in the character than in a third person view, but not really looking through the character’s eyes, rather from behind them.

http://rossin.co/

clip from installation