sunmink-project-01

sketch

//Sun Min (Chloe) Kim 
//Section E
//sunmink@andrew.cmu.edu
//Project-01

function setup() {
    createCanvas(500, 500);
    background(217, 212, 235);
    angleMode(DEGREES);
    smooth(); 
}

function draw() {

    //background strip 
    noStroke();
    fill(210, 200, 300);
    rect(0, 100, 500, 100);
    rect(0, 300, 500, 100);

    //hair(back)
    noStroke();
    fill(64, 60, 58); 
    ellipse(300, 200, 200, 220);
    rect(200, 200, 200, 220); 

    //face 
    fill(247, 193, 155); 
    stroke(205, 149, 111);
    strokeWeight(3);
    ellipse(300, 210, 150, 160);

    //eye 
    noStroke(); 
    fill(255,255,255); 
    ellipse(270, 200, 30, 20);
    ellipse(330, 200, 30, 20);

    //nose
    noStroke(); 
    fill(211, 153, 114);
    triangle(300, 200, 315, 235, 300, 230);

    //mouth
    fill(2250, 210, 195);
    stroke(220, 130, 130);
    strokeWeight(3);
    arc(300, 245, 60, 40, 0, 180, CHORD);

    //eyebrow
    stroke(64, 60, 58);
    strokeWeight(5);
    line(250, 180, 285, 180);
    line(310, 180, 345, 180);

    //pupil
    fill(64, 60, 58); 
    ellipse(270, 200, 12, 12);
    ellipse(330, 200, 12, 12);

    //neck
    fill(247, 193, 155);
    noStroke();
    rect(280, 280, 40, 30);

    //shoulder 
    noStroke(); 
    fill(75, 70, 175);
    ellipse(300, 385, 160, 160);
    rect(220, 380, 160, 220);

    //hair(front)
    fill(64, 60, 58); 
    arc(250, 140, 90, 100, -50, 130, CHORD);


}



    

After completing Mondrian assignment, I became more familiar with p5js. Since I don’t have any experience in coding, it took me a while getting used to its language. Mondrian assignment helped me to get comfortable with rectangular shapes, but when I tried to create arcs and triangles for self-portrait it took me longer than I thought to create the codes. However, p5js guidelines helped me to learn ways to build various shapes, and I would like to find out more about adding advanced codes into my sketch.

dchikows – Section C – Project 01 – Self Portrait

sketch

function setup() {
    createCanvas(600,600);
    background(173,169,166);
}

function draw() {
    
    strokeWeight (0)
    fill(216,166,132)
    quad(340,441,273,441,242,600,376,600)

    strokeWeight (0)
    fill(132,87,57)
    rect(157,242,296,142,41)
  
    strokeWeight (0)
    fill(226,177,141)
    rect(171,267,267,253,41)

    strokeWeight (0)
    fill(132,87,57)
    ellipse(304,250,254,76)

    strokeWeight (0)
    fill(255,255,255)
    ellipse(355,327,70,20)

    strokeWeight (0)
    fill(255,255,255)
    ellipse(252,326,70,20)

    strokeWeight (0)
    fill(36,61,155)
    ellipse(252,326,31,20)

    strokeWeight (0)
    fill(36,61,155)
    ellipse(355,327,31,20)

    strokeWeight (0)
    fill(216,166,132)
    triangle(305,341,276,422,335,422)

    strokeWeight (0)
    fill(237,119,116)
    ellipse(305,460,86,28)

    strokeWeight (1)
    fill(237,119,116)
    line(262,460,347,460)

    strokeWeight (0)
    fill(0)
    ellipse(355,327,9,9)

    strokeWeight (0)
    fill(0)
    ellipse(251,326,9,9)










}

I thought it was interesting to see my self portrait come together shape by shape. I believe I also learned a lot by doing it especially since we had to research how to make it all happen. Furthermore, I enjoyed the creative process behind it.

ikrsek- Project 1- Self-portrait

For the self-portrait I wanted to try to create a pixelated looking portrait, and it was much more time consuming than I initially assumed it would be (mostly because of the time it took to plot points and adjust colors). However, regardless of the time it took up it was still a pretty gratifying process and thankfully the final product turned out fairly well.

