Category: SectionB

Looking Outwards-02

With the introduction of generative design in the past decades, the ways in which architecture is rendered has been completely overwrought. One work that I particularly admire is MX3D’s 12-meter long steel bridge in Amsterdam. It is entirely 3-D printed – the construction utilized two industrial level 3-D printers that worked on opposite ends to meet in the center. This method of construction is largely unprecedented, and was only possible through the combination of parametric design and artificial intelligence. One amazing feature of the bridge is that it continues “learning” throughout its lifespan – the designers included sensors connected to a computer model that informs of the performance and behavior of the physical bridge in real time. It measures environmental data such as air quality as well as structural information such as load and strain. This is important because it shows the designer’s conscientiousness of their work’s future impact. They made a practical work of art that’s sustainable for years to come.
The algorithm developed to design the structure is undoubtedly complex, requiring assistance from companies such as Autodesk. It took a multitude of parameters into account, considering the ways in which people and the environment will react to, and interact with, it.
In general, architecture is at the crossroads of aesthetic and practicality. The creator’s artistic sensibility manifests itself in the uniquely defining, yet structurally reliable and complex formation.

Looking Outwards 02: Generative Art

I am inspired by LIA’s 2018 collaborative project, Animal Imagination. This is a collection of fifty novel artworks which reflect the balance and beauty of nature through algorithm as digital paintings and videos.

The artist took inspiration from natural phenomena and incorporated the colors and forms into one overarching code base. Each work evolved as LIA tweaked this original code base to create new generative works. Each painting is unique, but they all bring an “alive” quality through the movement and vibrance; the decision to use generative media to explore the pulse of nature was executed perfectly in this context.

Video documentation of LIA’s generative project, Animal Imagination (2018)

I think these pieces are not only very beautiful, but quite sensitive to texture and harmony as though LIA had painted them by hand. This ability to manipulate code and render these types of living and performative pieces makes them even more engaging had they been static works.

Animal Imagination 29 by LIA (2018)

Project 2: Variable Faces

sketch
/* 
 * Amy Lee 
 * amyl2
 * Section B 
 */ 


//template for variable face 
var backgroundColor = 0; 
var shirtColor = 255; 
var faceHeight = 300;
var faceWidth = 290;
var snoutWidth = 330; 
var snoutHeight = 220; 
var earWidth = 150;
var eyeSize = 50; 
var noseHeight = 50; 
var noseWidth = 80; 
var nostHeight = 14; 
var nostWidth = 8; 
var mouthWidth = 50;
var mouthHeight = 30;
var eyebrow = 1; 
var x; 
var y; 
var z; 
var b1 = 224; 
var b2 = 200; 
var b3 = 206; 
var b4 = 230; 
var color1; 
var color2; 
var color3;
var color4; 

