## elizabew – Looking Outwards – 07 – sectionE

Inequaligram, a project worked on by Lev Manovich and Agustin Indaco, is a project that focused on analyzing public Instagram images in Manhattan over a period of five months. The point of the project was to measure and correlate the economic equality with how much people share between different parts of the city.

I really look up to this project since it tackles a new modern day social issue relating to inequality that many people are affected by in one way or another. The result was interesting in that after analyzing over 7 million photos, they found that the inequality of these images were actually higher than inequalities between different standards of living of the locals; and that the inequality of visitors’ images is even larger than extreme income inequality. Poor areas show much less while rich areas have become “social media rich”.

In order to generate the dataset for this research, Lev Manovich and Agustin Indaco used Instagram images with location information to collect their data while using the standard measure of inequality (Gini index) to measure the social inequality. In order to visualize all this data, they plotted locations of 200,000 random images from their dataset.

## elizabew – Project – 07 – Composition with Curves

``````//Elizabeth Wang
//Section E
//elizabew@andrew.cmu.edu
//Project 07: Composition with Curves

var nPoints;
var angle;

function setup() {
createCanvas(480, 480);
angleMode(DEGREES);
frameRate(15);
}

function draw() {
background(102,106,134);

angle = map(mouseX, 0, mouseY, 0, 360);

translate(width/2, height/2); //keeps shape centered

push();
rotate(angle);
drawAstroidCurve(); //calls to function drawShape
pop();
}

function drawAstroidCurve(){

var a = map(mouseX, 20, mouseY, 20, 30);
nPoints = map(mouseX, 0, mouseY, 0, 20);

beginShape(); //prevents object from adding on top of itself
for (i = 0; i < nPoints; i++){
var xr;
var yr;
var qx;
var qy;
var t = map(i, 0, nPoints, 0, 360);
//http://mathworld.wolfram.com/Astroid.html
var x = a*pow(cos(t), 3); //astroid curve's parametric equations
var y = a*pow(sin(t), 3);
xr = x + 12*a*cos(t)*pow(sin(t), 2); //quadrifolium of astroid curve
yr = y + 12*a*pow(cos(t), 2)*sin(t);

noFill();
strokeWeight(1);
vertex(xr + (-10, 5), yr + random(-10, 5)); //keeps the shape "shaking"
stroke(255,180,162);
ellipse(xr + (-10, 5), yr + random(-10, 5), 3,3); //shaking ellipses
stroke(223,243,227);

if ((i % 2 == 0) & (i > 1)) { //dotted line
stroke(232,197,71);
line(qx, qy, xr, yr);
}
qx = xr;
qy = yr;

}
endShape(CLOSE);
}
``````

Still images:

Reflection

For my curve, I ended up choosing the quadrifolium of the astroid radial curve. When I started, I had a lot of trouble with radians and ended up accidentally translating my entire shape to move around a circle. Finally when I figured out what I did wrong and changed radians to angle, I wanted to make my shape not only “shake”, but to make it more dynamic; so I added a “backdrop” of dotted lines to give my shape more depth while also adding shaking dots. Overall I’m really happy with how it turned out and it reminds me of installations that demonstrate the vibrations of sound and/or music.

## elizabew – looking outwards – 06 – SectionE

Swarm Light was an installation created by Random International, a collaborative studio founded by Hannes Koch and Florian Ortkrass. This installation explores artificial intelligence in motion using self-organising systems. These systems do have an “order” to them, but what I really admire about this project is how the randomness within the lights in this piece creates a swarm effect as a reaction to movement and surroundings that immerses observers to feel as though the installation is alive. The project itself is made from “LEDs, polished brass rods, custom circuit boards, custom driver software and hard ware, behavioral algorithm, sound / motion sensors, computer & interface”. What really comes through the piece is the inspiration that the creators got to create it, which was the efficiency of flocks of birds and how they react to their surroundings.

## elizabew-Project-06- Abstract-Clock

``````//Elizabeth Wang
//Section E
//elizabew@andrew.cmu.edu
//Project 6: Abstract clock

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

