lannal-project-12

Download the zip file and run the index HTML. I could not upload my sketch onto WordPress because my canvas size is 1000 x 1000. Read below to see how to access my project.

Instructions on accessing the project: To view this project, you must download the zip file attached above. Once the file is downloaded, a zip file called “lannal-project-12” should appear. Open the folder and then open “sketch.js” to access the code behind it.

Because this is outside of WordPress and my code has implemented sound, you have to create a local server to have the sound file playback to successfully view the project, so follow the instructions below (taken from Lab Week 10).

1. Open a Terminal in OS X or a command window (cmd) in Windows.
2. Change your current directory to the directory you want to serve: Type cd path-to-your-directory (ex. cd Desktop/104final )
3. Type in Terminal:
   python -m SimpleHTTPServerOr if you are using Python 3, type:
   python -m http.server
4. Visit the URL http://localhost:8000 in your browser to test your sketch.

My project is a rendition of Patatap, but with global warming and the climate crisis as the concept.

How it works:

Press the enter key to change between color schemes – there are 5 different schemes which go from cool colors to warm colors – symbolizing global warming and rising temperatures.

Press any arrow key to play corresponding graphics and sounds:

The up arrow key = the decrease and destruction of coral reefs

The down arrow key = the transformation of ocean bubbles to pollution smoke

The left arrow key = the exponential increase in the consumption of plastic water bottles and the amount of plastic in the oceans and our waste.

The right arrow key = the rising ocean water level due to the climate crisis.

In my body of work as an artist, I explore many concepts, but environmental awareness is one of the concepts I revisit pretty often. I was very intrigued by the Patatap project when we were introduced to it in a lecture, and I wanted to create my own version of it, combining with a discussion of the climate crisis. Coding this project in these past 2 weeks was a good challenge for me as it combined all the topics we learned throughout the semester: arrays, objects, for loops, if statements, images, sounds, noise, etc. I really want to expand on this project later and continue working on this, such as making it its own website, maybe as another project for another class.

As global warming progresses there is more consumption of plastic water bottles and more plastic in the ocean (depicted as the increase in bottles form a wave).

As global warming progresses, these ocean bubbles transform into pollution smoke from industrial technology.

As global warming progresses, the coral reefs in the oceans are disappearing and their numbers are decreasing.

As global warming progresses, the water level of the oceans are rising.

Katie Rice and Luke Cormican // Skadi Comic // 2008 – 2018

This project was a comic that has its own website and many storylines created over the years. I found out about this project after researching online for projects that were similar to my final project idea, but I could barely find any. This one stood out to me because this comic has a choose-your-own-adventure storyline, which most comic stories that are out there are not. Readers can click on the poll choices that are given below the comic page, or sometimes the readers can click on a sign in the comic itself that will help direct the story plot. I appreciate this project because of this interactive idea that not many comics do, however, for my project, I definitely want to step out of the illustration genre and more into animation or graphics.

Charlie Brooker and Annabel Jones // Black Mirror: Bandersnatch // 2018

I believe movies, music, games, etc. are all works of art and are long-term projects made by artists, so I’m including Bandersnatch in my Looking Outwards because it is the main influence for my final project. Black Mirror: Bandersnatch is a movie that transformed into a live-action interactive environment with a choose-you-own-adventure style. I am highly inspired by this movie because of how complex the work became; the storyline, character development, etc.

Although I know my final project will obviously not be able to reach this capacity, I want to strive to have this level of thought behind the process and the plot in order to create an interesting enough concept behind my own project. I will draw inspiration from “Skadi Comic” and its classic comic book style layout combined with the choose-your-own-adventure theme, and Bandersnatch’s creativity on its complex plot and its artistic direction.

When I first saw Patatap by Jono Brandel, I was in love with it – from the aesthetic visualizations to the jingle-like sounds. In my larger body of artwork, I discuss the topic of climate change and the environment numerously, so I wanted to find a way to combine the Patatap project with climate change. As I was researching climate crisis visualizations and graphs, the one I have attached below really caught my eye because of the way the map was created and how unique and creative it was. I want to take this aesthetic and use it to inspire the visualizations of my version of Patatap.

