mjeong1-Looking Outwards-02-SectionA

An algorithm generates numerous interlocking objects

Computer-generated interlocking 3D joinery, inspired by Japanese joinery by a researcher at University of Applied Arts in Vienna, Aryan Shahabian.

Japanese wood joinery is widely known for its complexity and delicacy. Japanese carpenters have been making this beautiful wood joinery, known as Daiku, from generation to generation. Their exceptionally advanced joinery skill makes not only a wonderful decorative feature, but also a functional piece of design.

Even though this Japanese joinery has long been admired by people, it was almost impossible for normal people to make their own joinery design since it requires a impressive artistic craft. However, the algorithm that Aryan Shahabian created made possible for people without those skills to design their own Daiku. The algorithm handles complex geometry of joinery and organic form of the final object through software.

Furthermore, it might be more interesting if the algorithm could generate curvilinear shape instead of rectangular joinery. It might require additional geometrical solution.

Link to original

Link to archdaily original

mjeong1-Project02-Variable Faces-SectionA

sketch

//Min Young Jeong
//Section A 9:30am
//mjeong1@andrew.cmu.edu
//Project-02-Variable Faces


var facewidth = 150;
var faceheight = 170;
var eyesize = 10;
var a = 100;
var b = 45;
var c = 74;
//color rgb
var earwidth = 50;
var earheight = 40;
var hairx = 200;
var hairy = 400;
//hair
var line = 2;
//eyes stroke weight
var beardlengthx = 0;
var beardlengthy = 0;
var bright = 0;
//background brightness


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

function draw() {
	if (mouseIsPressed) {bright = 0;}
	background(bright);
	bright = bright + 1;
	//background

    noStroke();
    fill(a,b,c);
	quad(width/2,hairy,width/2+hairx,200,width/2+100,100,width/2-100,100);
	triangle(width/2-100,100,width/2-hairx,200,width/2,hairy);
	//hair

    fill(248,170,35);
    ellipse(width/2,height/2-20,facewidth,faceheight);
    //facefoundation

    arc(width/2-facewidth*0.35,height/2-120,earwidth,earheight,PI,0,CHORD);
    arc(width/2+facewidth*0.35,height/2-120,earwidth,earheight,PI,0,CHORD);
    //ear

    fill(253,108,1);
    arc(width/2-facewidth*0.35,height/2-120,earwidth/2,earheight/2,PI,0,CHORD);
    arc(width/2+facewidth*0.35,height/2-120,earwidth/2,earheight/2,PI,0,CHORD);

    fill(a,b,c);
    ellipse(width/2-65,height/2+50,65,65);
    ellipse(width/2+65,height/2+50,65,65);
	//hair2
	
	noStroke();
	fill(253,108,1);
	rectMode(CORNER);
	fill(248,134,35);
	quad(width/2-33,height/2+50,width/2-15,height/2,width/2+15,height/2,width/2+33,height/2+50);
	fill(241,87,1);
	rect(width/2-15,height/2-105,30,155);
	//inside face

	noFill();
	strokeWeight(4);
	stroke(a,b,c);
	ellipse(width/2,height/2-20,facewidth,faceheight);
	//outerfaceline

	noFill();
	strokeWeight(2);
	stroke(b,a,c);
	beginShape();
	curveVertex(width/2,height/2+50);
	curveVertex(width/2,height/2+52);
	curveVertex(width/2+30+beardlengthx,height/2+38+beardlengthy);
	curveVertex(width/2+70+beardlengthx,height/2+40+beardlengthy);
	curveVertex(width/2+80+beardlengthx,height/2+50+beardlengthy);
	endShape();
	beginShape();
	curveVertex(width/2,height/2+50);
	curveVertex(width/2,height/2+52);
	curveVertex(width/2+30+beardlengthx,height/2+48+beardlengthy);
	curveVertex(width/2+70+beardlengthx,height/2+50+beardlengthy);
	curveVertex(width/2+80+beardlengthx,height/2+60+beardlengthy);
	endShape();
	beginShape();
	curveVertex(width/2,height/2+50);
	curveVertex(width/2,height/2+52);
	curveVertex(width/2-30-beardlengthx,height/2+38+beardlengthy);
	curveVertex(width/2-70-beardlengthx,height/2+40+beardlengthy);
	curveVertex(width/2-80-beardlengthx,height/2+50+beardlengthy);
	endShape();
	beginShape();
	curveVertex(width/2,height/2+50);
	curveVertex(width/2,height/2+52);
	curveVertex(width/2-30-beardlengthx,height/2+48+beardlengthy);
	curveVertex(width/2-70-beardlengthx,height/2+50+beardlengthy);
	curveVertex(width/2-80-beardlengthx,height/2+60+beardlengthy);
	endShape();
	//beard

	noStroke();
	fill(253,108,1);
	arc(width/2,height/2+50,70,70,0,PI,CHORD);
	fill(a,b,c);
	arc(width/2,height/2+50,30,30,0,PI,CHORD);
	//nose

	strokeWeight(line);
	stroke(250);
    fill(0);
    ellipse(width/2-facewidth*0.25,height/2-20,eyesize,eyesize);
    ellipse(width/2+faceheight*0.25,height/2-20,eyesize,eyesize);
    //eyes

}
function mousePressed(){
    eyesize = random(0,20);
    earwidth = random(10,60);
    earheight = random(10,80);
    hairx = random(200,240);
    hairy = random(400,440);
    a = random(0,15);
    b = random(50,200);
    c = random(50,100);
    line = random(1,7);
    beardlengthx = random(0,30);
    beardlengthy = random(0,20);

}

