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

Jonathan Liang – Project 7 – Curves

//Jonathan Liang
//jliang2
//Section A

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

function draw() {
	background(0);
	push();
	translate(300,300);
	rotate(sin(mouseX));
	drawKevin();
	pop();

	push();
	translate(300,300);
	rotate(-sin(mouseX));
	drawStanley();
	pop();
}

function drawKevin() {
    var kPoints = map(mouseX, 0, height, 0 , 500);
    var x;
    var y;
    var tj = map(mouseX, 0, width,0,8); // for iterations
    beginShape();
    for (var i=0; i < kPoints; i++){ 
        var t = map(i,0,kPoints,0,TWO_PI*tj);
        noFill();
        var colR = map(mouseX, 0, width, 0, 255);
        var colG = map(mouseY, 0, width, 0, 255);
        var colB = map(mouseX, 0, width, 0, 255);
        strokeWeight(.5);
        stroke(colR, colG, colB); // 
        //equations as listed on mathworld.wolfram.com/ButterflyCurve.html
        x = Math.sin(t) * (Math.pow(Math.E,Math.cos(t))
                        - 2*Math.cos(4*t) 
                        + Math.pow(Math.sin(t/12),5));

        y = Math.cos(t) * (Math.pow(Math.E,Math.cos(t))
                        - 2*Math.cos(4*t) 
                        + Math.pow(Math.sin(t/12),5));

        vertex(i*x,i*y);
    }
    endShape(CLOSE);  
}

function drawStanley() {
    var sPoints = map(mouseX, 0, height, 0 , 500);
    var x;
    var y;
    var tj = map(mouseX, 0, width,0,8); 

    beginShape();
 
    for (var i=0; i < sPoints; i++){ 
        var t = map(i,0,sPoints,0,TWO_PI*tj);
        noFill();
        var colR = map(mouseX, 0, width, 255, 0);
        var colG = map(mouseY, 0, width, 255, 0);
        var colB = map(mouseX, 0, width, 255, 0);
        strokeWeight(0.5);

        stroke(colR, colG, colB); // 
        //equations as listed on mathworld.wolfram.com/ButterflyCurve.html
        x = Math.sin(t) * (Math.pow(Math.E,Math.cos(t))
                        - 2*Math.cos(4*t) 
                        + Math.pow(Math.sin(t/12),5));

        y = Math.cos(t) * (Math.pow(Math.E,Math.cos(t))
                        - 2*Math.cos(4*t) 
                        + Math.pow(Math.sin(t/12),5));

        vertex(i*x,i*y);
    }
    endShape(CLOSE);  
}

I see the butterfly curve more like a ripple or a flower, growing over time. Just a flower blooms, butterflies blossom from little caterpillars to marvelous winged insects. However, as one butterfly blossoms, one must leave; which is why I made one fade away as the other became more prominent. The color becomes the most vibrant at the top right, symbolizing the butterfly’s prime, while the faded bottom right corner symbolizes its passing.

Jonathan Liang – Looking Outwards – 07

“I’m not a sheep” – Christopher Hitchens

The Sheep Market is a work by digital artist Aaron Koblin. Koblin payed 2 cents to 10,000 workers in Amazon’s Mechanical Turk to draw a sheep facing left in 105 seconds. Amazon’s Mechanical Turk is an intelligence department within the company that employs people to perform and coordinate tasks that computers and artificial intelligence could not currently do. This project is a direct reflection of the values of the department, showing that computers could not generate the little differences from human experience and individuality. Only people could generate completely different sheep, a computer would computationally generate sheep that have different traits, but are fundamentally similar. The emphasis on human individuality and experience is what I appreciate about this particular project.

http://www.thesheepmarket.com/

Jonathan Liang – Project 6 – Abstract Clock

sketch

//Jonathan Liang
//jliang2
//section A






