## Final Project

For my final project, I wanted to address something we have all been doing a lot
of during quarantine, which is impulsive online shopping. Seeing all the
devastating climate crisis we’ve experienced this year I wanted to do a little
research on how the actual cost of fast fashion and its damage to the environment. It’s easy to purchase a cute shirt when they’re 15 dollars even if
you didn’t need it, but in reality, it’s contributing to so many problems that
we are actually paying for: forest fires, unpaid labor, toxic waste, etc..
The program is very simple, you hover over with your mouse to see the environmental cost of each of these clothing items, and when you click on them it will be placed into your shopping bag. A certain number of the three symbols will pop up on the screen to show you how much you’ve spent. When you’ve used up around 50,000 litres of water (which doesn’t take a lot to achieve), the end screen will pop up. If I had more time I would make the symbols pop up in a more organized manner and add more levels of interactions.

``````//keep track of number of runs
var count = 0;
//used for locating each item of clothing
var item;
//array for textbox, textbox is t
var t = [];
var textInfo = [
'COTTON T-SHIRT:\n2,700 litres of water\n15kg of CO2\n200+ years to\ndecompose',
'JEANS:\n7000 litres of water\n33kg of CO2\n50 years to decompose',
'SNEAKERS:\n8500 litres of water\n10kg of CO2\n40 years to decompose'
];
var textY = [30, 165, 355];
var textColor = ["lavender", "DarkSlateBlue"];

}

//draw water
function drawWater() {
image(water, this.x, this.y, 20, 20);
}

//draw co2
function drawCarbon(cx, cy) {
image(co2, this.x, this.y, 20, 20);
}

//draw clock
function drawClock(clx, cly) {
image(clock, this.x, this.y, 20, 20);
}

//create new water bucket object with position
function makeWater(wx, wy) {
w = {x: wx, y: wy,
drawFunction: drawWater
}
return w;
}

//create new co2 object with position
function makeCarbon(cx, cy) {
c = {x: cx, y: cy,
drawFunction: drawCarbon
}
return c;
}

//create new clock object with position
function makeClock(clx, cly) {
cl = {x: clx, y: cly,
drawFunction: drawClock
}
return cl;
}

//arrays to store new symbol
var waters = [];
var carbons = [];
var clocks = [];

function setup() {
createCanvas(400, 500);
background("lightsteelblue");
//set up the base rack
image(rack, 200, 0, 200, 500);
imageMode(CENTER);
image(shirt, 300, 80, 120, 100);
image(jeans, 300, 250, 80, 150);
image(shoes, 300, 450, 100, 60);
//create array of objects of the three info textboxes
for (var i = 0; i < 3; i ++) {
t[i] = new Object();
t[i].info = textInfo[i];
t[i].x = 170;
t[i].y = textY[i];
t[i].w = 110;
t[i].h = 70;
t[i].size = 10;
t[i].c = textColor[i];
t[i].font = 'verdana';
t[i].stroke = "thistle"
t[i].sWeight = 5;
}

//make a water bucket
for (var i = 0; i < 20; i ++) {
var w = makeWater(random(100), random(20, 100));
waters.push(w);
}
//make a co2
for (var i = 0; i < 20; i ++) {
var w = makeCarbon(random(100), random(100, 200));
carbons.push(c);
}
//make a clock
for (var i = 0; i < 20; i ++) {
var cl = makeClock(random(50), random(200, 300));
clocks.push(cl);
}
}

