Category: SectionA

My Many Faces

It was really fun making a bunch of different faces. I really wanted to experiment with color, not just focus on the faces. So, you should be able to see that the colors change depending on the face I make. Also, I enjoyed making laugh lines for my happy face!

sketch-SarahLDownload
function setup() {
    createCanvas(640,480);
    background(247,221,235);
    text("p5.js vers 0.9.0 test.", -3, -3);
    text("Sarah",603,476);
}

function draw() {
    noStroke();

    // hair
    fill(38,23,8);
    ellipse(320,260,300,450);

    // face
    fill(235,190,143);
    ellipse(320,250,200,270);

    // ears
    circle(220,240,25);
    circle(420,240,25);

    // neck
    rect(297,300,50,150);

    // nose
    stroke(255,222,179);
    strokeWeight(2);
    triangle(310,285,320,250,330,285);

    // bangs
    noStroke();
    fill(38,23,8);
    arc(250,110,160,190,-.18,HALF_PI+QUARTER_PI,OPEN); // left
    arc(370,125,125,130,QUARTER_PI,-2.5,OPEN);         // right

    // This is my happy face
    if(mouseIsPressed & (mouseY < (height * .33))) {
	// eyebrows
        noFill();
        stroke(38, 23, 8);
        arc(275, 227, 60, 50, (5 * PI) / 4, (7 * PI) / 4); // left
        arc(365, 227, 60, 50, (5 * PI) / 4, (7 * PI) / 4); // right

        // mouth
        fill(255, 255, 255);
        stroke(255, 0, 0);
        strokeWeight(4);
        arc(320, 315, 55, 55, 0, PI, CHORD);
        stroke(0);
        strokeWeight(1);
        line(297.5, 326.5, 342.5, 326.5);

        // eyes
        stroke(0);
        strokeWeight(6);
        line(260,227,290,227); // left
        line(350,227,380,227); // right

        // crows feet - left
        stroke(0);
        strokeWeight(1);
        line(243,233,255,227);
        line(243,227,255,227);
        line(243,222,255,227);

        // crows feet - right
        line(385,227,397,233); 
        line(385,227,397,227);
        line(385,227,397,222);

	// upper body   
	stroke(0);
	strokeWeight(1);
        fill(255,255,153);
        rect(250, 410, 140, 70);
    }

    // This is my surprised face
    else if(mouseIsPressed & (mouseY > (height * .66))) {
        // eyebrows
        noFill();
        stroke(38, 23, 8);
        arc(275, 225, 60, 50, (5 * PI) / 4, (7 * PI) / 4); // left
        arc(365, 225, 60, 50, (5 * PI) / 4, (7 * PI) / 4); // right
	   
        // mouth
        noStroke();
        fill(0,0,0);
        circle(320, 325, 40, 40);

        // eyes (outer)
        stroke(0);
        strokeWeight(1);
        fill(255,255,255);
        arc(275, 233, 30, 30, PI, 0, CHORD); // left
        arc(365, 233, 30, 30, PI, 0, CHORD); // right

        //eyeballs
        fill(75, 45, 14);
        circle(275, 225.55555, 12, 12); // left
        circle(365, 225.5, 12, 12);     // right
        noStroke();
        fill(0, 0, 0);
        circle(275, 225., 6.5, 6.5);    // left
        circle(365, 225.5, 6.5, 6.5);   // right
        fill(255, 255, 255);
        circle(277, 224, 1, 1);         // left
        circle(367, 224, 1, 1);         // right
    
        // upper body 
        stroke(0);
        strokeWeight(1);
        fill(0,76,153);
        rect(250, 410, 140, 70);
    }

    // This is my angry face
    else if(mouseIsPressed) {
        // eyebrows
        stroke(38,23,8);
        strokeWeight(3);
        line(260,205,290,213); // left
        line(350,213,380,205); // right

        // mouth
        stroke(0);
        strokeWeight(6);
        line(298,327,343,327);

        // eyes (outer)                       
        stroke(0);
        strokeWeight(1);
        fill(255,255,255);
        arc(275, 233, 30, 30, PI, 0, CHORD); // left
        arc(365, 233, 30, 30, PI, 0, CHORD); // right

        //eyeballs    
        fill(75, 45, 14);
        circle(275, 225.55555, 12, 12); // left
        circle(365, 225.5, 12, 12);     // right
        noStroke();     
        fill(0, 0, 0);                
        circle(275, 225., 6.5, 6.5);    // left
        circle(365, 225.5, 6.5, 6.5);   // right
        fill(255, 255, 255);
        circle(277, 224, 1, 1);         // left
        circle(367, 224, 1, 1);         // right	
    
        // upper body 
        stroke(0);
        strokeWeight(1);
        fill(205,0,0);
        rect(250, 410, 140, 70);
    }

    // This is my neutral face
    else {
        // eyebrows
        noFill();
        stroke(38, 23, 8);
        arc(275, 227, 60, 50, (5 * PI) / 4, (7 * PI) / 4); // left
        arc(365, 227, 60, 50, (5 * PI) / 4, (7 * PI) / 4); // right
       
        // mouth
	stroke(255,153,204);
	strokeWeight(3);
        line(298,327,343,327)

	// eyes (outer)                       
        stroke(0);
	strokeWeight(1);
        fill(255,255,255);
        arc(275, 233, 30, 30, PI, 0, CHORD); // left
        arc(365, 233, 30, 30, PI, 0, CHORD); // right

        //eyeballs    
        fill(75, 45, 14);
        circle(275, 225.55555, 12, 12); // left
        circle(365, 225.5, 12, 12);     // right
        noStroke();     
        fill(0, 0, 0);                
        circle(275, 225., 6.5, 6.5);    // left
        circle(365, 225.5, 6.5, 6.5);   // right
        fill(255, 255, 255);
        circle(277, 224, 1, 1);         // left
        circle(367, 224, 1, 1);         // right        
    
        // upper body 
        stroke(0);
        strokeWeight(1);
        fill(204,255,229);
        rect(250, 410, 140, 70);
    } 
}