sketch

// Isadora Krsek  
// Ikrsek@andrew.cmu.edu
// Project #1: Self-Portrait

function setup() {
  createCanvas(450,450);
  background(255);
}
function draw() {
  //background color
  fill(207,225,204);
  noStroke();
  rect(84,54,340,300);
  //base skin color 
  noStroke();
  fill(255,215,192);
  rect(180,130,160,158);
  rect(200,280,120,40);
  //rect(,,20,20);
  //baseshadow color cheeks
  fill(173,122,97)
  rect(180,260,20,28)
  rect(160,198,20,52) //ear
  //mid skintone 1 - nose 
  fill(196,151,128)
  rect(160,188,20,20)
  rect(180,220,20,20)
  rect(220,300,20,20)
  rect(200,320,20,20)
  rect(242,198,14,65)
  rect(256,248,20,15)
  //mid skintone 2
  fill(219,165,137)
  rect(220,320,80,20)
  //skin highlight
  fill(244,199,173)
  rect(280,300,40,40)
  //hair base
  fill(44,25,24)
  rect(160,128,20,80)
  rect(180,108,40,80)
  rect(210,88,40,80)
  rect(230,88,40,42)
  rect(250,88,90,42)
  rect(320,120,40,40)
  rect(164,260,20,165); //longest hair
  rect(154,275,20,130);//second longest hair
  rect(180,300,40,20)
  rect(180,288,20,100);
  rect(200,300,20,45);
  rect(190,345,20,30);
  rect(170,375,20,30);
  rect(140,365,20,30);
  rect(126,345,40,30);
  rect(114,325,40,30);
  rect(130,304,40,40);
  rect(146,275,30,80);
  rect(160,250,20,52);
  rect(148,198,15,10); //hair flip
  rect(155,188,15,10);
  //left side swoops and long
  rect(335,130,25,40);
  rect(340,170,20,170);
  rect(320,288,40,32);
  rect(350,280,20,60);
  rect(360,300,20,40);
  rect(320,320,72,20);
  //eyebrows
  rect(290,178,34,7);
  rect(198,178,34,7)
  //eyes and glasses
  fill(255)
  rect(180,188,60,52)
  rect(280,188,60,52)
  fill(68,65,64)
  rect(240,194,40,20)
  fill(38,24,23);
  rect(204,203,25,15);
  rect(196,199,8,4);
  rect(293,203,25,15);
  rect(318,199,8,4);
  //lips
  fill(255,156,159)
  rect(245,276,32,20)
  //jewlery
  fill(240,205,129);
  rect(155,212,12,7);
  rect(155,224,12,7);
  rect(170,245,7,10);
  //beauty mark
  fill(164,110,78);
  rect(282,273,3,3);
  //frame
  strokeCap(SQUARE);
  stroke(201,199,195);
  strokeWeight(25);
  line(219.5,350,430,350);
  strokeWeight(18);
  line(210,354,430,354);
  strokeWeight(25);
  line(430,362.5,430,54);
  line(442.5,54,71.5,54);
  line(84,54,84,362.5);
  line(84,350,113.5,350);
  strokeWeight(8);
  line(84,359,126,359);
}

rfarn-assignment01-selfportrait

When first given the assignment to code a self portrait, my immediate thought was to create a portrait that was as realistic as possible. However, given my very little knowledge of coding, I soon found that that wouldn’t be possible. So I then turned to a more graphic, animated concept. Instead of creating a foreground and background portrait, I decided to use the entire canvas to illustrate my face. Once figuring out the placement of my face and hair, it was quick and easy to place and “draw” the rest of my facial features.

sketch

function setup() {
    createCanvas(600, 500);
    background(54, 37, 29);

  }