function draw() {
//instruction
textSize(20);
fill("white");
textFont(t[0].font);
text('click to shop, hover to see price!', 20, 18);
//draw textbox
if(mouseX >= 200 & mouseX <= 400) {
if(mouseY >= 3 && mouseY <= 120) {
stroke(t[0].stroke);
strokeWeight(t[0].sWeight);
fill(t[0].c);
rect(t[0].x-5, t[0].y-5, t[0].w+10, t[0].h+10);
noStroke();
textSize(t[0].size);
fill(t[1].c);
text(t[0].info, t[0].x, t[0].y, t[0].w, t[0].h);
item = 1;

}
else if(mouseY >= 150 & mouseY <= 300) {
stroke(t[0].stroke);
strokeWeight(t[0].sWeight);
fill(t[0].c);
rect(t[1].x-5, t[1].y-5, t[1].w+10, t[1].h+10);
noStroke();
textSize(t[0].size);
fill(t[1].c);
text(t[1].info, t[1].x, t[1].y, t[0].w, t[0].h);
item = 2;

}
else if(mouseY >= 330 & mouseY <= 480) {
stroke(t[0].stroke);
strokeWeight(t[0].sWeight);
fill(t[0].c);
rect(t[2].x-5, t[2].y-5, t[2].w+10, t[2].h+10);
noStroke();
textSize(t[0].size);
fill(t[1].c);
text(t[2].info, t[2].x, t[2].y, t[2].w, t[2].h);
item = 3;
}
}
//place shopping bag
shoppingBag();

//place key
drawKey(0, 400);

//if 50 buckets of water used, display end page
if(count >= 50) {
endPage();
}
}
function mousePressed() {

//when clicked into each area, item goes to shopping bag
if(item == 1) {

//3 water buckets
push();
for (var i = 0; i < 3; i ++) {
var w = waters[i];
w.drawFunction();
translate(random(10, 15), random(10, 15));
}
pop();

//3 co2
push();
for (var i = 0; i < 3; i ++) {
var c = carbons[i];
c.drawFunction();
translate(random(10, 15), random(10, 15));
}
pop();

//20 clocks
push();
for (var i = 0; i < 20; i ++) {
var cl = clocks[i];
cl.drawFunction();
translate(random(5, 10), random(5, 10));
}
pop();
count += 3;
}
else if(item == 2) {

//7 water buckets
push();
for (var i = 0; i < 7; i ++) {
var w = waters[i];
w.drawFunction();
translate(random(10, 15), random(10, 15));
}
pop();
//6 co2
push();
for (var i = 0; i < 6; i ++) {
var c = carbons[i];
c.drawFunction();
translate(random(10, 15), random(10, 15));
}
pop();

//5 clocks
push();
for (var i = 0; i < 5; i ++) {
var cl = clocks[i];
cl.drawFunction();
translate(random(5, 10), random(5, 10));
}
pop();
count += 7;
}
else {

//8 water buckets
push();
for (var i = 0; i < 8; i ++) {
var w = waters[i];
w.drawFunction();
translate(random(10, 15), random(10, 15));
}
pop();

//2 co2
push();
for (var i = 0; i < 2; i ++) {
var c = carbons[i];
c.drawFunction();
translate(random(10, 15), random(10, 15));
}
pop();

//4 clocks
push();
for (var i = 0; i < 4; i ++) {
var cl = clocks[i];
cl.drawFunction();
translate(random(5, 10), random(5, 10));
}
pop();
count += 8;
}

}

function shoppingBag() {
image(bag, 120, 470, 170, 170);
fill("white");
textSize(20);
}

function drawKey(x, y) {
//key box
stroke("thistle");
strokeWeight(5);
fill("lavender");
rect(x, y, 70, 80);
//symbols
image(water, x+15, y+20, 20, 20);
image(co2, x+15, y+45, 20, 20);
image(clock, x+15, y+65, 20, 20);
//text
textSize(7);
fill("black");
noStroke();
text('1000L water\n\n5kg co2\n\n10 years', x+30, y+15, 40, 80);
stroke("thistle");
}

//clothing item goes into shopping bag
push();
image(shirt, x, y, 120, 100);
pop();
}

push();
image(jeans, x, y, 80, 150);
pop();
}

push();
image(shoes, x, y, 100, 60);
pop();
}

function endPage() {
background("steelblue");
fill("lavender");
noStroke();
textSize(30);
text('Sorry,\nYou have used up \n50 years worth of \ndrinking water.\n\nRefresh to shop again',
50, 100)

}``````

## Looking Outwards 11

The female artist I found inspirational is Mary Frank. She is an artist and
computational designer that works in immersive and real-time media. One of her artworks, “As Machines Shine” is a beautiful installation piece of liquid
colonies of light in addition to motion-triggered motion composition that flows
with the movement of the installation. This piece responds to another artist,
Kadet Kuhne’s interactive audio called “Abstracted Reflection”. The sculpture
digitally fabricated with wood and acrylic for its membranous qualities, while
the projected illusion is imagery that resembles water. The installation
suggests organisms and movement on a microscopic scale. The projection is real-time and is inspired by spatial algorithms. I find it fascinating that the
machine is able to generate something so organic and random in a way that
can only be found in nature.

## Project 11

``````var hills = [];
var noiseParam = 0;
var noiseStep = 0.03;
var xTree = [];
var yTree = [];
var car;

}

function setup() {
createCanvas(400, 250);
for (var i = 0; i <= width/5; i ++) {
var n = noise(noiseParam);
var value = map(n, 0, 1, 0 ,height);
print(n);
hills.push(value);
noiseParam += noiseStep;
}
frameRate(10);
imageMode(CENTER);
}

