September 2016 – Page 32 – [OLD – FALL 2016] 15-104 • COMPUTING for CREATIVE PRACTICE

Yugyeong Lee Project-01

//Yugyeong Lee
//Section A
//yugyeonl@andrew.cmu.edu
//Project-01

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

function draw() {
	background(255);

	strokeWeight(8);
	stroke(248, 153, 170);
	fill(254, 192, 203);
	ellipse(300, 300, 500, 500);

	//Hair
	fill(128, 24, 80);
	noStroke();
	ellipse(300, 255, 225, 290);
	rect(187.5, 265, 225, 140);

	//Face
	fill(206, 163, 121);
	noStroke();
	ellipse(300, 250, 175, 215);
	ellipse(300, 257, 150, 215);

	//Brows
	fill(90, 55, 42);
	quad(317, 225, 358, 225, 370, 230, 317, 230);
	quad(283, 225, 242, 225, 230, 230, 283, 230);

	//Eyes
	fill(255);
	stroke(0);
	strokeWeight(2);
	arc(340, 255, 35, 18, PI, TWO_PI);
	arc(260, 255, 35, 18, PI, TWO_PI);
	noStroke();
	ellipse(260, 255, 35, 12);
	ellipse(340, 255, 35, 12);
	fill(0);
	ellipse(340, 253, 16, 16);
	ellipse(260, 253, 16, 16);
	fill(255);
	ellipse(340, 253, 3, 3);
	ellipse(260, 253, 3, 3);

	//Glasses
	stroke(0);
	strokeWeight(8);
	noFill();
	rect(315, 240, 60, 40, 5, 2, 5, 13);
	rect(225, 240, 60, 40, 5, 5, 13, 2);
	line(285, 250, 315, 250);
	line(225, 250, 214, 250);
	line(375, 250, 386, 250);

	//Mouth
	stroke(196, 48, 36)
	strokeWeight(3);
	line(300, 330, 325, 320);
	line(300, 330, 275, 320);
	
	//Nose
	stroke(0);
	strokeWeight(3);
	arc(300, 295, 20, 12, TWO_PI, PI);
	
	//Hair
	push();
	translate(347,240);
	rotate(40);
	fill(128, 24, 80);
	noStroke();
	ellipse(-44,43,40,140);
	pop();
	push();
	translate(347,240);
	rotate(40);
	fill(128, 24, 80);
	noStroke();
	ellipse(30,115,140,40);
	pop();
}

In project I, I created a portrait of myself using basic shapes such as ellipse, rectangle, arc, etc. The challenging part of this project was to figure out the coordinate along the way requiring constant editing and refreshing.

ShanWang-Project-01

In this exercise I used different gradients of color to create the division and collage of space and objects.sketch

//Shan Wang
//Section A
//shanw1@andrew.cmu.edu
//Assignment-01

function setup() {
    createCanvas(400, 600);
    background(235);
}

function draw() {
    strokeWeight(5);
    fill(120);
    line(80,0,80,600);

    strokeWeight(2);
    fill(150);
    line(70,0,70,600);

    strokeWeight(1);
    fill(150);
    line(70,0,70,600);

    noStroke();
    fill(210);
    ellipse(120, 130, 400, 400);

    strokeWeight(5);
    fill(200);
    ellipse(180,300,200,200);

    noStroke();
    fill(170);
    quad(150,100,280,100,320,130,100,130);

    noStroke();
    fill(150);
    arc(215,130,115,115,TWO_PI, PI);

    noStroke();
    fill(130);
    arc(215,130,95,95,TWO_PI, PI);

    noStroke();
    fill(110);
    arc(215,130,65,65,TWO_PI, PI);

    noStroke();
    fill(80);
    quad(350,450,400,450,400,470,350,470);

    noStroke();
    fill(90);
    quad(300,500,400,500,400,510,300,510);

    noStroke();
    fill(30);
    quad(250,475,400,475,400,479,250,479);

    noStroke();
    fill(120);
    quad(370,480,400,480,400,490,370,490);
   
}