function draw() {
	noStroke();
	
	//face
	fill(250, 209, 178);
	rectMode(CENTER);
	rect(300, 450, 400, 600, 100);

	//hair
	fill(54, 37, 29);
	ellipseMode(CENTER);
	ellipse(500, 70, 600, 500);
	ellipse(100, 10, 300, 600);

	//eyes
	stroke(255);
	strokeWeight(3);
	fill(65, 56, 23);
	ellipseMode(CENTER);
	ellipse(200, 350, 40, 40);
	ellipse(400, 350, 40, 40);
	noStroke();
	fill(255);
	ellipse(190, 340, 10, 10);
	ellipse(390, 340, 10, 10);

	//mouth
	fill(0);
	arc(300, 425, 150, 100, 0, PI);
	fill(255);
	ellipseMode(CENTER);
	ellipse(300, 425, 150, 25);
	fill(250, 209, 178);
	rect(300, 400, 200, 50);

	//nose
	fill(233, 194, 164);
	arc(300, 395, 45, 20, 0, PI);

}

katieche – looking outwards 01

https://www.ingenie.com/one-four-nine/

One Four Nine is an interactive web and smartphone based game where the player has to solve a case surrounding a car crash. Designed by Epiphany for Ingenie, an insurance brand for young drivers, the site utilizes a first person point of view interactive video along with sounds to place the user in the perspective of an investigator on the crash site. Not only is the video beautifully made, the graphics and and movement flow of the entire project was stunning and inspired me to look more into interaction design.

Epiphany used GSAP animation (a type of HTML5 for animations), Hammer.js, and Zepto.js to create One Four Nine. As a company who has received several awards for their other websites, I’m sure they are composed of a well rounded team of designers and coders; however, I could not find exactly how they organized themselves or how many people were involved. This project served primarily as an educational site to raise awareness against distracted drivers, a common stereotype of young drivers. I believe the utilization of  gamification in the educational industry is continuing to grow as it has proven successful in being both entertaining and informative to our short-attention-spanned youth.

 

Matthew Erlebacher Self-Portrait

merlebac Project-01

// Matthew Erlebacher
// Section B
// merlebac@andrew.cmu.edu
// Project-01

function setup() {
    createCanvas(600, 500);
    background(0, 0, 255);
    // Canvas background

    fill(1);
    quad(110, 320, 160, 160, 300, 110, 300, 350);
    // Left hair quad (1)

    fill(1);
    quad(490, 320, 440, 160, 300, 110, 300, 350);
    // Right hair quad (2)

    fill(200, 140, 45);
    triangle(160, 275, 160, 350, 100, 260);
    // Triangle left ear (3)

    fill(200, 140, 45);
    triangle(440, 275, 440, 350, 500, 260);
    // Triangle right ear (4)

    fill(255, 130, 65);
    ellipse(300, 300, 300, 300);
    // Face ellipse (5)

    fill(256);
    ellipse(235, 235, 50, 50);
    // Left eye ellipse (6)

    fill(256);
    ellipse(365, 235, 50, 50);
    // Right eye ellipse (7)

    fill(190, 130, 45);
    ellipse(235, 235, 25, 25);
    // Left pupil ellipse (8)

    fill(190, 130, 45);
    ellipse(365, 235, 25, 25);
    // Right pupil ellipse (9)

    noStroke();
    fill(255, 0, 0);
    rect(225, 375, 150, 20);
    // Lip rect (10)

    fill(200, 140, 45);
    triangle(275, 325, 300, 275, 325, 325);
    // Triangle nose (11)


}

I feel that I did a decent job at making primitives resemble a face. I tried to make everything overlap in order to make it look more organic. I also attempted to use different colors in order to give the image some variety.

Rachel Karp – Project-01 – Self-Portrait (Face)

This process presented a great combination of practicing code and also distilling my conception of myself down into units basic enough for me to code. Product-wise, I am happy with the elements I chose to focus on: my eyes, my thoughts about my place in the world, my thoughts about other forces in the world (move your mouse around to play with that). But I know a greater facility with how to determine coordinates, especially in service of making triangles and quads, would have given me more precision with final my choices.

Rachel Karp Self-Portrait

function setup() {
    createCanvas(400, 400);
    background(125);
}