function draw() {
background(0, 59, 107); //dark sky
hills.shift();
var n = noise(noiseParam);
var value = map(n, 0, 1, 0 ,height);
hills.push(value);
noiseParam += noiseStep;
for (var i = 0; i < width/5; i ++) {
var x = i*5;
noStroke();
fill(22, 105, 120);
beginShape(); //drawing the hills
vertex(x, height);
vertex(x, hills[i]);
vertex(x+5, hills[i+1]);
vertex(x+5, height);
endShape();
//draw tree if hillValue[i] is smaller than the points before & after
if (hills[i] < hills[i+1] && hills[i] < hills[i-1]) {
tree(x, hills[i]);
}
}
//insert car image
image(car, width/2, height/2, 450, 300);

}
function tree(x, hills) {
fill(1, 120, 33)
triangle(random(x-2, x-5), hills*1.2, random(x, x+3),
hills*0.8, x+5, hills*1.2);
stroke(46, 19, 19);
strokeWeight(2);
line(x, hills*1.2, x, hills*1.5);
}
``````

This animation shows a baby sitting inside a car in the middle of a long drive at night, staring out into the mountains.

## Sonic Story

This is the story of a typical student’s school day in 2020. Taken from personal experiences, the student wakes up to the sound of alarm, goes to their desk and begins zoom classes, which lasts all day long and late into the night. This all happens while chaos happens outside in the world.

``````// This is the story of a typical student's school day in 2020. Taken
// from personal experiences, the student wakes up to the sound of alarm, goes
// to their desk and begins zoom classes, which lasts all day long and late
// into the night. This all happens while chaos happens outside in the world.

//background images
var night;
var dayTime;
var rain;
var explosion;
var fire;

//room drawings
var room;
var laptop;
var laptopOn;
var person;
var personUp;

//sound variables
var alarm;
var rainSound;
var explosionSound;
var fireSound;

//variables for person
var persX = 114;
var persY = 257;
var dx = 15;

var frameCount = 0;

}

function setup() {
createCanvas(500, 400);
imageMode(CENTER)
frameRate(5);
useSound();
}

function soundSetup() {
alarm.setVolume(0.8);
rainSound.setVolume(0.8);
explosionSound.setVolume(0.5);
fireSound.setVolume(0.8);
}

function draw() {
//drawing all the backdrops with their relative sounds
if (frameCount < 20) {
nightDraw();
alarm.play();
} else if (frameCount > 20 & frameCount < 80) {
dayTimeDraw();
} else if (frameCount > 80 & frameCount < 100) {
rainDraw();
rainSound.play();
} else if (frameCount > 100 & frameCount < 120) {
explosionDraw();
explosionSound.play();
} else if (frameCount > 120 & frameCount < 140) {
fireDraw();
fireSound.play();
} else {
nightDraw();
}

//drawing everything in the room
roomDraw();
personDraw();
personUpDraw();
laptopDraw();
laptopOnDraw();

frameCount += 1;

}

//all the backdrops
function nightDraw() {
image(night, width/2, height/2, 500, 400);
}
function dayTimeDraw() {
image(dayTime, width/2, height/2, 500, 400);
}
function rainDraw() {
image(rain, width/2, height/2, 500, 400);
}
function explosionDraw() {
image(explosion, width/2, height/2, 500, 400);
}
function fireDraw() {
image(fire, width/2, height/2 - 50, 500, 350);
}

//everything else in the room
function roomDraw() {
image(room, width/2, height/2, 500, 400);
}
function personDraw() {
if (frameCount < 30) {
image(person, persX, persY, 160, 40);
}
}
function personUpDraw() {
if (frameCount > 30) { //person gets up after alarm sounds
image(personUp, persX, persY, 40, 160);
if (frameCount < 67) {
persX += dx;
}
}
}

function laptopDraw() {
image(laptop, 430, 280, 150, 120);
}

function laptopOnDraw() {
if (frameCount > 70) { //laptop opens when person walks to desk
image(laptopOn, 430, 280, 150, 120);
}
}``````

## LO 10-Computational Music

The computational music project I looked at was begun by American bandleader, engineer and inventor Raymond Scott, and reimagined by Yuri Suzuki, a Japanese inventor. The machine is made to display an instantaneous performance-composition through the use of Google Magenta’s AI software, which connects neural networks from all the Bach chorales to code, thus creating a harmonic relationship between sounds and generates new situations with AI intelligence. The machine itself aesthetically displays a sequence and rhythm, which brings the performance a layer of visualization while it is playing. I think it is fascinating to see symphonic music composed and displayed in such a way, with all of its components on a screen light up to curate the performance.

