heeseoc-Project-02-Variable-Face

heeseoc-variation

//Steph Chun
//15-104 section #A
//heeseoc@andrew.cmu.edu
//Project-02

var faceW = 200;
var faceH = faceW - 20;

var eyeW = 60;
var eyeH = 40;
var eyeY = 315;

var pupilW = 15;

var noseW = 50;
var noseH = noseW - 10;
var noseY = 355;

var colorR = 165;
var colorG = 180;
var colorB = 180;

var colorR1 = 255;
var colorG1 = 241;
var colorB1 = 108;
 
function setup() {
    createCanvas(480, 640);
}
 
function draw() {
    background(250);
    noStroke();

    //ears//
    fill(colorR, colorG, colorB);
    triangle(width/2 - faceW/2, height/2, 330 - faceW, 220, width/2 - 20, height/2 - faceH/2 + 10);
    triangle(width/2 + faceW/2, height/2, 150 + faceW, 220, width/2 + 20, height/2 - faceH/2 + 10);

    fill(colorR+40, colorG+40, colorB+40);
    triangle(width/2 - faceW/2 + 20, height/2 + 20, 340 - faceW, 240, width/2 + 10, height/2 - faceH/2 + 30);
    triangle(width/2 + faceW/2 - 20, height/2 - 10, 140 + faceW, 240, width/2 - 10, height/2 - faceH/2 + 30);
    
    //face//
    fill(colorR, colorG, colorB);
    ellipse(width / 2, height / 2, faceW, faceH);

    //eyes//
    fill(colorR1,colorG1,colorB1);
    var eyeLX = width / 2 - faceW * 0.25;
	var eyeRX = width / 2 + faceW * 0.25;
    ellipse(eyeLX, eyeY, eyeW, eyeH);
    ellipse(eyeRX, eyeY, eyeW, eyeH);

    //pupils//
    fill(50);
    ellipse(eyeLX, eyeY, pupilW, eyeH-10);
    ellipse(eyeRX, eyeY, pupilW, eyeH-10);

    //nose //
    fill(colorR+40, colorG+40, colorB+40);
    var noseLX = width / 2 - faceW * 0.09;
    var noseRX = width / 2 + faceW * 0.09;
    ellipse(noseRX, noseY, noseW, noseH);
    ellipse(noseLX, noseY, noseW, noseH);

    fill(0);
    triangle(noseRX, noseY - noseH/2, noseLX, noseY - noseH/2, width/2, noseY-10);

}
 
function mousePressed() {
    faceW = random(150, 200);
    faceH = random(130, 180);

    eyeW = random(40, 70);
    eyeH = random(30, 50);
    eyeY = random (310, 325);

    pupilW = random (5,25);

    noswW = random (40,60);
    noseH = random (30,50);
    noseY = random (350,360);

    colorR = random (165, 240);
    colorG = random (165, 240);
    colorB = random (165, 240);

    colorR1 = random (192, 245);
    colorG1 = random (241, 243);
    colorB1 = random (192, 245);

}

I tried to show how the cats’ pupil dilate depending on the brightness of the light their eyes are capturing. I took a close look at how cats’ eyes are in real life, and noticed how their pupils are vertical. So I kept the height of my cat’s pupil proportional to the height of the eyes, leaving the width change randomly. I also wanted to give changes to the background colors depending on the size of the pupil, but even after many tries, wasn’t able to figure out if the numbers for pixel units that are used for the width of the pupils are also applicable for the color coding for the background.

heeseoc – Looking Outwards 01

http://frankensim.animade.tv/

FrankenSim is a web-toy produced by a team of animators and developers called Animade. I chose this project because it is, first of all, fun. The color is fun, the graphic elements are visually engaging, and many unexpected interactions such as sound and motion could be found while clicking around. Also, the fact that this web piece is in a shape of old Windows interface makes it more interesting. It draws an initial nostalgic feeling when the viewer first encounters this piece, and surprises them with  There are numerous little details that would make the user feel awe of their creativity and wit.

