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

Project 2 – Variable Faces

Variable Faces:

//holly liu
//section D
//variable faces

var faceW = 200
var faceH = 200
var mouthW = 40
var mouthH = 50

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

function draw(){
	fill(255);
	strokeWeight(3);
	stroke(0);

	faceW = random(200, 350);
	faceH = random(200, 510);
	ellipse((width/2), (height/2), faceW, faceH);

	var r = random(4);

	if(r < 1) {
		circle(((width/2) - (faceW/3)), (height/2), 50);														//left eye
		circle(((width/2) + (faceW/3)), (height/2), 50);														//right eye
		fill(0);
		circle(((width/2) - (faceW/3)), (height/2), 30);														//left pupil
		circle(((width/2) + (faceW/3)), (height/2), 30);														//right pupil
	} else if(r < 2) {
		arc(((width/2) - (faceW/3)), (height/2), 60, 100, PI, TWO_PI)											//left brow
		arc(((width/2) + (faceW/3)), (height/2), 60, 100, PI, TWO_PI)											//right brow
		circle(((width/2) - (faceW/3)), (height/2), 50);														//left eye
		circle(((width/2) + (faceW/3)), (height/2), 50);														//right eye
		fill(0);
		circle(((width/2) - (faceW/3)), (height/2), 10);														//left pupil
		circle(((width/2) + (faceW/3)), (height/2), 10);														//right pupil
	} else if(r < 3) {
		arc(((width/2) - (faceW/3)), (height/2), 50, 75, 0, PI)													//uW
		arc(((width/2) + (faceW/3)), (height/2), 50, 75, 0, PI)													//Wu
	} else {
		fill(0);
		circle(((width/2) - (faceW/3)), (height/2), 50);														//left eye
		circle(((width/2) + (faceW/3)), (height/2), 50);														//right eye
		fill(255);
		circle(((width/2) - (faceW/3)) - 15, (height/2), 15);													//L left sparkle
		circle(((width/2) - (faceW/3)), (height/2) - 15, 15);													//l right sparkle
		circle(((width/2) + (faceW/3)) - 15, (height/2), 15);													//r left sparkle
		circle(((width/2) + (faceW/3)), (height/2) - 15, 15);													//r right sparkle
	}

	r = random(3);
	
	if(r < 1) {
		noFill();
		arc(((width/2) - (mouthW/2)), (height/2), mouthW, mouthH, 0, PI);										//uwu left
		arc(((width/2) + (mouthW/2)), (height/2), mouthW, mouthH, 0, PI);										//uwu right
	} else if (r < 2) {
		fill(0)
		ellipse((width/2), ((height/2) + (faceH*(1/5))), mouthW, mouthH);										//:0
	} else {
		fill(0);
		noStroke();																								//grin
		arc((width/2), ((height/2) + (faceH*(1/5))), (mouthW*3), (mouthH*2), 0, PI);
	}

	r = random(3);

	if(r < 1){
		strokeWeight(3);
		stroke(0);
		noFill();
		arc(((width/2) + 50), ((height/2) - (faceH/2)), 100, 100, PI, PI+((3/4)*PI));							//3 hairs
		arc(((width/2) - 50), ((height/2) - (faceH/2)), 100, 100, PI+((1/4)*PI), TWO_PI);
		line((width/2), ((height/2) - (faceH/2)), (width/2), (((height/2) - (faceH/2)) - 100));
		console.log(1);
	} else if(r < 2) {
		strokeWeight(3);
		stroke(0);
		line((width/2), ((height/2) - (faceH/2)), (width/2), (((height/2) - (faceH/2)) - 50));					//flower
		fill(255);
		circle((width/2), (((height/2) - (faceH/2)) - 40), 20, 20);
		circle((width/2), (((height/2) - (faceH/2)) - 60), 20, 20);
		circle(((width/2) + 10), (((height/2) - (faceH/2)) - 50), 20, 20);
		circle(((width/2) - 10), (((height/2) - (faceH/2)) - 50), 20, 20);
		circle((width/2), (((height/2) - (faceH/2)) - 50), 20, 20);
		noFill();
		arc(((width/2) + 25), ((height/2) - (faceH/2)), 50, 50, PI, PI + HALF_PI);
		arc(((width/2) - 25), ((height/2) - (faceH/2)), 50, 50, PI + HALF_PI, TWO_PI);
		line(((width/2) - 25), ((height/2) - (faceH/2) - 25), (width/2), ((height/2) - (faceH/2)));
		line(((width/2) + 25), ((height/2) - (faceH/2) - 25), (width/2), ((height/2) - (faceH/2)));
		console.log(2);
	} else {
		strokeWeight(3);
		stroke(0);
		fill(255);
		arc((width/2), ((height/2) - 30), (faceW + 20), (faceH - 20), PI, TWO_PI);								//bowl cut
		line(((width/2) - (faceW/2) - 10), ((height/2) - 30), ((width/2) + (faceW/2) + 10), ((height/2) - 30));
		line((width/2), ((height/2) - 30), (width/2), ((height/2) - (faceH * (1/4))));
		line(((width/2) - (faceW/4)), ((height/2) - 30), ((width/2) - (faceW/6)), ((height/2) - (faceH * (1/4))));
		line(((width/2) + (faceW/4)), ((height/2) - 30), ((width/2) + (faceW/6)), ((height/2) - (faceH * (1/4))));
		console.log(3);
	}

	noLoop();
}