How it will work is that first, the user will press the “enter” key to start, and then the user can press any arrow key to shift through different imagery. Every time the user presses the “enter” key after the first time, the color palette will change gradually from a very cool blue/purple/green scheme to a very warm magenta/red/orange/yellow theme to symbolize the global warming, and it will also change the “set” of sounds that the arrow keys will make (just the same as Patatap) except my set of sounds will gradually change from nature sounds (birds chirping, leaves rustling, etc) to industrial sounds and destruction of nature (factory sounds, technology sounds like trains whistling or cars honking, cracking of icebergs, etc). This project will utilize color, arrays and objects, keyboard interaction, sound, and maybe some mouse interaction too. I want the graphics that will display to also show some representation towards nature life or climate change-related, but not so blatant (as you can see in my sketch), so they still possess the Patatap’s graphic design aesthetic, but contains symbolism that nods toward the environment. How the graphics will interact with the gradual procession towards a “warmer world” is that for example, the seaweed-like graphic shown in my sketch will at first draw from bottom-up of the canvas, but when the background color becomes a warm tone, the seaweed will start to draw from the top-down to symbolize the corals shrinking and destroyed reefs.

sketch

//Lanna Lang
//Section D
//lannal@andrew.cmu.edu
//Project 11 - Landscape

//variables for the gradients;
var yAxis = 1;
var c1, c2, c3, c4, c5; //background colors

//variables to draw the clouds
var cloudX = [500, 700, 1200];
var cloudY = [150, 120, 190];
var cloudDist = 5; //the distance the cloud moves

//arrays for the tree and house objects
var trees = [];
var houses = [];

function setup() {
    createCanvas(480, 480);
    frameRate(20);

    c1 = color('#9a99d3'); //background sky lavender
    c2 = color('#ff829f'); //background sky pink
    c3 = color('#f6944d'); //background sky orange
    c4 = color('#a29078'); //train color 1
    c5 = color('#f2f2f4'); //train color 2

    //create an initial collection of trees
    for (var i = 0; i < 10; i++) {
        var rtx = random(width);
        var rty = random(281, 330);
        trees[i] = makeTree(rtx, rty);
    }
    //create an initial collection of houses
    for (var i = 0; i < 10; i++) {
        var rhx = random(width);
        var rhy = random(300, 350);
        houses[i] = makeHouse(rhx, rhy);
    }
}

function draw() {
    drawBackground();
    drawClouds();
    drawLandscape();

    UandDTrees();
    removeTrees();
    addNewTrees();
    
    UandDHouses();
    removeHouses();
    addNewHouses();

    drawTrain();
}

//function to draw the background and 
//the canvas for the train
function drawBackground() {
    //rectangle around full canvas
    drawGradDGtoG(0, 0, width, height, c4, c5, yAxis);

    //draw the sky with gradients
    drawGradPtoP(35, 100, 400, 80, c1, c2, yAxis);
    drawGradPtoO(35, 181, 400, 105, c2, c3, yAxis);
}

//draw the landscape inside the train windows
function drawLandscape() {
    var mtnSpeed = 0.0005;
    var mtnDetail = 0.01;

    //draw the moutains
    stroke('#445c3c');
    for (var x = 35; x <= 435; x++) {
        var t = (x * mtnDetail) + (millis() * mtnSpeed);
        var y = map(noise(t), 0, 1, 170, 300);
        line(x, y, x, 380);
    }

    //draw the grass/horizon
    noStroke();
    fill('#798f44');
    rect(35, 281, 400, 107);
}

//draw the clouds
function drawClouds() {
    for (var i = 0; i < cloudX.length; i++) {
        cloudX[i] -= cloudDist; //the clouds move 5 pixels to the left
        //draw the 3 clouds
        noStroke();
        fill('#faa3b1');
        ellipse(cloudX[i], cloudY[i] + 10, 100, 8);
        ellipse(cloudX[i] - 24, cloudY[i] + 1, 30, 20);
        ellipse(cloudX[i] + 3, cloudY[i], 40, 22);
        ellipse(cloudX[i] - 5, cloudY[i] - 10, 40, 20);
        ellipse(cloudX[i] + 22, cloudY[i], 30, 18);
        //when the clouds reach the end of the canvas, 
        //they will reset back at the other side of the canvas
        //at a random x postion between 500 and 1300
        if (cloudX[i] < 0) {
            cloudX[i] = random(500, 1300);
        }
    }
}

//function to draw gradient from purple to pink
function drawGradPtoP(x, y, w, h, c1, c2, axis) {
    noFill();
    if (axis == yAxis) {
        for (var i = y; i <= y + h; i++) {
            var inter = map(i, y, y + h, 0, 1);
            var cPtoP = lerpColor(c1, c2, inter);
            stroke(cPtoP); 
            line(x, i, x + w, i);
        }
    }
}