PROJECT-02 (variable faces)

SEAN-02
// SEAN CHEN
// 15-104 A

function setup() {
    smooth();
    createCanvas(600, 600);
}

function mouseClicked() {
    noStroke();
    background(232, 232, 228);

    var cntr = width / 2;
    var facex = random(width/4, width/2);
    var facey = random(width/4, width/2);

    // FACE BASE
    fill(255, 219, 88);
    var x = 10
    var ushift = random(-x, x);
    var rshift = random(-x, x);
    var dshift = random(-x, x);
    var lshift = random(-x, x);
    beginShape();
    curveVertex(cntr+ushift, cntr-facey/2+rshift);
    curveVertex(cntr+facex/2+ushift, cntr-facey/2+rshift);
    curveVertex(cntr+facex/2+rshift, cntr+dshift);
    curveVertex(cntr+facex/2+rshift, cntr+facey/2+dshift);
    curveVertex(cntr+dshift, cntr+facey/2+lshift);
    curveVertex(cntr-facex+dshift, cntr+facey/2+lshift);
    curveVertex(cntr-facex/2+lshift, cntr+ushift);
    curveVertex(cntr-facex/2+lshift, cntr-facey+ushift);
    endShape(CLOSE);
    
    // eye whites
    fill(255);
    var eyew = random(height/20, height/10);
    stroke(255);
    strokeWeight(eyew);
    beginShape(LINES);
    vertex(cntr-facex/4, cntr);
    vertex(cntr-facex/4, cntr-facey/4);
    vertex(cntr+facex/4, cntr);
    vertex(cntr+facex/4, cntr-facey/4);
    endShape();

    // pupils
    stroke(0);
    strokeWeight(eyew/4*3);
    var pupil = eyew/8*5;
    var lshift = random(-5, 5);
    var rshift = random(-5, 5);
    beginShape(POINTS);
    vertex(cntr-facex/4+lshift, cntr-5+2*rshift);
    vertex(cntr-facex/4+lshift, cntr-5-pupil+2*rshift);
    vertex(cntr+facex/4+rshift, cntr-5+2*lshift);
    vertex(cntr+facex/4+rshift, cntr-5-pupil+2*lshift);
    endShape();

    // eyelids
    beginShape(POINTS);
    stroke(255, 180, 88);
    strokeWeight(eyew);
    vertex(cntr-facex/4, cntr-facey/4);
    vertex(cntr+facex/4, cntr-facey/4);
    endShape();
    beginShape();
    noStroke();
    fill(255, 180, 88);
    vertex(cntr-facex/4-eyew/2, cntr-facey/4);
    vertex(cntr-facex/4+eyew/2, cntr-facey/4);
    vertex(cntr-facex/4+eyew/2, cntr-facey/4+eyew/2);
    vertex(cntr-facex/4-eyew/2, cntr-facey/4+eyew/2);
    endShape();
    beginShape();
    vertex(cntr+facex/4-eyew/2, cntr-facey/4);
    vertex(cntr+facex/4+eyew/2, cntr-facey/4);
    vertex(cntr+facex/4+eyew/2, cntr-facey/4+eyew/2);
    vertex(cntr+facex/4-eyew/2, cntr-facey/4+eyew/2);
    endShape();

    // eyebrows
    var broww = eyew/2;
    var browshift = random(-10, 10);
    stroke(0);
    strokeWeight(20);
    beginShape();
    curveVertex(cntr-facex/4-broww, cntr-facey/4-eyew/2+browshift);
    curveVertex(cntr-facex/4-broww, cntr-facey/4-eyew/2+browshift);
    curveVertex(cntr-facex/4, cntr-facey/4-eyew/2);
    curveVertex(cntr-facex/4+broww, cntr-facey/4-eyew/2+browshift/4);
    curveVertex(cntr-facex/4+broww, cntr-facey/4-eyew/2+browshift/4);
    endShape();
    beginShape();
    curveVertex(cntr+facex/4-broww, cntr-facey/4-eyew/2+browshift/4);
    curveVertex(cntr+facex/4-broww, cntr-facey/4-eyew/2+browshift/4);
    curveVertex(cntr+facex/4, cntr-facey/4-eyew/2);
    curveVertex(cntr+facex/4+broww, cntr-facey/4-eyew/2+browshift);
    curveVertex(cntr+facex/4+broww, cntr-facey/4-eyew/2+browshift);
    endShape();

    //lips
    var mouthw = facex/4*3
    var mouthshift = random(-100, 100);
    stroke(255, 38, 38);
    strokeWeight(random(30, 50));
    beginShape();
    curveVertex(cntr-mouthw/2, cntr+facey/4+mouthshift);
    curveVertex(cntr-mouthw/2, cntr+facey/4);
    curveVertex(cntr+mouthw/2, cntr+facey/4);
    curveVertex(cntr+mouthw/2, cntr+facey/4+mouthshift);
    endShape();
    stroke(0);
    strokeWeight(5);
    noFill();
    beginShape();
    curveVertex(cntr-mouthw/2, cntr+facey/4+mouthshift);
    curveVertex(cntr-mouthw/2, cntr+facey/4);
    curveVertex(cntr+mouthw/2, cntr+facey/4);
    curveVertex(cntr+mouthw/2, cntr+facey/4+mouthshift);
    endShape();

}

