Author: hschung@andrew.cmu.edu

hschung-Project-02

sketch

//Heidi Chung
//Section A
//hschung@andrew.cmu.edu
//Project-02: Variable Faces; Face Variables
var eyeWidth = 22;
var eyeHeight = 22;
var mouthSize = 40;

var cheekR = 234;
var cheekG = 175;
var cheekB = 152;
var cheekWidth = 60;
var cheekHeight = 60;

var hairR = 76;
var hairG = 54;
var hairB = 36;

var eyebrowWidth = 40;
var eyebrowHeight = 10;
//var leftBrowX = 253;
var BrowY = 210;
//var rightBrowX = 347;
var BrowY = 210;

function setup() {
	 createCanvas(640,480);
	 background(145, 193, 191);

	 noStroke();
	}

function draw() {
	 fill(hairR-30, hairG-30, hairB-50); //background hair //fill(31, 34, 13);
	 quad(200, 195,  400, 185,  425, 375,  180, 375);

	 fill(234, 178, 117); //neck
	 rect(263, 380, 78, 78);

	 fill(235, 207, 155); //face
	 ellipse(300, 260, 210, 260);

	 fill(200, 125, 95); //mouth
	 ellipse(600/2, 600/2 +10, 60, mouthSize);

	 fill(235, 207, 155);//eclipse over mouth
	 rect(600/2 -40, 600/2 -75, 70, 85);


	 fill(cheekR, cheekG, cheekB); //left blush //fill(234, 175, 152);
	 ellipse(235, 265, cheekWidth, cheekHeight); //ellipse(235, 265, 60, 60);

	 fill(cheekR, cheekG, cheekB); //right blush
	 ellipse(365, 265, cheekWidth, cheekHeight);

	  fill(61, 44, 23); //left eye
	 ellipse(250, 240, eyeWidth, eyeHeight);

	 fill(61, 44, 23); //right eye
	 ellipse(350, 240, eyeWidth, eyeHeight);

	 fill(hairR-20, hairG-10, hairB-20); //left eyebrow // ellipse(253, 210, 40, 10)
	 ellipse(253, BrowY, eyebrowWidth, eyebrowHeight); //ellipse(253, 210, width, height)

	  fill(hairR-20, hairG-10, hairB-20); //right eyebrow
	 ellipse(347, BrowY, eyebrowWidth, eyebrowHeight); //ellipse(347, 210, width, height)


	 fill(234, 178, 117); //nose
	 triangle(300, 267, 320, 290, 280, 290);

	 fill(hairR, hairG, hairB); //more hair// fill(76, 54, 36);
	 quad(222, 159,  345, 129,  420, 220,  391, 230);

	 fill(hairR, hairG, hairB); //more hair
	 quad(371, 398,  391, 228,  421, 219,  433, 340);

	 fill(hairR, hairG, hairB); //more hair
	 quad(215, 156,  183, 234,  206, 245,  247, 163);

	 fill(hairR, hairG, hairB); //more hair
	 quad(183, 234,  174, 345,  237, 400,  207, 244);

	 fill(hairR, hairG, hairB); // top part of hair
	 quad(216, 157,  275, 123,  377, 132,  420, 219);

	 fill(hairR, hairG, hairB);
	 triangle(183, 235,  207, 149,  275, 122);
	}
function mousePressed() {
	eyeWidth = random(20, 35);
	eyeHeight = random(15, 35);
	mouthSize = random(10, 85);
	cheekR = random(234, 274);
	cheekG = random(175, 195);
	cheekB = random(152, 172);
	hairR = random(50, 100);
	hairG = random(54, 80);
	hairB = random(36, 70);
	eyebrowWidth = random(35, 50);
	eyebrowHeight = random(10, 20);
	cheekWidth = random(50, 75);
	cheekHeight = random(50, 75);
	BrowY = random(210, 223);
	//leftBrowX = random (253, 263);
	//rightBrowX = random (347, 357);
	

}

I used my previous face from the self-portrait as a base. I did a sketch in Illustrator for that face to give me direction as I drew it in code.