//function to draw gradient from pink to orange
function drawGradPtoO (x, y, w, h, c2, c3, axis) {
    noFill();
    if (axis == yAxis) {
        for(var i = y; i <= y + h; i++) {
            var inter = map(i, y, y + h, 0 , 1);
            var cPtoO = lerpColor(c2, c3, inter);
            stroke(cPtoO);
            line(x, i, x + w, i);
        }
    }
}

//function to draw gradient from tan to light grey
function drawGradDGtoG (x, y, w, h, c4, c5, axis) {
    noFill();
    if (axis == yAxis) {
        for(var i = y; i <= y + h; i++) {
            var inter = map(i, y, y + h, 0 , 1);
            var cDGtoG = lerpColor(c4, c5, inter);
            stroke(cDGtoG);
            line(x, i, x + w, i);
        }
    }
}

//function to draw the train
function drawTrain() {
    //redraw the very left and right sides of the train
    //because of the clouds moving
    drawGradDGtoG(0, 0, 35, height, c4, c5, yAxis);
    drawGradDGtoG(435, 0, 490, height, c4, c5, yAxis);
    
    //rectangle to separate the sky gradient into two windows
    drawGradDGtoG(210, 0, 60, height, c4, c5, yAxis);
   
    //dark brown line in the middle
    noStroke();
    fill('#2e2423');
    rect(235, 0, 10, height); 

    //black rect sign under windows
    fill(0);
    rect(280, 400, 140, 20); 
    rect(50, 400, 140, 20);
    
    //dark brown window frames
    strokeWeight(2);
    stroke('#2e2423');
    noFill();
    rect(30, 85, 185, 310);
    rect(265, 85, 175, 310);

    //sign under windowa that says "Do not lean on train door"
    fill(224);
    textSize(11);
    textStyle(BOLD);
    text("Do not lean on train door", 284, 413);
    text("Do not lean on train door", 54, 413);
    
    //draw the door handles on the train doors
    stroke(193);
    fill(220);
    rect(180, 440, 35, 70);
    rect(265, 440, 35, 70);
    //draw the insides of the door handles
    fill(130);
    rect(190, 450, 15, 70);
    rect(275, 450, 15, 70);

    //draw the train handles
    for (var j = 0; j < width + 50; j += 150) {
        stroke(200);
        strokeWeight(13);
        noFill();
        line(j, 0, j, 70);
        line(j, 70, j + 33, 130);
        line(j, 70, j - 30, 130);
        line(j - 30, 130, j + 33, 130);
    }
}

//update the tree's positions, and display them
function UandDTrees() {
    for (var i = 0; i < trees.length; i++) {
        trees[i].move();
        trees[i].draw();
    }
}

//if a tree has dropped off the left edge,
//remove it from the array
function removeTrees() {
    var treesToKeep = [];
    for (var i = 0; i < trees.length; i++) {
        if (trees[i].x + trees[i].tw > 0 & 
            trees[i].y + trees[i].th > 0) {
            treesToKeep.push(trees[i]);
        }
    }
    trees = treesToKeep; //remember the surviving trees
}

//with a very tiny probability, add a new tree to the end
function addNewTrees() {
    var newTreeChance = 0.01;
    if (random(0.1) < newTreeChance) {
        trees.push(makeTree(width, random(281, 330)));
    }
}

//update position of the tree at every frame
function moveTree() {
    this.x += this.speed;
}

//draw the tree and tree trunk
function drawTree() {
    noStroke();
    fill('#c39a2b');
    push();
    translate(this.x, this.y);
    triangle(0, -this.th, 0 - this.tw / 2, 0, 
            0 + this.tw / 2, 0);
    pop();

    fill('#512a17');
    push(); 
    translate(this.x, this.y);
    rect(-3, 0, 4, 5);
    pop();
}

//this function accepts parameters and uses the values
//of those parameters to initialize fields in the tree object
function makeTree(birthLocationX, birthLocationY) {
    var mktr = {x: birthLocationX,
                y: birthLocationY,
                tw: random(5, 15),
                speed: -5.0,
                th: random(15, 30),
                move: moveTree,
                draw: drawTree}
    return mktr;
}

//update the house's positions, and display them
function UandDHouses() {
    for (var i = 0; i < houses.length; i++) {
        houses[i].move();
        houses[i].draw();
    }
}

