Han – Page 2 – [OLD FALL 2018] 15-104 • Introduction to Computing for Creative Practice

Han Yu Looking Outwards 07

The information visualization project I found is called the Drought Monitor. It is a project by Pitch Interactive, an data visualization studio that presents data using the latest technology interactively. Their clients include some of the most acclaimed companies from multiple industries like Dow Jones, Wall Street Journal, Facebook and General Motors.

An Unprecedented Drought by Pitch Interactive in the 2015 issue of Scientific American.

The Drought Monitor was first started as a commissioned project paid by Scientific American in 2015. In that one of year’s issues, there was a graph of the frequency of unprecedented droughts in California. The graph plots data from the Palmer Hydrological Drought Index and highlights outlying points outside the general trend lines so the overall amount of unprecedented climates was clearly presented. In 2018, Pitch Interactive recreated the website and put data of California air moisture from 1895 to 2018. The graph follows the same design as the one in 2015 but becomes very interactive with viewers. Just by moving the cursor along the axis, data of general trend lines of each California region and specific data location is clearly presented. I am very impressed by the skillful application of information visualization by Pitch Interactive as it has made complex data instantly readable to any kinds of audience.

Screenshot of the interactive website Drought Monitor created by Pitch Interactive in 2018.

Han Yu Looking Outwards 06

Hiroshi Kawano, Design 3-1: Color Markov Chain Pattern, 1964

Hiroshi Kawano is a Japanese artist pioneered in the field of generative art. He was one of the first generative artists who believed the possibly of using a computer to program artistic works. Color Markov Chain Pattern was one of Hiroshi’s most famous work. It was created in 1964 after Hiroshi was inspired by the writings of the German philosopher Max Bense who wrote about the using scientific metrics to program beauty. This piece of work was also referred as the digital mondrians. Hiroshi wrote computer programs with complex mathematical algorithms involve random processes because although he set the rules for picture, he wasn’t able to pin down the actual result without printing. Hiroshi masterfully mixed subjective randomness with computational randomness together in his works. In the early sixties when computers were still giant machines that takes up a whole room, Hiroshi was the first to think it as a medium to create art. His works truly pioneered in the field of computational art and influenced many later works.

Han Yu Project 06 Abstract Clock

sketch

// Han Yu
// hyu1@andrew.cmu.edu
// Section D
// Project 06

var bubbley = 480;
var noiseParam = 0;
var otherbubbley = 510;


function setup() {
    createCanvas(480, 480);
    noStroke();
    frameRate(10);
}



function draw() {
	
	background(41,221,245);
	// fectch time
	var H=hour();
	var M=minute();
	var S=second();
	// compute location of fish
	var hourfish=map(H, 0, 23, 35, width-51);
	var minutefish=map(M, 0, 59, 50, width-71);
	var secondfish=map(S, 0, 59, 40, width-41);

	//bubbles
	//sets sidemove to noise value
	var sideMove = noise(noiseParam);
	//map time sidemove between -20 and 20
	sideMove = map(sideMove, 0, 1, -20, 20);
	//color of bubble
	fill(51,231,255);
	//draws bubbles in diff sizes y and x
	ellipse(width/2+sideMove,bubbley,50,50);
	ellipse(width/2+sideMove+50,bubbley-30,30,30);
	ellipse(width/3+sideMove/2, otherbubbley, 40,40);
	//make it go up
	bubbley -= 10;
	otherbubbley -= 5;
	//resets to bottome when at top
	if (bubbley < -25) {
		bubbley = 480			
	}
	if (otherbubbley < -20) {
		otherbubbley = 510
	}
	//increase parameter by 0.3
	noiseParam += 0.3
	
	

	// hour fish
	fill(252,237,60);
	ellipse(hourfish, 100, 70, 35);
	triangle(hourfish+30, 100, hourfish+50, 
			 80, hourfish+50, 120);
	// minute fish
	fill(246,214,48);
	ellipse(minutefish, 200, 100, 50);
	triangle(minutefish+45, 200, minutefish+65, 
			 180, minutefish+65, 220);
	// second fish
	fill(245,184,44);
	ellipse(secondfish, 340, 80, 50);
	triangle(secondfish-35, 340, secondfish-55, 
			 320, secondfish-55, 360);

	// sand
	fill(255,249,207);
	rect(0, 410, width, height);


}

