Category: Section E

jooheek_Portrait-01-face

jooheek_portrait

//Joo Hee Kim
//Section E
//jooheek@andrew.cmu.edu
//Project-01

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

function draw() {

	background(49, 45, 142);

	strokeWeight(0);

	//HAIR
	fill(202, 165, 145);
	ellipse(280, 250, 350, 300);

	fill(202, 165, 145);
	arc(150, 325, 115, 320, 900, 100);

	fill(202, 165, 145);
	quad(93, 290, 130, 325, 200, 475, 60, 475);

	fill(49, 45, 142);
	arc(24, 275, 140, 450, 10, 90);

	fill(202, 165, 145);
	arc(160, 473, 200, 100, 0, 130);

	fill(202, 165, 145);
	ellipse(440, 250, 50, 100);

	fill(202, 165, 145);
	quad(400, 250, 465, 245, 505, 475, 380, 475);

	fill(49, 45, 142);
	arc(515, 250, 100, 450, 70, 80);

	fill(202, 165, 145);
	arc(405, 473, 200, 100, 350, 130);

	//EARS
	fill(250, 220, 200);
	ellipse(145, 340, 20, 50);

	fill(250, 220, 200);
	ellipse(455, 340, 20, 50);

	fill(239, 207, 186);
	ellipse(145, 340, 10, 30);

	fill(239, 207, 186);
	ellipse(455, 340, 10, 30);

	//FACE
	strokeWeight(0);
	fill(250, 220, 200);
	ellipse(300, 300, 310, 330);

	fill(250, 220, 200);
	rect(145, 300, 310, 40);

	fill(250, 220, 200);
	ellipse(300, 370, 320, 280);

	fill(244, 212, 191);
	ellipse(200, 400, 100, 100);

	fill(244, 212, 191);
	ellipse(395, 400, 100, 100);

	fill(249, 235, 228);
	ellipse(200, 380, 50, 40);

	fill(249, 235, 228);
	ellipse(395, 380, 50, 40);

	fill(249, 235, 228);
	ellipse(370, 200, 50, 40);

	//EYEBROWS
	fill(144, 119, 105)
	rect(200, 280, 70, 20);

	fill(144 ,119, 105);
	triangle(200, 280, 220, 300, 170, 300);

	fill(144, 119, 105);
	rect(325, 280, 70, 20);

	fill(144, 119, 105);
	triangle(395, 280, 420, 300, 385, 300);

	//NOSE
	fill(249, 235, 228);
	rect(270, 280, 55, 20);

	fill(249, 235, 228);
	triangle(270, 300, 325, 300, 300, 330);

	fill(239, 207, 186);
	rect(280, 380, 40, 30);

	fill(249, 235, 228);
	rect(288, 320, 20, 70);

	fill(249, 235, 228);
	rect(280, 370, 40, 20);

	fill(250, 220, 200);
	ellipse(272, 350, 40, 100);

	fill(250, 220, 200);
	ellipse(325, 350, 40, 100);



	//LIPS
	fill(255, 100, 100);
	ellipse(300, 430, 60, 40);

	fill(250, 220, 200);
	rect(270, 400, 60, 30);

	fill(220, 100, 100);
	triangle(290, 415, 310, 430, 270, 430);

	fill(220, 100, 100);
	triangle(310, 415, 330, 430, 290, 430);


	//EYES
	fill(50, 50, 50);
	ellipse(225, 327, 60, 10);

	fill(255, 255, 255);
	ellipse(225, 330, 60, 10);

	fill(0, 0, 0);
	ellipse(225, 330, 10, 10);

	fill(50, 50, 50);
	ellipse(370, 327, 60, 10);

	fill(255, 255, 255);
	ellipse(370, 330, 60, 10);

	fill(0, 0, 0);
	ellipse(370, 330, 10, 10);






	






}

While I wanted to make my portrait simple, I wanted to give emphasis to the features that are the most unique and prominent on my face. I sketched the way that I wanted to make if first then made my code as similar to it as possible.

juyeonk-Looking Outwards-01

Creator: Paige Smith

Title: Urban Geodes

Year of Creation: 2012~

Link to the project: http://www.thisiscolossal.com/2017/09/crystalline-artworks-by-paige-smith/

Urban Geode by Paige Smith is a set of projects created by filling in the gaps and cracks of the urban structures with paper-folded geodes. These projects not only turn the ugly faults on the buildings in to a piece of artwork, but also bring nature into the urban landscape by introducing the organic form of the geodes’ natural growth. The geodes appear in various colors including bright purple, pink and yellow, and are intended to give these holes more liveliness than the monotonous speckle that is usually used to repair them. The main purpose of the project, according to Smith, is to signify the beauty of the urban landscape and to discover beauty in the mundane. These installations could be found in San Francisco, Madrid, Philadelphia, Dubai, Mali, Istanbul, but most notably in Los Angeles.