//if a house has dropped off the left edge,
//remove it from the array
function removeHouses() {
    var housesToKeep = [];
    for (var i = 0; i < houses.length; i++) {
        if (houses[i].x2 + houses[i].hw > 0 &
            houses[i].y2 + houses[i].hh > 0) {
            housesToKeep.push(houses[i]);
        }
    }
    houses = housesToKeep; //remember the surviving houses
}

//with a very tiny probability, add a new house to the end
function addNewHouses() {
    var newHouseChance = 0.003;
    if (random(0.1) < newHouseChance) {
        houses.push(makeHouse(width, random(300, 350)));
    }
}

//update position of the tree at every frame
function moveHouse() {
    this.x2 += this.speed2;
}

//draw the house and the house roof
function drawHouse() {
    noStroke();
    fill('#e7d2a0');
    push();
    translate(this.x2, this.y2);
    rect(-10, 0, 20, 10);
    pop();

    fill('#95221b');
    push();
    translate(this.x2, this.y2);
    triangle(0, -this.hh / 2, 0 - this.hw / 2, 0, 
            0 + this.hw / 2, 0);
    pop();
}

//this function accepts parameters and uses the values
//of those parameters to initialize fields in the house object
function makeHouse(birthLocationX2, birthLocationY2) {
    var mkh = {x2: birthLocationX2,
                y2: birthLocationY2,
                hw: random(10, 40),
                speed2: -5.0,
                hh: random(10, 30),
                move: moveHouse,
                draw: drawHouse}
    return mkh;
}

When I first read this prompt, what came up to my mind immediately was creating a landscape that mimics what I see when sitting on a high-speed train. My favorite sceneries are usually what I see when I pass by complete cities in just a few hours on those trains. I had a lot of fun creating this landscape, but it was also very challenging for me. It definitely took me more than a couple of hours, but it was worth it.

sketch

//Lanna Lang
//Section D
//lannal@andrew.cmu.edu
//Project 10-Sonic Sketch

var c1, c2; //variables for background colors;
var sfxWolf;
var sfxNight;
var sfxFire;
var sfxSnore;

function preload() {
    sfxWolf = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/wolf-lanna.wav");
    sfxWolf.setVolume(1);

    sfxNight = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/night-lanna.wav");
    sfxNight.setVolume(0.1);

    sfxFire = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/fire-lanna-2.wav");
    sfxFire.setVolume(1);

    sfxSnore = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/snore-lanna-2.wav");
    sfxSnore.setVolume(10);
}

function setup() {
    createCanvas(600, 480);
    ellipseMode(CENTER);
    frameRate(5);

    //calling the gradient function
    c1 = color('#0b0043'); //background sky blue
    c2 = color('#fa3500'); //background sky red
    setGradient(c1, c2);
}

function draw() {
    //calling all the other draw functions
    drawLandscape();
    drawWolf();
    drawCamp();
    drawText();
    
    //play the background sound effect
    sfxNight.play();
}

//function to draw all the landscape in the background
function drawLandscape() {
    noStroke();
    
    //moon
    fill('#d0cba3');
    ellipse(390, height / 2, 400, 400);

    //left mountain
    fill(28);
    triangle(80, 370, 280, 100, 520, 370);
    //middle mountain
    fill(7);
    triangle(250, 350, 530, 115, width + 150, 350);
    //right mountain
    fill(41);
    triangle(120, 350, 370, 130, width, 350);

    //draw the smaller trees
    for (y = 0; y < height; y += 40) {
        for (x = -100; x < width + 50; x += 160) {
            fill('#051107'); //very dark green
            triangle(x + 150, y + 250, x + 70, y + 350, x + 230, y + 350);
        }
    }

    //draw the bigger trees
    for (y = 0; y < height; y += 40) {
        for (x = 0; x < width + 50; x += 160) {
            fill('#08190a'); //dark green
            triangle(x + 130, y + 170, x + 60, y + 270, x + 200, y + 270);
        }
    }

    //ground
    fill('#2d1c17');
    rect(0, 450, width, 30);
}