function draw() {

var h = hour(); //hour
var m = minute(); //minute
var s = second(); //second

background(0,167,225);

fill(255);
noStroke();
ellipse (150, 120, 50, 100); //left ear
ellipse (250, 120, 50, 100); //right ear
ellipse (200, 200, 200, 200); //head

fill(255,200,87);
ellipse (175, 210, 20, 10); //nose

stroke(0);
strokeWeight(2);
fill(255);
ellipse (140, 180, 50, 50); //right eye
ellipse (220, 180, 50, 50); //left eye

var thetaSecond = ((3*PI)/2) + (PI/30) * s; //increments of 60 for seconds
var xls = 140 + 10*cos(thetaSecond); //x left eye position
var yls = 180 + 10*sin(thetaSecond); //y left eye position
var xrs = 220 + 10*cos(thetaSecond); //x right eye position
var yrs = 180 + 10*sin(thetaSecond); //y right eye position
fill(0);
noStroke();
ellipse (xls, yls, 30, 30); //left eye moving
ellipse (xrs, yrs, 30, 30); //right eye moving

//mouth
noStroke();
fill(52,52,52);
rect(158, 225, 40, 2*m, 20, 20, 10, 10); //mouth gets bigger every minute
if (m>30){ //when mouth gets big, also a mark for when it is past 30 minutes

var xt = 100 + 80*cos(thetaSecond); //x right eye position
var yt = 200 + 80*sin(thetaSecond); //y right eye position
textSize(20);
text("it's been 30 minutes, I'M LATE!", xt, yt);
fill(189,217,191);

}

//cheek blush

if (h == 0){ //changing from 24 to 12 hour time
h = 12;
}
if (h > 12){
h = h - 12;
}

for(var x = 0; x < h ; x++){ //every hour there is a new blush line
stroke(237,106,90);
var spacing = x * 15;
line(spacing + 130, 200, spacing + 90, 220);

}

}
``````

Reflection

This project was difficult for me in the sense that it was hard for me to distance myself from what actual clocks generally looks like. At first I tested out trying to make a flower grow out of a cactus and eventually die as the day went on, but it ended up being too complicated, so I simplified it to a face instead. I’m happy with how the final looks, but I still feel as though if I had more time, I would add more graphic elements. The face itself rolls its eyes every second, and every minute that passes, the mouth gets longer. Once 30 minutes passes, text pops up that informs the user that it has been over 30 minutes. For the hour, I added “blush” lines, and each line represents one hour.

## elizabew – looking outwards – 05 – SectionE

“The Race Day” is a 2D image using 3D computer graphics made by Peter Nowacki that was based off of the concept art “Old Back Street” by Gary Tonge. The image was created using software such as Maya, Photoshop, 3ds Max, V-Ray, and After Effects. According to the artist, “First I used Maya, then I exported the whole scene to 3ds Max and used V-Ray. Textures were done in Photoshop and final composition and post – work in After Effects”.

What I really love about it is not only how realistic the image looks, but how visually interesting it is. The shadows that cascade over a multitude of objects while the light shines through where the canopy doesn’t cover almost creates a story. The attention to detail is inspiring. It was almost hard to believe it wasn’t a photo. The artist themselves talked about how they enjoyed adding details to the image day by day and how they were inspired by the the world and music around them.

## elizabew-Project-05- Wallpaper

``````// Elizabeth Wang
// elizabew
// Section E
//Project 5: Wallpaper

function setup() {
createCanvas(450, 450);
background(214,239,255); //blue
noLoop();

}

function draw() {
drawLine(); //vertical lines
drawDiaganal(); //diaganal lines
drawDots(); //dots
drawLeaf(); //ellipses
}

function drawLine() { //vertical lines
for (var xv = 0; xv < width; xv += 5) { //vertical lines
var xvPos = xv * 10;
strokeWeight(2);
stroke(177,226,174); //green
line(xvPos, 0, xvPos, height);
}

}