LO-02 (generative art)

The inspirational work for me this week was definitely Weird Faces by Moka. Previous to being exposed to this work, I always assumed computer generated art to have a certain aesthetic such as hard clean lines, or hyper data driven simulations. However, mokas delicacy and deconstructing his own style and recreating it through a series of algorithms seems to blend that line between computation and art for me. I suppose the algorithms have to somehow mimic the way his hand flows and decides on the shape of the faces as well as the style for the rest of the face. The styles I’m assuming he codes a couple simple algorithms and lets a random generator mix and match various “designs” together to create new ones. In this case, Moka’s artistic sensibilities directly show on the board through the algorithms directly dissecting and recreating his style in a new way.

https://www.mokafolio.de/works/Weird-Faces

Project 2: Variable Face

For this project, I was inspired by a cute sketch of a tomato (reference at bottom) that I found, and wanted to replicate the same idea onto an apple/tomato that looks more like one or the other depending on the random regeneration after clicking.

sketch Download
// Susie Kim
// Section A
var BodyHeight = 265;
var BodyWidth = 175;
var leafLength = 30;
var leafWidth = 60;
var pupilSize = 35;
var mouthLength = 20;
var stemLength = 150;
var stemThickness = 15;
var nose = 10;
var eyebrowHeight = 300
function setup() {
    createCanvas(480,640);
}

function draw() {
	background(255,218,185);
	// draw  stem
	stroke(0, 139, 0);
	strokeWeight(stemThickness);
	line(230, 320, 230, stemLength);
	// cheeks
	noStroke();
	fill(255,8,0);
	// draw left cheek
	ellipse(180, 320, BodyWidth, BodyHeight);
	// draw right cheek
	ellipse(270, 320, BodyWidth, BodyHeight);
	// leaves
	fill(0,139,0);
	ellipse(200,170, leafWidth, leafLength);
	ellipse(260,160, leafWidth, leafLength);
	// eyes, outer
	fill(255);
	ellipse(170,330,55);
	ellipse(280,330,55);
	// eyes, pupil
	fill (0);
	ellipse(170,335, pupilSize);
	ellipse(280,335, pupilSize);
	// nose:
	fill (230,230,250)
	ellipse(225,365,nose)
	// mouth:
	strokeWeight(3);
	stroke(0);
	line(215, 390, 235, 390);
	// eyebrows
	line(160,eyebrowHeight, 180, eyebrowHeight);
	line(270,eyebrowHeight, 290, eyebrowHeight);
}


function mousePressed() {
    // when the user clicks, the following variables are reassigned
    // randomly depending on the assigned paramenets.
    BodyHeight = random(265, 305);
    BodyWidth = random(175, 225);
    pupilSize = random(25, 45);
    stemLength = random(90, 140);
    stemThickness = random(8, 21);
    leafLength = random(25, 50);
    leafWidth = random(70, 80);
    nose = random(9,20);
    eyebrowHeight = random(250,300)
}

