Author: Jamie

jamieh-LookingOutwards-02

Subdivided Columns (2010) at the Gwangju Design Biennale

Michael Hansmeyer uses algorithm to generate architecture that is almost impossible to imagine, draft and model by hand. He is inspired by nature and its concept of cell division, which he ties together with architecture. In his TED talk, he talked about how we can fold paper multiple times until we are limited by ourselves and/or the folded material thickness. However, by using the computer to help generate these actions, such actions are possible. His example showed a cube being folded in multiple directions and ways to become a completely different form. He uses code to control the folding, such as ratios, so that he is designing the process instead of the form. This process can then generate an infinite amount of possibilities to the final form. Although the form becomes complex, it can be realized through 3D printing to become a part of architecture. His work Subdivided Columns (2010) was designed with such algorithm to take an abstracted doric column and let it evolve digitally into an elaborate, ornamental column.

What I admire about Hansmeyer is his openmindedness to the many possible end results to an architectural form. I would love to see what other types of rules he can apply to his code (other than folding) that can generate another set of possibilities.

jamieh-Project-02-Variable-Face

sketch

/*
Jamie Ho
10:30
jamieh@andrew.cmu.edu
Project 02
*/

 // Simple beginning template for variable face.
 var eyeSize = 20;
 var faceWidth = 100;
 var faceHeight = 150;
 var eyebrowSize = 30;
 var eyebrowThickness = 1.5;
 var noseWidth = 4;
 var noseHeight = 25;
 var neckWidth = faceWidth/4;
 var neckHeight = neckWidth/2;


 width = 640;
 height = 480;

 var shirtW = 150;
 var shirtH = 100;
 var shoulder = 50;
 var buttonSize = 5;
 var handSize = 30;



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

 }

 function draw() {
    noStroke();
    background(229, 242, 255);
    
//Hair (Behind)
    noStroke();
    fill(0, 0, 0);
    rect(width/2-faceWidth/2, height/2, faceWidth*1.08, faceHeight);

//Neck
    noStroke();
    fill(255, 235, 217);
    rect(width/2-neckWidth/2, height/2+faceHeight/2-5, neckWidth, neckHeight*1.25);

//Shirt
    noStroke();
    fill(256, 256, 256);
    rect(width/2-shirtW/2, height/2+faceHeight/2.1+neckHeight, shirtW, shirtH, shoulder, shoulder, 0, 0);

//NeckTriangle
    fill(255, 235, 217);
    triangle(
        width/2-neckWidth/2, height/2+faceHeight/2.1+neckHeight,
        width/2-neckWidth/2+neckWidth, height/2+faceHeight/2.1+neckHeight,
        width/2, height/2+faceHeight/2.1+neckHeight*2.1);

//Face Colour
    fill(255, 242, 230);
    
//Face shape
    ellipseMode(CENTER);
    ellipse(width/2, height/2, faceWidth, faceHeight);
 
//Mouth
    noStroke();
    fill(256, 256, 256);
    ellipse(width/2, height/2+height/12, faceWidth/3, faceHeight/8);
    fill(255, 242, 230);
    ellipse(width/2, height/2+height/14, faceWidth/2, faceHeight/8);

 //Lip colour
    noFill();
    stroke(255, 219, 228);
    strokeWeight(1);
    arc(width/2, height/2+height/12, faceWidth/3, faceHeight/8, 0, PI);


//Eyes
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    
    //Outer (white)
    noStroke();
    fill(256, 256, 256);
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);

    //Middle (Light brown)
    fill(153, 90, 0);
    ellipse(eyeLX, height / 2, eyeSize/2, eyeSize/2);
    ellipse(eyeRX, height / 2, eyeSize/2, eyeSize/2);

    //Inner (Dark brown)
    fill(51, 25, 0);
    ellipse(eyeLX, height / 2, eyeSize/3, eyeSize/3);
    ellipse(eyeRX, height / 2, eyeSize/3, eyeSize/3);