function mousePressed(){
	clear();

	draw();
}

My choice of computational artist is one of my design professors, Kyuha (Q) Shim. The project I am focusing on for this LO is “Raster”. The images produced in this project are all abstracted versions of previously determined artifacts found during his residency at Frans Masereel Centrum. I chose this project to focus on because it initially seems like simple rasterization of images since the images aren’t so far abstracted that Q’s images are unrecognizable from the original images, however after learning about the program that was applied to create the final pieces, there is a new level of appreciation in the medium, process, and effort put in to consistently transform a set of images.

In the overview of the project, it is explained that a raster lens is applied, and color data from the image dictates the shape of the cells based on a predetermined set of rules. After determining the cells, the balances and relationships between CMYK(primary colors used in print) and considered before being overprinted. The program creates tension within the images by pushing the abstraction of the artifact by manipulation of the resolutions of the grids within the image through a defined range of values. Q also randomizes values within certain parameters to create a consistent set of possible variations as the computer shuffles values to figure out the ideal image.

Since Q is the creator of the program, his sense of artistry was put into the code when he decided what parameters and limitations were appropriate to transform the images.

LO-02-GenerativeArt

LO-week02-generative art

I looked at French artist Miguel Chevalier’ work MAGIC CARPET.

The point which surprises me most is his combination of modern and abstract art with real-time interaction. A lot of the time, modern art seems very indifferent and far away from the audience. Without deep explanation, it would be too hard for the audience to embrace the essence of the artwork.

In Miguel Chevalier’s art, he interprets his artwork as a carpet and also presents it as a carpet. When the audience holds sensors into the place, the carpet can detect its location and change accordingly.

I think he first uses some variables to control how the computer generates similar but different patterns. Then put a trigger for the sensor. When the sensor has been detected, the trigger wakes up some more variables to change the patterns around the sensor’s surroundings.

I guess he uses some variables to control the direction, size, density and shape of the pixels it generated.

Miguel CHEVALIER “Magic Carpets 2016” Milton Keynes (UK) from Claude Mossessian on Vimeo.

https://www.vice.com/en_uk/article/gvwekj/chevalier-magic-carpet-in-england

Project 2: Variable Faces

soot sprite

//Jessie Chen
//Section D
var sprite = 220;
var eyeWidth = 82;
var eyeHeight = 82;
var irisX = 240;
var irisY = 320;
var aX = 380;
var aY = 380;
var bX = 440;
var bY = 300;
var cX = 40;
var cY = 340;
var dX = 80;
var eX = 225;
var eY = 500;
var fX = 280;

let r, g, b;
r = random(255);
g = random(255);
b = random(255);

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