var ballX = 200;
var ballY = 0;
var speedX = 5;
var count = 0;
var xS = [];
var yS = 0;
var xM = [];
var yM = 0;
var xH = [];
var yH = 0;
var ySpeedS = 10;
var ySpeedM = 5;
var ySpeedH = 3;
var radius = 20;

var action = false;
var dayColor = 255;





function setup() {
    createCanvas(400, 400);
    
 //seconds 
    for (var i = 1; i < 60; i++) {
    	xS[i] = random(20, width - 20);
    	
    }
 //minutes   
    for (var i = 1; i < 60; i++) {
    	xM[i] = random(20, width - 20);
    }
 //hours
 	for (var i = 1; i < 12; i++) {
 		xH[i] = random(20, width - 20);
 	}
}

function draw() {

	frameRate(3);	

//fetching current time
	var H = hour();
    var M = minute();
    var S = second();
    dayColor = map(H, 0, 24, 255, 0);
    H = H % 12;

//background color
	background(dayColor);


//hours
	for (var i = 0; i <= H; i++) {
		noStroke();
		fill(128, 212, 255);
		ellipse(xH[i], yH, radius);
		xH[i] += speedX;
		yH += ySpeedH;
		if (yH > height-20 || yH < 0) {
			ySpeedH = -ySpeedH;
			radius += 10;
		}
		if (xH[i] > height-20 || xH[i] < 0) {
			speedX = -speedX;
			radius += 10;
		}
		

		
	}

//minutes
	for (var i = 0; i <= M; i++) {
		noStroke();
		fill('yellow');
		ellipse(xM[i], yM, 15, 15);
		xM[i] += speedX;
		yM += ySpeedM;
		if (yM > height-20 || yM < 0) {
			ySpeedM = -ySpeedM;
		}
		if (xM[i] > height-20 || xM[i] < 0) {
			speedX = -speedX;
		}
		
	}

//seconds
	for (var i = 0; i <= S; i++) {
		noStroke();
		fill('orange');
		ellipse(xS[i], yS, 10, 10);
		xM[i] += speedX;
		yS += ySpeedS;
		if (yS > height-20 || yS < 0) {
			ySpeedS = -ySpeedS;
		}
		if (xS[i] > height-20 || xS[i] < 0) {
			speedX = -speedX;
		}
		
	}








}

Uh for this project, I start with, with a concept, of the world. The world is so hectic and fast moving that we have trouble keeping track of time. The minutes and seconds represent the stars in the sky and the gradually expanding blue circles (hours) represent the tide of the ocean. The minutes and the seconds move so fast, which is symbolic of how life moves so quickly, that we don’t have time to look at the stars in the sky. This whole paragraph sounds incredibly corny and I’m so sorry that it does.

Jonathan Liang – Looking Outwards – 06

This image is one artwork from onformative’s series called Montblac Generative Artpiece. Each artwork consists of a faint line drawing of the model of the Montblanc watch and the blobs are generated based on the material of the watch (gold, silver, etc), the casing, size, and end user, as well as many more factors. This creates a unique blob to each individual watch that was sold. onformative usually creates art through data, but usually that art is not as random as the artworks in this series. To see that they have a broad range of data visualizations makes them one of the top data visualization firms in the entire world.

More on the Montblanc series can be found here:

https://onformative.com/work/montblanc-generative-artpiece

Jonathan Liang – Project 5 – Wallpaper

sketch

//Jonathan Liang
//jliang2
//Section A


x1 = 90;
y1 = 60;
x2 = 30;
y2 = 120;



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

function draw() {
	background(102, 179, 255);
	for (var x1 = 90; x1 < width; x1 += 200) {
		for (var y1 = 60; y1 < height; y1 += 120) {
			cloud1(x1, y1);
		}
	}
	
	for (var x2 = 30; x2 < width; x2 += 175) {
		for (var y2 = 120; y2 < height; y2 += 120) {
			cloud2(x2, y2);
		}
	}
	man();
	noLoop();
}