I started out this project hoping to represent time more interactively, something more than just a clock. I have always been fond of the underwater so I chose it as the theme of my abstract clock. My initial design is attached below. I changed around a bit because I later found out the constant shit of colors is not a good representation of time. Overall I enjoyed doing this project, it helped it lot with learning time application and randomness.

Han Yu Looking Outwards 05

Trailer for The Maze Runner from Youtube

The project I chose to write about this week is from a movie called The Maze Runner. The movie had numerous computer generated art but the one I want to discuss about is the wall. There is no way that such a huge wall can be an actual movie prop so we can safely assume that it is computer generated. Regarding the wall, admire its sheer scale and realism. There’s engraved tally marks, names on the wall to elaborate the detail of the wall. I admire these traits because I think it’s not too extreme and in your face, but still plays an important role in the movie. Regarding the algorithms generated, I think that they used the for loop because of the wall’s repeating elements. Also I think that they used a green screen to overlay the wall in a studio. So that would be similar to calling a function in a function. The creator’s artistic sensibilities come into the final form because he has a very clear understanding of the wall and its role. The wall is simple in nature. Its goal is to protect the people from the elements. But the wall’s secret is that it contains dangerous monsters. I think this classic irony is the epitome of art.

Han Yu Project 05 Wallpaper

sketch

// Han Yu
// Section D
// hyu1@andrew.cmu.edu
// Project 05

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

function draw() {
	background(184,233,230);
	// passion fruits
	for (var i=50; i<width-10; i+=100) {
		for (var j=50; j<width-10; j+=100) {
			noStroke();
			fill(27,179,111);
			ellipse(i, j, 70, 70);
			fill(122,196,36);
			ellipse(i, j, 60, 60);
			fill(234,40,95);
			ellipse(i, j, 55, 55);

			// seeds
			stroke(88,88,90);
			strokeWeight(4);
			point(i-13,j-3);
			point(i+5,j-8);
			point(i,j-13);
			point(i-10,j+9);
			point(i+1,j+10);
			point(i+13,j+4)
			point(i+1,j+1)
		}
	}

	//eaten parts
	for (var y=0; y<7; y+=1) {
		
		if (y%2==0 & y!==0) { // only on even rows
			for (var x=0; x<7; x+=1) {
				if (x%2==0) { //only on even columns
				noStroke();
				fill(184,233,230);
				rect(x*100+100, y*100-100, 50, 50, 5);
				}
			}
		}
	}

	noLoop();
}

Watermelon is my favorite fruit. It was fun to make a wallpaper full of watermelons. To add more variations, I covered up some parts of the watermelons on a few locations. Overall, I found this project very helpful for practicing nested loops.

Han Yu Project 04 String Art

sketch

// Han Yu
// Section D
// hyu1@andrew.cmu.edu
// Project-04

function setup() {
    createCanvas(400, 300);
    background(24, 146, 245);
}

function draw() {
// the pink background
	for (var i = 0; i <400; i++) { //top
		stroke(245, 41, 143);
		line(100, 100, i, 0);
		i += 10;
	}

	for (var j = 0; j <300; j++) { //left
		stroke(245, 41, 143);
		line(100, 100, 0, j);
		j += 10;
	}

	for (var k = 0; k<300; k++) { //right
		stroke(245, 41, 143);
		line(300, 200, width, k);
		k += 10;
	}

	for (var m = 0; m<400; m++) { //bottom
		stroke(245, 41, 143);
		line(300, 200, m, height);
		m += 10;
	}

// the yellow hourglass
	for (var n = 0; n<400; n++) { //bottom
		stroke(255, 249, 57);
		line(width/2, height/2, n, height);
		n += 10;
	}

	for (var n = 0; n<400; n++) { //top
		stroke(255, 249, 57);
		line(width/2, height/2, n, 0);
		n += 10;
	}

// the concentric circles
	for (var c = 10; c<155; c++) {
		stroke(245, 41, 143);
		noFill();
		ellipse(width/2, height/2, c, c);
		c += 5;
	}

}