function draw() {
    var x1 = width / 2;
    var y1 = height / 2;
    background(243, 231, 211);
    //hair
    stroke(0);
    strokeWeight(5)
    radius = 122 + length;
    for (angle = 0; angle <360; angle=angle+ 6) {
        x = cos(radians(angle)) * radius + 240;
        print("x = " + x.toString()) ;
        y = sin(radians(angle)) * radius + 320;
        print("y = " + y.toString());
        line(x1, y1, x , y);
    }
    //head
    fill(45);
    ellipse(x1, y1, sprite, sprite);
    //eye
    fill(255);
    var leftEye = width / 2 - 50;
    var rightEye = width / 2 + 50;
    ellipse(leftEye, height / 2, eyeWidth, eyeHeight);
    ellipse(rightEye, height / 2, eyeWidth, eyeHeight);
    //iris
    fill(0);
    ellipse(irisX - 50, irisY, 20, 20);
    ellipse(irisX + 50, irisY, 20, 20);
    //right arm
    noFill();
    stroke(0);
        beginShape();
        curveVertex(350, 320);
        curveVertex(350, 320);
        curveVertex(aX, aY);
        curveVertex(bX, bY);
        curveVertex(bX, bY);
        endShape();
    //left arm
    noFill();
    stroke(0);
        beginShape();
        curveVertex(130, 320);
        curveVertex(130, 320);
        curveVertex(cX, cY);
        curveVertex(dX, bY);
        curveVertex(dX, bY);
        endShape();
    //left leg
    noFill();
    stroke(0);
        beginShape();
        curveVertex(200, 422);
        curveVertex(200, 422);
        curveVertex(eX, eY);
        curveVertex(140, 600);
        curveVertex(140, 600);
        endShape();
    //right leg
    noFill();
    stroke(0);
        beginShape();
        curveVertex(280, 422);
        curveVertex(280, 422);
        curveVertex(fX, eY);
        curveVertex(350, 610);
        curveVertex(350, 610);
        endShape();
    //star
    stroke(r, g, b);
    fill(r, g, b);
    strokeJoin(ROUND);
    triangle(230, 120, 250, 120, 240, 103);
    triangle(230, 120, 210, 120, 220, 137);
    triangle(250, 120, 270, 120, 260, 137);
    triangle(230, 150, 210, 150, 220, 135);
    triangle(250, 150, 270, 150, 260, 135);
    triangle(230, 150, 250, 150, 240, 167);
    ellipse(240, 135, 28, 25);

}

function mousePressed() {
    //eye
    eyeWidth = random(75, 88);
    eyeHeight = random(75, 88);
    //iris
    irisX = random(230, 250);
    irisY = random(310, 330);
    //hair
    length = random(5, 13);
    //legs
    aX = random(340, 440);
    aY = random(290, 350);
    bX = random(285, 300);
    bY = random(140, 160);
    cX = random(30, 150);
    cY = random(275, 230);
    dX = random(100, 210);
    eX = random(180, 200);
    eY = random(520, 560);
    fX = random(280, 300);
    //star color
    r = random(255);
    g = random(255);
    b = random(255);
}

This was inspired by the soot sprites from the anime “Spirited Away.” This piece was really challenging since I had to use trig to figure out an equation.

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

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

Project 2: Variable Face

variable face cb