//function draw the wolf on the mountain
function drawWolf() {
    var x1 = [360.6, 363.08, 365.31, 367.38, 368.72, 369.44, 377.04, 
        383.33, 383.64, 382.46, 379.41, 352.73, 350.96, 354.51, 364.05, 
        353.13, 351.06, 355.04, 353.34, 353.15, 354.65, 356.89, 358.31];

    var y1 = [91.1, 97.49, 99.05, 104.99, 106.07, 107.05, 124.71, 134.52,
        145.3, 153.01, 155.56, 156.09, 154.64, 151.27, 146.85, 132.89, 123.88,
        103.92, 98.75, 97.08, 96.79, 98.41, 92.87];

    var nPoints1 = x1.length;
    beginShape();
    for (var i = 0; i < nPoints1; i++) {
        fill(10);
        vertex(x1[i], y1[i]);
    }
    endShape(CLOSE);
}

//function to draw the camp
function drawCamp() {
    var x2 = [248.75, 253.55, 257.24, 258.2, 258.32, 258.21, 259.05, 261.99, 
        264.49, 263.6, 263.47, 264.48, 265.59, 266.17, 266.09, 264.98, 263.59, 
        242.52, 241.6, 240.02, 238.84, 238.46, 238.53, 239.54, 240.74, 240.75, 
        240.76, 242.51, 243.35, 242.69, 242.52, 242.64, 243.96, 246.81, 248.93, 
        250, 249.69]

    var y2 = [420.75, 423.75, 427.8, 430.42, 434.29, 435.15, 433.61, 430.98, 429.8, 
        433.4, 433.09, 438.56, 440.94, 442.74, 446.81, 449.99, 451.9, 451.9, 451.03,
        448.74, 445.82, 442.64, 440.15, 437.17, 435.48, 436.47, 438.45, 441.95, 
        442.74, 440.55, 438.56, 436.58, 433.3, 430.33, 428.12, 425.34, 422.93]

    //tent
    fill('#ffef86');
    triangle(380, 450, 410, 410, 430, 470);
    fill('#ffe641');
    quad(410, 410, 430, 470, 480, 450, 450, 390);
    stroke(0);
    strokeWeight(6);
    line(410, 412, 400, 457);

    //person sleeping inside the tent
    //pants
    stroke('cyan'); 
    strokeWeight(4);
    line(390, 458, 402, 458);
    line(400, 458, 403, 463);
    //feet
    stroke('#d5a88f');
    line(390, 458, 387, 456);
    line(403, 463, 405, 461);

    //fire
    //flames
    stroke('#f7da14');
    strokeWeight(3);
    fill('#ff7901');
    var nPoints2 = x2.length;
    beginShape();
    for (var i = 0; i < nPoints2; i++) {
        var px = x2[i] + random(-1, 1);
        var py = y2[i] + random(-1, 1);
        vertex(px, py);
    }
    endShape(CLOSE);
    //wood logs
    noStroke();
    fill('#a36d4e');
    rect(235, 451.9, 35, 6);
    fill('#845640');
    rect(235, 457.9, 35, 6);
}

//function for drawing the text
function drawText() {
    textFont('Comic Sans MS');
    textStyle(BOLD);
    textSize(20);
    fill('#5c94bd');
    text('Z', 415, 450);
    textSize(30);
    text('Z', 430, 440);
    textSize(40);
    text('Z', 455, 420);
}

//function to draw the gradient for the background sky
function setGradient(c1, c2) {
    noFill();
    for (var y = 0; y < height * 0.7; y++) {
        var inter = map(y, 0, height * 0.7, 0, 1);
        var c = lerpColor(c1, c2, inter);
        stroke(c);
        line(0, y, width, y);
    }
}

function mousePressed() {
    //if the mouse position is within the wolf,
    //then the wolf howl will play
    if (mouseX < 384 & mouseX > 349 && mouseY < 157 && mouseY > 90) {
        sfxWolf.play();
    }
    
    //if the mouse position is within the fire,
    //then the fire crackling will play
    if (mouseX < 267 & mouseX > 238 && mouseY < 452 && mouseY > 420) {
        sfxFire.play();
    }

    //if the mouse position is within the tent,
    //then the snoring will play
    if (mouseX < 450 & mouseX > 380 && mouseY < 470 && mouseY > 410) {
        sfxSnore.play();
    }
}

I have 4 sounds in my sketch: the background/ambient noise is nightlife/crickets, if you click the wolf it will howl, if you click the fire there is a wood crackling/fire sound, and if you click the tent with the person inside there is a snoring sound. I had a lot of fun creating this interactive piece because I wanted to challenge myself and do something a little intricate.

Google Magenta // NSynth and NSynth Super // 2018

