Author: hollyl

Project 4 – String Art

sketch
//simple string art
//hollyl
//section d

var dx1;
var dy1;
var dx2;
var dy2;
var numLines = 25;

function setup(){
	createCanvas(400, 300);
	background(200);
	line(200, 25, 200, 125);
	line(217.67, 132.33, 288.38, 61.17);
	line(225, 150, 325, 150);
	line(217.67, 167.67, 288.38, 238.38);
	line(200, 175, 200, 275);
	line(182.33, 167.67, 111.62, 238.38);
	line(175, 150, 75, 150);
	line(182.33, 132.33, 111.62, 61.17);
	dx1 = (200 - 200)/numLines;
	dy1 = (125 - 25)/numLines;
	dx2 = (288.38 - 217.67)/numLines;
	dy2 = (61 - 132.33)/numLines;
	dx3 = (325 - 225)/numLines;
	dy3 = (150 - 150)/numLines;
	dx4 = (288.38 - 217.67)/numLines;
	dy4 = (238.38 - 167.67)/numLines;
	dx5 = (200 - 200)/numLines;
	dy5 = (275 - 175)/numLines;
	dx6 = (182.33 - 111.62)/numLines;
	dy6 = (238.38 - 167.67)/numLines;
	dx7 = (175 - 75)/numLines;
	dy7 = (150 - 150)/numLines;
	dx8 = (182.33 - 111.62)/numLines;
	dy8 = (132.33 - 61.17)/numLines;
}

function draw(){

	var x1 = 200;									//north-north-east
	var y1 = 25;
	var x2a = 217.67;
	var y2a = 132.33;
	for(var i = 0; i <= numLines; i += 1){
		line(x1, y1, x2a, y2a);
		x1 += dx1;
		y1 += dy1;
		x2a += dx2;
		y2a += dy2;
	}

	var x2b = 288.38;								//north-east-east
	var y2b = 61.17;
	var x3a = 225;
	var y3a = 150;
	for(var i = 0; i <= numLines; i += 1){
		line(x2b, y2b, x3a, y3a);
		x2b -= dx2;
		y2b -= dy2;
		x3a += dx3;
		y3a -= dy3;
	}

	var x3b = 325;									//south-east-east
	var y3b = 150;
	var x4a = 217.67;
	var y4a = 167.67;
	for (var i = 0; i <= numLines; i += 1){
		line(x3b, y3b, x4a, y4a);
		x3b -= dx3;
		y3b += dy3;
		x4a += dx4;
		y4a += dy4;
	}

	var x4b = 288.38;								//south-south-east
	var y4b = 238.38;
	var x5a = 200;
	var y5a = 175;
	for (var i = 0; i <= numLines; i += 1){
		line(x4b, y4b, x5a, y5a);
		x4b -= dx4;
		y4b -= dy4;
		x5a += dx5;
		y5a += dy5;
	}

	var x5b = 200;									//south-south-west
	var y5b = 275;
	var x6a = 182.33;
	var y6a = 167.67;
	for (var i = 0; i <=numLines; i += 1){			
		line(x5b, y5b, x6a, y6a);
		x5b += dx5;
		y5b -= dy5;
		x6a -= dx6;
		y6a += dy6;
	}

	var x6b = 111.62;								//south-west-west
	var y6b = 238.38;
	var x7a = 175;
	var y7a = 150;
	for (var i = 0; i <= numLines; i += 1){
		line(x6b, y6b, x7a, y7a);
		x6b += dx6;
		y6b -= dy6;
		x7a -= dx7;
		y7a += dy7;
	}

	var x7b = 75;									//north-west-west
	var y7b = 150;
	var x8a = 182.33;
	var y8a = 132.33;
	for (var i = 0; i <= numLines; i += 1){
		line(x7b, y7b, x8a, y8a);
		x7b += dx7;
		y7b += dy7;
		x8a -= dx8;
		y8a -= dy8;
	}

	var x8b = 111.62;								//north-north-west
	var y8b = 61.17;
	var x1b = 200;
	var y1b = 125;
	for (var i = 0; i <= numLines; i += 1){
		line(x8b, y8b, x1b, y1b);
		x8b += dx8;
		y8b += dy8;
		x1b += dx1;
		y1b -= dy1;
	}

	noLoop();
}

notes:

LO 4