Looking Outwards: 2

Artist: LIA

Project: Four Seasons – Spring

While LIA is typically known for her monochromatic works, she created this ‘Spring’ work as a part of her 4 part seasons series, and uses colors and generative forms to simulate abstract buds that bloom into new growth in the Spring. As her most colorful work created in over a decade, the artist transforms her ideas and themes of spring into a computationally produced work containing repeating and moving forms. These abstract buds are produced randomly all across the “canvas”, with the color gradients and buds also randomly overlapping on top of each other. Each bud appears on the page, then goes through the movement of “budding”, which eventually ends and triggers another bud to appear somewhere else on the page, forming a never ending loop of randomly produced colors and shapes on the canvas.

Project 2- Variable faces

sketchDownload
var LeyeXPoint = 225;
var LeyeYPoint = 190;
var ReyeXPoint = 325;
var ReyeYPoint = 190;
var faceHeight = 120;
var faceWidth = 260;
var noseXPoint = 280;
var noseYPoint = 200;
var mouthXPoint = 255; 
var mouthYPoint = 285;
var eyebrowXPoint = 300;
var eyebrowYPoint = 185;
var backgroundColor = 0

function setup() {
    createCanvas(640, 480);
    background(0);
    text("p5.js vers 0.9.0 test.");
}
 
