Author: Michal Luria

Looking-Outwards-Week-02

Flight Patterns / Aaron Koblin

This week, looking at Generative Art, it was fascinating to see how artists write a set of rules and allow art to create itself by following them.

A project I was especially excited about was “Flight Patterns” by Aaron Koblin. This project creates an animation that illustrates the daily schedule of flights to and from the US:

I especially liked that by creating a visual representation of potentially mundane information, the artist was able to create a beautiful work of art. In addition to the highly aesthetic qualities of this work, the viewer can observe patterns in data that would otherwise be meaningless. For example, at a certain time, one side of the continent “wakes up” and slowly spreads to the west. Another example is a sudden flood of incoming international flights.

This type of work, where data is visualized by using a set of rules written by a computer program, allows us to interact with accessible information in a new and engaging way. Furthermore, this work could be extended in both visualizing larger areas (e.g. the whole world) or zooming into specific areas in the US that would allow to discover additional patterns.

Project-02-Variable-Face

michal-portrait-2

var sunColorR = 145;
var sunColorG = 13;
var sunColorB =  63;
var noseTip = 275;
var themeStatus = 2;
var hairAngle = 0;
var neckLength = 130;
var faceLength = 180;

function setup() {
     createCanvas(640, 480);
     
}

function draw() {
	background(255, 87, 51);

	//spotlight = theme no. 1 for clicks
	if (themeStatus == 1) {

		//bottom light
		noStroke();
		fill(253, 248, 209);
		triangle(640, 480, 0, 480, 0, 400);
		triangle(640, 480, 0, 370, 0, 275);
		triangle(640, 480, 0, 200, 0, 100);

		//top light
		fill(253, 250, 228);
		triangle(640, 0, 0, 480, 0, 400);
		triangle(640, 0, 0, 370, 0, 275);
		triangle(640, 0, 0, 240, 0, 130);

	}

	//face
	fill(255, 195, 1);
	noStroke();
	rect(120, 130, 80, neckLength);
	stroke(225, 195, 15);
	strokeWeight(1)
	rect(160, 128, 100, faceLength, 50);

	//nose
	triangle(257, 216, 257, 246, noseTip, 246);

	//sunglasses
	stroke(90, 24, 70);
	strokeWeight(5);
	line(170, 200, 260, 200);
	fill(sunColorR, sunColorG, sunColorB);
	ellipse(230, 210, 37);

	//lips
	stroke(145, 13, 63);
	strokeWeight(1);
	fill(199, 0, 57);
	triangle(245, 270, 260, 270, 260, 260);
	triangle(245, 270, 260, 270, 260, 280);

	//hair
	noStroke();
	fill(145, 13, 63);
	triangle(100, 130, 270, 85, 270, 160);
	fill(125, 13, 63);
	triangle(100, 130, 150, 137, 100, 300);
	fill(105, 23, 63);
	rect(80, 130, 60, 230);
	fill(145, 23, 63);
	triangle(40 - hairAngle, 350 - hairAngle, 140 - hairAngle, 350, 120, 130);
	fill(135, 13, 63);
	triangle(150, 130, 180, 140, 130, 210);

	//music = theme no. 2 for clicks
	if (themeStatus == 2) {

		//headphones
		fill(90, 24, 70);
		ellipse(170, 215, 55);
		fill(199, 0, 57);
		ellipse(175, 210, 55);

		//headphone curve
		quad(195, 105, 235, 95, 190, 200, 160, 200);

		//note 1
		fill(0);
		ellipse(350, 210, 16);
		ellipse(400, 200, 16);
		stroke(0);
		strokeWeight(6);
		line(350, 160, 400, 150);
		line(353, 160, 353, 210);
		line(403, 150, 403, 200);

		//note 2
		fill(0);
		noStroke();
		ellipse(550, 110, 16);
		ellipse(600, 100, 16);
		stroke(0);
		strokeWeight(6);
		line(550, 50, 600, 40);
		line(553, 50, 553, 110);
		line(603, 100, 603, 40);

		//note 3
		noStroke();
		ellipse(470, 160, 16);
		stroke(0);
		strokeWeight(6);
		line(475, 160, 460, 120);
		line(460, 120, 470, 115);

	} 
	//party = theme no. 3 for clicks
	if  (themeStatus == 3) {

		//party hat
		fill(1, 192, 255);
		triangle(80, 140, 140, 20, 270, 85);
		fill(15, 118, 184);
		ellipse(140, 20, 35);

		//party whistle 
		stroke(15, 118, 184);
		strokeWeight(12);
		line(260, 270, 340, 250);
		noStroke();
		fill(15, 118, 184);
		ellipse(340, 240, 20);
		fill(1, 192, 255);
		ellipse(345, 242, 20);

	}

}

