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);
}