function draw() {
    background((backgroundColor), (backgroundColor), (backgroundColor));
    fill (229, 184, 135);
    noStroke();
    ellipse(320, 235, faceWidth - 70, faceHeight + 115);
    
    noFill();
    strokeWeight(7);
    stroke(250, 250, 250);
    beginShape();
    curveVertex(faceWidth, faceHeight);
    curveVertex(faceWidth, faceHeight);
    curveVertex(faceWidth - 50, faceHeight + 100);
    curveVertex(faceWidth, faceHeight + 200);
    curveVertex(faceWidth + 45, faceHeight + 225);
    curveVertex(faceWidth + 100, faceHeight + 200);
    curveVertex(faceWidth + 150, faceHeight + 120);
    curveVertex(faceWidth + 150, faceHeight + 140);
    curveVertex(faceWidth + 165, faceHeight + 130);
    curveVertex(faceWidth + 180, faceHeight + 80);
    curveVertex(faceWidth + 170, faceHeight + 60);
    curveVertex(faceWidth + 150, faceHeight + 80);
    curveVertex(faceWidth + 155, faceHeight + 90);
    curveVertex(faceWidth + 150, faceHeight + 100);
    curveVertex(faceWidth + 150, faceHeight + 100);
    endShape(); // face and ear
    
    noStroke();
    noFill();
    fill (173, 230, 230);
    strokeWeight(5);
    stroke(250, 250, 250);
    beginShape();
    curveVertex(LeyeXPoint + 15, LeyeYPoint + 10);
    curveVertex(LeyeXPoint + 15, LeyeYPoint + 10);
    curveVertex(LeyeXPoint, LeyeYPoint);
    curveVertex(LeyeXPoint - 20, LeyeYPoint + 30);
    curveVertex(LeyeXPoint, LeyeYPoint + 50);
    curveVertex(LeyeXPoint + 30, LeyeYPoint + 30);
    curveVertex(LeyeXPoint + 15, LeyeYPoint + 10);
    curveVertex(LeyeXPoint + 15, LeyeYPoint + 10);
    curveVertex(LeyeXPoint + 15, LeyeYPoint + 10);
    curveVertex(LeyeXPoint - 5, LeyeYPoint + 20);
    curveVertex(LeyeXPoint, LeyeYPoint + 35);
    curveVertex(LeyeXPoint + 10, LeyeYPoint + 20);
    curveVertex(LeyeXPoint - 5, LeyeYPoint + 20);
    curveVertex(LeyeXPoint - 5, LeyeYPoint + 20);
    endShape(); //Left Eye
    
    noStroke();
    noFill();
    fill (173, 230, 230);
    strokeWeight(5);
    stroke(250, 250, 250);
    beginShape();
    curveVertex(ReyeXPoint + 15, LeyeYPoint + 10);
    curveVertex(ReyeXPoint + 15, LeyeYPoint + 10);
    curveVertex(ReyeXPoint, LeyeYPoint);
    curveVertex(ReyeXPoint - 25, LeyeYPoint + 30);
    curveVertex(ReyeXPoint, LeyeYPoint + 50);
    curveVertex(ReyeXPoint + 30, LeyeYPoint + 30);
    curveVertex(ReyeXPoint + 15, LeyeYPoint + 10);
    curveVertex(ReyeXPoint + 15, LeyeYPoint + 10);
    curveVertex(ReyeXPoint + 15, LeyeYPoint + 10);
    curveVertex(ReyeXPoint - 5, LeyeYPoint + 20);
    curveVertex(ReyeXPoint, LeyeYPoint + 35);
    curveVertex(ReyeXPoint + 10, LeyeYPoint + 20);
    curveVertex(ReyeXPoint - 5, LeyeYPoint + 20);
    curveVertex(ReyeXPoint - 5, LeyeYPoint + 20);
    endShape(); //Right Eye
    
    noStroke();

    noFill();
    strokeWeight(5);
    stroke(250, 250, 250);
    beginShape();
    curveVertex(noseXPoint, noseYPoint);
    curveVertex(noseXPoint, noseYPoint);
    curveVertex(noseXPoint - 25, noseYPoint + 55);
    curveVertex(noseXPoint - 10, noseYPoint + 70);
    curveVertex(noseXPoint - 5, noseYPoint + 65);
    curveVertex(noseXPoint - 5, noseYPoint + 65);
    curveVertex(noseXPoint, noseYPoint + 70);
    curveVertex(noseXPoint + 10, noseYPoint + 65);
    curveVertex(noseXPoint, noseYPoint + 55);
    curveVertex(noseXPoint, noseYPoint + 55);
    endShape(); //nose
    
    fill (193, 104, 115);
    strokeWeight(5);
    stroke(250, 250, 250);
    beginShape();
    curveVertex(mouthXPoint - 3, mouthYPoint + 25);
    curveVertex(mouthXPoint - 3, mouthYPoint + 25);
    curveVertex(mouthXPoint, mouthYPoint);
    curveVertex(mouthXPoint + 15, mouthYPoint + 15);
    curveVertex(mouthXPoint + 25, mouthYPoint);
    curveVertex(mouthXPoint + 65, mouthYPoint + 25);
    curveVertex(mouthXPoint - 3, mouthYPoint + 25);
    curveVertex(mouthXPoint - 3, mouthYPoint + 25);
    endShape(); //mouth
    
    //fill (150, 150, 150);
    //noStroke();
    //triangle(eyebrowXPoint - 5, eyebrowYPoint, eyebrowXPoint + 75, eyebrowYPoint, eyebrowXPoint + 18, eyebrowYPoint - 20);
    
    //fill (150, 150, 150);
    //noStroke();
    //triangle(eyebrowXPoint - 35, eyebrowYPoint, eyebrowXPoint - 85, eyebrowYPoint, eyebrowXPoint - 50, eyebrowYPoint - 20);
    
    noFill();
    fill (150, 150, 150);
    strokeWeight(3);
    stroke(250, 250, 250);
    beginShape();
    curveVertex(eyebrowXPoint, eyebrowYPoint);
    curveVertex(eyebrowXPoint, eyebrowYPoint);
    curveVertex(eyebrowXPoint + 15, eyebrowYPoint - 15);
    curveVertex(eyebrowXPoint + 65, eyebrowYPoint);
    curveVertex(eyebrowXPoint + 25, eyebrowYPoint - 5);
    curveVertex(eyebrowXPoint, eyebrowYPoint);
    curveVertex(eyebrowXPoint, eyebrowYPoint);
    endShape(); //Leyebrow
    
    noFill();
    fill (150, 150, 150);
    strokeWeight(3);
    stroke(250, 250, 250);
    beginShape();
    curveVertex(eyebrowXPoint - 40, eyebrowYPoint);
    curveVertex(eyebrowXPoint - 40, eyebrowYPoint);
    curveVertex(eyebrowXPoint - 55, eyebrowYPoint - 15);
    curveVertex(eyebrowXPoint - 95, eyebrowYPoint);
    curveVertex(eyebrowXPoint - 75, eyebrowYPoint - 5);
    curveVertex(eyebrowXPoint - 40, eyebrowYPoint);
    curveVertex(eyebrowXPoint - 40, eyebrowYPoint);
    endShape(); //Reyebrow

}
 
function mousePressed(){ 
    backgroundColor = random(0, 210);
    LeyeYPoint = random(180, 200);
    ReyeYPoint = random(180, 200);
    faceHeight = random(100, 140);
    noseYPoint = random(185, 215);
    mouthYPoint = random(270, 295);
    eyebrowYPoint = random(175, 195);
}

Project 2 – Variable Faces

Click the bear to change its mood!

sketch_rachell
var headShape = 0;
var eyeShape = 0;
var noseShape = 0;
var mouthShape = 0;
var cheekColor = 0;
 
function setup() {
    createCanvas(640, 480);
}
 