I found it interesting that this project used perhaps the most ‘unartistic’ setting to create the artwork. Cracks and rifts along the buildings and sidewalks are something that we hardly recognize as beautiful; if anything, they represent the destruction of the hard work by architects and urban planners. But by filling them in with beautiful crystalline structure, Paige showed the extent to which media outside of the convention could be used to convey that seemingly frivolous and ugly features could be turned into a work of art.

 

 

 

 

dayoungl – Project01

sketch

//Sharon Lee
//Section E
//dayoungl@andrew.cmu.edu
//Project-01
function setup() {
    createCanvas(400,600);
    background(133,205,240);
    angleMode(DEGREES);
}

function draw() {
    //hair
    fill(7,14,33);
    noStroke();
    ellipse(200,300,260,400);

    //arms
    fill(255,214,150);
    noStroke();
    rect(305,502,50,100);
    fill(255,214,150);
    noStroke();
    rect(45,502,50,100);
    
    //sleeves_left
    fill(240,255,255);
    noStroke();
    ellipse(290,500,130,140);
    fill(240,255,255);
    noStroke();
    quad(305,502,355,502,365,570,300,570);
    //sleeves_right
    fill(226,240,240);
    noStroke();
    quad(45,502,95,502,85,570,35,570);
    fill(226,240,240);
    noStroke();
    ellipse(110,500,130,140);

    //body
    fill(240,255,255);
    noStroke();
    quad(105,430,300,430,320,600,80,600);
    fill(226,240,240);
    noStroke();
    triangle(105,430,80,600,240,600);

    //tshirt lines
    stroke(255,207,81);
    strokeWeight(7);
    line(99,500,305,500);
    stroke(207,0,0);
    strokeWeight(4);
    line(99,510,305,510);
  
    //neck
    fill(255,214,150);
    noStroke();
    rect(165,380,70,50);
    fill(255,214,150);
    noStroke();
    ellipse(200,430,70,70);
    fill(191,160,112);
    noStroke();
    arc(201,380,70,85,0,160);

    //face shape
    fill(204,171,120);
    arc(195,230,185,350,0,180);
    fill(255,214,150);
    noStroke();
    //ellipse(200,230,185,200);
    arc(195,225,185,350,0,180);

    //hair1
    fill(7,14,33);
    noStroke();
    arc(110,160,240,200,0,100);
     //triangle(107,230,165,200,293,230);

    //eyes
    fill(7,14,33);
    noStroke();
    ellipse(163,288,34,17);
    fill(7,14,33);
    noStroke();
    ellipse(237,288,34,17);

    fill(255,255,255);
    noStroke();
    ellipse(165,290,30,16);
    fill(255,255,255);
    noStroke();
    ellipse(235,290,30,16);

    //pupils
    fill(7,14,33);
    noStroke();
    ellipse(random(160,170),290,12,12,);
    fill(7,14,33);
    noStroke();
    ellipse(random(230,240),290,12,12);

    //brows
    stroke(7,14,33);
    quad(142,270,179,270,180,272,139,272);
    stroke(7,14,33);
    quad(258,270,221,270,220,272,261,272);

    //nose
    stroke(255,186,130);
    strokeWeight(4);
    line(204,328,200,300);
    stroke(255,186,130);
    strokeWeight(3);
    line(197,331,204,328);

    //mouth
    fill(232,108,150);
    noStroke();
    ellipse(200,360,10,10);
    fill(161,44,75);
    noStroke();
    ellipse(200,362,8,6);
}

dayoungc – Project01

sketch