var eyeWidth = 55;
var eyeHeight = 70;
var eyeColor = 10;
var earHeight = 180;
var faceWidth = 300;
var faceHeight = 230;
var backgroundR = 245;
var backgroundG = 200;
var backgroundB = 175;
var dressR = 240;
var dressG = 90;
var dressB = 160;
var blushWidth = 30;
var blushHeight = 15;
var bodyWidth = 120;

 
function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    var centerX = width / 2
    var centerY = height / 2
    background(backgroundR, backgroundG, backgroundB);

    //body
    noStroke();
    fill(95, 130, 255);
    ellipse(centerX, centerY + 120, bodyWidth, 50);
    rect(centerX - (bodyWidth / 2), centerY + 120, bodyWidth, 300);

    //ears
    var earLX = centerX - 55
    var earRX = centerX + 55
    var earLH = centerY - earHeight
    var earRH = centerY - earHeight
    stroke(95, 130, 255);
    strokeWeight(10);
    fill(255, 130, 130);
    triangle(centerX - 115, centerY - 60, earLX, centerY - 60, centerX - 70, earLH);
    triangle(centerX + 115, centerY - 60, earRX, centerY - 60, centerX + 70, earRH);

    //dress
    noStroke();
    fill(dressR, dressG, dressB);
    triangle(centerX - 60, height, centerX + 60, height, centerX, centerY - 100);

    //face
    noStroke();
    fill(95, 130, 255);
    ellipse(centerX, centerY, faceWidth,  faceHeight);

    //hair
    //left
    noStroke();
    fill(0, 30, 130);
    beginShape();
    curveVertex(centerX, centerY - 100);
    curveVertex(centerX, centerY - 100);
    curveVertex(centerX - 35, centerY - 90);
    curveVertex(centerX - 50, centerY - 50);
    curveVertex(centerX - 40, centerY - 50);
    curveVertex(centerX, centerY - 100);
    curveVertex(centerX, centerY - 100);
    endShape();
    //center
    noStroke();
    fill(0, 30, 130);
    beginShape();
    curveVertex(centerX, centerY - 100);
    curveVertex(centerX, centerY - 100);
    curveVertex(centerX - 15, centerY - 70);
    curveVertex(centerX, centerY - 35);
    curveVertex(centerX + 15, centerY - 70);
    curveVertex(centerX, centerY - 100);
    curveVertex(centerX, centerY - 100);
    endShape();
    //right
    noStroke();
    fill(0, 30, 130);
    beginShape();
    curveVertex(centerX, centerY - 100);
    curveVertex(centerX, centerY - 100);
    curveVertex(centerX + 35, centerY - 90);
    curveVertex(centerX + 50, centerY - 50);
    curveVertex(centerX + 40, centerY - 50);
    curveVertex(centerX, centerY - 100);
    curveVertex(centerX, centerY - 100);
    endShape();

    //eyes
    var eyeLX = centerX - faceWidth * 0.25;
    var eyeRX = centerX + faceWidth * 0.25;
    noStroke();
    fill(255);
    ellipse(eyeLX, centerY, eyeWidth, eyeHeight);
    ellipse(eyeRX, centerY, eyeWidth, eyeHeight);
    //eye black
    noStroke();
    fill(eyeColor);
    ellipse(eyeLX - 5, centerY + 5, 48, 60);
    ellipse(eyeRX - 5, centerY + 5, 48, 60);
    //eye highlight
    noStroke();
    fill(255);
    triangle(eyeLX, centerY, eyeLX + 20, centerY - 10, eyeLX + 20, centerY + 10);
    triangle(eyeRX, centerY, eyeRX + 20, centerY - 10, eyeRX + 20, centerY + 10);

    //blush
    noStroke();
    fill(210, 150, 170);
    ellipse(eyeLX + 2, centerY + 55, blushWidth, blushHeight);
    ellipse(eyeRX + 2, centerY + 55, blushWidth, blushHeight);

   
    //mouth
    if (mouseY <= (centerY)) {
        //smile
        noFill();
        stroke(0, 30, 130);
        strokeWeight(5);
        beginShape();
        curveVertex(centerX - 32, centerY + 60);
        curveVertex(centerX - 32, centerY + 60);
        curveVertex(centerX - 25, centerY + 70);
        curveVertex(centerX, centerY + 60);
        curveVertex(centerX + 25, centerY + 70);
        curveVertex(centerX + 32, centerY + 60);
        curveVertex(centerX + 32, centerY + 60);
        endShape();
    } else if (mouseY > centerY) {
        //frown
        noFill();
        stroke(0, 30, 130);
        strokeWeight(5);
        beginShape();
        curveVertex(centerX - 25, centerY + 70);
        curveVertex(centerX - 25, centerY + 70);
        curveVertex(centerX, centerY + 60);
        curveVertex(centerX + 25, centerY + 70);
        curveVertex(centerX + 25, centerY + 70);
        endShape();
    }
}
 
function mousePressed() {
    faceWidth = random(280, 330);
    faceHeight = random(210, 300);
    eyeWidth = random(50, 60);
    eyeHeight = random(65, 75);
    eyeColor = random(0, 100);
    backgroundR = random(170, 255);
    backgroundG = random(170, 170);
    backgroundB = random(170, 200);
    blushWidth = random(25, 40);
    blushHeight = random(5, 25);
    bodyWidth = random(110, 150);
    dressR = random(130, 255);
    dressG = random(80, 170);
    dressB = random(110, 150);
    earHeight = random(160, 200);
}

My inspiration for this project was Rosie, a character from the game Animal Crossing. I played around with the variability of the size of the eyes, face, blush, and body as well as the color of the eyes, background, and dress. When creating the two mouth facial expressions, I also explored if statements and curves. Below is a picture of Rosie and my initial Illustrator sketch!

Category: SectionD