I have decided to focus on is Christina Kubisch’s Cloud, once piece of the collection I was able to experience SFMOMA. Kubisch’s Cloud sculpture is a snarl of vivid red wires and cable ties suspended in the gallery space. Visitors experience the audio of the piece by wearing headphones that intercept the electromagnetic transmission from the piece, with each movement changing the audio that is transmitted. General areas have sound recorded from the same space but ultimately are still different sounds. In essence, the viewers become human mixers, moving around or turning their heads to create what they want to hear from Cloud, creating real-time compositions.

Kubisch’s Cloud project started in 2011, and the project has become even more sophisticated since then. The sounds of the Cloud are programmed into different sections of the physical Cloud, creating the interaction fo moving around the Cloud to experience different sounds.

Project 3 – Dynamic Drawings

sketch

Move your mouse over the canvas to change the size of the bubbles.
Moving your mouse will also change the colors of the bubbles.
Holding down left click while mousing over the canvas will keep the bubbles on the canvas until you let go of left click.
Left clicking will while moving will change lighten the background.

//holly liu
//section d
//dynamic drawing

var x = 25;
var y = 25;
var s = 20;
var b = 50;

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

function mouseMoved(){														//for as long as mouse is held down, the generated circles will not refesh
	clear();
	background(b);
	draw();
}

function draw(){
	noStroke();
	var r = 0.425 * mouseX;													//r value changes with x movement of mouse; values scaled to size of canvas 
	var g = 0.425 * mouseY;													//g value changes with y movement of mouse; values scaled to size of canvas
	var b = 108;
	fill(r, g, b);
	for (let i = 25; i <= 575; i += 50){									//generates circles
		for(let j = 25; j <= 575; j+= 50){
			s = 75 * exp(((-1) * dist(mouseX, mouseY, i, j))/100); 			//changes size of circles based on distance from mouse
			circle(i, j, s);
		}
	}
}

function mouseClicked(){													//bkg change w/ left click
	b += 10
	if(b == 200){
		b = 50
	}
}

LO 3

An artist who utilizes computational fabrication is Taekyeom Lee(@taekyeom). When I first started following his work, he primarily focused on 3D printing ceramics. Although that has stayed as a consistent feature of his projects, he has also ventured into working with using robots to draw intricate letterforms, printing letterforms through ceramics, and mixing in generative design. Most recently, he has printed miniature versions of his ceramics pieces to print molds for casting little soaps.

My personal favorite of his projects has been an ongoing series of printed ceramics that have evolved into many different mediums of print materials. I found great aesthetic appeal in the forms of his printed ceramics, which often focus on radial symmetry and takes inspiration from nature. He also had very interesting pieces that focus on the internal structure of the print; from the outside, it’s an unassuming form, but when you look inside, the form holds intricate twisting tunnels. I think that in creating the pieces, there is an element of letting the program make decisions and leaving complete control of how the forms come out in the hands of the printer and chance–many of his projects have collapsed while wet, rendering the print failed.

internal shot of a ceramic print
internal shot of corn using translucent filament
internal shot of a ceramic print

Project 2 – Variable Faces

Variable Faces:

sketch
//holly liu
//section D
//variable faces

var faceW = 200
var faceH = 200
var mouthW = 40
var mouthH = 50

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