For this assignment, I drew lion’s face with variables for eye size, ear size, hair style, hair color, and length of beard. Background also fades alway as soon as a person presses the mouse and it reappears for each mouse click, which I wanted to highlight each variable face of the lion. For this assignment I challenged to use curveVertex to depict the smooth curve for lion’s beard.

mjeong1-Project-01-Face

sketch

//Min Young Jeong
//Section A 9:30am
//mjeong1@andrew.cmu.edu
//Project-01

function setup() {
    createCanvas(500,500);
    background(99,82,129);
}

function draw() {

	fill(137,100,61);
	noStroke();	
	rect(80,150,330,300,20);
	//hair

	var c = color(255,235,205);
	fill(c);
	noStroke();
	ellipse(250,250,270,360);
	//face
	ellipse(120,250,60,80);
	//ear

	fill(137,100,61);
	noStroke();	
	rect(110,150,10,150);
	arc(245,170,330,260,PI,0,CHORD);
	fill(255,235,205);
	ellipse(265,150,100,100);
	fill(137,100,61);
	ellipse(300,150,100,100);
	fill(255,235,205);
	rect(250,170,100,30);
	//hair

	fill(78,61,54);
	noStroke();
	quad(145,205,175,185,175,200,145,208);
	quad(175,185,175,200,220,200,220,185);
	//left eyebrow
	quad(270,185,270,200,315,200,315,185);
	quad(315,200,315,185,345,205,345,208);
	//right eyebrow

	noFill();
	strokeWeight(3);
	stroke(82,63,35);
	beginShape();
	curveVertex(250, 250);
	curveVertex(250, 250);
	curveVertex(230, 290);
	curveVertex(230, 300);
	curveVertex(260, 305);
	curveVertex(260, 320);
	endShape();
	//nose

	fill(255,128,128);
	noStroke();
	arc(235,360,50,25,PI,0,CHORD);
	arc(265,360,50,25,PI,0,CHORD);
	arc(250,random(362,370),80,30,0,PI,CHORD);
	//lips

	fill(255,195,195);
	noStroke();
	ellipse(180,300,70,30);
	ellipse(320,300,70,30);
	//blush

	noFill();
	strokeWeight(2);
	stroke(74,44,0);
	curve(160,230,160,240,150,220,170,200);
	curve(170,230,170,240,160,220,180,200);
	curve(340,230,340,240,350,220,330,200);
	curve(330,230,330,240,340,220,320,200);
	//eyelashes

	fill(255,249,250);
	strokeWeight(2);
	stroke(82,63,35);
	ellipse(180,240,60,25);
	ellipse(320,240,60,25);
	fill(74,44,0);
	noStroke();
	ellipse(160,240,22,22);
	ellipse(300,240,22,22);
	fill(0);
	noStroke();
	ellipse(160,240,15,15);
	ellipse(300,240,15,15);
	fill(255,249,250);
	noStroke();
	ellipse(155,235,5,5);
	ellipse(295,235,5,5);
	//eyes

	fill(250,250,250);
	noStroke();
	ellipse(10,10,200,200);
	triangle(100,100,70,70,50,100);
	//textbubble

	fill(0,102,153);
	textSize(15);
	text("Hi My name is",5,30);
	textSize(24);
	text("Min",20,60);
	//text
}

I drew face and ear using ellipse as foundation of my portrait. And I simply used rectangle and semi-circle to illustrate my hair. Eyebrows were a bit more tricky since I had to find exact x and y coordinates to draw the geometry. Nose was created by simple curve. For my portrait, I wanted to put some text in text bubble and make it animated by making bottom lip move based on random y coordinate.

mjeong1-LookingOutwards-01

Workers That Live In The Mirrors by Dave Colangelo

This is a architectural projection which is located in United Steelworkers Hall. Toronto, Canada. The artist created this project based on his belief in public art being interactive with viewers.

“we want public art that can talk and listen, public art that we can click on, swipe, share, capture, and converse with and about. Public art that tell us something about the place it is in, about ourselves and others as we engage with it, and that connects us to other people and times, both near and far.” – Dave Colangelo

This art project can interact with people by introducing multiple, projection-mapped scenes of work and resistance in contemporary economies. It created connection between people by giving them a platform to share their thoughts and everyday life. It was a successful project that illustrates the situation of our society through series of projection. Also, the artist chose a red-brick masonry wall of “steelworkers” building for the projection instead of white wall inside of exhibition hall. To me, it successfully drew intention from pedestrians walking by the street and it effectively depict his belief in art being engaging and interactive to public .

However,it could be more effective if it can be responsive to reaction of the viewers. Perhaps, images in projection change based on various social data we put in or the projection has sensor that detects physical reaction of people and responds to it visually.

Workers that Live in the Mirrors