//Dayoung Chung
//Section E
//dayoungc@andrew.cmu.edu
//Project-01

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

	function draw(){
	background(29,113,71);
	strokeWeight(5);
	fill(211,159,38);
	ellipse(300,300,500,500);

	//hair
    strokeWeight(0);
    fill(61,40,24);
    ellipse(299,230,303,280);
    rect(148,240,302,200);

	//head
	strokeWeight(0);
	fill(252,226,215);
	ellipse(300,320,270,330);

	//eyes 
	strokeWeight(0);
	fill(255);
	ellipse(240,302,40,40);
	ellipse(350,302,40,40);

	//pupils
	strokeWeight(0);
	fill(0);
	ellipse(240,302,20,20);
	ellipse(350,302,20,20);
	
	//nose
	noStroke();
	fill(241,165,157);
	triangle(280,355,295,310,315,355);

	//cheeks
    strokeWeight(0);
    fill(253,112,141);
    ellipse(220,355,66,66);
    ellipse(372,355,66,66);

	//mouth
    stroke(199,42,37);
    strokeWeight(10);
    noFill();
    arc(300,400, 100, 50, 50, 15);

    // left ear
	strokeWeight(0);
	fill(252,226,215);
	ellipse(160,320,25,39);

	// right ear
	strokeWeight(0);
	fill(252,226,215);
	ellipse(440,320,25,39);

	//eyebrow left/right
	noFill();
    stroke(61,40,24);
    strokeWeight(8);
    arc(236, 250, 30, 1, PI, 0);
    arc(350, 250, 30, 1, PI, 0);

    //left glasses
    strokeWeight(5)
    fill (260, 255, 3, 30);
	ellipse(240,302,65,65);

	//right
	strokeWeight(5);
	fill(260, 255, 3, 30);
	ellipse(350,302,65,65);

	//line(glasses)
	strokeWeight(0);
	fill(0);
	rect(270,300,49,7);

}

For my self-portrait, I wanted to create very simple and bold character. I first started off with the head and then built off of that. Before working with p5js, I sketched my character on illustrator to make the process faster and simpler. I really had fun choosing the color palette to make it more balanced. Also, in the process, it was fascinating to understand and utilize graphical primitives into my own piece.

dayoungl – LookingOutwards01

 

 

When I was searching through YouTube couple years ago for a design technology assignment, I encountered an interactive project done by MIT Tangible Media Group and I was really drawn to it. According to the creators’ website, this project is named inFORM and what is interesting about this project is that this machine renders and displays 3-dimensional objects physically so that the viewers are able to interact with “digital information in a tangible way”. There are three main contributors to this project who came up with the concept – Daniel Leithinger, Sean Follmer, and Hiroshi Ishii – along with many other engineers who contributed to the actual making of this program. However, the information on the duration of the project was not clearly mentioned in the website. As the project was conducted under a MIT owned institution, they would have most likely came up with their own system or software for the project but I am not entirely sure about this. Currently, this project is being developed for applications in geospatial data, urban planning, and architecture.

juyeonk-project01-face

sketch

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

    var dir = 1;
    var speed = 0.4;
    var diam = 50;

    
   