function draw(){
	fill(255);
	strokeWeight(3);
	stroke(0);

	faceW = random(200, 350);
	faceH = random(200, 510);
	ellipse((width/2), (height/2), faceW, faceH);

	var r = random(4);

	if(r < 1) {
		circle(((width/2) - (faceW/3)), (height/2), 50);														//left eye
		circle(((width/2) + (faceW/3)), (height/2), 50);														//right eye
		fill(0);
		circle(((width/2) - (faceW/3)), (height/2), 30);														//left pupil
		circle(((width/2) + (faceW/3)), (height/2), 30);														//right pupil
	} else if(r < 2) {
		arc(((width/2) - (faceW/3)), (height/2), 60, 100, PI, TWO_PI)											//left brow
		arc(((width/2) + (faceW/3)), (height/2), 60, 100, PI, TWO_PI)											//right brow
		circle(((width/2) - (faceW/3)), (height/2), 50);														//left eye
		circle(((width/2) + (faceW/3)), (height/2), 50);														//right eye
		fill(0);
		circle(((width/2) - (faceW/3)), (height/2), 10);														//left pupil
		circle(((width/2) + (faceW/3)), (height/2), 10);														//right pupil
	} else if(r < 3) {
		arc(((width/2) - (faceW/3)), (height/2), 50, 75, 0, PI)													//uW
		arc(((width/2) + (faceW/3)), (height/2), 50, 75, 0, PI)													//Wu
	} else {
		fill(0);
		circle(((width/2) - (faceW/3)), (height/2), 50);														//left eye
		circle(((width/2) + (faceW/3)), (height/2), 50);														//right eye
		fill(255);
		circle(((width/2) - (faceW/3)) - 15, (height/2), 15);													//L left sparkle
		circle(((width/2) - (faceW/3)), (height/2) - 15, 15);													//l right sparkle
		circle(((width/2) + (faceW/3)) - 15, (height/2), 15);													//r left sparkle
		circle(((width/2) + (faceW/3)), (height/2) - 15, 15);													//r right sparkle
	}

	r = random(3);
	
	if(r < 1) {
		noFill();
		arc(((width/2) - (mouthW/2)), (height/2), mouthW, mouthH, 0, PI);										//uwu left
		arc(((width/2) + (mouthW/2)), (height/2), mouthW, mouthH, 0, PI);										//uwu right
	} else if (r < 2) {
		fill(0)
		ellipse((width/2), ((height/2) + (faceH*(1/5))), mouthW, mouthH);										//:0
	} else {
		fill(0);
		noStroke();																								//grin
		arc((width/2), ((height/2) + (faceH*(1/5))), (mouthW*3), (mouthH*2), 0, PI);
	}

	r = random(3);

	if(r < 1){
		strokeWeight(3);
		stroke(0);
		noFill();
		arc(((width/2) + 50), ((height/2) - (faceH/2)), 100, 100, PI, PI+((3/4)*PI));							//3 hairs
		arc(((width/2) - 50), ((height/2) - (faceH/2)), 100, 100, PI+((1/4)*PI), TWO_PI);
		line((width/2), ((height/2) - (faceH/2)), (width/2), (((height/2) - (faceH/2)) - 100));
		console.log(1);
	} else if(r < 2) {
		strokeWeight(3);
		stroke(0);
		line((width/2), ((height/2) - (faceH/2)), (width/2), (((height/2) - (faceH/2)) - 50));					//flower
		fill(255);
		circle((width/2), (((height/2) - (faceH/2)) - 40), 20, 20);
		circle((width/2), (((height/2) - (faceH/2)) - 60), 20, 20);
		circle(((width/2) + 10), (((height/2) - (faceH/2)) - 50), 20, 20);
		circle(((width/2) - 10), (((height/2) - (faceH/2)) - 50), 20, 20);
		circle((width/2), (((height/2) - (faceH/2)) - 50), 20, 20);
		noFill();
		arc(((width/2) + 25), ((height/2) - (faceH/2)), 50, 50, PI, PI + HALF_PI);
		arc(((width/2) - 25), ((height/2) - (faceH/2)), 50, 50, PI + HALF_PI, TWO_PI);
		line(((width/2) - 25), ((height/2) - (faceH/2) - 25), (width/2), ((height/2) - (faceH/2)));
		line(((width/2) + 25), ((height/2) - (faceH/2) - 25), (width/2), ((height/2) - (faceH/2)));
		console.log(2);
	} else {
		strokeWeight(3);
		stroke(0);
		fill(255);
		arc((width/2), ((height/2) - 30), (faceW + 20), (faceH - 20), PI, TWO_PI);								//bowl cut
		line(((width/2) - (faceW/2) - 10), ((height/2) - 30), ((width/2) + (faceW/2) + 10), ((height/2) - 30));
		line((width/2), ((height/2) - 30), (width/2), ((height/2) - (faceH * (1/4))));
		line(((width/2) - (faceW/4)), ((height/2) - 30), ((width/2) - (faceW/6)), ((height/2) - (faceH * (1/4))));
		line(((width/2) + (faceW/4)), ((height/2) - 30), ((width/2) + (faceW/6)), ((height/2) - (faceH * (1/4))));
		console.log(3);
	}

	noLoop();
}

function mousePressed(){
	clear();

	draw();
}

LO2

My choice of computational artist is one of my design professors, Kyuha (Q) Shim. The project I am focusing on for this LO is “Raster”. The images produced in this project are all abstracted versions of previously determined artifacts found during his residency at Frans Masereel Centrum. I chose this project to focus on because it initially seems like simple rasterization of images since the images aren’t so far abstracted that Q’s images are unrecognizable from the original images, however after learning about the program that was applied to create the final pieces, there is a new level of appreciation in the medium, process, and effort put in to consistently transform a set of images.