The goal Google Magenta had with NSynth and NSynth Super was to build a machine learning tool that gave musicians new ways to express themselves. NSynth (Neural Synthesizer) is a new way to approach audio synthesis using neural networks that creates the sound of the actual instrument that is being played instead of the note that’s being played. Magenta wanted the algorithm to be more accessible to musicians, so they created interfaces such as the Sound Maker and the Ableton Live plugin, and Magenta encourages creative use with the algorithm, from dubstep to scenic atmospherics. NSynth is Google’s neural network, but NSynth Super is the tool/musical instrument that brings NSynth to life.

What I love about this piece are the infinite possibilities this brings to artists and anyone anywhere. In the video, they show how using NSynth and NSynth Super, you can combine a flute and a snare to create a whole new instrument (i.e Fnure). NSynth Super isn’t just layering sounds on top of each other, but instead, it’s synthesizing an entirely new sound based on the acoustics of the individual instruments. This technology isn’t making the work of a musician easier, but it’s enhancing it and providing more possibilities and artistic direction that can manifest from this. Although the NSynth Super isn’t available for purchase, Google has provided instructions to make one from scratch using Raspberry Pi for artists to make themselves and explore.

Addie Wagenknecht’s “Optimization of Parenting, Part 2” // 2012

This project is a robot arm that rocks a baby’s crib when it hears the baby cry or awakes from his/her sleep, simulating a mother’s arm trying to soothe her baby at night. What first drew me to this piece was the fact that it was developed with support by The STUDIO for Creative Inquiry here at CMU while Wagenknecht was doing a residency here. I love the fact that she played with the dichotomy of the baby and its mother but without the intimacy – the exact opposite of how an actual mother would feel towards her newborn. Wagenknecht unraveled the created façade of women and family and the false sense of balance between parenting and career in America.

I think this piece is so effective because the disparity Wagenknecht wanted to convey to her audience is very clear in all the decisions she made to complete this piece. The robotic arm is blatantly industrial, from its structure to its color of factory-like orange to represent the idea of industry – mirroring the precise, reactive nature that parenting demands and suggesting the idea of impossible, flawless perfection that parenting is the opposite from because of human error and learning on the spot.

This project is obviously influenced and inspired by her own experience of being a mother and is critiquing that exact choice. She was also influenced by the observation she had of mothers in society as a whole and the notion of being a mother: she witnessed that mothers were expected to become full-time parents, resulting in female artists losing their creative practice they had spent their entire life building. She wanted to question if the role of the mother could be replaced by technology (as other roles were replaced with – like the vacuum or the refrigerator) without affecting the development of the baby.

sketch

//Lanna Lang
//Section D
//lannal@andrew.cmu.edu
//Project 09 - Computational Portrait

var px = [];
var py = [];

//load the underlying image
function preload() {
    var imgURL = "https://i.imgur.com/mSgPk6o.jpg";
    underlyingImage = loadImage(imgURL);
}

function setup() {
    createCanvas(480, 480);
    background(0);
    underlyingImage.loadPixels();
    frameRate(10);
}

function draw() {

    //for loop to draw the random lines that draw
    //when the new frame is displayed
    for (var i = 0; i < frameCount; i++) {

        //the x and y array is
        //drawn randomly
        px[i] = random(width);
        py[i] = random(height);
        
        //get the color of the underlying image
        //at the specific x, y location
        var ix = constrain(floor(px[i]), 0, width-1);
        var iy = constrain(floor(py[i]), 0, height-1);
        var theColorAtLocationXY = underlyingImage.get(ix, iy);

        //the person is drawn with smaller lines = more detail
        //this if statement is for the head
        if (px[i] >= 230 & px[i] <= 400 && 
            py[i] >= 70 && py[i] <= 300) {
            strokeWeight(1);
            //the line drawn is the same color as the 
            //underlying image at its location
            stroke(theColorAtLocationXY);
            //the lines drawn is at a random angle
            line(px[i] + random(5), py[i] + random(5), 
                px[i] + random(10), py[i] + random(10));

        //this if statement is for the chest
        } else if (px[i] >= 30 & px[i] <= width && 
            py[i] >= 270 && py[i] <= 450) {
            strokeWeight(1);
            stroke(theColorAtLocationXY);
            line(px[i] + random(5), py[i] + random(5), 
                px[i] + random(10), py[i] + random(10));

        //this if statement is for the left hand & the sun
        } else if (px[i] >= 50 && px[i] <= 200 && 
            py[i] >= 90 && py[i] <= 220) {
            strokeWeight(1);
            stroke(theColorAtLocationXY);
            line(px[i] + random(5), py[i] + random(5), 
                px[i] + random(10), py[i] + random(10));

        //this if statement is for the left arm
        } else if (px[i] >= 10 & px[i] <= 120 && 
            py[i] >= 220 && py[i] <= 350) {
            strokeWeight(1);
            stroke(theColorAtLocationXY);
            line(px[i] + random(5), py[i] + random(5), 
                px[i] + random(10), py[i] + random(10));

        //the background is drawn with thicker lines = less detail
        } else {
            strokeWeight(4);
            stroke(theColorAtLocationXY);
            line(px[i] + random(10), py[i] + random(10), 
                px[i] + random(50), py[i] + random(50));
        }
    }
    
}