Christine Kim – Looking Outwards – 01

The project I came across in the Creative Applications Network is the Folding Patterns which stimulates the folded paper structure. This was created by Ann-Katrin Krenz and it operates to find ways to create 3D structures that behave like paper. This project tests out different scenarios of papers falling from a certain height to observe the collisions. Although it is still an ongoing project, it strives to develop the analyses of the behaviors of paper falling to create an algorithm.

Bildschirmfoto-2016-05-08-um-23.08.39-1920x1080

Bildschirmfoto-2016-05-08-um-23.09.00-1920x1080

Finding a way to figure out and recored the behaviors of paper inspired me to learn more about this project. Personally, I thought it was interesting how Krenz is trying to develop an algorithm of the different behaviors and outcomes of paper falling to the ground because I had to work with folding papers on one of my projects during my second semester architecture studio. By using different ways to fold and make connections with paper itself, I had to try out many different shapes and test out how the marble on the paper would move through all the folded areas. I thought having this algorithm of the behaviors of folded paper might have helped me with my project a little if it were available.

Because this project is looking at all possible ways that the paper might hit the ground, it is going to have many ranges of the way the paper falls with different folded structures. However, it also brings me to think about how the folded paper will be all different even if the paper was meant to be folded in the same way as another. To make the project closer to being accurate, all the paper structures of the same fold should be tested together because it won’t all go down the same way.

As an interaction designer and media artist, Krenz wanted to investigate more about the generative and visual behaviors of folded paper.

Faltung-1024x1365

MoeglicheParameter-1024x1365

Denise Jiang – Self Portrait

sketch

function setup() {
    createCanvas(600, 600);
    
    text("p5.js vers 0.5.2 test.", 10, 15);
}

function draw() {

	background(223,232,240);

	//right face
	fill(240,223,230);
	noStroke();
	rect(288,0,310,286);
	rect(287,385,313,215);
	quad(288,284,600,287,600,336,354,336);
	quad(354,336,600,336,600,536,286,385);



	//brow
	noStroke();
	fill(96,57,19);
	rect(45,169,180,22);
	quad(342,177,349,197,479,150,473,129);
	quad(470,129,479,150,563,152,583,132);


	//right eye
	noStroke();
	fill(54,54,54);
	rect(373,259,171,25);

	//line
	stroke(96,57,19);
	strokeWeight(0.5);
	line(287,0,287,287);
	line(288,287,354,335);
	line(354,335,287,385);
	line(287,385,287,599);
	

	//left eye
	stroke(96,57,19);
	strokeWeight(5);
	noFill();
	ellipse(135,280,161,88);
	
	strokeWeight(1);
	line(69,236,80,249);
	line(105,216,109,239);
	line(158,222,148,238);
	line(205,231,190,249);

	//eyeball
	fill(54,54,54);
	noStroke();
	ellipse(135,280,28,82);

	//mouth
	noFill();
	stroke(54,54,54);
	strokeWeight(10);
	rect(76,418,425,110);
	
	strokeWeight(5);
	line(82,460,494,460);
	line(82,486,494,486);

	fill(242,109,125);
	noStroke();
	rect(81,462,416,23);






}

Shannon Case LookingOutwards-01

Commissioned by the Bring To Light Festival NYC, this instillation (called “The Company”) is a sound reactive light installation by Nocte, in collaboration with designer Roland Ellis. 76 tungsten lamps are suspended to form an arch, and when music is played the lamps react to the sound. Each lamp is digitally controlled, which allows these animations to be created by the live audio. The piece is intended to bring the atmosphere of the architectural history of the building, which is it’s legacy as an industrial environment. My favorite thing about this instillation is the beautiful calming atmosphere it provides. I think that video is absolutely the most stunning documentation for this piece, as it provides the viewer much more insight into the way that the piece works, as well as the general ambiance of the instillation. I really admire that they were able to use advanced technology to create a piece that is simply beautiful, and appears to be magical. It’s not easy to guess how it works, and that mystery is part of the beauty of the piece. I think one thing they could improve on is the documentation, I wish they had more than one video of the piece, and documented how the atmosphere changed depending on what music was played.