function draw() {
    background(140, 196, 249,);
    
    
    //sun and the clouds
    
    

    scale(0.91, 0.91);
    fill(254, 194, 15);
    noStroke ();
    ellipse(158.31,130.26, diam, diam);

    diam += dir * speed;
    if (diam > 147) {
        dir = -dir;
        diam = 147;
    } else if (diam < 120) {
        dir = -dir;
        diam = 120;
    }
    


    
    
    fill (255, 200);
    triangle (56.98, 171.1, 43.35, 222.62, 126.3, 187.65);
    
    fill(39, 170, 225);
    triangle(77, 163, 48, 203, 158, 169);
    
    fill(255, 180);
    triangle(132.6, 221, 92, 177, 204, 154); 
    
    fill (255, 200);
    triangle (56.98, 171.1, 43.35, 222.62, 126.3, 187.65);
    
    fill(122, 199, 226);
    triangle(121, 184, 177, 226, 231, 188);
    
    fill(255, 220);
    triangle(200, 145.5, 151, 221, 278, 183);
    
    fill(30, 67, 132, 140);
    triangle(147, 180, 262, 230, 203, 163);
    
    
    
    //features
    
        //eyes
    fill(0);
    triangle(391.96, 316.21, 413.86, 308.32, 440.01, 321.4);
    
    fill(180, 130, 140);
    triangle(331.78, 295.69, 335.27, 303.7, 348.63, 302.17);
    
    fill(0);
    triangle(331.78, 295.69, 343.28, 290.7, 348.63, 302.17);
    
    fill(0);
    triangle(348.63, 302.17, 343.28, 290.7, 360.7, 305.93);
    
    fill(0);
    triangle(355.2, 294.47, 343.28, 290.7, 360.7, 305.93);
       
    
        //mouth
    
    fill(190, 140, 140);
    triangle(390.92, 333.33, 335.59, 363.51, 400, 389.94);
    
    fill;
    triangle(400, 389.94, 361.67, 398.56, 351.03, 384.26)
    
    fill(78, 49, 30);
    triangle(335.59, 363.51, 335.59, 384.26, 361.67, 398.56);
    
    fill(255);
    triangle(335.59, 363.51, 400, 389.94, 351.03, 384.26);
    
    
    
        //teeth
    
    //hair
    
    fill(0);
    triangle(420.29, 192.24, 442.13, 269.25, 407.64, 216.38);
    
    fill(38, 33, 29);
    triangle(420.29, 192.24, 442.13, 269.25, 522.29, 312.93);
    
    fill(20, 20, 17);
    triangle(420.29, 192.24, 482.36, 211.78, 522.29, 312.93);
    
    fill(0);
    triangle(482.36, 211.78, 522.29, 312.93, 537.53, 269.25);
    
    fill(53, 33, 26);
    triangle(537.53, 269.25, 522.29, 312.93, 619.14, 541.67);
    
    fill(77, 37, 23);
    triangle(522.29, 312.93, 515.69, 433.62, 619.14, 541.67);
    
    fill(93, 47, 25);
    triangle(442.13, 269.25, 522.29, 312.93, 515.69, 433.62);
    
    fill(42, 18, 13);
    triangle(515.69, 433.62, 507.32, 482.99, 580.06, 500.85);
    
    fill(93, 47, 25);
    triangle(515.69, 433.62, 496.15, 473.85, 492.49, 570.4);
    
    fill(68, 40, 27);
    triangle(469.3, 329.96, 515.69, 433.62, 496.15, 473.85);
    
    fill(29, 16, 13);
    triangle(469.3, 329.96, 496.15, 473.85, 453.62, 457.76);
    
    fill(47, 21, 18);
    triangle(469.3, 329.96, 457.16, 360.83, 453.62, 457.76);
    
    fill(102, 66, 48);
    triangle(442.13, 269.25, 434.99, 290.62, 469.3, 329.96);
    
    fill(73, 50, 40);
    triangle(434.99, 290.62, 469.3, 329.96, 457.16, 360.83);
    
    fill(94, 62, 48);
    triangle(442.13, 269.25, 434.99, 290.62, 469.3, 329.96);
    
    fill(121, 75, 60);
    triangle(434.99, 302.17, 457.16, 360.83, 434.99, 290.62);
    
    fill;
    triangle(457.16, 360.83, 453.62, 457.76, 453.62, 398.56);
    
    fill;
    triangle(434.99, 290.62, 457.16, 360.83, 434.99, 290.62);
    
    fill;
    triangle(434.99, 302.17, 442.13, 329.96, 457.16, 360.83);
    
    fill(20, 20, 17);
    triangle(407.64, 216.38, 352.47, 211.78, 361.67, 230.75);
    
    fill(38, 33, 29);
    triangle(352.47, 211.78, 361.67, 230.75, 331.78, 295.69);
    
    fill(50, 24, 14);
    triangle(311.09, 338.22, 327.3, 514.91, 300.26, 581.47);
    
    fill(0);
    triangle(364.07, 440.22, 339.05, 443.49, 380.06, 502.01);
    
    fill(53, 33, 26);
    triangle(407.64, 216.38, 442.13, 269.25, 434.99, 290.62);
    
    fill;
    triangle(339.05, 443.49, 380.06, 502.01, 367.41, 524.43);
    
    fill(76, 51, 41);
    triangle(320.29, 389.94, 331.78, 593.39, 367.41, 524.43);
    
    fill;
    triangle(311.09, 338.22, 320.29, 389.94, 327.3, 514.01);
    
    fill(102, 61, 40);
    triangle(311.09, 338.22, 327.3, 514.01, 300.26, 581.47);
    
    fill(53, 33, 26);
    triangle(327.3, 514.01, 331.78, 593.39, 278.91, 634.77);
    
    fill(76, 51, 41);
    triangle(331.78, 593.39, 283.51, 649.71, 278.91, 634.77);
    
    fill(102, 61, 40);
    triangle(250.17, 641.67, 278.91, 634.77, 283.51, 649.71);
    
    fill;
    triangle(581.17, 662.36, 613.39, 689.94, 613.39, 745.11);
    
    fill(53, 33, 26);
    triangle(581.17, 662.36, 598.45, 757.76, 561.67, 788.79);
    
    
    //face
    
    fill(49, 55, 70);
    triangle(407.64, 216.38, 361.67, 230.75, 345.2, 266.53);
    
    fill(160, 100, 84);
    triangle(407.64, 216.38, 345.2, 266.53, 372.3, 266.53);
    
    fill(198, 144, 118);
    triangle(407.64, 216.38, 390.03, 292.44, 372.3, 266.53);
    
    fill(220, 165, 134);
    triangle(407.64, 216.38, 390.03, 292.44, 434.99, 290.62);
    
    fill(0);
    triangle(335.59, 433.62, 339.05, 443.49, 414.54, 433.62);
    
    fill(49, 55, 70);
    triangle(331.78, 295.69, 311.09, 338.22, 320.29, 351.44);
    
    fill;
    triangle(311.09, 338.22, 320.29, 351.44, 320.29, 389.94);
    
    fill(160, 100, 84);
    triangle(331.78, 295.69, 346.72, 329.96, 320.29, 351.44);
    
    fill(220, 165, 134);
    triangle(337.4, 308.58, 364.07, 312.93, 346.72, 329.96);
    
    fill(49, 55, 70);
    triangle(341.16, 275, 343.28, 290.7, 331.78, 295.69);
    
    fill(160, 100, 84);
    triangle(335.59, 405.46, 361.67, 398.56, 361.67, 433.62);
    
    fill(89, 52, 40);
    triangle(414.54, 433.62, 398.11, 515.26, 380.83, 448.98);
    
    fill(49, 55, 70);
    triangle(320.29, 351.44, 335.59, 363.51, 320.29, 389.94);
    
    
    fill(49, 55, 70);
    triangle(364.07, 440.22, 380.83, 448.98, 398.11, 515.26);
    
    fill;
    triangle(364.07, 440.22, 398.11, 515.26, 380.06, 502.01);
    
    fill(53, 33, 26);
    triangle(364.07, 440.22, 380.83, 448.98, 414.54, 433.62);
    
    fill(198, 144, 118);
    triangle(361.67, 398.56, 361.67, 433.62, 390.03, 433.62);
    
    fill(50, 50, 50);
    triangle(335.59, 405.46, 335.59, 433.62, 361.67, 433.62);
    
    fill(49, 55, 70);
    triangle(335.59, 363.51, 335.59, 433.62, 320.29, 389.94);
    
    fill(39, 20, 20);
    triangle(320.29, 351.44, 335.59, 363.51, 346.72, 329.96);
    
    fill(220, 165, 134);
    triangle(442.13, 329.96, 434.99, 370.69, 404.6, 374.76) ;
    
    fill(198, 144, 118);
    triangle(434.99, 370.69, 404.6, 374.76,394.03, 416.09);
    
    fill;
    triangle(442.13, 329.96, 457.16, 360.83, 453.62, 398.56);
    
    fill;
    triangle(442.13, 329.96, 453.62, 398.56, 434.99, 370.69);
    
    fill(187, 131, 98);
    triangle(434.99, 370.69, 453.62, 398.56, 394.03, 416.09);
    
    fill;
    triangle;
    
    fill(160, 100, 84);
    triangle(394.03, 416.09, 414.54, 433.62, 453.62, 398.56);
    
    fill(160, 100, 84);
    triangle(394.03, 416.09, 414.54, 433.62, 390.03, 433.62);
    
    fill(220, 165, 134);
    triangle(361.67, 398.56, 400, 389.94, 390.03, 433.62);
    
    fill;
    triangle;
    
    fill(110, 62, 40);
    triangle(400, 389.94, 404.6, 374.76, 385.6, 343.1);
    
    
    //eyebrows
    fill(80);
    triangle(390.03, 292.44, 434.99, 290.62, 434.99, 302.17);
    
    fill(50);
    triangle(364.07, 282.3, 355.2, 271.18, 341.16, 275);
    //eyebrows done
    
    
    fill(102, 61, 40);
    triangle(345.2, 266.53, 372.3, 266.53, 341.16, 275);
    
    fill(160, 100, 84);
    triangle(355.2, 271.18, 372.3, 266.53, 364.07, 282.3);
    
    fill(110, 62, 40);
    triangle(335.59, 384.26, 335.59, 405.46, 361.67, 398.56);
    
    fill(160, 100, 84);
    triangle(372.3, 266.53, 390.03, 292.44, 372.3, 308.58);
    
    fill(160, 100, 84);
    triangle(390.03, 292.44, 388.24, 312.93, 413.86, 308.32);
    
    fill(187, 131, 98);
    triangle(390.03, 292.44, 434.99, 302.17, 413.86, 308.32);
    
    fill(251, 204, 171);
    triangle(434.99, 302.17, 440.01, 321.4, 413.86, 308.32);
    
    fill;
    triangle;
    
    fill(251, 204, 171);
    triangle(442.13, 329.96, 407.64, 338.67, 404.6, 374.76);
    
    fill;
    triangle(372.3, 308.58, 385.6, 343.1, 355.2, 334.23);
    
    fill;
    triangle(385.6, 343.1, 360.37, 343.1, 389.15, 354.66);
    
    fill;
    triangle(360.37, 343.1, 362.41, 352.36, 389.15, 354.66);
    
    fill(220, 165, 134);
    triangle(453.62, 457.76, 398.11, 515.26, 496.15, 473.85);
    
    fill(187, 131, 98);
    triangle(414.54, 433.62, 453.62, 457.76, 398.11, 515.26);
    
    fill(89, 52, 40);
    triangle(453.62, 398.56, 453.62, 457.76, 414.54, 433.62);
    
    fill(198, 144, 118);
    triangle(398.11, 515.26, 369.49, 573.14, 496.15, 473.85);
    
    fill(0);
    triangle(380.06, 502.01, 398.11, 515.26, 331.78, 593.39);
    
    fill(53, 42, 48);
    triangle(398.11, 515.26, 331.78, 593.39, 369.49, 573.14);
    
    fill;
    triangle;
    
    fill(187, 131, 98);
    triangle(495.08, 502.01, 492.49, 570.4, 432.82, 627.72);
    
    fill(198, 144, 118);
    triangle(492.49, 570.4, 509.94, 600.46, 432.82, 627.72);
    
    fill(220, 165, 134);
    triangle(432.82, 627.72, 509.94, 600.46, 509.94, 690.98);
    
    fill(187, 131, 98);
    triangle(507.32, 482.99, 492.49, 570.4, 509.94, 600.46);
    
    fill(45, 40, 38);
    triangle(509.94, 600.46, 509.94, 690.98, 582.67, 666.2);
    
    fill(119, 80, 70);
    triangle(507.32, 482.99, 509.94, 600.46, 661.32, 690.98);
    
    fill(66, 47, 44);
    triangle(509.94, 600.46, 640.23, 718.23, 661.32, 690.98);
    
    fill(187, 131, 98);
    triangle(507.32, 482.99, 661.32, 634.77, 661.32, 690.98);
    
    fill(198, 144, 118);
    triangle(507.32, 482.99, 580.06, 500.85, 661.32, 634.77);
    
    fill(187, 131, 98);
    triangle(580.06, 500.85, 619.14, 541.67, 661.32, 634.77);
    
    fill(160, 100, 84);
    triangle(619.14, 541.67, 661.32, 586.84, 661.32, 634.77);
    
    fill(187, 131, 98);
    triangle(640.23, 718.23, 661.32, 690.98, 661.32, 800);
    
    fill(198, 144, 118);
    triangle(640.23, 718.23, 661.32, 800, 606.55, 800);
    
    
    //face details
    
    fill(160, 100, 84);
    triangle(341.16, 275, 364.07, 282.3, 343.28, 290.7);
    
    fill(187, 131, 98);
    triangle(364.07, 282.3, 369.28, 298.93, 343.28, 290.7);
    
    fill(66, 47, 44);
    triangle(364.07, 282.3, 372.3, 295.69, 372.3, 308.58);
    
    fill(119, 80, 70);
    triangle(372.3, 266.53, 372.3, 295.69, 364.07, 282.3);
    
    fill(198, 144, 118);
    triangle(387.31, 323.56, 385.6, 343.1, 442.13, 329.96);
    
    fill(220, 165, 134);
    triangle(385.6, 343.1, 407.64, 338.67, 404.6, 374.76);
    
    fill(255, 214, 191);
    triangle(390.03, 292.44, 372.3, 308.58, 385.6, 343.1);
    
    fill(198, 144, 118);
    triangle(355.2, 294.47, 369.28, 298.93, 364.07, 312.93);
    
    fill(240, 185, 164);
    triangle(355.2, 334.23, 350.73, 343.1, 385.6, 343.1);
    
    fill(49, 55, 70);
    triangle(346.72, 329.96, 350.73, 343.1, 341.16, 346.73);
    
    fill;
    triangle(346.72, 329.96, 355.2, 334.23, 350.73, 343.1);
    
    fill;
    triangle(346.72, 329.96, 355.2, 334.23, 364.07, 312.93);
    
    fill(119, 80, 70);
    triangle(369.28, 298.93, 372.3, 308.58, 364.07, 312.93);
    
    fill(49, 55, 70);
    triangle(364.07, 312.93, 372.3, 308.58, 355.2, 334.23);
    
    fill(119, 80, 70);
    triangle(337.4, 308.58, 364.07, 312.93, 335.27, 303.7);
    
    fill;
    triangle(350.48, 308.58, 360.7, 305.93, 364.07, 312.93);
    
    fill;
    triangle(335.27, 303.7, 350.48, 308.58, 360.7, 305.93);
    
    fill;
    triangle(348.63, 302.17, 335.27, 303.7, 360.7, 305.93);
    
    fill;
    triangle(388.24, 312.93, 391.96, 316.21, 413.86, 308.32);
    
    fill;
    triangle(388.24, 312.93, 402.29, 325.31, 387.31, 323.56);
    
    fill;
    triangle(391.96, 316.21, 418.48, 327.2, 402.29, 325.31);
    
    fill;
    triangle(440.01, 321.4, 442.13, 329.96, 418.48, 327.2);
    
    fill(240, 185, 164);
    triangle(391.96, 316.21, 418.48, 327.2, 440.01, 321.4);
    
    
    
    //nose and mouth details
    fill(49, 55, 70);
    triangle(341.16, 346.73, 363.75, 358.47, 350.73, 343.1);
    
    fill(189, 130, 100);
    triangle(350.73, 343.1, 360.37, 343.1, 363.75, 358.47);
    
    fill(198, 144, 118);
    triangle(374.76, 353.42, 378.1, 358.47, 389.15, 354.66);
    
    fill(40);
    triangle(362.41, 352.36, 374.76, 353.42, 363.75, 358.47);
    
    fill(40);
    triangle(378.1, 358.47, 374.76, 353.42, 363.75, 358.47);
    
    fill(40, 30, 30);
    triangle(341.16, 346.73, 335.59, 363.51, 363.75, 358.47);
    
    fill(189, 130, 100);
    triangle(335.59, 363.51, 349.67, 367.65, 350.96, 360.76);
    
    fill(198, 144, 118);
    triangle(350.96, 360.76, 349.67, 367.65, 363.75, 358.47);
    
    fill;
    triangle(349.67, 367.65, 363.75, 358.47, 358.29, 372.24);
    
    fill;
    triangle(363.75, 358.47, 358.29, 372.24, 367.41, 370.69);
    
    fill;
    triangle(363.75, 358.47, 367.41, 370.69, 378.1, 358.47);
    
    fill(220, 184, 168);
    triangle(378.1, 358.47, 367.41, 370.69, 390.92, 376.9);
    
    fill(230, 210, 198);
    triangle(378.1, 358.47, 400, 389.94, 389.15, 354.66);
    
    
    
    //inner clothes
    
    fill(21, 24, 29);
    triangle(283.51, 649.71, 266.84, 707.52, 319.19, 800) ;
    
    fill(40, 41, 39);
    triangle(283.51, 649.71, 319.19, 800, 356.28, 627.72);
    
    fill(10, 10, 10);
    triangle(283.51, 649.71, 356.28, 627.72, 331.78, 593.39);
    
    fill(70, 65, 59);
    triangle(356.28, 627.72, 319.19, 800, 391.96, 745.11);
    
    fill(40, 41, 30);
    triangle(331.78, 593.39, 356.28, 627.72, 496.15, 473.85);
    
    fill(70, 65, 59);
    triangle(356.28, 627.72, 432.82, 627.72, 496.15, 473.85);
    
    fill(40, 41, 30);
    triangle(495.08, 502.01, 496.15, 473.85, 432.82, 627.72);
    
    fill;
    triangle(391.96, 745.11, 319.19, 800, 495.08, 800);
    
    fill(76, 67, 60);
    triangle(391.96, 745.11, 495.08, 800, 509.94, 690.98);
    
    fill(30, 31, 29);
    triangle(509.94, 690.98, 582.67, 666.2, 495.08, 800);
    
    fill(10, 10, 10);
    triangle(582.67, 666.2, 567.441, 800, 495.08, 800);
    
    fill(89, 85, 80);
    triangle(432.82, 627.72, 356.28, 627.72, 391.96, 745.11);
    
    fill(71, 68, 64);
    triangle(391.96, 745.11, 509.94, 690.98, 432.82, 627.72);
    
    
    fill(0);
    triangle(400.11, 308.58, 391.96, 316.21, 413.86, 308.32);
}

