September 2020 – Page 33 – [OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice

Project-02-Variable Face

For this project, I tried to create variations of sizes, colors, and positions utilizing the original self portrait I created for our last deliverable. Different sizes, colors, shapes, and positions make changes to the mood of the portrait that was originally adorable.

sketch

// Stefanie Suk
// 15-104 Section D


var bgColorR = 208;
var bgColorG = 233;
var tiecolorR = 0;
var tiecolorG = 0;
var tiecolorB = 0;
var buttonD= 259;
var hatColorR = 32;
var hatColorG = 69;
var mouthposition = 345;
var eyeSize = 17;
var blushW = 30;
var blushH = 30;

function setup() {
    createCanvas(480, 640);
    // text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {

	background(bgColorR, bgColorG, 255);
	noFill();

	// head and body
	noStroke();
	fill(255);
	ellipse(240, 680, 400, 600);     //body
	fill(240);
	ellipse(245, 332, 305, 250);     //shadow on face
	fill(255);
	ellipse(240, 300, 300, 300);     //main face ellipse
	ellipse(285, 350, 250, 200);     //cheek
	ellipse(140, 200, 120, 120);     //left ear
	ellipse(340, 205, 120, 120);     //right ear

	// eyes
	stroke(0);
	strokeWeight(eyeSize);
	point(205, 320);                 //left eye
	point(310, 320);                 //right eye

	// mouth
	strokeWeight(5);
	fill(255, 0, 0);
	arc(260, 345, 50, 50, 0, PI, CHORD);

	// necktie and button
	fill(tiecolorR, tiecolorG, tiecolorB);
	triangle(216, 465, 216, 503, 259, 484.5);   //left part of tie
	triangle(301, 465, 301, 503, 259, 484.5);   //right part of tie 
	fill(0);
	ellipse(buttonD, 510, 5, 5);                //top button
	ellipse(buttonD, 525, 5, 5);                //middle button
	ellipse(buttonD, 540, 5, 5);                //bottom button

	// blush
	noStroke();
	fill(249, 203, 203);
	ellipse(140, 350, blushW, blushH);          //left blush
	ellipse(360, 350, blushW, blushH);          //right blush

	// hat
	fill(hatColorR, hatColorG, 140);
	quad(204, 173, 220, 130, 264, 130, 283, 173);

}

function mousePressed() {
	// changes color of background
	bgColorR = random(50, 200);
	bgColorG = random(50, 200);
	// changes position of button
	buttonD = random(240, 280);
	// changes color of necktie
	tiecolorR = random(0, 255);
	tiecolorG = random(0, 255);
	tiecolorB = random(0, 255);
	// changes color of hat
	hatColorR = random(20, 230);
	hatColorG = random(20, 230);
	// changes eye size
	eyeSize = random(10, 30);
	// changes shape of blush on cheek
	blushW = random(30, 45);
	blushH = random(30, 45);
}

Project 02 – Variable Portrait

This is a random portrait generator that creates random robot faces! The hardest part of this was writing a loop that could let each mouse click cause the program to cycle through several faces at a time.

sketch

/*
* Eric Zhao
* ezhao2@andrew.cmu.edu
* Section D
*
* Random Face Generator. Randomizes face shape, eye color and size, nose shape,
* and presence of antenna. Operates on click and rolls through several faces 
* per click.
*/

let w = 0; //face width
let h = 0; //face height
let topRadius = 0; //face curvature
let botRadius = 0; //face curvature
let eyeRadius = 0; //eye size
let index = 15; //loop index
let noseCircle = 0; //controls shape of nose
let faceColor = 0; //grayscale face color value
let eyeR = 0; //eye Red value
let eyeG = 0; //eye Green value
let eyeB = 0; //eye Blue value

function setup() {
    createCanvas(600, 600);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
    frameRate(30);
    rectMode(CENTER);
}

function draw() { 
    /* This draw command runs when the mouse is clicked, generating 15 portraits and stopping
    on the last one. Given that each face needs random values, this function sets the variables 
    instead of the mousePressed function. */
    //setting variables randomly
    w = random(width/4, width/2); //next 4 lines generate random rectangle dimensions
    h = random(w/2, w*1.5);
    topRadius = random(0, width/8); 
    botRadius = random(width/20, width/3);
    eyeRadius = random(w/8, h/4);
    noseCircle = int(random(int(0), int(2)));
    faceColor = random (100, 200);
    eyeR = random(30, 256);
    eyeG = random(30, 256);
    eyeB = random(30, 256);
    //setting fills and strokes
    background(185, 240, 185);
    noStroke();
    fill(faceColor);
    rect(width/2, height/2, w, h, topRadius, topRadius, botRadius, botRadius); //draws rectangle
    fill(eyeR, eyeG, eyeB)
    ellipse((width/2) - (w/5), (height/2) - (h/5), eyeRadius, eyeRadius); //left eye
    ellipse((width/2) + (w/5), (height/2) - (h/5), eyeRadius, eyeRadius); //right eye
    noFill();
    strokeWeight(5);
    stroke(220);
    if((eyeR + eyeG + eyeB) / 3 > 128) { //if the eye color is above a certain brightness, darken stroke
        stroke(50)
    }
    arc((width/2) - (w/5), (height/2) - (h/5), eyeRadius * 0.8, eyeRadius * 0.8,
        PI + QUARTER_PI, QUARTER_PI); //left reflection
    arc((width/2) + (w/5), (height/2) - (h/5), eyeRadius * 0.8, eyeRadius * 0.8,
        PI + QUARTER_PI, QUARTER_PI); //right reflection
    stroke(220);
    if (noseCircle === 1) { //this loop controls for nose shape and antenna
        //draws a round nose and face profile 
        arc((width/2), (height/2) + (eyeRadius * 0.8) / 2, eyeRadius * 0.8, eyeRadius * 0.8, 
        HALF_PI, PI + HALF_PI);
        line (width/2, (height/2) - (h/2), width/2, height/2);
        line (width/2, (height/2) + (eyeRadius * 0.8), width/2, (height/2 + h/2));
        stroke(faceColor); 
        line (width/2, (height/2) - (h/2), (width/2) + (w/4), (height/2) - (h/1.5)); //draws antenna stem
        noStroke();
        fill (255, 66, 66);
        ellipse((width/2) + (w/4), (height/2) - (h/1.5), eyeRadius * 0.5, eyeRadius * 0.5); //draws antenna circle
    } else {
        //draws a triangle nose / face profile
        line (width/2, (height/2) - (h/2), width/2, height/2 - eyeRadius);
        line (width/2, height/2 - eyeRadius, (width/2) - (w/8), (height/2) + (h/4));
        line ((width/2) - (w/8), (height/2) + (h/4), width/2, (height/2) + (h/4));
        line (width/2, (height/2) + (h/4), width/2, (height/2 + h/2));        
    }

    print(index.toString()); //prints loop index to console
    index++;

    if (index > 9) { //repeats the draw command 15 times and stops the loop afterwards
        noLoop();
    }

}

function mousePressed(){
    index = 0;
    loop();
}

Looking Outwards 02 – Generative Art

Drawing Water, designed by David Wicks, is a piece of generative art shaped by the relationship between where rainfalls are and water consumption in the United States. What I really admire about this work is that not only is it aesthetically pleasing, but people can also have interactive experiences with the installation. I love how little lines flow together in different colors on the screen, and it amazes me how all these lines correspond to the daily rainfall measurement in the United States. Each line is driven by water consumption and rainfall data, where David Wicks utilizes these datas to program his installation. The length of each line is determined by the amount of rainfall measured, and the initial placement of the lines are determined by where the rainfall fell. The final placement of the lines and the colors are based on urban water consumption in the States. I can clearly see and appreciate David Wicks’ delicate and artistic sensibility through the soft but dynamic movements of each line in his installation.

Looking Outward 02 – Generative Art

Memo Aktens – “Gloomy Sunday”, 2017.

In the biography of his website, Memo Aktens writes that his “biggest inspiration is trying to understand the world around me.” Aktens’s unique perspective is reflected in his series “Learning to See”, involving him taking ordinary household objects like towels and cables and generating them into beautiful, lifelike landscapes. Seeing a video of the algorithm in action, it amazes me just how seamlessly it works and the level of abstraction it can produce from a simple arrangement of objects. He seems to be able to take this basic concept and extend it to different mediums, such as running a similar program to transform a video of a dancing saxophonist into a moving rock formation by the beach. I am not too sure how Akten’s algorithm works, but he mentions that this series works utilizes machine learning and that he trained this model with images of four categories: ocean & waves, clouds & sky, fire, flowers, and images from the Hubble Space Telescope.

Memo Aktens – “#EpicGanGuy2019”, 2019.

Project 2 – Variable Face

sketch

For this project, I tried to play with the background a little and then change facial features such as blush, face width and height eye size along with expression and hair length and earring colour.

//Aadya Bhartia
//Section A

//global variables 
var circOp = 150;
var circR = 100;
var faceH = 220;
var faceW = 250;
var eyeWhite = 7;
var mouth = 80;
var blushH = 10;
var earring = 15;
var hairL = 200;
var r = 120;
var g = 120;
var b = 120;
var body = 400;
var ctr = 2;// using a counter for different expressions 
function setup() {
    createCanvas(600, 480);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}
function draw() {
	background(84,117,120);
	noStroke();
	//background circles
    fill(62, 140, 220, circOp);//varying circle opacity
    ellipse(20,20,circR);
    ellipse(560,300,circR);
    ellipse(140,270,circR);
    ellipse(390,100,circR);
    ellipse(500,500,circR);
    ellipse(80,4800,circR);
    ellipse(80,500,circR);
    ellipse(560,30,circR);
    //hair
    fill(81, 65, 47);
    ellipse(302,200, faceW + 90, faceH + 85);
    rect(257 - faceW/2, 210, faceW+89, hairL);
    //neck
    fill(211, 200, 190);
    rect(260,250,80,150);
    //face
    fill(241, 230, 218);
    ellipse(300, 210, faceW, faceH);
    //fringe 
    fill(81, 65, 47);
    beginShape();
    curveVertex(220, 100);
    curveVertex(220, 100);
    curveVertex(260, 150);
    curveVertex(350, 155);
    curveVertex(400, 250);
    curveVertex(400, 300);
    curveVertex(450, 200);
    curveVertex(400, 100);
    curveVertex(300, 70);
    curveVertex(250, 85);
    curveVertex(220, 100);
    endShape();
    //eyes
    fill(80);
    ellipse(300+50, 200, 20);
    ellipse(300-50, 200, 20);
    fill(255);
    ellipse(300+45, 202, eyeWhite);
    ellipse(300-55, 202, eyeWhite);   
    //blush
    fill(250, 154, 120, 100);
    ellipse(300-50, 230, 50, blushH);
    ellipse(300+50, 230, 50, blushH);
    //glass - do not change 
    stroke(87, 120, 135);
    strokeWeight(4);
    noFill();
    ellipse(300 - 50, 200, 60);
    ellipse(300 + 50, 200, 60);
    arc(300, 200, 40, 40, PI, TWO_PI);
    //hoop colour changing 
    strokeWeight(2.5);
    stroke(r, g, b);
    ellipse(305 - faceW/2, 245,15, 30);
    //different mouth expressions 
    if (ctr == 1) {
    // draw a frown
        stroke(150, 50, 50);
        strokeWeight(4);
        arc(300, 280, 100, 60, PI, TWO_PI);
    } 
    else if (ctr == 2){
    // draw a happy face
        stroke(150, 50, 50);
        strokeWeight(4);
        arc(300, 260, 100, 60, 0, PI);
    } 
    else {
    // draw a straight face
        stroke(150, 50, 50); 
        strokeWeight(4);
        line(250, 280, 350, 280);
    }
    //clothes
    noStroke();
    fill(240, 130, 150);
    rect(250, 350, 100, 20);
    ellipse(300, 650, body, 600)
}
function mousePressed(){
    circOp = random(50,220);
	faceW = random(200,250);
	faceH = random(200,270);
	hairL = random(180,270);
    circR = random(30,300);
    eyeWhite = random(2,10);
    blushH = random(5, 15);
    r = random(10,200);
    g = random(10,200);
    b = random(10,200);
    ctr = int(random(1,4));
    body = random(250, 400);
}

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

}

