## sunmink-project-01

``````//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

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

function draw() {

strokeWeight (0)
fill(216,166,132)

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.

``````// 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);
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.

``````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

``````// 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);

fill(1);
quad(490, 320, 440, 160, 300, 110, 300, 350);

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.

``````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

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

``````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.