The producers were inspired by how Frankenstein might have experimented with modern web tools. Even though it does not hold a necessarily practical purpose other than providing entertainment, modern remakes of famous classics as such give the audience an opportunity to think about the signification of the originals and get inspired. Also, the fact that people still visit this website even though it doesn’t really “do” anything, proves that the interactions that are embedded in this piece are truly innovative and creative, in itself accentuating how smart interactions and delicately crafted details are crucial in engaging people even without tangible contents.

heeseoc-Project-01-Face

heeseoc-portrait

//Steph Chun
//15-104 section #A
//heeseoc@andrew.cmu.edu
//Project-01


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

function draw() {

	//background//
	background(255,255,255);
	fill(191,205,219);
	noStroke();
	ellipse(260,252,420,420);

	//hair//
	fill(0);
	ellipse(200, 200, 100, 70);
	ellipse(158, 230, 80, 50);
	ellipse(160, 290, 70, 50);
	ellipse(125, 265, 50, 50);
	ellipse(285, 200, 130, 100);
	ellipse(350, 210, 70, 50);
	ellipse(355, 235, 100, 45);
	ellipse(360, 270, 100, 60);
	ellipse(345, 305, 70, 40);

	//ear//
	fill(220,190,195);
	ellipse(340,270,40,30);
	fill(80,57,57);
	ellipse(344,268,15,13);
	fill(220,190,195);
	ellipse(342,272,15,13);

	//face shadow//
	fill(236,209,209);
	noStroke();
	ellipse(250,270,180,150);

	//earring//
	noFill();
	stroke(150,150,150);
	strokeWeight(2);
	arc(360, 272, 10, 10, QUARTER_PI*6, PI);

	//face//
	fill(255,233,233);
	noStroke();
	ellipse(240,263,165,145);

	//more hair//
	fill(0);
	ellipse(205,200,60,40);
	ellipse(260,190,60,40);
	ellipse(185,225,50,50);

	//blush//
	fill(249,211,211);
	ellipse(300,280,40,25);
	ellipse(182,280,40,25);

	//eyebrows//
	fill(0);
	rect(181,240,40,8);
	rect(260,240,40,8);
	triangle(310,248,300,240,270,248);

	//eyes//
	fill(255,255,255);
	ellipse(280,265,40,25);
	ellipse(202,265,40,25);

	//pupils//
	fill(175,205,225);
	ellipse(280,265,20,20);
	fill(0);
	ellipse(280,265,10,10);
	fill(175,205,225);
	ellipse(202,265,20,20);
	fill(0);
	ellipse(202,265,10,10);

	//eyelid//
	fill(179,110,110);
	arc(280, 265, 40, 25, HALF_PI*6, PI);
	arc(202, 265, 40, 25, HALF_PI*6, PI);

	//eyeliner//
	fill(80,57,57);
	triangle(260,265,300,265,310,260);
	triangle(222,265,182,265,172,260);

	//hair covering eye//
	fill(0);
	ellipse(170,260,60,60);

	//nose//
	fill(236,200,200);
	triangle(230,287,225,295,245,295);

	//mole//
	fill(80,57,57);
	ellipse(290,235,3,3);

	//lips//
	fill(185,80,80);
	arc(232, 311, 20, 13, PI, 0, OPEN);
	arc(247, 311, 25, 13, PI, 0, OPEN);
	fill(205,84,84);	
	arc(244.5, 311, 30, 20, 0, PI, OPEN);

	//mouse input//
	fill(255,251,97);
	rect(mouseX, mouseY, 20, 1);
	rect(mouseX+9.5, mouseY-14, 1, 30);
	rect(mouseX-4, mouseY+12, 10, 1);
	rect(mouseX+0.5, mouseY+6, 1, 16);	
	rect(mouseX-10, mouseY-12, 14, 1);
	rect(mouseX-4, mouseY-20, 1, 20);	

}

I started off with trying to capture my personal attributes that makes my portrait unique. Then, I sketched out my idea on a piece of paper, and I went right on to coding my piece. While I was coding, because approximating the coordinates was super tedious, I thought I should have planned out the coordinates on my computer in advance. I added a mouse input to give it a little more character and life to my piece.