function draw() {

    //face
    fill(227,255,207);
    noStroke();
    ellipse(320, 270, 190, 300);

    //left eye
    fill(0, 178, 255);
    stroke(125);
    ellipse(270, 253, 50, 34);

    //right eye
    fill(0, 178, 255);
    stroke(255);
    ellipse(350, 250, 50, 40);

    //left pupil
    fill(0);
    ellipse(280, 262, 10, 10);

    //right pupil
    fill(0);
    ellipse(360, 262, 10, 10);

    //eyebrow
    stroke(0);
    line(300, 220, 250, 210);

    //nose
    fill(125);
    stroke(255);
    triangle(290, 320, 310, 260, 330, 310);

    //mouth
    fill(125);
    rect(290, 340, 40, 20);

    //mouth partition
    stroke(0);
    line(280, 352, 344, 352);

    //the Other
    fill(227,255,207);
    noStroke();
    quad(0, 31, 200, 150, mouseX, mouseY, 0, 76);

}

jennyzha – looking outwords 01

Karolina Kurkova attends the 'Manus x Machina: Fashion In An Age Of Technology' Costume Institute Gala at Metropolitan Museum of Art on May 2, 2016 in New York City. (Photo by Larry Busacca/Getty Images)

A particular computational project that I found to be inspiring was the Marchesa x IBM’s Watson dress collaboration for the Met Gala. While technology isn’t typically something one would associate with fashion or art, Marchesa and IBM were able to perfectly and harmoniously showcase their inspiration, and last year’s Met Gala’s theme, “Manus x. Machina: Fashion in the Age of Technology”.

Cognitive Marchesa dress lights up the night

The “cognitive dress,” it was called, was covered in fabric flowers embedded with LED lights that changed color. While physically, the dress stayed true to Marchesa’s signature elegance, the dress also stayed true to Watson’s powerful analytical power. Prior to the gala, Watson analyzed social media around Marchesa, assigning different emotions of the posts to different colors (rose for joy, coral for passion, aqua for excitement, lavender for curiosity, and butter for encouragement).

The team included a portion of the IBM Watson team, as well as Georgina Chapman and Keren Craig of Marchesa beginning their process just 5 weeks before the gala. There were no prior projects similar to this so they were the pioneers, as they opened up opportunity for more innovation between fashion and technology.

jennyzha – project 01 – face

sketch

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

function draw() {
    background(255);
 //hair   
    fill(0, 0, 0);
    ellipse(300, 400, 450, 700);
//face
    fill(237,221,105);
    ellipse(300, 350, 300, 400);

//eyes
    fill(0, 0, 0);
    ellipse(245, 300, 60, 40);
//eyes
    fill(0, 0, 0);
    ellipse(355, 300, 60, 40);
//eye rectangle
    strokeWeight(0)
    fill (237,221,105)
    rect(210,300, 70, 40);
//eye rectangle
    fill (237,221,105)
    rect(320, 300, 70, 40);
//mouth
    fill(226,43,42);
    ellipse(300, 450, 120, 120);
//mouthtongue
    fill(250, 80, 80);
    ellipse(300, 450, 100, 50);

//mouth rectangle
    strokeWeight(0)
    fill (237,221,105)
    rect(240,390, 125, 50);

//nose
    fill(0, 0, 0);
    ellipse(300, 350, 60, 40); 

    noLoop();
}

 

I went through a couple of sketches before ending up with my final draft. Originally I had only black and white shapes to create the foundation and finally added some color. I also enjoyed using more than one shape to create a single shape (i.e. the mouth and eyes are actually combinations of rectangles and ellipses and circles).

mmirho – Looking Outwards 1

A computational art project that inspires me is the Crown Fountain in Millennium Park, Chicago. The art piece is, of course, very well known. I visited Chicago for a few days, and I quickly became fascinated with it, even after only seeing it from a distance.

The construction alone took 17 million dollars in donations, around three years in construction. It was planned by the Krueck and Sexton Architecture firm.

I’m unaware of the technology they used to create the imagery on the art piece and whether or not it was custom for the project, but almost all of the LEDs and glass plates had to be custom made as a result of the sheer size.

Here’s a link to a video of the monument.

Here’s a link to a full description of the monument, on the City of Chicago’s website.
https://www.cityofchicago.org/city/en/depts/dca/supp_info/chicago_s_publicartcrownfountaininmillenniumpark.html

I’m unaware of the artist’s inspiration, but I would assume it had to do less with prior art installations and more with the diverse community within the city of Chicago.