function draw() {
	//background fit mouth mood
    if (mouthShape == 0){ //happy
    	background(227, 212, 95);
    } else if (mouthShape == 1){ //gasp
    	background(191, 153, 209);
    } else if (mouthShape == 2){ //unamused
    	background(153, 175, 209);
    } else { //slanted
    	background(153, 209, 173);
    }

    //head
    fill(255);
    noStroke();
    if (headShape == 0){
    	//ears
    	ellipse((width/2)-125, 80, 50, 50);
    	ellipse((width/2)+125, 80, 50, 50);
    	//face
    	ellipse(width/2, height/2, 400, 400);
    } else if (headShape == 1){
    	//ears
    	ellipse((width/2)-125, 100, 50, 50);
    	ellipse((width/2)+125, 100, 50, 50);
    	//face
    	ellipse(width/2, height/2, 400, 350);
    } else {
    	//ears
    	ellipse((width/2)-125, 100, 50, 50);
    	ellipse((width/2)+125, 100, 50, 50);
    	//face
    	rect(120, 90, 400, 300, 130);
    }

    //eyes
    var eyeLX = width/2 - 100;
    var eyeRX = width/2 + 100;
    var eyeSize = 20;

    if (eyeShape == 0){ //eyes open
    	fill(0);
    	ellipse(eyeLX, height/2, eyeSize);
    	ellipse(eyeRX, height/2, eyeSize);
    } else if (eyeShape == 1){ //eyes closed straight
    	stroke(0);
    	strokeWeight(7);
    	line(eyeLX-(eyeSize/2), height/2, eyeLX+(eyeSize/2), height/2);
    	line(eyeRX-(eyeSize/2), height/2, eyeRX+(eyeSize/2), height/2);
    } else if (eyeShape == 2){ //eyes closed arc
    	stroke(0);
    	strokeWeight(7);
    	arc(eyeLX, height/2, eyeSize, eyeSize, PI, TWO_PI);
    	arc(eyeRX, height/2, eyeSize, eyeSize, PI, TWO_PI);
    }else { //eyes closed arc 180
    	stroke(0);
  		strokeWeight(7);
    	arc(eyeLX, height/2, eyeSize, eyeSize, TWO_PI, PI);
    	arc(eyeRX, height/2, eyeSize, eyeSize, TWO_PI, PI);
    }

    //nose
    if (noseShape == 0){
    	fill(0);
    	noStroke();
    	ellipse(width/2, (height/2)+ 10, 30, 15);
    } else {
    	fill(0);
    	noStroke();
    	triangle((width/2)-15, (height/2)+10, (width/2)+15, (height/2)+10, width/2, (height/2)+15);
    }

    //mouth
    if (mouthShape == 0){ //happy
    	noFill();
    	stroke(10);
  		strokeWeight(5);
    	arc(width/2, (height/2)+40, 30, 20, TWO_PI, PI);
    } else if (mouthShape == 1){ //gasp
    	noFill();
    	stroke(10);
    	strokeWeight(5);
    	ellipse(width/2, (height/2)+50, 30);
    } else if (mouthShape == 2){ //unamused
    	stroke(10);
    	strokeWeight(5);
    	line((width/2)-15, (height/2)+40, (width/2)+15, (height/2)+40);
    } else { //slanted
    	stroke(10);
    	strokeWeight(5);
    	line((width/2)-15, (height/2)+35, (width/2)+15, (height/2)+45);
    }

    //cheeks
    if (cheekColor == 0){
    	noStroke();
    	fill(189, 138, 134);
    	ellipse((width/2)-125, (height/2)+20, 30, 10);
    	ellipse((width/2)+125, (height/2)+20, 30, 10);
    } else if (cheekColor == 1){
    	noStroke();
    	fill(227, 119, 104);
    	ellipse((width/2)-125, (height/2)+20, 30, 10);
    	ellipse((width/2)+125, (height/2)+20, 30, 10);
    } else{

    }
}
 
function mousePressed() {
    headShape = int(random(3));
    eyeShape = int(random(4));
    noseShape = int(random(2));
    mouthShape = int(random(4));
    cheekColor = int(random(3));
}

This is programmed so that every time you click the bear, it has a different mood using a combination of different facial variables: head shape, eyes, nose, mouth, and cheeks. The background color reflects the mood based on the mouth, since the mouth shapes seemed the most emotive to me.

There are 5 variables for a face, each with 2-3 options.

There are 3 types of heads you could get: circle, oval, or rounded rectangle. Then there are 4 types of eyes, open (circles), or closed (straight, or arc up or arc down).
There are 2 types of noses, either round or triangular.
There are 4 different mouths: smiling, gasping, straight unamused, or slanted. This random variable is also linked to the background color.
There are 3 options for cheeks: rosy cheeks, bright blush, or no blush.

I hope this program makes you giggle!

Project 02: Variable Face

The main challenges in constructing my face were primarily around the placement of each element and how to control their heights so pieces didn’t overlap in ugly ways or stick out, but also to keep the overall identity of the face. I wanted each face to seem a little larger than life, while generating a completely new and cartoonish, albeit simple, face every time. I wanted simple elements based off of the original code, but that used that basic template given to us to create really weird and outrageous faces.