Karen Kim- Project- 01

karenface

function setup() {
    createCanvas(500, 500);
    background(201,191,182);
}

function draw() {
	//hair base
	noStroke()
	fill(143, 97, 61);
	ellipse(250, 250, 350, 400);
	//face
	fill(209, 174, 148);
	ellipse(250, 200, 300, 280)
    //hair coloring
	fill(179, 122, 77);
	rotate(-75);
	ellipse(320, -20, 280, 100);
	//eyes
	fill(39, 25, 12);
	noFill()
	stroke(0);
	arc(250, 100, 45, 40, -PI, 0);
	arc(350, 100, 45, 40, -PI, 0);
	//mouth
	fill(255, 153, 153);
	stroke(0);
	arc(350, 150, 80, 80, 0, PI);
	//neck
	noStroke()
	fill(209, 174, 148);
    rect(280, 200, 100, 60);
    //shirt
    fill(230, 230, 255);
    rect(170, 260, 320, 280, 500, 500, 500, 500);
    //cheeks
    fill(255, 230, 230);
    ellipse(200, 150, 30);
    ellipse(430, 120, 30);
    //necklace
    fill(0, 0, 0);
    rect(280, 230, 100, 15);
    //eye crinkle
    noFill()
    rotate(-25);
    stroke(10);
    triangle(380, 10, 450, 10, 400, 20);
    triangle(380, 20, 450, 20, 400, 30);
}

Aside from basic facial features, I tried to graphically represent in the most basic way some characteristics that people have pointed out about me, such as my cheeks or the crinkles next to my eyes when I smile.

mreyes-Looking Outward-01

OMOTE / REAL-TIME FACE TRACKING & PROJECTION MAPPING from nobumichi asai on Vimeo.

OMOTE is one of many projects lead by CGI artist and programer Nobumichi Asai using a technology he calls “face hacking”. The team uses a code called Open CV which is used to map out physical objects and then project onto them while reacting to the subject in real time. Asai utilized this technology to not only map out the human face and project hyper realistic CGI elements, but he also developed an animation that would reflect the environment of the face, creating a realtime reflective texture. The project was showcased publicly on the internet with a 2 minute video two years ago and under the credits he lists himself as the technical director and only two other as CG designers. Asai himself has done other projection work involving sci fi movies such as Ghost in the Shell. The Sci fi imagery clearly inspires his cyborg like transformative projections. Additionally they also seem to influence his concepts behind his work of combining flesh with technology or at least giving the allusion of the two combining.

tumblr_inline_o35zrp4jik1tf4ste_500

Recently he worked with Lady Gaga on her David Bowie tribute Grammy performance. The program allowed certain features of her face to be accentuated making her face look more like old glam rock star, while also allowing for animations of paint dripping and a spider crawling across her face to appear as if really happening on stage. This Technology has the incredible opportunities for other performing artist. It has the ability to potential push conceptual works as well as push narratives with in musical performances as Gaga did.

Hannah K-Project-01

sketch-59.js

function setup() {
    createCanvas(400, 400);
    background(255,181,197);

}