I was inspired by the Japanese zen garden and wanted to use a bunch of colors that contrast with each other. Making the background was the hardest part of this project because it’s tricky to make everything align. Overall, this project reinforces my skills of using for loops.

Han Yu Looking Outwards 04

MULTIVERSE by fuse*

The record of MULTIVERSE by fuse*, Italy 2018.

MULTIVERSE is an audio-visual installation by the Italian based studio and production company, fuse*. The project draws inspirations from physics theories about multiverse and simulates the everlasting births and deaths of countless parallel universes. Watching the replay of this magnificent display of the multiverse that only exists in my wildest imagination before, I felt the power of infinite possibilities of life showcased in this project, magnified through a gigantic display. The project was delivered by a vertical projection of 7.5 meters high and two echoing mirrors that generates an infinite display.

How developers from fuse* generate the non-repeating simulation using live data.

The algorithms used in the project was in a software by openFrameworks that manages interactions with multiple softwares like AbletonLive and Max/MSP through with various scenes are generated and connected. The project successfully simulated the random changes during the creations of universes as each scene represents an evolutionary path of the multiverse. Each display is a unique variation that never repeats itself.

Snapshot of MULTIVERSE projected for the first time in Borgo delle Colonne, Italy in 2018.

Han Yu Project 3 Dynamic Drawing

sketch

// Han Yu
// Section D
// hyu1@andrew.cmu.edu
// Project-03


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

function draw() {
	noStroke();
	var newx = 1000;
	var newy = 1000;

	background(0);
// changing colors of background
	fill(255,mouseX/3,mouseY/3)
	rect(0,0,1000,1000)
	
// spinning background
	push();
	translate(mouseX,mouseY);
	fill(255,255,255,70)
	rotate(mouseX);
	triangle(0,0,newx-350,newy,newy,newx-350);
	triangle(0,0,-newx+350,-newy,-newy,-newx+350);
	triangle(0,0,-newx/2,newy,newy,newx+90000000);
	triangle(0,0,-newx,newy-150,-150000000,-newx);
	triangle(0,0,newx/2,-newy,-newy,-newx-90000000);
	triangle(0,0,newx,-newy+150,150000000,newx);
	pop();

// the moving pin
	distance=int(dist(width/2,height/2,mouseX,mouseY))
	push();
	translate(mouseX,mouseY)
	rotate((mouseX+mouseY)/50)
	fill(150+distance*2,254,220+distance,90);
	rectMode(CENTER);
	ellipse(0,0,350-distance,350-distance,30);
	rect(0,0,100-distance*2,250-distance*2);
	rect(0,0,250-distance*2,100-distance*2);
	pop();

}

I started out this project trying to make something hypnotizing. I also want my project to be more interactive so I added another element to make the whole picture following the mouse. The pin that follows the mouse was inspired by the kaleidoscope. Overall I think this project is very challenging but I learned a lot from working on it.

Han Yu Looking Outwards 03

Meshu is a project started by two technological artists Rachel Binx and Sha Hwang. It generates artistically crafted earrings, necklaces, bracelets and rings from the map data entered by users. I admire this project because the products are both aesthetically pleasing and meaningful to whoever ordered them. You can use it as a sweet reminder of a memorable trip or a special place in your heart and wear it all the time. The all designs are in a minimalist style but guaranteed to be unique.

Binx and Hwang use custom algorithm to generate a Meshu based on the cities and locations that customers have entered. I haven’t been able to find the exact algorithmic technique that they use to design the Meshu but each designs are 3D printed before any further work.

Han Yu Looking Outwards 02

Marius Watz is a generative artist based in New York and Oslo. I admire his modular lattice because the design is abstract but extremely intricate. It looks spiky and lifeless when you first see it but the longer you stare at it, the more complex and vivid it starts to become, like some carefully engineered DNA tower. In fact, Watz 3D printed the parametric objects using ABS plastic. He is known for using pure software technology and digital fabrication technology to generative hard-edged, and often vivid colored artworks. At any Watz displays, he would always show the simulation and processing on display to let people truly experience the making of generative arts. He aspire to show the audience the real side of generative art, not just the final product like Hollywood which aspires to imitate the real world.