I struggled creating this code because I was very adamant about using random lines as my custom pixel and I couldn’t find out how to exactly execute it, but after using frameCount, I finally got it. I had a lot of fun writing my code, and this is one of my favorite photos I’ve taken so I am very satisfied with my final result.

Jenny Sabin’s “PolyMorph” // 2013

As I was looking through previous Looking Outwards responses, I was very intrigued with Ilona’s post about Sabin’s work because, in my own scope of work, I am very interested in the interaction between the natural and the digital, and “PolyMorph” caught my eye as it perfectly sits in that spot. I totally agree with Ilona when she said that this project – although the structure mimics natural forms– it could not have been created without the use of technology, but it also could not have been created without the use of the human hands that cast, fire, and glaze the ceramic pieces joined with the robot arms in her lab studio that were used for 3D printing.

What I love about this project is how intricate it is: the structure is made up of 1400 pieces with 1300 different connection combinations and then built into a geometric structure that simulates geometry in nature. I personally love the intertwining of organic designs with technology and digital fabrication. Sabin uses her knowledge in architecture, design, biology, and mathematics to design material structures that are made of traditional art mediums as well as digital art mediums.

Meejin Yoon – Eyeo Festival 2015

Meejin Yoon’s website: http://www.mystudio.us/

Meejin Yoon is an architect and designer based in Boston, Massachusetts whose practice revolves around the intertwining between architecture and the public realm. She studied architectural design and architectural practice at Cornell University. She didn’t have a background in technology until she became a faculty member in MIT, and then using her new-found knowledge to combine technology, architecture, and the public space to question how design fits into contemporary culture and creating a sense of place and environmental awareness.

Yoon is very focused on the separation between public space and personal space as she is a very private person. Yoon believes that in order to create a truly engaging public space, the artist must create something unfamiliar – defamiliarize the context such that the rules of engagement are less clear. These two values that Yoon holds throughout her work are what I admire about the way she works. This contradiction that her art is made for the public, yet she is so defensive and closed off as a person is very intriguing to me because in a sense, she is more of an open person than she thinks she is.

My favorite piece from her is “White Noise/White Light” because it encompasses everything that I try to include in my own installation work: human interaction with light, playing with sound in an installation, and exploring ways to incorporate technology and art. Another thing I really like about this piece is the fact that she created this work with a specific idea in mind in how people will interact with this work, but, in reality, people interacted with the work completely different than what she imagined. I love the idea of how once an artist puts one of their works in public, the work becomes something completely different than what the artist first envisioned. Another piece I really liked was “Aviary”, which was an installation that explored human engagement and human touch within a public space, combined with light fixtures, and a soundscape of bird songs. What I admired about this piece was her way of abstracting everything to the point that the audience physically interacting with the piece wouldn’t exactly understand what the installation was unless Yoon explained it. Compared to another piece she did, “Swing Time”, I enjoy “Aviary” more because “Swing Time” is very familiar and to me, kind of boring, as it is just beautiful tire swings that light up, versus “Aviary” which is very unfamiliar, yet also beautiful.

I really liked the way Yoon presented her work in this presentation. She would first discuss another artist/piece of work and what it was about, and then she ties that in as her source of inspiration in creating one of her projects, showing the connection between the two, yet how she explored and expanded that theme that she was inspired by. As she presents, she includes many photos of the materials that uses – especially the technological materials – as well as videos that document the work in the public space once it was installed. This helped me understand how I should present my work because now I know that as an artist, it is important to convey every step that I took to reach my final product.