For this project, I attempted to create a cubist-style self portrait. I wanted to make it look as realistic as possible, but I realized that with the little set of skills that I have at the moment, the only way to do so was to create small areas of different colors using triangles, which I thought would be more appropriate than rectangles or quadrilaterals in depicting small details and color differences among the features.

It was not so hard to write the program since the code consisted mostly of triangles, but it was rather difficult to assign each of them the right color and the appropriate size.

I also made the sun to change its size as a little experiment of what I learned in the lecture today.

mecha-lookingoutwards-01

Daily Tous Les Jours

Every year, Quartier des spectacles in Montréal is decorated with installation art meant to bring together the community around the area. In 2011, the Canadian design firm Daily Tous Les Jours led a team consisting of over forty individuals including specialists in design, technical direction, music, animal/human behavior, and technical direction in order to create the urban instrument, 21 Balançoires.

Each swing represents a specific instrument (piano, guitar, harp, or vibraphone) that plays a note based on how high a user swings. Depending on how users interact with the swings and with each other, the instrument has the ability to play scales and melodies.In order to play the corresponding note to the height of the swing, the installation relies on sensors hidden in the swings that communicate its location to a central computer.

What inspired me the most about this project was the ability of the design firm to bring life to an area that was originally closed off and essentially abandoned. 21 Swings became so popular that the installation became scheduled to reappear every spring since. Through its playful nature, the piece was able to attract people of all different ages and demographics.