function cloud1(x1,y1) {
	noStroke();
	fill('white');
	rect(x1, y1, 85, 10, 20);
	ellipse(x1 + 30, y1 - 5, 25, 20);
	ellipse(x1 + 55, y1 - 10, 45, 35);
	ellipse(x1 + 45, y1 - 25, 40, 40);

}

function cloud2(x2,y2) {
	noStroke();
	fill('white');
	rect(x2, y2, 50, 8, 20);
	ellipse(x2 + 20, y2 - 5, 18, 15);
	ellipse(x2 + 35, y2 - 10, 25, 25);

}

function man() {
	push();
	noFill();
	strokeWeight(5);
	stroke('red');
	rotate(radians(30));
	ellipse(250, 250, 100, 90); //head
	strokeWeight(3);
	ellipse(250, 250, 30, 20); //nose
	arc(225, 250, 20, 20, 0, HALF_PI + QUARTER_PI); //cheek
	arc(275, 250, 20, 20, 0, PI + QUARTER_PI); //cheek
	ellipse(240, 230, 10, 15); //left eye
	ellipse(260, 230, 10, 15); //right eye
	arc(250, 260, 50, 30, 0, PI); //mouth
	pop();

}

When I was young I loved drawing on walls, so no matter what the wallpaper was I would draw something on it. My favorite wallpaper when I was younger was Andy’s wallpaper in Toy Story. So this wallpaper pattern with clouds is something that has resonated with me since childhood. Nevertheless, I would have still doodled on the walls anyway.

Jonathan Liang – Looking Outwards – 05

The Incredibles soar back on screen with the help of a new ally, RenderMan

The Incredibles returned on screen over the summer, but not everything from the original movie returned for the sequel. The new film utilized Pixar’s newest rendering technology RenderMan. RenderMan enabled animators to better render textures onto environments, clothing, skin, and hair (the hair in the movie now moves like real hair instead of moving like a blob!) and forcefields! RenderMan is not a technology that is exclusively used in Pixar films, but is now a popular rendering technology used in many Hollywood films. One example of this is their success with the photorealistic rendering of Rachael in Blade Runner 2049. Animators were able to photorealistically render Rachael’s face from the original film onto an actress that looked nothing like Sean Young, the original actress. RenderMan is an effective rendering tool like can render photorealistically but can also create an animated feeling. It is no surprise that Pixar’s RenderMan is now the predominant rendering technology in the film industry today.

https://renderman.pixar.com/product

Jonathan Liang – Project 4 – String Art

sketch

//Jonathan Liang
//jliang2
//section A


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