function setup() {
	createCanvas(640,480);
	backgroundColor = color(random(255),random(255),random(255)); 
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw(){

// -PIG- //
	noStroke(); 
	background(backgroundColor); 
//shirt 
	fill(shirtColor); 
	x = width/2; 
	y = height; 		
	ellipse(x,y/2+snoutHeight,x,y*.6); 
//collar of shirt 
	y = 265; 
	color1 = random(150,255); 
	color2 = random(150,255); 
	color3 = random(150,255); 
	color4 = random(150,255); 
	fill(color1,color2,color3,color4); 
	triangle(x-snoutWidth*.3,y+snoutHeight*.6,x-snoutWidth*.3,y+snoutHeight*.8,x,y+snoutHeight*.7); 
	triangle(x+snoutWidth*.3,y+snoutHeight*.6,x+snoutWidth*.3,y+snoutHeight*.8,x,y+snoutHeight*.7); 
//overall head 
	y = height/2; 
	fill(255,218,224); 
//snout area
	ellipse(x,y+height*.15,snoutWidth,snoutHeight);
//face 
	ellipse(x,y,faceWidth,faceHeight);

//nose 
	fill(247,191,200); 
	ellipse(x,y+snoutHeight*.2,noseWidth,noseHeight); 


//nostrils 
	fill(255,255,255); 
	var nL = x - snoutWidth/15;
	var rL = x + snoutWidth/15;
	ellipse(nL,y+height*.1,nostWidth,nostHeight); 
	ellipse(rL,y+height*.1,nostWidth,nostHeight); 

//eyes
	y = 240;
	fill(48,33,25);
	var eL = x - faceWidth/5
	var eR = x + faceWidth/5
	circle(eL,y,eyeSize); 
	circle(eR,y,eyeSize); 

//overlapping eyes to make them appear closed  
	fill(255,218,224);
	circle(eL,y-10,eyeSize);
	circle(eR,y-10,eyeSize);

//ears 
	fill(247,191,200); 
	var earLX = x - faceWidth*.6; 
	var earY = 175; 
	var earRX = x + faceWidth*.6;

//left ear 
	triangle(earLX,earY,earLX+30,earY+50,earLX+60,earY); 
//right ear 
	triangle(earRX-60,earY,earRX-30,earY+50,earRX,earY); 

//mouth 
	y = 362;
	fill(203,73,95); 
	ellipse(x,y,mouthWidth,mouthHeight);
	fill(255,218,224);
	ellipse(x,y+z,mouthWidth,mouthHeight); 

//eyebrow 
	y = 230 
	fill(48,33,25); 
	if (eyebrow < 2) {
//sad 
		beginShape(); 
		vertex(x-faceWidth*.33,b1); 
		vertex(x-faceWidth*.13,b2);
		vertex(x-faceWidth*.1,b3);
		vertex(x-faceWidth*.31,b4); 
		endShape();

		beginShape(); 
		vertex(x+faceWidth*.33,b1);
		vertex(x+faceWidth*.13,b2);
		vertex(x+faceWidth*.1,b3); 
		vertex(x+faceWidth*.31,b4); 
		endShape(); 

	} else if (eyebrow < 3) { 
//mad 

		beginShape(); 
		vertex(x-faceWidth*.1,b1);
		vertex(x-faceWidth*.33,b2);
		vertex(x-faceWidth*.31,b3);
		vertex(x-faceWidth*.13,b4); 
		endShape();

		beginShape(); 
		vertex(x+faceWidth*.1,b1);
		vertex(x+faceWidth*.33,b2);
		vertex(x+faceWidth*.31,b3); 
		vertex(x+faceWidth*.13,b4); 
		endShape(); 

	} else { 
//neutral

		beginShape(); 
		vertex(x-faceWidth*.33,b1);
		vertex(x-faceWidth*.33,b2);
		vertex(x-faceWidth*.1,b3);
		vertex(x-faceWidth*.1,b4); 
		endShape();

		beginShape(); 
		vertex(x+faceWidth*.33,b1);
		vertex(x+faceWidth*.33,b2);
		vertex(x+faceWidth*.1,b3); 
		vertex(x+faceWidth*.1,b4); 
		endShape(); 
}
}

function mousePressed() {
	backgroundColor = color(random(255), random(255), random(255)); 
	shirtColor = color(random(255), random(255), random(255)); 
	faceWidth = random(230,320); 
	faceHeight = random(240,360); 
	snoutWidth = random(260,380); 
	snoutHeight = random(160,260); 
	noseWidth = random(60,120); 
	noseHeight = random(60,90); 
	nostWidth = random(6,10); 
	nostHeight = random(10,16); 
	eyeSize = random(30,70); 
	mouthWidth = random(30,70);
	z = random(-8,8);
	b1 = random(221,228); 
	b2 = random(197,204); 
	b3 = random(203,207); 
	b4 = random(227,234); 
	eyebrow = random(1,4); 
}

Looking Outwards – Generative Art

Fifty Sisters was created by John McCormack. It consists of fifty images of plants generated from computer code. What I find most admirational about this piece is that it reflects the astronomical impact that oil has made on our world today. The algorithm that the computer followed were the geographic elements of oil company logos. More specifically, these were logos of “Seven Sisters”, the name of seven oil companies that took over the petrochemical industry during the 1940s to 1970s.

Society has used oil for heat, electricity, generation, chemicals, plastics, and even more. While there are boundless benefits, it is also massively detrimental to the environment with oil spills and climate change.

McCormack recognized the transformation of fossil fuels from plants to coal and oil today. He took “digital genes”, otherwise known as “computer DNA”, to form replicas of Mesozoic plants. These species grew and evolutionized to form new species. Some computer-made species changed so much that the company logos were unrecognizable.

McCormack’s artistic sensibilities manifested in this art piece because he used technology to show how technology can be both a gift and a curse.

Fifty Sisters at the Ars Electronica Museum, April 2013

Variable Faces

variable faces
//Rouann Chen, Section B

var facewidth = 450;
var eyesize = 50;
var faceheight = 250;
var smile = 15

function setup() {
    createCanvas(640, 480);
    text("Variable Faces", 10, 15);
}

function draw() {
	background(163, 216, 238);
	fill(255);
	noStroke();
	triangle(width/2, height/2 - faceheight/2 - 80, width/2 - 40, height/2 - faceheight/2 + 40, width/2 + 40, height/2 - faceheight/2 + 40);	//horn
	fill(255, 211, 216);
	ellipse(width/2, height/2, facewidth, faceheight);	//face
	noFill();
	stroke(252, 127, 136);
	arc(width/2, height/2 + faceheight/2*0.7, 80, 30, 0, PI);	//DOUBLE CHIN
	strokeWeight(7);
	point(width/2 - 5, height/2 + 5);
	point(width/2 + 5, height/2 + 5);	//piggy nose
	var eyeLX = width/2 - facewidth * 0.16;
	var eyeRX = width/2 + facewidth * 0.16;
	fill(175, 114, 201);
	stroke(255);
	strokeWeight(9);
	ellipse(eyeLX, height/2 - faceheight*0.05, eyesize, eyesize);	//left eye
	ellipse(eyeRX, height/2 - faceheight*0.05, eyesize, eyesize);	//right eye
	var mouthLX = width/2 - facewidth * 0.13;
	var mouthLY = height/2 + faceheight * 0.17;
	var mouthMX = width/2;
	var mouthMY = height/2 +faceheight * 0.17 + smile;
	var mouthRX = width/2 + facewidth * 0.13;
	var mouthRY = height/2 + faceheight * 0.17;
	stroke(252, 127, 136);
	strokeWeight(3);
	noFill();
	beginShape();
	curveVertex(mouthLX, mouthLY);
	curveVertex(mouthLX, mouthLY);
	curveVertex(mouthMX, mouthMY);
	curveVertex(mouthRX, mouthRY);
	curveVertex(mouthRX, mouthRY);
	endShape();	//mouth
}

function mousePressed() {
	faceheight = random(200, 300);
	facewidth = random(200, 500);
	smile = random(-20, 15);
	eyesize = random(9, 50);

}

blog02-generative art

Skin Rendering by Altered Qualia
In this project, the figure turns and the perspective changes as the viewer’s mouse moves. Yet, in the meantime, the figure’s eyes are always staring at you straight in your eyes. I admire how real the face is rendered, from the structure of the face, the color and texture of the skin and pupil, to the light and shadow casted on the face. The developer must have devoted a lot of effort in studying the composition of human face. This makes the stare more intimidating and reminds me of the uncanny valley.
Based on my current knowledge, I can only know that it used the mouseX, mouseY functions since the perspective is adjusted by the position of my mouse.
This project is interactive in a way as it makes the viewer uncomfortable to some extent since it falls into the uncanny valley. You would feel like you are watched or monitored by a seemingly real virtual character on the screen.

LO- Generative Artists

“Obelisk” (2020) by the artist Leander Herzog is a work of generative art that I find inspirational. I admire the artwork because it utilizes simple colors and geometries to create a hypnotic effect. The color palette and the motion remind me of the Op-Art of artists like Bridget Riley. I suppose that the algorithm behind this generative art work generates vertical and horizontal lines and restricts them so that they only display in specified areas. For the vertical lines, I believe there is a variable that adds an increasing value to the x-coordinate of the endpoints, and for the horizontal lines, I believe a similar increasing variable is applied to the y-coordinate of the endpoints. Most likely, there is also code in place to reset these values when the variable has increased to a certain number, so that the motion loops. I think that the algorithm reflects the creator’s attraction to the ideas of repetition and permutation.

Snapshot of Obelisk.

Project 2 – Variable Face

VariableFaces
var faceWidth = 60;
var faceHeight = 60;
var mouthWidth = 50;
var mouthHeight = 30;
var eyeWidth = 70;
var eyeHeight = 70; 
var browHeight = 60;

let ecolor = 255;
let bcolor = 10;

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

function draw() {
    background(bcolor)

    var x = width/2;
    var y = height/2;

    //hair
    fill(29, 22, 16);
    noStroke();
    ellipse(x, y - (1.5 * faceHeight), 6*faceWidth, 6*faceHeight);
    rect(x - (3*faceWidth), y - (1.5 * faceHeight), 6*faceWidth, 5*faceHeight);

    //ears 
    fill(171, 113, 88);
    ellipse(x - (1.5 * faceWidth), y, 2*faceWidth, 2*faceHeight);
    ellipse(x + (1.5 * faceWidth), y, 2*faceWidth, 2*faceHeight);

    //earrings
    noFill();
    stroke(ecolor);
    strokeWeight(8);
    circle(x - (1.5 * faceWidth), y + faceHeight, 95);
    circle(x + (1.5 * faceWidth), y + faceHeight, 95);

    //face
    fill(171, 113, 88);
    noStroke();
    ellipse(x, y - (1.5 * faceHeight), 4*faceWidth, 4*faceHeight);
    rect(x - 2*faceWidth, y - 1.5*faceHeight, 4*faceWidth, 2*faceHeight);
    ellipse(x, y + 0.5*faceHeight, 4*faceWidth, 4*faceHeight);

    //nose
    noStroke();
    fill(0, 0, 0);
    ellipse(x - 10, y, 8, 4);
    ellipse(x + 10, y, 8, 4);

    //mouth
    strokeWeight(5);
    stroke(235, 76, 61);
    fill(0, 0, 0);
    ellipse(x , y + 50, mouthWidth, mouthHeight);

    //eyes
    strokeWeight(5);
    stroke(0, 0, 0);
    fill(255, 255, 255);
    ellipse(x - faceWidth, y - faceHeight, eyeWidth, eyeHeight);
    ellipse(x + faceWidth, y - faceHeight, eyeWidth, eyeHeight);

    //pupils
    fill(0, 0, 0);
    var a = constrain(mouseX, (x + faceWidth) - (eyeWidth/2) + 20, (x + faceWidth) + (eyeWidth/2) - 20);
    var b = constrain(mouseY, (y - faceHeight) - (eyeHeight/2) + 20, (y - faceHeight) + (eyeHeight/2) - 20);
    ellipse(a, b, 30, 30);
    var a = constrain(mouseX, (x - faceWidth) - (eyeWidth/2) + 20, (x - faceWidth) + (eyeWidth/2) - 20);
    var b = constrain(mouseY, (y - faceHeight) - (eyeHeight/2) + 20, (y- faceHeight) + (eyeHeight/2) - 20);
    ellipse(a, b, 30, 30);

    //bindi
    noStroke();
    fill(ecolor);
    circle(x, y - (2*faceHeight), 25, 25);

    //eyebrows
    strokeWeight(9);
    stroke(0);
    line(x-(faceWidth*1.5), y-(2*faceHeight), x-(faceWidth*0.5), y-(2*browHeight));
    line(x-(faceWidth*1.5), y-(2*faceHeight), x-(faceWidth*0.5), y-(2*browHeight));
    line(x+(faceWidth*1.5), y-(2*faceHeight), x+(faceWidth*0.5), y-(2*browHeight));
    line(x+(faceWidth*1.5), y-(2*faceHeight), x+(faceWidth*0.5), y-(2*browHeight));

}

function mousePressed() {
    clear(0);
    faceWidth = random(40,75);
    faceHeight = random(35,70);
    mouthHeight = random(20,80);
    mouthWidth = random(30,90);
    eyeWidth = random(60,80);
    eyeHeight = random(60,80);
    browHeight = random(45,65);

    bcolor = color(random(255), random(255), random(255));
    ecolor = color(random(255), random(255), random(255));

}
Initial Sketch

For this project I started by drawing it on Illustrator. I wanted to continue to iterate on what I created for project one. I decided to keep the face color and nose size consistent and everything else variable. I also added earrings and a bindi for some more personalization.

Project-02-Variable-Face

powerpuffDownload
//Annie Kim
//andrewID: anniekim
//Section B

var Reye= 228; //color of original eye (red)
var Geye = 175; //color of original eye (green)
var Beye = 195; //color of original eye (blue)
var HR = 255; //color of original hair (red)
var HG = 159; //color of original hair (green)
var HB = 65; //color of original hair (blue)
var pupil = 20; // diameter of pupil
var heart1r = 227; //red of heart1
var heart1g = 83; //green of heart1
var heart1b = 102; //blue of heart1
var heart2r = 232; //red of heart2
var heart2g = 138; // green of heart2
var heart2b = 173; //blue of heart 2
var backgroundr = 158 // red of background
var backgroundg = 15 // green of background
var backgroundb = 28 // blue of background
var StrokeArrow = 15; //stroke size of arrow
var RectColorR = 218; //red of right background
var RectColorG = 127; // green of right background
var RectColorB = 157; // blue of right background
var backR = 216; // red of original background
var backG = 77; // green of original background
var backB = 82; //blue of original background
var smilecurvex = 20; //width of smile
var smilecurvey = 15; //height of smile


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

function draw() {
    background(backR, backG, backB);


    //right half of background
    stroke(RectColorR, RectColorG, RectColorB);
    fill(RectColorR, RectColorG, RectColorB);
    rect(320, 0, 320, 480);


     //lines across
    stroke(248, 206, 93);
    strokeWeight(StrokeArrow);
    line(140, 380, 550, 80);
    line(65, 370, 140, 380);
    line(100, 450, 140, 380);
    fill(248, 206, 93);
    triangle(540, 57, 575, 100, 580, 60);


//heart1 forming
    fill(heart1r, heart1g, heart1b);
    strokeWeight(7);
    stroke(heart1r, heart1g, heart1b);
    triangle(171, 210, 469, 210, 320, 440);
    circle(244, 183, 155);
    circle(396, 183, 155);

//second heart layer
    fill(heart2r, heart2g, heart2b);
    stroke(heart2r, heart2g, heart2b);
    triangle(240, 240, 400, 240, 320, 360);
    circle(359, 220, 92);
    circle(281, 220, 92);

//middle hair behind the back
    fill(HR, HG, HB);
    stroke(HR, HG, HB);
    arc(320, 260, 120, 140, 0, PI, CHORD);
    triangle(320, 200, 275, 260, 365, 260);

    //body middle
    fill(Reye, Geye, Beye);
    stroke(0);
    strokeWeight(5);
    rect(295, 220, 50, 80);
    fill(0);
    rect(295, 245, 50, 30);
    fill(255);
    stroke(255);
    rect(328, 305, 15, 40);
    ellipse(297, 297, 25, 45);
    fill(0);
    stroke(0);
    arc(297, 297, 25, 45, 0, PI, CHORD); //left shoe
    arc(335.5, 337, 17, 35, 0, PI, CHORD); //right shoe

    //recovering black stroke
    stroke(0);

    //middle right arm
    fill(246, 232, 219);
    stroke(246, 232, 219);
    circle(230, 240, 30);
    circle(410, 120, 30);
    stroke(246, 232, 219);
    rect(395, 120, 30, 40);
    triangle(395, 160, 422, 164, 377, 200);
    triangle(235, 225, 295, 225, 243, 249);

 //middle bow
    fill(255, 0, 0);
    stroke(255, 0, 0);
    circle(270, 80, 25);
    circle(375, 80, 25);
    triangle(257, 89, 255, 155, 295, 170);
    strokeWeight(30);
    line(274, 85, 310, 170);
    strokeWeight(1);
    arc(320, 120, 60, 35, PI, 0);
    strokeWeight(30);
    line(375, 80, 330, 170);
    line(375, 80, 370, 175);


    //head middle
    strokeWeight(2);
    fill(246, 232, 219);
    stroke(0);
    ellipse(320, 177, 135, 110);
    

    //middle eyes
    strokeWeight(2);
    fill(255);
    circle(283, 175, 60);
    circle(355, 175, 60);
    fill(Reye, Geye, Beye);
    stroke(Reye, Geye, Beye);
    circle(350, 178, 45); // color of right eye pink 
    circle(290, 178, 45); // color of left eye pink
    noFill();
    stroke(0);
    circle(283, 175, 60);
    circle(355, 175, 60);
    fill(0);
    stroke(0);
    circle(346, 180, 35); // black of right eye
    circle(294, 180, 35); // black of left eye
    fill(255);
    circle(346, 180, pupil);
    circle(294, 180, pupil);


    //middle bangs
    fill(HR, HG, HB);
    stroke(0);
    strokeWeight(1.5);
    arc(320, 150, 118, 52, PI, 0, CHORD);
    fill(246, 232, 219);
    stroke(246, 232, 219);
    triangle(320, 135, 310, 155, 330, 155);


    //overlapping head shape
    noFill();
    stroke(0);
    strokeWeight(5);
    ellipse(320, 177, 135, 110);

     //middle smile
    noFill();
    strokeWeight(2);
    arc(320, 205, smilecurvex, smilecurvey, 0, PI);
 
}
    function mouseClicked() {
    Reye = random(0, 255);
    Geye = random(0, 255);
    Beye = random(0, 255);
    HR = random(0,255);
    HG = random(0, 255);
    HB = random(0, 255);
    pupil = random(15, 35);
    heart1r = random(100, 255);
    heart1g = random(75, 90);
    heart1b = random(80, 110);
    heart2r = random(0, 100);
    heart2g = random(0, 100);
    heart2b = random(0,100);
    backgroundr = random(150, 200);
    backgroundg = random(15, 25);
    backgroundb = random(20,30);
    StrokeArrow = random(1, 20);
    RectColorR = random(200,220);
    RectColorG = random(110, 130);
    RectColorB = random(150, 160);
    backR = random(200, 255);
    backG = random(50, 100);
    backB = random(60, 100);
    smilecurvex = random(15, 45);
    smilecurvey = random(15, 45);
}

I decided to create a PowerPuff character because I thought it would be interesting to see how the appearance of the character would change with each click, and I wanted to see if I could get it to look like the other PowerPuff characters by continuously clicking. I worked on most of the shapes (such as the bow, the hair, the hearts, etc) by putting together a variety of shapes. It was a little challenging to make sure everything aligned perfectly. One of the hardest things was making sure that everything remained proportionate to the actual character from the show. I think that this does a nice job of making this character essentially customizable because you can keep clicking until you are happy with the color and sizes of different features.

Project 2: Variable Face

generative_faces

var bgColor;
var blushColor;
var cheekBlush;
var blushSize;
var blushHeight;
var faceWidth;
var faceHeight;
var faceStyle;
var Bun;
var bunY;
var noseStyle;
var mouthStyle;
var eyeStyle;

function setup() {
    createCanvas(600, 600);
    //background(220);
    //text("p5.js vers 0.9.0 test.", 10, 15);

    bgColor = color(255, 235, 232);
    blushColor = color(255, 138, 130);
    cheekBlush = 0;
    blushSize = 0;
    blushHeight = 0;
    Bun = 0;
    bunY = 0;
    noseStyle = 0;
    faceStyle = 0;
    mouthStyle = 0;
    eyeStyle = 0;
}

function draw() {
    background(bgColor);

    // HAIR BUNS
    fill(0);
    ellipse((width/3), bunY, Bun, Bun); 
    ellipse((width/1.5), bunY, Bun, Bun);

    // FACE
    fill(255);
    strokeWeight(5);
    if (faceStyle >= 2) {
        ellipse((width/2), (height/2), 300, 300); //circular face
    }
    else if (faceStyle >= 1) { //teardrop face
        ellipse((width/2), (height/2.2), 360, 250);
        bezier(475, 300, 400, 500, 220, 550, 125, 300);
    }
    else {
        ellipse((width/2), (height/2), 350, 280); //oval face
    }

    // EYES
    if (eyeStyle >= 2){ //oval eyes
    push();
    fill(255);
    ellipse((width-375), (height-300), 50, 35); // left eye
    ellipse((width-225), (height-300), 50, 35); // right eye

    noStroke();
    fill(0);
    ellipse((width-375), (height-300), 30, 30); //left pupil
    ellipse((width-225), (height-300), 30, 30); // right pupil
    pop();
    }
    else if (eyeStyle >= 1) { //round owl eyes
        stroke(5);
        push();
        fill(255);
        ellipse((width-375), (height-300), 60, 60); //left eye
        ellipse((width-225), (height-300), 60, 60); //right eye
        noStroke();
        fill(0);
        ellipse((width-375), (height-300), 45, 45); //left pupil
        ellipse((width-225), (height-300), 45, 45); //right pupil
        pop();
    }
    else { //closed eyes
        arc((width-375), (height-300), 50, 35, HALF_PI + HALF_PI, TWO_PI); //left eye
        arc((width-225), (height-300), 50, 35, HALF_PI + HALF_PI, TWO_PI); //right eye
    }

    // BLUSHING CHEEKS
    if (cheekBlush >= 0.5){
        push();
        fill(blushColor);
        noStroke();
        ellipse((width-400), blushHeight, blushSize, blushSize); //left blush
        ellipse((width-200), blushHeight, blushSize, blushSize); //right blush
        pop();
    }

    //MOUTH
    noFill();
    strokeWeight(5);
    if (mouthStyle >= 2){ //closed smile
        arc((width-300), (height-280), 200, 140, QUARTER_PI, QUARTER_PI + HALF_PI);
    }
    else if (mouthStyle >= 1){ //open smile
        push();
        fill(0);
        translate((width-300), (height-220));
        rotate(TWO_PI);
        arc(0, 0, 75, 50, 0, PI, CHORD);
        pop();
    }
    else { //shocked mouth
        fill(0);
        ellipse((width/2), (height - 205), 50, 50);
    }

    //NOSE
    if (noseStyle >= 2) {
        noFill();
        arc((width-300), (height-270), 45, 55, QUARTER_PI, QUARTER_PI + HALF_PI); //down-turned nose
    } else if (noseStyle >= 1){ //nostrils
        push();
        noStroke();
        fill(0);
        ellipse((width-310), (height-250), 10, 10); //left nostril
        ellipse((width-290), (height-250), 10, 10); //right nostril
        pop();
    }
    else { //pink button nose
        fill(blushColor); 
        ellipse((width/2), (height-260), 20, 20);
    }

    //BANGS
    fill(0); //right bang
    push();
    translate((width-225), height-350);
    rotate(-QUARTER_PI - HALF_PI);
    arc(0, 0, 250, 200, 0, PI);
    pop();

    translate((width-375), (height-350)); //left bang
    rotate(QUARTER_PI + HALF_PI);
    fill(0);
    arc(0, 0, 250, 200, 0, PI);
}

function mousePressed(){
    cheekBlush = random(0, 1); //randomize blush
    blushSize = random(30, 60); //randomize blush size
    blushHeight = random(350, 360); //randomize blush's Y-axis
    bunY = random(200, 400); //randomize hair buns' Y-axis
    Bun = random(150, 250); //randomize hair buns' size
    noseStyle = random(0,3); //randomize nose shape
    faceStyle = random(0,3); //randomize face shape
    mouthStyle = random(0,3); //randomize mouth shape
    eyeStyle = random(0,3); //randomize eyes
}

For this project, I drew inspiration from the Moomin books, the logo for Utz Snacks, the mascots for PBS Kids, and the logo for a Korean supermarket franchise. The generative process became a lot easier once I started incorporating if-else statements!