mecha-project01-face

sketch

function setup() {
    createCanvas(500,500);
    background(255);
    noStroke();
    fill(75,49,52);
    ellipse(250,255,450,450);

//hair
    noStroke();
    fill(150,106,70);
    rect(150,200,170,170);
//neck
    noStroke();
    fill(220,167,139);
    rect(225,350,52,30);

//shirt
    noStroke();
    fill(255);
    arc(250, 415, 140, 90, PI, 0, CHORD);

//neck
    fill(220,167,139);
    noStroke();
    arc(251, 370, 52, 30, 0, PI, CHORD);

//hair (bottom)
    fill(211,188,126);
    noStroke();
    triangle(130,230,120,370,200,370);
    triangle(370,230,300,370,380,370);
       
//face
    noStroke();
    fill(255,218,190);
    ellipse(250,230,240,270);

//shading
    noStroke();
    fill(220,167,139);

//eyes
    noStroke();
    fill(58,26,20);
    ellipse(214,260,15,15);
    noStroke();
    fill(58,26,20);
    ellipse(286,260,15,15);

//nose
    noStroke();
    fill(220,167,139);
    triangle(250,265,235,300,265,300);

//mouth
    stroke(58,26,20);
    strokeWeight(2.2);
    fill(255);
    ellipse(250,325,30,15);

//hair (top)
    fill(211,188,126);
    noStroke();
    arc(250,230,250,270,PI+.9, QUARTER_PI-0.8, OPEN);
    arc(250,230,250,270,PI+.2, QUARTER_PI-2.3, OPEN);

    arc(320,142,260,190,QUARTER_PI+.1, PI+0.07, OPEN);
    arc(139 ,130,140,150,QUARTER_PI-.7, PI-1.4, OPEN);

//eyebrows
    stroke(58,26,20);
    noFill();
    arc(300, 208, 60, 60, HALF_PI, PI-0.7);
    stroke(58,26,20);
    noFill();
    arc(210, 200, 60, 60, PI-2.1, PI-1.2);
}