function draw() {

	
//background
	background(200);
	for (var i = 1; i < 2400; i += 20) {
		strokeWeight(4);
		stroke('white');
		line((i * .25), 0, (i * .25), 300);
	}


//right eyebrow
	for (var i = 1; i < 65; i += 1) {
		strokeWeight(1);
		stroke('black');
		push();
		translate(0, -15);
		line((i) + 250, 60 - i / 4, (i * 1.1) + 250, 50 - i / 4);
		pop();
	}

	for (var i = 1; i < 45; i += 1) {
		strokeWeight(1);
		stroke('black');
		push();
		translate(15, -19);
		line((i) + 300, 38 + i / 1.5, (i * 1.25) + 300, 45 + i / 1.4);
		pop();
	}

//right eyelid
	for (var i = 1; i < 50; i += 1) {
		strokeWeight(1);
		stroke('black');
		push();
		translate(90, 50);
		scale(.7, .3);
		line((i) + 250, 60 - i / 4, (i * 1.1) + 250, 50 - i / 4);
		pop();
	}

	for (var i = 1; i < 50; i += 1) {
		strokeWeight(1);
		stroke('black');
		push();
		translate(90, 50);
		scale(.7, .3);
		line((i) + 300, 38 + i / 2, (i * 1.25) + 300, 45 + i / 2);
		pop();
	}

//left eyebrow
	for (var i = 1; i < 45; i += 1) {
		strokeWeight(1);
		stroke('black');
		push();
		translate(5, 0);
		line((i) + 50, 55 - i / 1.5, (i * 1.15) + 50, 54.5 - i / 1.75);
		pop();
	}

	for (var i = 1; i < 65; i += 1) {
		strokeWeight(1);
		stroke('black');
		push();
		translate(0, -15);
		line((i) + 100, 45 + i / 4, (i * 1.05) + 100, 35 + i / 4);
		pop();
	}

	

//left eyelid
	for (var i = 1; i < 40; i += 1) {
		strokeWeight(1);
		stroke('black');
		push();
		translate(10, 65);
		scale(.85, .3);
		line((i) + 50, 55 - i * 1.5, (i * 1.35) + 50, 53 - i * 1.5);
		pop();
	}

	for (var i = 1; i < 65; i += 1) {
		strokeWeight(1);
		stroke('black');
		push();
		translate(10, 50);
		scale(.85, .3);
		line((i) + 100, 45 + i / 4, (i * 1.05) + 100, 35 + i / 4);
		pop();
	}

	for (var i = 1; i < 40; i += 1) {
      line(i  * 1.1+ 115, 30, 1.5*i + 115, 60 + i/1.1);
    }

//right eye
	for (var i = 1; i < 35; i += 1) {
		strokeWeight(1);
		stroke('black');
		push();
		translate(50, 60);
		scale(.8, .65);
		line((i) + 250, 60 - i / 4, (i) + 250, 50 - i / 4);
		pop();
	}

	for (var i = 1; i < 75; i += 1) {
		strokeWeight(1);
		stroke('black');
		push();
		translate(35, 79);
		scale(.8,);
		line((i * 1.25) + 300, (i + 30) / 3, (i) + 300, (i + 38) / 2.5);
		pop();
	}	

	for (var i = 1; i < 35; i += 1) {
		strokeWeight(1);
		stroke('black');
		push();
		translate(50, 60);
		scale(.8, .65);
		line((i) + 250, 60 - i / 4, (i) + 250, 50 - i / 4);
		pop();
	}

	for (var i = 1; i < 20; i += 1) {
      push();
      translate(310, -25);
      line(1.5*i, 135, .25*i, 150);
      pop();
    }

//right eyeball
	for (var i = 1; i < 50; i += 1.05) {
		strokeWeight(1);
		stroke('black');
		line(i + 280, i * .25 + 95, i + 280, 110);
	}

	for (var i = 1; i < 25; i += 1) {
		strokeWeight(1);
		stroke('white');
		push();
		translate(138, 60);
		scale(.5, .5);
		line(i + 280, i * .25 + 95, i + 280, 110);
		pop();
	}

	strokeWeight(3);
	stroke('white');
	line(295, 100, 295, 100);

//left eye
	for (var i = 1; i < 45; i += 1) {
		strokeWeight(1);
		stroke('black');
		push();
		translate(20, 67);
		scale(.8);
		line((i) + 50, 55 - i / 1.25, (i * 1.15) + 50, 54.5 - i / 1.5);
		pop();
	}

	for (var i = 1; i < 65; i += 1) {
		strokeWeight(1);
		stroke('black');
		push();
		translate(10, 60);
		scale(.8, .65);
		line((i) + 100, 40 + i / 3, (i * 1.25) + 100, 34 + i / 3);
		pop();
	}

//left eyeball
	for (var i = 1; i < 50; i += 1.05) {
		strokeWeight(1);
		stroke('black');
		line(i + 80, 115 - i / 4, i + 80, 90);
	}

	strokeWeight(3);
	stroke('white');
	line(110, 100, 110, 100);

//mouth
	var mouthColor = mouseX / (400 / 225);

	for (var i = 1; i < 60; i += 1) {
      strokeWeight(1);
      stroke(255 - mouthColor, 25, 102);
      push();
      scale(.5, .5);
      translate(400, 350);
      line(i, 10, 3*i, 120);
      line(3*i, 120, 1.2*i, 240);
      pop();
     
    }

    for (var i = 1; i < 60; i += 1) {
      strokeWeight(1);
      stroke(255 - mouthColor, 25, 102);
      push();
      scale(.5, .5);
      translate(405, 601.5);
      rotate(PI, 3);
      line(i, 10, 3*i, 120);
      line(3*i, 120, 1.2*i, 240);
      pop();
  }

//pimple

	strokeWeight(6);
	stroke('black');
	line(300, 200, 300, 200);


}