function drawDiaganal(){ //diagnal lines

for (var y = 0; y < height; y += 100){ //diaganal lines from left to right
strokeWeight(1);
stroke(243,207,194); //pink
line(y, 0, width, height - y);
yPos = -400 + y;
line(yPos, 0, width, height - yPos);
}
for (var y = 0; y < height; y += 100){ //diaganal lines from right to left
strokeWeight(1);
stroke(243,207,194); //pink
line(50, height + y, width + 50, y );
yPos = y - 400;
line(0, height + yPos - 50 , width, yPos - 50);
}

}

function drawDots() { //hexigonal grid of dots

for( var ly = 0; ly < height; ly += 5){

if (ly%2 == 0){ // every other row
for (var lx = 0; lx < width; lx += 10) {
var lxPos = (lx * 20) ; //x position of dot
var lyPos = ly * 20; // y position of dot
noStroke();
fill(237,240,218); //yellow
ellipse(lxPos/2, lyPos/2, 10, 10);
}
}
else {
for (var lx = 0; lx < width; lx += 10) {
var lxPos = (lx * 20) + 100; //x position of dot
var lyPos = (ly * 20) ; // y position of dot
noStroke();
fill(237,240,218); //yellow
ellipse(lxPos/2, lyPos/2, 10, 10);
}
}
}
}

function drawLeaf(){

for( var ly = 0; ly < height; ly += 5){

if (ly%2 == 0){ //creates a hexogonal grid
for (var lx = 0; lx < width; lx += 10) {
var lxPosRight = (lx * 20) + 21 ; //position of right leaf x
var lxPosLeft = (lx * 20) - 19 ; //position of left leaf x
var lyPos = (ly * 20) - 100; // y position of leaves
fill(177,226,174);
noStroke();
ellipse(lxPosRight/2, lyPos/2, 20, 10); //right side of leaf
ellipse(lxPosLeft/2, lyPos/2, 20, 10); //left side of leaf
}
}
else {
for (var lx = 0; lx < width; lx += 10) {
var lxPosRight = (lx * 20) + 121; //position of right leaf x
var lxPosLeft = (lx * 20) - 119;//position of left leaf x
var lyPos = (ly * 20) + 100 ;// y position of leaves
fill(177,226,174);
noStroke();
ellipse(lxPosRight/2, lyPos/2, 20, 10); //right side of leaf
ellipse(lxPosLeft/2, lyPos/2, 20, 10); //left side of leaf
}
}
}

}
``````

Reflection

What I think was really helpful for me during this process was the fact that we had an assignment that had to do with a hexagonal grid — which I used for pretty much every aspect of my wallpaper. Overall it was a huge learning experience and I’m very pleased with the results — I think the overall colors that I’ve chosen and the pattern I’ve made really suits who I am. However, the process was a bit difficult for me since I am still not used to for() looping lines and the large amount of code was a bit overwhelming (making my own functions was incredibly helpful for this).

## elizabew – looking outwards – 04 – SectionE

##### Sugarcube: MIDI and MaxMSP Controller

What I really like about this project is how satisfying it looks to play with and touch and listen too. The tilt sensors as you tilt the entire machine makes the sound go up or down, almost as if you were holding a bowl and rolling around a ball in it. It really creates a bridge between physically doing something and technology. I also really like the satisfying buttons and the shape of the whole box — it looks like something I could keep on the side of my desk to just push the buttons for fun.

According to the maker, the project is a MIDI controller — generates Musical Instrument Digital Interface (MIDI) data to MIDI-enabled devices.

The artist was inspired by monome — a similar interactive instrument. However, he wanted to make something cheaper while also not relying on the computer to process everything into MIDI.

## elizabew-Project-04- String Art

``````//Elizabeth Wang
//elizabew
//Section E
//Project-04: String Art

// for (var VARNAME = STARTINGVALUE; VARNAME < LIMIT; VARNAME += INCREMENT) {
//     WHAT_TO_DO;
// }

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

}

function draw() {

for (var x = 0; x <= 300; x += 10){ //looping lines with a spacing of 10 each time
stroke(255);
strokeWeight(.01);

line(0, height - x, x * 1.5, 0); //upperleft

line(width, x * 1.5, height - x, height); //lowerright

line(0, x * 1.5, height/4 + x, height); //left side of eye

line(height, height/20 + x, x * 1.5, 0); //right side of eye

noStroke();
fill(255);
ellipse(180, 160, 80, 80);

}

}
``````

