Project-02-Variable-Face

I did a scene from Studio Ghibli’s Spirited Away where Kaonashi is sitting on a train. I found his face to be made of simple geometries that convey different expressions and emotions when the dimensions are adjusted.

project-02-face
//Graana Khan
// Section B

var eyeWidth = 14 
var eyeHeight = 8
var mouthWidth = 20 
var mouthHeight = 7
var eyebrowHeight = 111
var eyebrowHeightTop = 94
var cloud1 = 64
var cloud2 = 308
var cloud3 = 484

function setup() {
    createCanvas(680, 480); 
}

function draw() {
	background(255);
	noStroke();

//train backdrop 
    fill(66, 32, 18);
    rect(0, 0, 680, 235);
    fill(37, 17, 12);
    rect(0, 229, 680, 4);
    fill(114, 30, 21);
    rect(0, 234, 680, 100);
    fill(84, 22, 13);
    rect(0, 332, 680, 45);
    fill(56, 24, 14);
    rect(0, 373, 680, 65);
    fill(125, 75, 51);
    rect(0, 435, 680, 45);
    fill(78, 41, 22);
    rect(37, 18, 176, 211);
    rect(251, 18, 176, 211);
    rect(464, 18, 176, 211);
    fill(44, 19, 12);
    rect(0, 373, 680, 9);

//sky 
    fill(149, 178, 221);
    rect(45, 29, 160, 190);
    rect(259, 29, 160, 190);
    rect(472, 29, 160, 190);

    // clouds 
    fill(255, 255, 255, 100);
    rect(cloud1, 57, 85, 37, 20);
    rect(137, 162, 61, 32, 20);
    rect(cloud2, 101, 107, 59, 20);
    rect(cloud3, 60, 45, 30, 20);
    rect(525, 143, 91, 59, 20);

// train handles
    noFill();
    strokeWeight(8);
    stroke(98, 80, 56);
    ellipse(34, 29, 52, 52);
    ellipse(156, 29, 52, 52);
    ellipse(279, 29, 52, 52);
    ellipse(401, 29, 52, 52);
    ellipse(526, 29, 52, 52);
    ellipse(648, 29, 52, 52);
    noStroke();

//kaonashi body 
    fill(0, 0, 0, 150);
    beginShape();
    curveVertex(270, 432);
    curveVertex(270, 432);
    curveVertex(263, 379);
    curveVertex(258, 342);
    curveVertex(257, 330);
    curveVertex(258, 313);
    curveVertex(261, 298);
    curveVertex(263, 276);
    curveVertex(273, 234);
    curveVertex(280, 206);
    curveVertex(286, 186);
    curveVertex(291, 164);
    curveVertex(296, 137);
    curveVertex(298, 116);
    curveVertex(303, 94);
    curveVertex(312, 78);
    curveVertex(333, 69);
    curveVertex(351, 70);
    curveVertex(364, 77);
    curveVertex(373, 88);
    curveVertex(379, 109);
    curveVertex(382, 127);
    curveVertex(385, 152);
    curveVertex(393, 190);
    curveVertex(401, 217);
    curveVertex(410, 252);
    curveVertex(417, 285);
    curveVertex(421, 310);
    curveVertex(422, 343);
    curveVertex(420, 368);
    curveVertex(417, 284);
    curveVertex(414, 425);
    curveVertex(270, 432);
    curveVertex(270, 432);
    endShape();

//kaonashi head
    fill(221, 221, 219);
    rect(306, 80, 67, 116, 25, 25, 40, 40);

//kaonashi arms
    noFill();
    stroke(0, 0, 0, 140);
    strokeWeight(10);
    beginShape();
    curveVertex(288, 299);
    curveVertex(288, 299);
    curveVertex(285, 311);
    curveVertex(290, 321);
    curveVertex(307, 330);
    curveVertex(307, 330);
    endShape();
    beginShape();
    curveVertex(392, 299);
    curveVertex(392, 299);
    curveVertex(394, 311);
    curveVertex(390, 321);
    curveVertex(373, 330);
    curveVertex(373, 330);
    endShape();

//kaonashi face
    noStroke();
    fill(0);
    ellipse(323, 121, eyeWidth, eyeHeight); //left eye
    ellipse(357, 121, eyeWidth, eyeHeight); // right eye
    ellipse(323, 129, 9, 3);
    ellipse(357, 129, 9, 3);
    ellipse(340, 173, mouthWidth, mouthHeight);
    fill(111, 80, 61);
    triangle(318, 136, 328, 136, 325, 156);
    triangle(352, 136, 362, 136, 355, 156);
    ellipse(340, 181, 12, 4);
    triangle(318, eyebrowHeight, 328, eyebrowHeight, 326, eyebrowHeightTop); //left eyebrow
    triangle(352, eyebrowHeight, 361, eyebrowHeight, 353, eyebrowHeightTop); //right eyebrow

}

function mousePressed() {
	eyeWidth = random(8, 30);
	eyeHeight = random(5, 12);
	mouthWidth = random(10, 35);
	mouthHeight = random(5, 15);
	eyebrowHeight = random(100, 113);
	eyebrowHeightTop = random(87, 100);
	cloud1 = random(51, 120);
	cloud2 = random(262, 312);
	cloud3 = random(476, 562);

}

Leave a Reply