My project was heavily influenced by the Michael Kalish and Oyler Wu Collaborative art installation reALIze. reALIze was a pop art portrait of boxing legend Muhammad Ali completely made of of cords and punching bags (so basically a line drawing with varying line thicknesses.) I thought I could apply a similar concept to make a line drawing of Marilyn Monroe. I thought that using the concept of cross hatching and increasing the number of lines could give thickness to an object. Although I deem my portrait to be unsuccessful, it was still a valuable opportunity to learn how to use loops.

initial conceptual sketches exploring how to hatch

Jonathan Liang – Looking Outwards – 04

Meandering River is a collaboration between Funkhaus Berlin and onformative that saught to represent the fast-moving world through gradual, rhythmic movements rather than a snapshot. onformative used a custom-written algorithm that reinterprets fluctuating river patterns based on the sounds that are generated form the river. They take this data to then generate a colorful river landscapes (that are changing real-time) and project them onto screens. This type of data visualization is common amongst onformative’s works, which can be found here :

https://onformative.com/work

Another onformative project that can best exemplifies sound art is its project titled Porsche Blackbox. In this project onformative takes the sounds from a blackbox in a Porsche and uses that data to visualize what driving the vehicle was like at that time. Their work has really inspired me to explore what artists can do with data like sound, or even other senses that are not sight related.

More on the Porsche Blackbox project is in this link below:

https://onformative.com/work/porsche-blackbox

Jonathan Liang – Project 03 – Dynamic Drawing

Move the cursor left and right and also try clicking the mouse.

sketch

//Jonathan Liang
//Section A 
//jliang2@andrew.cmu.edu
//Project-03-Dynamic Drawing


var head = 350;
var mouthColor = 0;
var col = {
	r: 255,
	g: 0,
	b: 0,
};
var flag = true;

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