Project 2 – Variable Face

An avatar generator for a bunny/bear game

sketch Download

//face
var faceWidth = 70;
var faceHeight = 200;
var faceRound = 20; //max 40
var faceColor = 0
//ears
var earWidth = 20;
var earHeight = 70;
//eyes
var eyeSize = 20;
var eyeColor = 0;


function setup() {
    createCanvas(480, 640);
    background(220);
}

function draw() {
	background (154, 215, 255);
    noStroke();
    fill (faceColor);
    //face
    rect (width/2-faceWidth/2, height/2-faceHeight/2, faceWidth, faceHeight, faceRound);
    //ears
    fill(faceColor);
    var earLX = width/2-faceWidth/2+earWidth/2;
    var earRX = width/2+faceWidth/2-earWidth/2;
    ellipse (earLX, height/2-faceHeight*0.6, earWidth, earHeight);
    ellipse (earRX, height/2-faceHeight*0.6, earWidth, earHeight);
    //eyes
    fill(eyeColor);
    var eyeLX = width/2-faceWidth*0.25;
    var eyeRX = width/2+faceWidth*0.25;
    ellipse(eyeLX, height/2+faceHeight*0.1, eyeSize, eyeSize);
    ellipse(eyeRX, height/2+faceHeight*0.1, eyeSize, eyeSize);
    //eyesHighlight
    fill(255, 255, 255);
    ellipse(eyeLX-eyeSize*0.25, (height/2+faceHeight*0.1)-eyeSize*0.25, 0.25*eyeSize, 0.25*eyeSize);
    ellipse(eyeRX-eyeSize*0.25, (height/2+faceHeight*0.1)-eyeSize*0.25, 0.25*eyeSize, 0.25*eyeSize);
    //nose
    fill(0,0,0);
    var noseLX = width/2-faceWidth*0.1;
    var noseRX = width/2+faceWidth*0.1;
    var noseDY = height/2+faceHeight*0.2+5;
    triangle(noseLX, height/2+faceHeight*0.2, noseRX, height/2+faceHeight*0.2, width/2, noseDY);
}