cowboyedit
var eyeSize = 20;     ////how large the outside eyes get
var faceWidth = 100;   ////width of face
var faceHeight = 150;  ////height of face
var glasses = 40      ////size of glasses lens
var hatWidth = 125    ////width of the brim
var hatHeight = 35    ////height of the brim
var hatX = 25        ////position of the top corner of the rectangular portion of the hat
var hatTall = 150    ////length of the rectangular portion of the hat
var bandannaSize = 80 ///width of the bandanna 
var bandannaY = 380   ///bottom corner of the bandanna
 
function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    background(180);
    var hatSize = hatX * 2   ////determines width of the hat based on distance from the center
    var eyeLX = width / 2 - faceWidth * 0.25;  ////size of left eye
    var eyeRX = width / 2 + faceWidth * 0.25;  ////size of right eye
    var noseLength = 40    ////furthest position of nose
    var noseX1 = (width / 2, height / 2) - (.35 * faceWidth)   ////first x of nose triangle
    var noseY1 = height / 2 + faceHeight / 10   ////first y of nose triangle
    var noseX2 = (width / 2, height / 2) + (.75 * faceWidth)  ////2nd x of nose triangle
    var noseY2 = height / 2 + faceHeight / 10    ////2nd y of nose triangle
    var noseX3 = faceWidth / 2   ////x position of noise point
    var noseY3 = (height / 2) + noseLength ////height of nose point
    var bandanna1 = (width / 2) - bandannaSize  ////right x of bandanna, based on distance from center
    var bandanna2 = (width / 2) + bandannaSize   ///left x of bandanna, based on distance from center
    var bandannaLength = 400    ////y of bandanna point
    rect((width / 2) - hatX, 4, hatSize, hatTall) ////rectangle of hat
    ellipse(width / 2, height / 2, faceWidth,  faceHeight); ////face
    triangle(noseX1, noseY1, noseX2, noseY2, noseX3, noseY3)   ////nose
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);  /////left eye
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);  /////right eye
        if (faceWidth > 200) {   ////condition for glasses when face is wide
            line(eyeRX, height / 2, eyeLX, height / 2)
            ellipse(eyeRX, height / 2, glasses)
            ellipse(eyeLX, height / 2, glasses)
        } else {    ////otherwise pupils of eyes
            ellipse(eyeRX, height / 2, 4)
            ellipse(eyeLX, height / 2, 4)
         }    
    ellipse(width / 2, (height / 2) - ((faceHeight / 2) * .85), hatWidth, hatHeight);   /////hat brim
    triangle(bandanna1, bandannaY , bandanna2, bandannaY, width / 2, bandannaLength)    ////bandanna

       noLoop()


 
}

    

 
function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges. For example,
    // 'faceWidth' gets a random value between 75 and 150.
    redraw()
    faceWidth = random(75, 280);
    faceHeight = random(75, 280);
    eyeSize = random(10, 30);
    glasses = random(40, 65)
    hatWidth = random(120, 240)
    hatHeight = random(40, 80)
    hatX = random(10, 40)
    hatTall = random(160, 280)
    bandannaSize = random(100, 300)
    bandannaY = random(260, 300)
    bandannaLength = random(400, 550)
}

Generative Web by Dr. Woohoo

I have enjoyed looking at Dr. Woohoo’s “Generative Web.” piece, which they created while exploring creating art with HTML5 + JavaScript painting Engine. I picked this piece because I really like the color gradient, as well as the design on the lefthand side. I found out from reading the blog post for this piece that the color gradient was selected through a program that Dr. Woohoo wrote that sorts colors based on a number of factors, such as popularity, shade, and brightness. I was inspired by this because I like experimenting with colors and I find it very interesting that someone was able to write a program that sorts colors in this way.
It appears that there were multiple algoithms that generated this work, as the artist wrote different code for the colors, brush, and user interface graphics. The artist appears to have been able to show their creative sense through these algoithms because they wrote and created all of them. They set minimums, maximums, and other parameters that they selected, allowing them creative say in some aspects of the work, while surrending certain controls to chance.

“Generative Art” by Dr. Woohoo

Project-02: Variable Faces

sketchDownload
//Isabel Xu
//Section A
var face_width = 200;
var face_length = 200;
var hair_length = 600
var hair_color = 132;
var eye_width = 30
var eye_size = 20


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