function draw() {
	col.r = random(0, 255);
	col.g = random(0, 255);
	col.b = random(0, 255);

//background
	if (flag == true) {
		background(col.r, col.b, col.g);
	}	else {
		background('black');
	}
	

//left ear
	noStroke();
	fill('white');
	ellipse(180, 115, 140, 140);

	noStroke();
	fill(188, 166, 222);
	ellipse(215, 125, 65, 80);
	ellipse(188, 108, 105, 80);

	noStroke();
	fill(252, 250, 92);
	ellipse(140, 95, 30, 50);
	ellipse(169, 125, 61, 65);

	noStroke();
	fill('white');
	ellipse(180, 140, 45, 45);
	ellipse(220, 90, 30, 30);

	strokeWeight(15);
	stroke('black');
	noFill();
	ellipse(185, 130, 55, 75);

//right ear
	noStroke();
	fill('white');
	ellipse(460, 115, 140, 140);

	noStroke();
	fill(156, 226, 233);
	ellipse(460, 140, 90, 33);
	ellipse(490, 126, 42, 44);

	noStroke();
	fill(237, 97, 155);
	ellipse(415, 145, 35, 125);
	ellipse(445, 96, 75, 75);

	noStroke();
	fill('white');
	ellipse(440, 120, 45, 65);
	ellipse(490, 100, 45, 40);

	strokeWeight(13);
	stroke('black');
	noFill();
	ellipse(460, 115, 42, 42);

	strokeWeight(17);
	stroke('black');
	noFill();
	ellipse(430, 150, 42, 42);




//constants for head
	noStroke();
	fill('white');
	ellipse(320, 240, head, 250);

	noStroke();
	fill(128, 255, 191);
	ellipse(180, 260, 40, 25);

	noStroke();
	fill(255, 225, 77);
	ellipse(460, 260, 40, 25);

	noStroke();
	fill('pink');
	ellipse(180, 260, 30, 15);

	noStroke();
	fill('pink');
	ellipse(460, 260, 30, 15);

//smile
	noStroke();
	if (flag == true) {
		fill('black');
	}	else {
		fill(col.r, col.b, col.g);
	}
	arc(320, 275, 312, 165, 0, PI, CHORD);
	


//teeth
	strokeWeight(1);
	stroke('white');
	noFill();
	line(164, 275, 184, 315);
	line(184, 315, 204, 275);
	line(204, 275, 230, 340);
	line(230, 340, 260, 275);
	line(260, 275, 290, 355);
	line(290, 355, 320, 275);
	line(320, 275, 350, 355);
	line(350, 355, 380, 275);
	line(380, 275, 410, 340);
	line(410, 340, 436, 275);
	line(436, 275, 456, 315);
	line(456, 315, 476, 275);

	

//left eye
	translate(180, 100);
	var m = max(min(mouseX, 200), 0);
	var size = m * 150.0 / 200.0;
	var eyeColor = mouseX / (640 / 225);



	strokeWeight(5);
	stroke(237, 97, 155);
	if (flag == true) {
		fill('black');
	}	else {
		fill(col.r, col.b, col.g);
	}
	ellipse(20 + m * 90.0 / 200.0, 100.0,
         size * .9, size * .9);

//right eye
	translate(130, 0);

	strokeWeight(3);
	stroke('cyan');
	if (flag == true) {
		fill('black');
	}	else {
		fill(col.r, col.b, col.g);
	}
	size = 350 - 2 * size;
    ellipse(20 + m * 90.0 / 200.0, 100.0,
         size * .40, size * .40);

//left pupil
	translate(-130, 0);
	var m = max(min(mouseX, 200), 0);
	var size = m * 150.0 / 200.0;
	var eyeColor = mouseX / (640 / 225);



	strokeWeight(10);
	stroke(255 - eyeColor, 51, 51);
	noFill();
	ellipse(20 + m * 90.0 / 200.0, 100.0,
         size * .19, size * .19);

//right pupil
	translate(130, 0);

	strokeWeight(7);
	stroke(170, 255 - eyeColor, 0);
	noFill();
	size = 350 - 2 * size;
    ellipse(20 + m * 90.0 / 200.0, 100.0,
         size * .04, size * .04);

    
}

function mousePressed() {
	if (flag == true) {
		flag = false;
	} else {
		flag = true;
	}




}

I am a big fan of Takeshi Murakami’s work and especially of his style Superflat. My project is taking his style and trying to bring it to life and have elements move. This project was difficult to start because of its open-ended nature. However, I did appreciate that aspect because it allowed me to experiment with many things.

Jonathan Liang – Looking Outwards – 03

This is a work by Benjamin Dillenburger called Rocailles. Professor Dillenburger is a professor of architecture at the University of Toronto. What I find amazing about this work (and other Dillenburger works as well) is how it uses parametricism to generate beautiful sculptures. What I also admire about many of Dillenburger’s works is that they look that they are incredibly random, but have a computational formula behind how the forms are constructed. As an architecture student, I am pretty familiar with parametricism because it is now part of our core curriculum in school. Architecture now is turning to parametricism and computational design for housing units and designing buildings that can be integrated and be built by robotics. I have never been a big fan of computational design in architecture, but I love computational design when it comes to sculptures, installations, pavilions, and smaller scale works in general.

http://benjamin-dillenburger.com/projects/