function mousePressed() {
    //face
    faceWidth = random(100, 200);
    faceHeight = random(100, 200);
    faceRound = random(0, 41);
    faceColor = color(random(0,255), random(0,255), random(0,255));
    //ear
    earWidth = random(10, 25);
    earHeight = random(30, faceHeight*2);
    //eyes
    eyeSize = random(5, 30);
    eyeColor = color(random(0,240), random(0,240), random(0,240));
}

Looking Outwards – 2

“Quantum Fluctuations: Experiments in Flux,” is a generative art work by artist Markos Kay. The artwork is a collaboration between him and scientists at the CERN research institute in Geneva. Kay aims to represent the quantum world through art and technology, therefore, visualizing processes which otherwise cannot be seen by bare eyes. Kay aims to “measure the spoils of a proton collision and compares the findings with data collected from supercomputer simulations.”

These complex and gorgeous combinations attracted me because there was a language between both Kay and the quantums, almost questioning who the real artist is. Along with that I appreciate how Kay was able to depict so beautifully something the man would most likely never see.
http://www.mrkism.com/quantum.html

LO 2 – Generative Art

One generative art project that I find immensely inspirational is City Icon, designed and coded by Marcin Ignac at Variable (2012).

City Icon by Martin Ignac featured at Sustainable Cities exhibition by Siemens in the Crystal building in London.