## Project 9

sketch
``````let img;

}

function setup() {
createCanvas(480, 480);
background(110, 16, 0);
img.resize(width, height);
imageMode(CENTER);
//image(img, 240, 240);
frameRate(1000);
}

function draw() {
let x = floor(random(img.width)); //x position of pixels
let y = floor(random(img.height)) //y position of pixels
let shapePixel = img.get(x, y); //get pixels from photo
let textPixel = img.get(mouseX, mouseY); //get pixel from mouse location
//randomly generated pixels that fill up the page
let shapeR = random(15);
noStroke();
fill(shapePixel);
circle(x, y, shapeR);

//draw star shapes when mouse is pressed
if (mouseIsPressed) {
fill(textPixel);
textSize(random(5, 40));
text('★', mouseX, mouseY); //star shape follows mouse
}
}

//erases when double click
function doubleClicked() {
fill(110, 16, 0);
circle(mouseX, mouseY, 70);
}

``````

This project is dedicated to celebrating my grandfather, who had just gotten his medal for 70 year anniversary since serving in the war. As you press your mouse across the screen stars will follow, and if you double click you can erase part of the drawing.

## Looking Onwards: 09

I really like the artist Roman Bratschi in LO 5 by hollyl, The colorful rendering really caught my eye and after reading holly’s interpretation, it made me appreciate this work a lot more. I am also really intrigued by the textures and materiality shown in this composition as well as how the combination of color and patterns can make the imagery realistic and quite surreal at the same time. I think what’s really interesting about Bratschi’s work is that while the texture is rendered in such detail and portrays how we see the material in real life, the wax-like texture almost looks like it is only possible in a digital reality.

## Looking Outwards 8

Sara Schnadt is an artist who also works in multiple other fields as UX designer and software systems architect. She currently is a designer at NASA Jet Propulsion Laboratory and is working for the software human interface design and system architecture for machine learning for the Europa Clipper mission. I was intrigued by her work primarily because of the scope, scale, and ambitiousness of the projects she is involved in. Sara Schnadt talks about how her work NASA inspires her installation works and vice versa because she finds many similarities between the creative processes of both practices. Schnadt emphasizes that although space projects involve a lot of technological skills and are more engineer based, when the projects are thought of as also creative projects and design problems, it opens up more possibilities and complexities.

## LO-07

The projects I looked at were from Stamen Studios, they are a studio that creates many types of interactive informational visualizations, especially maps. They help companies/ organizations/individuals to customize their information and present them in the most insightful and legible way possible. One of their projects that I looked at was an interactive map that explores the impact of global warming on North American birds. The map allows you to control what scenario and what season you want to view and uses colors on the map and the species to inform us how much the species is in danger because of global warming. I thought the map delivers information very well and is also really easy to navigate.

http://stamenprod.wpengine.com/work/audubon-survival-by-degrees/

https://www.audubon.org/climate/survivalbydegrees/

## Project 7: Curves

sketch
``````var a = 0; //radius of exterior circle
var b = 0; //radius of interior circle
var h = 0; //distance from center of interior circle

var r;
var g;
var b;

var theta = 0; //angle

function setup() {
createCanvas(500, 500);
background(220);

}

function draw() {
r = map(mouseX, 0, width, 45, 191);
g = map(mouseX, 0, width, 16, 175);
b = map(mouseY, 0, height, 105, 225);
background(r, g, b);
for (var x = 0; x <= width; x += 70) {
for (var y = 0; y <= height; y += height/5) {
push();
translate(x, y);
drawHypotrochoid();
pop();
}
}
}

function drawHypotrochoid() {
noFill();
r = map(-mouseX, 0, width, 107, 24);
g = map(-mouseX, 0, width, 67, 162);
b = map(-mouseY, 0, height, 67, 162);
stroke(r, g, b);

a = map(mouseX, 0, width, 1, width/10);
b = 20;
h = map(mouseY, 0, height, 1, height/5);

beginShape();
for (var i = 0; i < 1000; i++) {
var x = ((a-b) * cos(theta)) + (h * cos((a-b)/b * theta));
var y = ((a-b) * sin(theta)) - (h * sin((a-b)/b * theta));
var theta = map(i, 0, 100, 0, TWO_PI);
vertex(x, y);
}
endShape();

}``````

I chose the hypotrochoid curve because when I was experimenting with it, so many different patterns came out of it and I wanted the result to have as many variations as possible. So as you move your mouse up, down, or diagonal, the curve patterns would change every few movements.