In the overview of the project, it is explained that a raster lens is applied, and color data from the image dictates the shape of the cells based on a predetermined set of rules. After determining the cells, the balances and relationships between CMYK(primary colors used in print) and considered before being overprinted. The program creates tension within the images by pushing the abstraction of the artifact by manipulation of the resolutions of the grids within the image through a defined range of values. Q also randomizes values within certain parameters to create a consistent set of possible variations as the computer shuffles values to figure out the ideal image.

Since Q is the creator of the program, his sense of artistry was put into the code when he decided what parameters and limitations were appropriate to transform the images.

Project 1: Self Portrait

sketchDownload
//order of layers: bkg > sweater > chest > face > features 
//top to bottom > hair
//bkg: 244, 228, 203
//sweater: 204, 191, 174
//chest: 216, 174, 136
//face: 220, 189, 149
	//eye whites: 235, 219, 215
	//iris & brows: 86, 73, 66
	//lip1: 221, 143, 139
	//lip2: 179, 109, 105


function setup() {
    createCanvas(800, 1000);
    background(244, 228, 203);						//bkg
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
	noStroke();

	fill(204, 191, 174);							//sweater
	rect(650, 600, 150, 200);

	fill(216, 174, 136);							//chest skin
	rect(400, 650, 250, 350);
	arc(650, 875, 50, 250, 0, HALF_PI);

	fill(220, 189, 149);							//face skin
	rect(100, 200, 500, 300);
	arc(400, 675, 250, 100, 0, HALF_PI);
	rect(400, 500, 125, 175);

	fill(63, 60, 73);								//hair 
	arc((425/2), 180, 200, 200, PI, TWO_PI);		//hair positive
	arc(350, 80, 300, 125, 0, TWO_PI);
	arc(500, 250, 250, 350, PI+HALF_PI, TWO_PI);
	arc(125, 400, 250, 450, PI, PI+HALF_PI);
	arc(400, 1000, 250, 550, 0, TWO_PI);
	rect(0, 375, 150, 350);
	rect(0, 725, 400, 275);
	arc(800, 600, 600, 650, 0, PI);
	rect(625, 250, 175, 350);
	rect(150, 450, 100, 200);
	rect(150, 650, 250, 75);
	rect(125, 150, 100, 75);
	arc(125, 225, 100, 300, 0, HALF_PI);
	rect(275, 75, 225, 175);
	rect(500, 250, 125, 150);
	rect(550, 400, 75, 200);
	arc(550, 600, 100, 400, PI, PI+HALF_PI);

	fill(220, 189, 149);							//face skin
	arc(300, 250, 400, 225, PI+HALF_PI, TWO_PI);	//hair negative
	arc(300, 225, 250, 175, 0, PI+HALF_PI);
	arc(400, 375, 550, 700, HALF_PI, PI);
	arc(500, 400, 100, 300, PI+HALF_PI, TWO_PI);
	arc(320, 397, 490, 515, PI+HALF_PI, TWO_PI);
	fill(63, 60, 73);								//hair
	arc(575, 600, 150, 500, PI, PI+HALF_PI);		
	fill(244, 228, 203);							//bkg
	arc(800, 250, 350, 400, HALF_PI, PI);

	fill(86, 73, 66);								//brow
	arc((425/2), (725/2), 75, 100, PI, PI+HALF_PI);	//left brow
	strokeWeight(51/2);
	stroke(86, 73, 66);
	line((425/2), 325, 300, 333);
	noStroke();
	rect(200, 325, 50, 25)
	fill(220, 189, 149);							//face skin
	noStroke();
	rect(250, 325, 75, 25);
	fill(86, 73, 66);								//brow
	arc(250, 325, 120, 40, 0, PI);
	fill(220, 189, 149)								//face skin
	arc((425/2), (725/2), 75, 50, PI, PI+HALF_PI);
	arc((425/2), (725/2), 175, 50, PI+HALF_PI, TWO_PI);

	fill(86, 73, 66)								//brow
	arc(475, 300, 100, 50, PI+HALF_PI, TWO_PI);		//right brow
	strokeWeight(25);
	stroke(86, 73, 66);
	line(400, (625/2), 475, (575/2))
	noStroke();
	fill(220, 189, 149)								//face skin
	arc(500, 302, 50, 15, PI, TWO_PI);
	arc(476, 325, 275, 50, PI, PI+HALF_PI);
	fill(86, 73, 66);								//brow
	arc(431, 300, 90, 20, 0, HALF_PI);
	ellipse(420, 308, 62, 25);
	strokeWeight(10)
	stroke(220, 189, 149)							//face skin
	line(480, 303, 400, 330)
	noStroke();

	fill(216, 174, 136)								//chest skin
	arc(425, 375, 75, 250, HALF_PI, PI);			//nose bridge
	fill(220, 189, 149);							//face skin
	arc(425, 375, 75, 200, HALF_PI, PI);

	fill(216, 174, 136);							//chest skin
	arc(262, 400, 100, 30, PI, TWO_PI);				//left eye
	arc(250, 400, 125, 50, 0, HALF_PI);
	arc(250, 400, 75, 50, HALF_PI, PI);
	fill(235, 219, 215);							//eye white
	strokeWeight(2);
	stroke(63, 60, 73)								//hair
	arc(275, 400, 75, 20, PI+HALF_PI, TWO_PI);
	arc(275, 413, 100, 46, 	PI, PI+HALF_PI);
	noStroke();
	arc(275, 413, 100, 15, HALF_PI, PI);
	arc(275, 400, 75, 41, 0, HALF_PI);
	fill(86, 73, 66);								//iris
	ellipse(275, 406, 30, 30);

	fill(216, 174, 136);							//chest skin
	arc(475, 391, 116, 82, PI, PI+HALF_PI);			//right eye
	arc(475, 375, 75, 50, PI+HALF_PI, TWO_PI);
	arc(475, 375, 75, 32, 0, HALF_PI);
	fill(220, 189, 149);							//face skin
	rect(500, 350, 25, 50);
	fill(235, 219, 215);							//eye white
	strokeWeight(2);
	stroke(63, 60, 73)								//hair
	arc(450, 391, 60, 50, PI, PI+HALF_PI);
	arc(463, 370, 50, 13, PI, TWO_PI);
	noStroke();
	ellipse(443, 381, 25, 25);
	arc(450, 370, 75, 43, 0, HALF_PI);
	fill(220, 189, 149);							//face skin
	arc(440, 397, 75, 15, PI, TWO_PI);
	fill(86, 73, 66);								//iris
	ellipse(450, 378, 25, 25);

	fill(216, 174, 136)								//chest skin
	arc(425, 495, 35, 39, 0, TWO_PI);						//nose
	arc(350, 525, 50, 116, PI, PI+HALF_PI);
	ellipse(350, 525, 50, 32);
	ellipse(375, 525, 63, 16);
	rect(350, 475, 75, 50);
	fill(220, 189, 149);							//face skin
	ellipse(375, 480, 58, 45);
	ellipse(363, 535, 35, 28);
	ellipse(416, 522, 24, 24);

	fill(179, 109, 105)								//lip2
	arc(400, 600, 150, 75,HALF_PI, PI);				//bottom lip
	arc(400, 575, 150, 125, 0, HALF_PI);
	fill(220, 189, 149);							//face skin
	rect(375, 550, 50, 50);
	fill(221, 143, 139);							//lip1
	arc(413, 575, 125, 16, PI+HALF_PI, TWO_PI);		//top lip
	arc(413, 600, 50, 66, PI, PI+HALF_PI);
	arc(326, 575, 300, 66, 0, HALF_PI);
	arc(388, 600, 125, 50, PI, PI+HALF_PI);
	arc(388, 600, 50, 50 , PI+HALF_PI, TWO_PI);
	fill(220, 189, 149);							//face skin
	triangle(325, 610, 375, 575, 325, 575);			//top lip negative
	triangle(475, 580, 475, 567, 410, 567);
	triangle(475, 580, 480, 567, 475, 567);
	triangle(410, 567, 395, 575, 395, 567);

	noLoop();
}

LO1- My Inspiration

One of my first introductions to computational art/design was through my
interest in ceramics. I started following @turn.studio(Kenny Sing) in high
school because I was interested in his geometrically patterned ceramics
and starting to create my own. I would create my patterns through analog
measurements and sketched designs, but Sing’s use of Illustrator to create
perfectly measured designs inspired me to think about how I could improve
my overall craft and streamline my working process. Sing throws his
pieces, uses its measurements and images of the pieces to create a stencil
for the design, which is then laser cut and then applied to the dried or
fired piece for carving or glazing. This work method is documented on his
social media as a necessary progression from working analog due to his
need to produce pieces more efficiently to keep up with demand. Not only
has his work has become increasingly complex with the utilization of
computation to create a more accurate and effective process, but he also
stepped from simply creating patterns on his ceramics to creating
animations on his pieces.

Although this is more of the use of computation in physical art rather
then purely computational art, his art is what inspired me to look
outwards from traditional mediums to more modern arts.

One of Sing’s bowls, image posted March 6th.