//Eyebrows
    noFill();
    stroke(0, 0, 0);

    strokeWeight(eyebrowThickness);
    arc(eyeLX, height/2, eyebrowSize, eyebrowSize, PI+QUARTER_PI, TWO_PI-QUARTER_PI);
    arc(eyeRX, height/2, eyebrowSize, eyebrowSize, PI+QUARTER_PI, TWO_PI-QUARTER_PI);

//Nose (does not change atm)
	//252, 234, 208 AND 255, 238, 215

    stroke(255, 229, 204);
    strokeWeight(3);
    line(width/2, height/2-noseWidth, width/2+noseWidth, height/2+noseHeight); 
    strokeWeight(1.5);
    line(width/2+noseWidth, height/2+noseHeight, width/2-noseWidth*1.2, height/2+noseHeight*1.2);

    //Nose shadow
    stroke(255, 243, 230);
    strokeWeight(4);
    line(width/2+noseWidth, height/2-noseWidth, width/2+noseWidth*2, height/2+noseHeight); 
    strokeWeight(2);
    line(width/2+noseWidth*2, height/2+noseHeight, width/2, height/2+noseHeight*1.2);

    //Nostril
    strokeWeight(3);
    line(width/2-noseWidth*2, height/2+noseHeight, width/2-noseWidth*3, height/2+noseHeight*1.1);
    line(width/2-noseWidth*2, height/2+noseHeight, width/2-noseWidth*3, height/2+noseHeight*1.1);


//Hair
	noStroke(51, 17, 0);
	strokeWeight(2);  
    
    fill(51, 17, 0);
    beginShape();
    vertex(width/2-faceWidth/6, height/2-faceHeight/4);             //Anchor point 1
    bezierVertex( 
                 width/2+faceWidth/8, height/2-faceHeight/3,        //Control point 1
                 width/2+faceWidth, height/2+faceHeight/8,          //Control point 2
                 width/2+faceWidth/3, height/2+faceHeight*1.25);    //Anchor point 2
    bezierVertex(
                 width/2+faceWidth/1.5, height/2+faceHeight,
                 width/2+faceWidth*1.1, height/2-faceHeight/2,
                 width/2-faceWidth/8, height/2-faceHeight/2);
    endShape();
    
    beginShape();
    vertex(width/2-faceWidth/6, height/2-faceHeight/4);              //bottom hair top point 
    bezierVertex(
                 width/2-faceWidth/1.25, height/2+faceHeight/8,      //bottom hair control point
                 width/2-faceWidth/6, height/2+faceHeight*1.5,       //bottom hair control point
                 width/2-faceWidth/2, height/2+faceHeight);
    bezierVertex(
                 width/2-faceWidth/3, height/2+faceHeight*0.8,
                 width/2-faceWidth, height/2-faceHeight/3,
                 width/2-faceWidth/8, height/2-faceHeight/2);        //top hair top point
    endShape();


//Shirt Buttons
    noStroke();
    fill(0, 0, 0);
    ellipse(width/2, height/2+faceHeight*0.75, buttonSize, buttonSize);
    ellipse(width/2, height/2+faceHeight*0.90, buttonSize, buttonSize);
    ellipse(width/2, height/2+faceHeight*1.05, buttonSize, buttonSize);

    fill(217, 217, 217);
    ellipse(width/2, height/2+faceHeight*0.75, buttonSize*0.75, buttonSize*0.75);
    ellipse(width/2, height/2+faceHeight*0.90, buttonSize*0.75, buttonSize*0.75);
    ellipse(width/2, height/2+faceHeight*1.05, buttonSize*0.75, buttonSize*0.75);

//Table
    fill(102, 51, 0);
    rect(0, height/2+faceHeight/2.1+neckHeight+shirtH, width, height-(height/2+faceHeight/2.1+neckHeight+shirtH));