function draw() {

  background(220);

  //hair
  noStroke();
  fill(hair_color, 117, 82);
  rect(81,88,260,hair_length,100,100,45,45);

  //face
  fill(247, 194, 150);
  noStroke();
  ellipse(width/2,240,face_width,face_length);
  //ears
  ellipse(width/2-(face_width/2),275,30,40);
  ellipse(width/2+(face_width/2-10),275,30,40);

  
  //upper body
  fill(247, 194, 150);
  noStroke();
  beginShape();
  vertex(width/2-35, 260);
  vertex(width/2-35, 430);
  vertex(width/2-175, 470);
  vertex(width/2-225, 550);
  vertex(width/2-225, 650);
  vertex(width/2+225, 650);
  vertex(width/2+225, 550);
  vertex(width/2+175, 470);
  vertex(width/2+35, 430);
  vertex(width/2+35, 260);
  endShape();
  

  //lips
  fill(190,111,82);
  noStroke();
  beginShape();
  curveVertex(width/2-20,240+(face_length/2)-45);
  curveVertex(width/2-15,240+(face_length/2)-35);
  curveVertex(width/2+15,240+(face_length/2)-25);
  curveVertex(width/2+30,240+(face_length/2)-35);
  curveVertex(width/2+50,240+(face_length/2)-45);
  endShape();
  
  beginShape();
  curveVertex(width/2-20,240+(face_length/2)-25);
  curveVertex(width/2-15,240+(face_length/2)-35);
  curveVertex(width/2+15,240+(face_length/2)-40);
  curveVertex(width/2+30,240+(face_length/2)-35);
  curveVertex(width/2+50,240+(face_length/2)-25);
  endShape();

  //nose
  noStroke();
  fill(190,111,82);
  beginShape();
  vertex(width/2+2, 240+(face_length/2)-75);
  vertex(width/2, 240+(face_length/2)-60);
  vertex(width/2+20, 240+(face_length/2)-60);
  vertex(width/2+18, 240+(face_length/2)-75);
  endShape(CLOSE);
  
  beginShape();
  curveVertex(width/2, 240+(face_length/2)-60);
  curveVertex(width/2, 240+(face_length/2)-60);
  curveVertex(width/2+10, 240+(face_length/2)-55);
  curveVertex(width/2+20, 240+(face_length/2)-60);
  curveVertex(width/2+20, 240+(face_length/2)-60);
  endShape();


  //eyes
    fill(255);
    ellipse(width / 2 - face_width * 0.25 +10,245 , eye_width, eye_size);
    ellipse(width / 2 + face_width * 0.25 +10, 245, eye_width, eye_size);
    //pupils
    fill(76,50,36);
    noStroke();
    ellipse((width / 2 - face_width * 0.25 +10)+3, 244 , eye_width/2,eye_size*0.8);
    ellipse((width / 2 + face_width * 0.25 +10)+3,244, eye_width/2., eye_size*0.8);

  

  //garment with transparency
  fill(150,190);
  noStroke();
  strokeWeight(3);
  beginShape();
  curveVertex(width/2-45,405);
  curveVertex(width/2-35,425);
  curveVertex(width/2-57,435);
  curveVertex(width/2-175, 460);
  curveVertex(width/2-225, 550);
  curveVertex(width/2-205, 650);
  curveVertex(width/2+195, 650);
  curveVertex(width/2+225, 550);
  curveVertex(width/2+175, 460);
  curveVertex(width/2+57,435);
  curveVertex(width/2+35,425);
  curveVertex(width/2+45,405);
  endShape(CLOSE);

  //garment on top layer
  fill(250);
  noStroke();
  beginShape();
  vertex(width/2,610)
  vertex(width/2-50,430)
  vertex(width/2-170,430)
  vertex(width/2-180,470)
  vertex(width/2-180,650)
  vertex(width/2+180,650)
  vertex(width/2+180,470)
  vertex(width/2+170,430)
  vertex(width/2+50,430)
  endShape();

  //earrings *line
  stroke(2); //line
  strokeWeight(1);
  strokeCap(SQUARE);
  line(width/2-(face_width/2),290,width/2-(face_width/2),385);
  line(width/2+(face_width/2)-10,290,width/2+(face_width/2)-10,385);
  
  //earrings *rounds
    if (mouseIsPressed) {
        fill(99,234,232);
    } else {
        fill(249,239,80);
    }
    
    ellipse(width/2-(face_width/2),385,50,50);
    ellipse(width/2+(face_width/2)-10,385,40,40);
  
  
  
  }


function mousePressed() {
    hair_length = random(320, 431);
    face_width = random(180, 205);
    face_length = random (190,220)
    hair_color = random(50,132);
    eye_width = random(35,50);
    eye_size = random(25,35);
   

   
}

I really enjoy how the mousePressed() function realize an interaction with the player while the domain argument allows the changing color to set within a color scheme. The variables for the face part visualize a perception of mine on how everyone looks drastically different in varieties of focus lens in different cameras. 

The mouseisPressed() function makes the earrings pop out from the other variables.