function draw() {

    // Top part of hair - Arc
    fill(51,25,0);
    arc(200,125,200,200,PI,TWO_PI);

    // Main part of hair - Rectangle
    fill(51,25,0);
    rect(100,125,200,158);

    // Face - Ellipse
    fill(225,220,178);
    ellipse(200,155,150,185);

    // Nose - Triangle
    fill(225,200,100);
    triangle(190,170,210,170,200,150);

    // Top of body - Triangle
    noStroke();
    fill(0,205,205);
    triangle(150,416,198,282,246,416);

    // Eye 1 - Circle
    fill(0,0,0);
    ellipse(165,125,25,25);

    // Pupil 1 - Circle
    fill(255,255,255);
    ellipse(165,130,8,8);

    // Eye 2 - Circle
    fill(0,0,0);
    ellipse(235,125,25,25);

    // Pupil 2 - Circle
    fill(255,255,255);
    ellipse(235,130,8,8);

    // Mouth - Arc
    fill(255,250,205);
    arc(200,190,80,80,0,PI);

    // Eyebrow 1 - Rectangle
    fill(51,25,0);
    rect(155,100,18,4);

    // Eyebrow 2 - Rectangle
    fill(51,25,0);
    rect(225,100,18,4);

}

As many people have mentioned, one of the most difficult and time consuming parts of this process was figuring out the coordinates. While I did attempt to take notes as I created my portrait, ultimately, I did a lot of guessing and checking. Overall, I enjoyed the process and look forward to becoming better at coding more efficiently. This was one of the first times I’ve ever used code to create something remotely artistic, so this was really exciting!

Christine Kim – Portrait – 01

sketch

//Christine Kim
//Section A (Tuesdays 9:00)
//haewannk@andrew.cmu.edu
//Project-01


function setup() {
    createCanvas(600,600);
    background(165,205,236);
}

function draw() {
	noStroke();
	fill(255,205,140);
	ellipse(300,300,200,200);
	fill(66,31,21);
	ellipse(270,300,20,20);
	ellipse(330,300,20,20);

	stroke(66,31,21);
	strokeWeight(3);
	line(255,278,280,278);
	line(317,278,342,278);
	line(300,300,300,330);
	stroke(288,31,76)
	line(300,370,337,355);
	line(263,355,300,370);
	stroke(199,123,165);
	line(245,330,260,330);
	line(340,330,355,330);
	noStroke();
	push();
	translate(347,240);
	rotate(40);
	fill(142,32,21)
	ellipse(0,0,50,128);
	pop();
	push();
	translate(255,240);
	rotate(70);
	fill(142,32,21);
	ellipse(0,0,50,128);
	pop();
	push();
	translate(203,320);
	rotate(60);
	fill(142,32,21);
	ellipse(0,0,50,128);
	pop();
	push();
	translate(208,400);
	rotate(50);
	fill(142,32,21);
	ellipse(0,0,65,170);
	pop();
	push();
	translate(395,315);
	rotate(116);
	fill(142,31,21);
	ellipse(0,0,50,128);
	pop();
	push();
	translate(377,400);
	rotate(123);
	fill(142,32,21);
	ellipse(0,0,65,170);
	pop();


}

Owen Fox Project-01

click to generate new face

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

function draw() {
      noStroke();
      fill(r = random(0,255), g = random (0,255), b = random (0,255));
      rect(50,50,100,100);
      fill(r = random(0,255), g = random (0,255), b = random (0,255));
      rect(450,50,100,100);
      fill(r = random(0,255), g = random (0,255), b = random (0,255));
      rect(250,50,100,100);
      fill(r = random(0,255), g = random (0,255), b = random (0,255));
      rect(50,250,100,100);
      fill(r = random(0,255), g = random (0,255), b = random (0,255));
      rect(250,250,100,100);
      fill(r = random(0,255), g = random (0,255), b = random (0,255));
      rect(450,250,100,100);
      fill(r = random(0,255), g = random (0,255), b = random (0,255));
      rect(50,450,100,100);
      fill(r = random(0,255), g = random (0,255), b = random (0,255));
      rect(250,450,100,100);
      fill(r = random(0,255), g = random (0,255), b = random (0,255));
      rect(450,450,100,100);
      noLoop();
}
function mousePressed() {
  loop();
}

function mouseReleased() {
  noLoop();
}

this is more abstract than I want it to be, but it took me like 5 hours to figure out how to do this. I was trying to use variables, but I couldn’t get them to work, so I made this instead.