//Hand
    fill(255, 235, 217);
    ellipse(width/2-shirtW/2.5, height/2+faceHeight/2.1+neckHeight+shirtH, handSize, handSize);
    ellipse(width/2+shirtW/2.5, height/2+faceHeight/2.1+neckHeight+shirtH, handSize, handSize);
    //thumb
    ellipse(width/2-shirtW/3, height/2+faceHeight/2.1+neckHeight+shirtH, handSize/3, handSize/2);
    ellipse(width/2+shirtW/3, height/2+faceHeight/2.1+neckHeight+shirtH, handSize/3, handSize/2);

}

 function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges. For example,
    // 'faceWidth' gets a random value between 75 and 150.
    faceWidth = random(75, 150);
    faceHeight = random(100, 175);
    eyeSize = random(10, 30);
    eyebrowThickness = random(1, 5);
    eyebrowSize = random(25, 35);
    noseWidth = random(2, 5);
    noseHeight = random(15, 20);
    shirtW = random(100, 300);
    shoulder = random(25, 100);
    buttonSize = random(5, 10);

}

This project is inspired by freshmen 15. Through writing this code, I understand the purpose of using variables and how it makes the code cleaner.

jamieh-Project-01-Face

sketch

function setup() {
    x = 500;
    y = 350;

 //Distance from centre
    dist = 31

    createCanvas(x, y);
    background(235, 252, 255);

//Hair 
	//Back (dark)
    fill(0, 0, 0);
    rect(168.5, 179, 159, 300);

//Shirt
	noStroke();
	fill(255, 210, 227);
	quad(145, 290, 355, 290, 365, y, 135, y);

//Neck
	noStroke();
    fill(245, 230, 203);
    rect(x/2-20, 260, 40, 30);
    quad(230, 260, 270, 260, 252, 280, 248, 280);

 //Face shape
    noStroke();
    fill(255, 244, 223);
    ellipse(x/2, y/2, 140, 180)

   
 //Hair
	//Side
	c = 12
	d = 125
	fill(51, 25, 0);
    quad(200-c, 120, 210-c, 120, 190-c, 300, 185-c, 175);
    quad(188+d, 118, 200+d, 165, 190+d, 300, 185+d, 165)
 	
    stroke(51, 25, 0);
    strokeWeight(10);
    line(306, 120, 315, 170);

 //Mouth
    noStroke();
    fill(256, 256, 256);
    ellipse(x/2, y/2+40, 75, 50);
    fill(255, 244, 223);
    ellipse(x/2, y/2+15, 120, 70);

 //Lip colour
    noFill();
    stroke(255, 219, 228);
    strokeWeight(2);
    arc(x/2, y/2+42, 75, 45, 0, PI);

 //Cheeks
    stroke(252, 229, 238);
    strokeWeight(2);
    line(x/2-45, y/2+6, x/2-52, y/2+10);
    line(x/2-37, y/2+6, x/2-44, y/2+10);
    line(x/2-29, y/2+6, x/2-36, y/2+10);

    line(x/2+47, y/2+6, x/2+40, y/2+10);
    line(x/2+39, y/2+6, x/2+32, y/2+10);
    line(x/2+31, y/2+6, x/2+24, y/2+10);

 //Eyebrows
    fill(0, 0, 0)
    stroke(0, 0, 0);
    strokeWeight(1.5);
    arc(x/2-dist, y/2-7, 50, 50, PI+QUARTER_PI, TWO_PI-QUARTER_PI);
    arc(x/2+dist, y/2-7, 50, 50, PI+QUARTER_PI, TWO_PI-QUARTER_PI);
    
    noStroke();
    fill(255, 244, 223);
    rect(x/2-dist-18.5, y/2-29, dist*3.2, 12)

 //Eye
    noStroke();
    fill(256, 256, 256);
    ellipse(x/2-dist, y/2-10, 27, 25);
    ellipse(x/2+dist, y/2-10, 27, 25);

//Eyeball
	//Outer
    noStroke();
    fill(153, 90, 0);
    ellipse(x/2-dist, y/2-10, 17, 17);
    ellipse(x/2+dist, y/2-10, 17, 17);

    //Middle
    noStroke();
    fill(102, 51, 0);
    ellipse(x/2-dist, y/2-10, 11, 11);
    ellipse(x/2+dist, y/2-10, 11, 11);

    //Inner
    noStroke();
    fill(51, 25, 0);
    ellipse(x/2-dist, y/2-10, 9, 9);
    ellipse(x/2+dist, y/2-10, 9, 9);

    //Inner
    noStroke();
    fill(256, 256, 256);
    ellipse(x/2-dist-4, y/2-10-4, 4, 4);
    ellipse(x/2+dist-4, y/2-10-4, 4, 4);

    //Smile Eyes
	fill(255, 244, 223);
	ellipse(x/2-dist, y/2+0.5, 30, 10);
	ellipse(x/2+dist, y/2+0.5, 30, 10);

    //Eyelash
    noFill();
    stroke(0, 0, 0);
    strokeWeight(0.75);
    arc(x/2-dist, y/2-10, 25, 25, PI+QUARTER_PI, TWO_PI-QUARTER_PI);
    arc(x/2+dist, y/2-10, 25, 25, PI+QUARTER_PI, TWO_PI-QUARTER_PI);

    noFill();
    stroke(0, 0, 0);
    strokeWeight(0.5);
    arc(x/2-dist-6, y/2-25, 8, 8, HALF_PI, PI);
    arc(x/2-dist-4, y/2-24, 5, 5, HALF_PI, PI);
    arc(x/2+dist+6, y/2-25, 8, 8, 0, HALF_PI);
    arc(x/2+dist+4, y/2-24, 5, 5, 0, HALF_PI);

//Nose
    stroke(252, 234, 208);
    strokeWeight(3);
    line(x/2, y/2-3, x/2+4, y/2+25); 
    strokeWeight(1.5);
    line(x/2+4, y/2+25, x/2-3, y/2+29);

    //Nose shadow
    stroke(255, 238, 215);
    strokeWeight(4);
    line(x/2+4, y/2-3, x/2+8, y/2+25); 
    strokeWeight(2);
    line(x/2+8, y/2+25, x/2, y/2+29);

    //Nostril
    strokeWeight(3);
    line(x/2-8, y/2+24, x/2-11, y/2+28);
    line(x/2-8, y/2+24, x/2-11, y/2+28);


//Hair
    noStroke();
    fill(51, 25, 0);
 	
 	//Sides
 	quad(217, 110, 290, 144, 311, 185, 311, 121);
 	quad(195, 112, 217, 110, 192, 160, 180, 186);
 	//fill(256, 256, 256);
 	
 	//Fringe
 	quad(186, 122, 210, 96, 240, 85, 282, 94);
 	quad(282, 94, 310, 115, 290, 144, 210, 105);
 	
 	//Top
 	noFill();
 	stroke(51, 25, 0);
 	strokeWeight(14);
 	arc(249, 167, 138, 160, PI, 0)

 	//front hair
 	stroke(51, 25, 0);
 	strokeWeight(20);
 	bezier(225, 92, 385, 70, 297, 330, 330, 340);
 	bezier(215, 100, 135, 240, 210, 350, 170, 345);

 	strokeWeight(5);
	bezier(211.5, 105, 160, 240, 215, 350, 178, 348);
  	bezier(190, 120, 135, 240, 200, 340, 165, 345);
 	bezier(215, 100, 372, 120, 290, 350, 330, 345);
 	bezier(225, 92, 395, 65, 297, 340, 330, 335);


	
	
 	


}

function draw() {
}

Looking back at my code, I only used a few geometries throughout the entire process, yet I was able to make a self-portrait. The
hardest part of the process was pinpointing the coordinates for the shapes, which got harder especially with quad that required 8 blanks to be filled and arc that required the radians.

jamieh-LookingOutwards-01

I came across the website Tabletop Whale, which is a website by a biology PHD student Eleanor Lutz who spends time creating infographics on science. Although she makes most of her infographics in Photoshop and Illustrator, some of her blog posts are gifs or animated interactive explanations for her topic of the month.

She firstly researches a theme or topic, then once she is sure she understands it well enough to teach others, she will go ahead to design and create the infographics. Her main purpose is to inform others. Eleanor is inspired by the idea that such illustrations can bring surprise and spark interest in topics which others may not even fully understand. This type of project shows that sometimes ideas are best presented through diagrams, illustrations or moving pictures to help others understand. What I appreciate about her approach is that she makes use of different types of media and presentation to present different concepts, from computational 3D modeling to gif making through multiple Photoshop image frames to using Python coding. This just shows that today and in the future, complex information can be visualized and not only read through words on textbooks.