It took me a couple times to get used to manipulating the different values as variables, but once I got the hang of a few variables, it was easier for me to think of other values to turn into variables. Rather than make completely different faces, I made my program create mildly different versions of my self portrait. If I changed the hair too, it’d be drastically different, but I like it this way.

hschung-Looking Outwards-1

I saw a very interesting project a few weeks ago in Jersey City at an exhibition featuring a range of arts, including interactive art, paintings, etc. In this project, there is a camera that picks up people’s faces and recreates them using squiggly, long, noodle-like shapes, and projects them on a wall.

At first, I didn’t know what the piece was doing, but after stepping back a bit I could see that the camera was picking up faces and recreating them in a fun, creative way. I appreciated it because it made people curious and gave them a laugh after looking at their silly, distorted reflections.

I’ve seen interactive art that has similar principles of using camera recognition and distorting or changing the information it picks up. I knew it involved code, and I was in a state of awe, wondering how it did that, how the artist made this happen.

Something that might have been cool would be if the distorted image stayed put together for a bit longer; once the face(s) in front of the camera moved, the squiggly noodle-faces would fall apart almost instantly. That encouraged people to stay still and watch the squiggly portrait appear, however, so I think the fact that the art was so ephemeral was also a point of interest that gathered an audience.

I think the artist’s inspiration probably came from their ability to make creatively with code, and to encourage their audience to explore, interact, and question.
IMG_3103.MP4

IMG_3105.MP4

hschung-Project 01

sketch

//Heidi Chung
//Section A
//hschung@andrew.cmu.edu


function setup() {
	 createCanvas(600,600);
	 background(145, 193, 191);

	 noStroke();

	 fill(31, 34, 13); //hair
	 quad(200, 195,  400, 185,  425, 375,  180, 375);



	 fill(234, 178, 117); //neck
	 rect(263, 380, 78, 78);


	 fill(235, 207, 155); //face
	 ellipse(300, 260, 210, 260);


	 fill(234, 175, 152); //left blush
	 ellipse(235, 265, 60, 60,);

	 fill(234, 175, 152); //right blush
	 ellipse(365, 265, 60, 60);


	 fill(61, 44, 23); //left eye
	 ellipse(250, 240, 24, 22);

	 fill(61, 44, 23); //right eye
	 ellipse(350, 240, 24, 22);


	 fill(255); //mouth
	 ellipse(width/2, height/2 +10, 60, 60);


	 fill(235, 207, 155);//eclipse over mouth
	 rect(width/2 -30, height/2 -15, 60, 30);


	 fill(234, 178, 117); //nose
	 triangle(300, 267, 320, 290, 280, 290);

	 fill(76, 54, 36); //more hair
	 quad(222, 159,  345, 129,  420, 220,  391, 230);

	 fill(76, 54, 36); //more hair
	 quad(371, 398,  391, 228,  421, 219,  433, 340);

	 fill(76, 54, 36); //more hair
	 quad(215, 156,  183, 234,  206, 245,  247, 163);

	 fill(76, 54, 36); //more hair
	 quad(183, 234,  174, 345,  237, 400,  207, 244);

	 fill(76, 54, 36); // top part of hair
	 quad(216, 157,  275, 123,  377, 132,  420, 219);

	 fill(76, 54, 36);
	 triangle(183, 235,  207, 149,  275, 122);







}

Before I started coding, I made a sketch in Illustrator, so I could keep it simple and cute. Sketching it first helped me ground myself so I wouldn’t be lost immediately trying to code shapes without an image in mind first. It took a lot of time plotting points and getting used to the fashion of “drawing shapes” in this way. My friend helped me save some time; we took a screenshot of some of my existing work and dropped it into a 600×600 Illustrator doc, so I could find the points easily and insert them into my code.

I regret not starting earlier and rushing myself, because I think I would have had more fun if I utilized my time better so I could experiment more. Next time, I’ll manage myself better instead of being afraid to dive in.

Also, I thought I drew my portrait centered but I guess not?? Oops.