function mousePressed() {
    // when the user clicks, these variables are reassigned
    sunColorR = random(0, 255);
    sunColorG = random(0, 255);
    subColorB = random(0, 255);
    noseTip = random(275, 340);
    hairAngle = random(0, 90);
    neckLength = random(170, 400);
    faceLength = random(180, 220);
   	
   	//changing theme status
   	if (themeStatus == 1) {
   		themeStatus = 2;

   	} else if (themeStatus == 2) {
   		themeStatus = 3;

   	} else if (themeStatus == 3){
   		themeStatus = 1;

   	}
    
}

When working on this project, I thought it would be more interesting to take the self-portrait I already made and try and think of interesting ways in which it can be modified. I started by playing with some features by randomizing them, but it was also interesting to move around angles, as well as completely changing central elements of the portrait to create a new meaning.

Michal Luria – Project – 01

michal-portrait

function setup() {
     createCanvas(455, 430);
     background(255, 87, 51);
}

function draw() {


	//face
	fill(255, 195, 1);
	noStroke();
	rect(120, 130, 80, 200);

	stroke(225, 195, 15);
	strokeWeight(1)
	rect(160, 128, 100, 180, 50);

	//nose
	triangle(257, 216, 257, 246, 275, 246);

	//sunglasses
	stroke(90, 24, 70);
	strokeWeight(5);
	line(170, 200, 260, 200);
	fill(145, 13, 63);
	ellipse(230, 210, 37);

	//lips
	stroke(145, 13, 63);
	strokeWeight(1);
	fill(199, 0, 57);
	triangle(245, 270, 260, 270, 260, 260);
	triangle(245, 270, 260, 270, 260, 280);

	//hair
	noStroke();
	fill(145, 13, 63);
	triangle(100, 130, 270, 85, 270, 160);
	fill(125, 13, 63);
	triangle(100, 130, 150, 137, 100, 300);
	fill(105, 23, 63);
	rect(80, 130, 60, 230);
	fill(145, 23, 63);
	triangle(40, 350, 140, 350, 120, 130);
	fill(135, 13, 63);
	triangle(150, 130, 180, 140, 130, 210);

	//headphones
	fill(90, 24, 70);
	ellipse(170, 215, 55);
	fill(199, 0, 57);
	ellipse(175, 210, 55);

	quad(195, 105, 235, 95, 190, 200, 160, 200);

}

In this project I started by hand sketching the portrait I wanted to create, and then broke it up into primitive shapes. Creating this image using JS required a number of iterations much greater than I expected, moving shapes around until I formed the full image I had in mind.

mic-sketch

Michal Luria – Looking Outwards – 01

Writing Without Words / Stephanie Posavec

This project by Stephanie Posavec takes literature masterpieces, and presents a new perspective on the classics we are all familiar with. The project compares different styles between authors, as well as different periods in literature, by presenting each piece in a graphical way:

FaulknerOrwell

In the project, Posavec took the first paragraph of each book and broke it into sentences. Each line represents one sentence in that chapter – the longer the sentence, the longer the line.

I find this work inspiring because it takes a form or art we are familiar with, breaks it down to data, and then creates something completely new. This allows us to think about a masterpiece in an alternative way. Furthermore, the project is handmade, which creates an additional aesthetic layer to it.

In my opinion, the downside of the execution of the project is that it only looks at the first chapter. In many pieces the first chapter is a type of prologue, and does not represent the entire work. A different approach would be to create an average of all the chapters in a piece, and only then represent it in a graphical way.

Credit: http://dar.pressible.org/jihiijolly/writing-without-words