function draw() {
}

In order to create this sketch, I decided to block out my face into basic shapes that I would be able to recreate with code. I began with a simple ellipse and moved on to create the expression and the hair. I used a lot of trial and error (especially for the arc objects) for the placement, sizes, and angles while trying to stick to a minimal color palette.

yoonyouk-LookingOutwards-01

Official BMO200 Fountain site

Blog post about the work

Example of one of the BMO200 fountains. 

This project is the BMO200 Fountain, a creation that celebrates the 200th anniversary of BMO, a bank in Montreal.

The creative director of this project is Jess Willis of Mosaic. This project involved not only people of the design firm and the production company, but also members and employees under BMO. BMO’s CMO, Connie Stefankiewicz. Jennifer Marman and Daniel Borins were also artists involved with the project.

In order to celebrate BMO’s bicentennial anniversary, the company wanted to grant wishes to their customers through an interactive installation. Thus, the idea for the BMO200 Fountain came to be. The project is a sculpture that depicts water pouring into a pond. The image of water is created through mosaic tiles that flip between white and blue in order to form the appropriate imagery and icons. Users can type in a “wish” with their mobile device and then toss the coin into the fountain. This piece particularly caught my eye because I enjoy how the project is a successful combination of art, interaction and software.

I believe this project required the development of custom scripts because the artists and developers of the project wanted to created an interactive interaction that didn’t involve the cliche projections or screens. They thus created a software involving a “flip side” where many discs along the fountain water form would easily flip between white and blue in order to create the appropriate images. The project designers had to configure different ways that the coin would fall into the fountain waters.

The BMO200 Fountain demonstrates that interaction design is not limited to screens. Although today we see a lot of interactions involving these components, I think it is endearing to see the mosaic tiles moving to create different shapes. However, when not with the fountain, the experience is definitely not has sublime.