Reflection

At the beginning of the project, instead of coming up with an idea of what to make with lines, I wanted to practice getting used to using the for() function and seeing how it affects the shape and look of the lines. After a while, I felt that what I was beginning to form looked like an eye, and so I decided to work towards that as the goal of my project.

## elizabew – looking outwards – 03 – SectionE

Video of the GLASS II Installation Demonstration

GLASS II is a 2017 3D printed glass installation demonstrated in Milan Design week and was made by The Mediated Matter Group. The installation is made out of a series of glass columns made from a computational framework that created each column’s unique form.

What I find incredibly cool about this project is how it pushes the boundaries of glass, a material used in everyday life. While the light aspect isn’t groundbreaking — light and glass has been used as art for a long time — the way they installed a moving light that creates kaleidoscopic images surrounds the columns makes for a further beautiful piece.

The algorithms used to generate these glass columns are, according to the group’s website, “a unique network of radial arrays made of arcs” and the forms are all “directly influenced by the constraints of the manufacturing platform and structural system.” This means that the higher the load on the column, the larger the column gets.

## elizabew-Project-03-Dynamic-Drawing

Reflection

Admittedly, I actually did have a more solid idea before coming up with this program — I was planning on creating a sun going up and down, while make a face squint when the sun was all the way up; however I ended up having too much fun playing around with the patterns and the rotation action that I ended up distancing myself from that initial idea. I found it so exciting to see the patterns that would form depending on how fast it is going and where the mouse was on the image. Overall, the final product reminds me of strobe lights or fireworks — and even though it isn’t as obvious as my initial idea, I still think it looks pretty cool.

``````//Elizabeth Wang
//Section E
//elizabew@andrew.cmu.edu
//Project-03: Dynamic Drawing

var angleSecond = 0;
var angleMiddle = 0;
var angleThird = 0;
var angletriangle = 0;
var colorA = 250;
var colorB = 50;

function setup() {
createCanvas(480, 640);
rectMode(CENTER);
angleMode(DEGREES);
}

function draw() {
background(80, 100, 200);

colorA = mouseX;
colorB = mouseY;

noStroke();

//second from middle
fill(200, 100, colorA); // all colors are random, constantly
push();//rotate
translate(mouseX, mouseY); //moves with mouse
rotate(angleSecond);
translate(0, -140); //location
rect(0, 0, 130, 12);
pop();//rotate
angleSecond += max(min(mouseY/10, 1), mouseX/10); //gets faster as you move right

//middle
fill(50, 100, colorB);
push();//rotate
translate(mouseX, mouseY); //moves with mouse
rotate(angleMiddle);
rect(0, 0, 200, 25);
pop();//rotate
angleMiddle += max(min(mouseY/10, 1), mouseX/10); //gets faster as you move down

//third
fill(230, 60, colorA);
push();
translate(width/2, height/2); //doesn't move with the mouse, constant background
rotate(angleThird);
translate(0, 200);
scale (mouseX/100, mouseY/100); // changed size as it moves
rect(0, 0, 220, 35);
pop();
angleThird += max(min(mouseY/10, 1), mouseX/10);

//third but the other direction
fill(200, 200, colorB);
push();
translate(width/2, height/2);
rotate(-angleThird);
translate(0, 200);
scale (mouseX/100, mouseY/100); // changed size as it moves
rect(0, 0, 220, 35);
pop();
angleThird += max(min(mouseY/10, 1), mouseX/10);

//triangle
fill(250, 150, colorA);
push();
translate(mouseX, mouseY);
rotate(-angletriangle);
translate(0, 20);
triangle(-20, 60, 0, 20, 20, 60);
pop();
angletriangle += max(min(mouseY/10, 1), mouseX/10);

//rotating while also going around
fill(150, 200, colorB);
push();
translate(mouseX, mouseY);
rotate(angleSecond);
translate(0, 200);
rect(0, 0, 300, 40);
pop();
angleSecond += max(min(mouseY/10, 1), mouseX/10);

}
``````