A generative city simulation, City Icon shows the complex interactions of a city’s intersecting systems, including traffic jams, water streams, nature enclaves, emergency states, and energy sources. As a person who has always been exposed to New York City, one of the most popular cities in the world, I was even more attracted to this project because it shows a side to a city that we are unable to see.

We take advantage of the outcomes of all of these city systems, yet we do not appreciate the process to these outcomes. Ignac’s design of this simulation allows for audiences of all types to easily experience the dynamic workings of a city as well as grasp a sense of balanced amidst chaos.

Project-02-Variable-Face

You might need to refresh the page to see the changes because the mousePressed function does not really work in my code. I will update this post when I figure out why.

ancient beauty

//Jiaqi Wang section C
var eyeH= 15;
var eyeL= 55;
var faceW= 90;
var eyeD=20;
var eyeP=330;
var num;
var num2;
var blush=100;


function setup() {
    createCanvas(480, 640);
    background(179,187,146);
    
}

function draw() {
	//neck
	fill(244,233,222);
	noStroke();
	quad(179, 450, 91, 531, 315, 550, 252, 403);
	fill(128,17,41);
	arc(200,637,400,250,PI,0);
	//face
	var mid=182;

	noStroke();
	fill(244,233,222);
	beginShape();
	//chin point
	curveVertex(mid, 461);
	curveVertex(mid, 461);
	curveVertex(mid-(faceW*0.5), 440);
	//jaw left
	curveVertex(mid-(faceW*0.8), 403);
	//temple left
	curveVertex(mid-faceW, 330);
	//brow bridge
	curveVertex(mid-(faceW*1.03), 276);
	//hairline left
	curveVertex(mid-(faceW*0.74), 217);
	//hairline mid
	curveVertex(mid, 217);
	//hairline right
	curveVertex(mid+(faceW*0.74), 217);
	//brow bridge right
	curveVertex(mid+(faceW*1.03), 276);
	//temple right
	curveVertex(mid+faceW, 330);
    //right jaw
    curveVertex(mid+(faceW*0.8), 403);
    curveVertex(mid+(faceW*0.5), 440);
	curveVertex(mid, 461);
	curveVertex(mid, 461);
	endShape();
	//blush
	fill(235,104,119);
	ellipse(mid-faceW,328,blush,blush);
	fill(235,104,119);
	ellipse(mid+faceW,328,blush,blush);


	//eye
	//left
	//eyeball
	
	num=random(0.3,0.8);
	num2=random(0,0.3);
	fill(255);
	beginShape();
	//inner eye corner left
	curveVertex(mid-eyeD, eyeP);
	curveVertex(mid-eyeD, eyeP);
	//middle of eye
	curveVertex(mid-eyeD-(eyeL*num), eyeP-eyeH);
	//end of eye
	curveVertex(mid-eyeD-eyeL,eyeP-(eyeH*0.93));
	//bottom of eye
	curveVertex(mid-eyeD-(eyeL*num), eyeP);
	curveVertex(mid-eyeD, eyeP);
	curveVertex(mid-eyeD, eyeP);
	endShape();
	//pupil
    fill(86,70,31);
	ellipse(mid-eyeD-(eyeL*0.4),eyeP-(eyeH*0.4),eyeH*0.9,eyeH*0.9);
	noFill();
	fill(0);
	ellipse(mid-eyeD-(eyeL*0.4),eyeP-(eyeH*0.4),eyeH*0.3,eyeH*0.3);
	noFill();
	fill(255);
	ellipse(mid-eyeD-(eyeL*0.45),eyeP-(eyeH*0.45),eyeH*0.2,eyeH*0.2);
	noFill();
	//eyeline
	fill(0);
	beginShape();
	//inner eye corner left
	curveVertex(mid-eyeD, eyeP);
	curveVertex(mid-eyeD, eyeP);
	//middle of eye
	curveVertex(mid-eyeD-(eyeL*num), eyeP-eyeH);
	//end of eye
	curveVertex(mid-eyeD-eyeL,eyeP-(eyeH*0.93));
	//bottom of eye
	curveVertex(mid-eyeD-(eyeL*num), eyeP);
	curveVertex(mid-eyeD-eyeL-(num*10),eyeP-(eyeH*0.93));
	curveVertex(mid-eyeD-(eyeL*num), eyeP-eyeH-(num*9));
	curveVertex(mid-eyeD, eyeP);
	curveVertex(mid-eyeD, eyeP);
	endShape();
	//eyebrow
	fill(0);
	var x= max(num2,0.43);
	ellipse(mid-eyeD-(eyeL*0.5),eyeP-(x*100),num*90,num2*50);
	//hair
	beginShape();
	//jaw left
	curveVertex(mid-(faceW*0.8), 403);
	curveVertex(mid-(faceW*0.8), 403);
	//temple left
	curveVertex(mid-faceW, 330);
	//brow bridge
	curveVertex(mid-(faceW*1.03), 276);
	//hairline left
	curveVertex(mid-(faceW*0.74), 217);
	//hairline mid
	curveVertex(mid, 217);
	//head top
	curveVertex(mid, 145);
	//head top left
	curveVertex(mid-(faceW*0.5), 163);
	//turn
	curveVertex(mid-(faceW*0.8),193);
	//concave
	curveVertex(mid-(faceW*1.8),300);
	//bottom left
	curveVertex(mid-(faceW*1.3),395);
	//bottom right
	curveVertex(mid-(faceW*0.9),395);
	curveVertex(mid-(faceW*0.8), 403);
	curveVertex(mid-(faceW*0.8), 403);
	endShape();
	beginShape();
	//jaw left
	curveVertex(mid+(faceW*0.8), 403);
	curveVertex(mid+(faceW*0.8), 403);
	//temple left
	curveVertex(mid+faceW, 330);
	//brow bridge
	curveVertex(mid+(faceW*1.03), 276);
	//hairline left
	curveVertex(mid+(faceW*0.74), 217);
	//hairline mid
	curveVertex(mid, 217);
	//head top
	curveVertex(mid, 145);
	//head top left
	curveVertex(mid+(faceW*0.5), 163);
	//turn
	curveVertex(mid+(faceW*0.8),193);
	//concave
	curveVertex(mid+(faceW*1.8),300);
	//bottom left
	curveVertex(mid+(faceW*1.3),395);
	//bottom right
	curveVertex(mid+(faceW*0.9),395);
	curveVertex(mid+(faceW*0.8), 403);
	curveVertex(mid+(faceW*0.8), 403);
	endShape();
	ellipse(153-(num*20),155,190-(num*40),150-(num*90));
	ellipse(245+(num2*20),177,80,50);
	ellipse(245+(num2*20),130,80+(num*40),80+(num*40));






	


	//right
	//eyeball
	fill(255);
	beginShape();
	//inner eye corner left
	curveVertex(mid+eyeD, eyeP);
	curveVertex(mid+eyeD, eyeP);
	//middle of eye
	curveVertex(mid+eyeD+(eyeL*num), eyeP-eyeH);
	//end of eye
	curveVertex(mid+eyeD+eyeL,eyeP-(eyeH*0.93));
	//bottom of eye
	curveVertex(mid+eyeD+(eyeL*num), eyeP);
	curveVertex(mid+eyeD, eyeP);
	curveVertex(mid+eyeD, eyeP);
	endShape();
	noLoop()
	//pupil
    fill(86,70,31);
	ellipse(mid+eyeD+(eyeL*0.7),eyeP-(eyeH*0.7),eyeH*0.9,eyeH*0.9);
	noFill();
	fill(0);
	ellipse(mid+eyeD+(eyeL*0.7),eyeP-(eyeH*0.7),eyeH*0.3,eyeH*0.3);
	noFill();
	fill(255);
	ellipse(mid+eyeD+(eyeL*0.65),eyeP-(eyeH*0.55),eyeH*0.2,eyeH*0.2);
	noFill();
	//eyeline
	fill(0);
	beginShape();
	//inner eye corner left
	curveVertex(mid+eyeD, eyeP);
	curveVertex(mid+eyeD, eyeP);
	//middle of eye
	curveVertex(mid+eyeD+(eyeL*num), eyeP-eyeH);
	//end of eye
	curveVertex(mid+eyeD+eyeL,eyeP-(eyeH*0.93));
	//bottom of eye
	curveVertex(mid+eyeD+(eyeL*num), eyeP);
	curveVertex(mid+eyeD+eyeL+(num*10),eyeP-(eyeH*0.93));
	curveVertex(mid+eyeD+(eyeL*num), eyeP-eyeH-(num*9));
	curveVertex(mid+eyeD, eyeP);
	curveVertex(mid+eyeD, eyeP);
	endShape();
    //eyebrow
	fill(0);
	var x= max(num2,0.43);
	ellipse(mid+eyeD+(eyeL*0.5),eyeP-(x*100),num*90,num2*50);

	//mouse
	fill(235,104,119);
	ellipse(mid,416,30,20);
	stroke(0);
	noFill();
	beginShape();
	curveVertex(mid-20, 414);
	curveVertex(mid-20, 414);
	curveVertex(mid-6,412);
	curveVertex(mid,416);
	curveVertex(mid+6,412);
	curveVertex(mid+20, 414);
	curveVertex(mid+20, 414);
	endShape();

	//decoration
	var x=random(112,170);
	var y=random(100,190);
     fill(255,225,90);
     noStroke();
     push();
     translate(x+(num*100), y+(num2*100));
     rotate(frameCount / 200.0);
     polygon(0, 0, 50,13);
     pop();

     fill(255,124,24);
     stroke(255);
	 push();
     translate(x, y);
     rotate(frameCount / -100.0);
     polygon(0, 0, 20, 9);
     pop();
      

      //nouse
      fill(0);
      noStroke();
      ellipse(mid-5,394,2,3);
      ellipse(mid+5,394,2,3);

      //right jaw
      stroke(255);
      noFill();

     beginShape();
    curveVertex(mid+(faceW*0.8), 403);
    curveVertex(mid+(faceW*0.8), 403);
    curveVertex(mid+(faceW*0.5), 440);
	curveVertex(mid, 461);
	curveVertex(mid, 461);
     endShape();


	








}


function mousePressed() {
    faceW = random(280, 330);
    eyeD = random(210, 300);
    eyeP = random(50, 60);
}
//I do not know why this function is not working

function polygon(x, y, radius, npoints) {
  let angle = TWO_PI / npoints;
  beginShape();
  for (let a = 0; a < TWO_PI; a += angle) {
    let sx = x + cos(a) * radius;
    let sy = y + sin(a) * radius;
    vertex(sx, sy);
  }
  endShape(CLOSE);
}

I was inspired by ancient Chinese woman makeups from different periods of time.