Category: Section A

thlai-Project-02-Variable-Face


thlai-project02

// Tiffany Lai
// 15-104 Section A
// thlai@andrew.cmu.edu
// Project-O2

var eyeSize = 0;
var mouth1 = 60;
var mouth2 = 120;
var skinR = 210;
var skinG = 210;
var skinB = 210;
var eyebrows = 275;
var eyebrowStroke = 10;
var snout = 115;
var jaw1 = 240;
var jaw2 = 200;

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

function draw() {
    background(255, 250, 230);
    noStroke();

    fill(skinR, skinG, skinB);
    beginShape(); // left ear
        curveVertex(220, 260);
        curveVertex(220, 260);
        curveVertex(180, 100);
        curveVertex(120, 100);
        curveVertex(170, 280);
        curveVertex(170, 280);
    endShape(); 

    beginShape(); // right ear
        curveVertex(250, 280);
        curveVertex(250, 280);
        curveVertex(300, 100);
        curveVertex(350, 100);
        curveVertex(310, 280);
        curveVertex(320, 280);
    endShape();

    ellipse(width/2, height/2, 200, 200); // head top
    ellipse(width/2, height/2+40, jaw1, jaw2); // head bottom

    fill(255);
    ellipse(width/2, height/2+60, snout, snout); // snout

    fill(70);
    ellipse(width/2-50, height/2, eyeSize+20, eyeSize+30); // left eye
    ellipse(width/2+50, height/2, eyeSize+20, eyeSize+30); // right eye

    push();
    stroke(skinR-20, skinG-20, skinB-20);
    strokeWeight(eyebrowStroke);
    line(178, eyebrows, 198, eyebrows-5); // left eyebrow
    pop();

    push();
    stroke(skinR-20, skinG-20, skinB-20);
    strokeWeight(eyebrowStroke);
    line(300, eyebrows, 280, eyebrows-5); // right eyebrow
    pop();

    fill(250, 225, 235);
    triangle(width/2-10, height/2+30, width/2+10, height/2+30, width/2, height/2+50); // nose

    fill(255, 100, 140);
    arc(width/2, height/2+60, 80, 80, mouth1, mouth2); // mouth
}

function mousePressed() {
    eyeSize = random(-10, 20);
    mouth1 = random(-10, 80);
    mouth2 = random(100, 190);
    skinR = random(200, 240);
    skinG = random(200, 240);
    skinB = random(200, 240);
    eyebrows = random(240, 300);
    eyebrowStroke = random(5, 20);
    snout = random(95, 150);
    jaw1 = random(220, 250);
    jaw2 = random(175, 210);
}

 

mmiller5_Looking Outwards-2

Conway’s Game of Life, created by John Conway in 1970, is a generative “game” where cells live, die, or are created depending on the number of living cells around them.  Conway didn’t want the algorithm to lead to exponential amounts of growth but he also wanted the ruleset to be simple, so he based the rules around cell adjacency.  “Players” choose the starting conditions– which cells are alive– and from there the algorithm autonomously steps through generations leading to a wide degree of possible patterns including all cells dying, static lifeforms, self-replicators, and more.  What inspires me the most about this project is that from a simple ruleset, there is a great amount of complexity that can be created; that 4 basic rules leads to a system that creates wonderful patterns.  Communities have formed around discovering new properties in The Game of Life, and other versions of it have been created with different rulesets and cell types.

amui1 – Project-02-Variable-Face

amui1-project2

//Allison Mui
//15-104 Section A
//amui1@andrew.cmu.edu
//Project-02

var val = 0
var headW = 400
var headH = 371
var backR = 225
var backG = 225
var backB = 225

function setup() {
    createCanvas(600,600);
    backR = random(0,255);
    backG = random(0,255);
    backB = random(0,255);
    background(backR,backG,backB);
}

//when mouse is clicked, do these functions
function mouseClicked() {
  if (val <= 0) {
    //sad background
    backR = random(0,43);
    backG = random(151,255);
    backB = random(207,255);
    push(new sad);
    val += 1;
  } else{
    //angry background
    if (val == 1) {
      backR = random(188,255);
      backG = random(0,30);
      backB = random(0,55);
      push(new hungry);
      val += 1;
    } else{
      //happy background 
      backR = random(180,255);
      backG = random(190,255);
      backB = random(0,50);
      push(new happy);
      val = 0;
    }

  }
}

function sad() {
    headW = random(300,400);
    background(backR,backG,backB);
    //hair
    strokeWeight(0);
    fill(132,81,36);
    triangle(width/2 - 50,200,width/2, 70, width/2 + 50, 200);
    triangle(width/2 - 10,200,width/2 - 30, 80, width/2 + 80, 200);
    triangle(width/2 - 50,200,width/2 + 30, 70, width/2 + 60, 200);
    //shadow
    fill(132,81,36);
    ellipse(width/2,280,headW+15,headH - 11);
    ellipse(125,height/2,190,170);
    ellipse(475,height/2,190,170);
    strokeWeight(0);
    //ears
    fill(194,128,69);
    ellipse(125,height/2,171,157);
    ellipse(476,height/2,171,157);
    fill(234,161,178);
    ellipse(125,height/2,119,105);
    ellipse(475,height/2,119,105);
    //head
    fill(194,128,68);
    ellipse(width/2,height/2,headW,headH);
    fill(249,214,159);
    ellipse(220,height/2,175,216);
    ellipse(380,height/2,175,216);
    ellipse(300,388,390,255);
    ellipse(300,468,209,124);
    //eyes
    strokeWeight(1);
    fill(255);
    ellipse(230,312,115,115);
    ellipse(375,312,115,115);
    fill(0);
    ellipse(230,312,65,65);
    ellipse(375,312,65,65);
    strokeWeight(0);
    fill(255);
    ellipse(248,293,20,20);
    ellipse(390,290,20,20);
    //nose
    fill(194,128,68);
    ellipse(width/2,420,105,105);
    ellipse(width/2,455,168,115);
    //mouth
    strokeWeight(3);
    arc(width/2,470,145,65, PI,0);
    //nostrils
    fill(0);
    strokeWeight(0);
    ellipse(285,403,20,20);
    ellipse(318,403,20,20);
    //eyebrows
    fill(110,75,33);
    ellipse(208,226,50,45);
    ellipse(385,226,50,45);
    fill(249,214,159);
    ellipse(201,222,70,41);
    ellipse(395,222,70,41);
    //worrymark
    strokeWeight(2);
    arc(400,470,5,12,HALF_PI, 3*HALF_PI);
    arc(200,470,5,12,3*HALF_PI, HALF_PI);
    //eyebag
    fill(132,81,36);
    strokeWeight(0);
    ellipse(222,385,40,11);
    ellipse(380,385,40,11);
}

function hungry() {
    headW = random(350,400);
    background(backR,backG,backB);
    //hair
    fill(132,81,36);
    triangle(width/2 - 50,200,width/2, 70, width/2 + 50, 200);
    triangle(width/2 - 10,200,width/2 - 30, 80, width/2 + 80, 200);
    triangle(width/2 - 50,200,width/2 + 30, 70, width/2 + 60, 200);
    //shadow
    fill(132,81,36);
    ellipse(width/2,280,headW+15,headH - 11);
    ellipse(125,height/2,190,170);
    ellipse(475,height/2,190,170);
    strokeWeight(0);
    //ears
    fill(194,128,69);
    ellipse(125,height/2,171,157);
    ellipse(476,height/2,171,157);
    fill(234,161,178);
    ellipse(125,height/2,119,105);
    ellipse(475,height/2,119,105);
    //head
    fill(194,128,68);
    ellipse(width/2,height/2,headW,headH);
    fill(249,214,159);
    ellipse(220,height/2,175,216);
    ellipse(380,height/2,175,216);
    ellipse(300,388,390,255);
    ellipse(300,468,209,124);
    //eyes
    strokeWeight(1);
    fill(255);
    ellipse(230,312,115,115);
    ellipse(375,312,115,115);
    fill(0);
    ellipse(230,312,65,65);
    ellipse(375,312,65,65);
    strokeWeight(0);
    fill(255);
    ellipse(248,293,20,20);
    ellipse(390,290,20,20);
    //nose
    fill(194,128,68);
    ellipse(width/2,420,105,105);
    ellipse(width/2,455,168,115);
    //mouth
    fill(132,81,36);
    ellipse(width/2,455,100,80);
    //nostrils
    fill(0);
    strokeWeight(0);
    ellipse(285,403,20,20);
    ellipse(318,403,20,20);
    //eyebrows
    fill(110,75,33);
    ellipse(230,226,50,45);
    ellipse(375,226,50,45);
    fill(249,214,159);
    ellipse(240,220,67,39);
    ellipse(364,220,70,41);
    //angry lines
    strokeWeight(2);
    line(150,350,170,370);
    line(430,370,450,350);
    //banana
    fill(255,255,0);
    strokeWeight(0);
    beginShape();
    vertex(mouseX, mouseY);
    bezierVertex(mouseX + 50, mouseY - 20,
               mouseX + 50, mouseY + 55,
               mouseX, mouseY + 55);
    bezierVertex(mouseX + 20, mouseY + 60,
               mouseX + 30, mouseY + 5,
               mouseX, mouseY);
    endShape();
}

function happy() {
    headW = random(400,450);
    background(backR,backG,backB);
    //hair
    fill(132,81,36);
    triangle(width/2 - 50,200,width/2, 70, width/2 + 50, 200);
    triangle(width/2 - 10,200,width/2 - 30, 80, width/2 + 80, 200);
    triangle(width/2 - 50,200,width/2 + 30, 70, width/2 + 60, 200);
    //shadow
    fill(132,81,36);
    ellipse(width/2,280,headW+15,headH - 11);
    ellipse(125,height/2,190,170);
    ellipse(475,height/2,190,170);
    strokeWeight(0);
    //ears
    fill(194,128,69);
    ellipse(125,height/2,171,157);
    ellipse(476,height/2,171,157);
    fill(234,161,178);
    ellipse(125,height/2,119,105);
    ellipse(475,height/2,119,105);
    //head
    fill(194,128,68);
    ellipse(width/2,height/2,headW,headH);
    fill(249,214,159);
    ellipse(220,height/2,175,216);
    ellipse(380,height/2,175,216);
    ellipse(300,388,390,255);
    ellipse(300,468,209,124);
    //eyes
    strokeWeight(1);
    fill(255);
    ellipse(230,312,115,115);
    ellipse(375,312,115,115);
    fill(0);
    ellipse(230,312,65,65);
    ellipse(375,312,65,65);
    strokeWeight(0);
    fill(255);
    ellipse(248,293,20,20);
    ellipse(390,290,20,20);
    //nose
    fill(194,128,68);
    ellipse(width/2,420,105,105);
    ellipse(width/2,455,168,115);
    //mouth
    strokeWeight(3);
    arc(width/2,440,145,65, 0, PI);
    //nostrils
    fill(0);
    strokeWeight(0);
    ellipse(285,403,20,20);
    ellipse(318,403,20,20);
    //eyebrows
    fill(110,75,33);
    ellipse(188,239,50,35);
    ellipse(410,239,50,35);
    fill(249,214,159);
    ellipse(193,245,50,30);
    ellipse(405,245,50,28);
    //laugh
    strokeWeight(2);
    arc(400,470,5,12,HALF_PI, 3*HALF_PI);
    arc(200,470,5,12,3*HALF_PI, HALF_PI);
}

I chose to do a sequence of emotions of a monkey: sad, then hungry (with a banana toying him), then happy. I started out sketching my monkey faces using Illustrator. Starting with this really streamlined my process when coding. I had a lot of fun with this project and am happy with my result.

agusman-Looking Outwards Post 02-Reface

http://eyewriter.org/
Eye Writer

Project: Eyewriter
”

Artists/Organizations:
Free Art and Technology (FAT)
OpenFrameworks
The Ebeling Group
the Graffiti Research Lab: Tempt1, Evan Roth, Chris Sugrue, Zach Lieberman, Theo Watson, James Powderly.

“Art is a tool of empowerment and social change, and I consider myself blessed to be able to create and use my work to promote health reform, bring awareness about ALS and help others.”
~ Tempt One

This project, spearheaded by the Free Art and Technology collective, is an incredible installment of new media art merging into the field of social innovation. Eyewriter, the name of the product, is a tool comprising of a low-cost, open source eye-tracking system that people with inhibited movement or degenerative muscle disorders like ALS can use to draw with their eyes.

The FAT team worked with LA graffiti artist, Tempt1 who was diagnozed with ALS in 2003. ALS has left him completely paralyzed, with the exception of his eyes. With this open sourced software and product, he is able to continue sketching large-scale graffiti and plastering it onto the walls of buildings using large-scale projectors.

agusman-Project02-VariableFace

agusman-02-variableface

//
// Anna Gusman
// agusman@cmu.edu
// Section A
// Project 02
// This program creates variable faces

var faceWidth = 150;
var faceHeight = 150;
var eyeVelX = 0; //eye velocity x
var eyeVelY = 0.4; //eye velocity y
var eyeSize = 40;
var rightEye = 40;
var leftEye = 40;
var leftEyeX = 5;
var leftEyeY = 20;
var rightEyeX = 40;
var rightEyeY = 20;
var eyeColor1;
var eyeColor2;
var mouthWidth = 100;
var mouthHeight = 50;
var mouthXcor = 30;
var mouthYcor = 50;
var color1;
var color2;

function setup() {
    createCanvas(400, 400);
    eyeColor1 = color(0)
    eyeColor2 = color(255, 200, 255);
}

function draw() {
    stroke(0.1)
    background(255, 255, 255);
    fill(255,255,255);

    //Head//
    from = color(255, 219, 0);
    to = color(182, 152, 0);
    noStroke();
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    ellipse(eyeLX, height / 2, leftEye, leftEye);
    ellipse(eyeRX, height / 2, rightEye, rightEye);

    noStroke()
    from = color(255, 217, 0);
    to = color(253, 176, 0);
    for (var i = 0; i < faceWidth; i++) {
      fill(lerpColor(to, from, (i+1)/faceWidth));
      ellipse(width / 2 , height/2 - i*0 , faceWidth-i, faceHeight-i);
  }
    //Draw eyes in the right order
    if (eyeVelX>0) {
      drawLeftEye();
      drawRightEye();
    } else {
      drawRightEye();
      drawLeftEye();
    }

    //mouth//
    arc(mouthXcor / .15, mouthYcor / .2, mouthHeight, mouthWidth, 0, PI);

}

    //Left Eye//
function drawLeftEye(){
    noStroke()
    from = color(0, 0, 0);
    to = color(255, 200, 255);
    for (var i = 0; i < leftEye; i++) {
      fill(lerpColor(eyeColor1, eyeColor2, (i+1)/eyeSize));
      ellipse(width / 2 - i + rightEyeX, height/2 - i*eyeVelY - rightEyeY, eyeSize-i, eyeSize-i);
  }
}
    //Right Eye//
function drawRightEye(){
    noStroke()
    from = color(0, 0, 0);
    to = color(255, 200, 255);
    for (var i = 0; i < rightEye; i++) {
        fill(lerpColor(to, from, (i+1)/rightEye));
        ellipse(width / 2.5 - i + leftEyeX, height/2 - i*eyeVelY - leftEyeY, eyeSize-i, eyeSize-i);
  }
}

function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges.
    faceWidth = random(150, 200);
    faceHeight = random(150, 200);
    eyeSize = random(30, 50);
    rightEye = random(0, 40);
    leftEye = random(0, 40);
    mouthHeight = random(10,80)
    mouthWidth = random(20, 50)
    eyeColor1;
    eyeColor2;
}

function windowResized() {
    resizeCanvas(windowWidth, windowHeight);
}

This project pushed me in ways I could not expect. My initial vision was to play with the idea of exploring all the possible iterations between a set of my favorite emojis, allowing me to generatively view all the intermediary emotional states between them. I also wanted to play with gradients to give an extra dimension to these expressions- and thus I hurled myself into the realm of for loops. I realize that this may have been beyond the scope of the assignment, but it was fascinating to learn the logic and technique behind creating this visual element and how a computer understands to draw it.

Hannah Kim- Looking Outwards- 02

The project I chose is called “Boil Up” by Robert Hodgin, 2013. The project is a group dynamics simulation work that aims to replicate the behaviors of frenzied fish in plankton rich waters. Hodgin managed to simulate these behaviors, such as flocking, predator and obstacle avoidance, and pursuit, using code in complex 3D models. Hodgin claims that the task was particularly difficult because he had to figure out how to organize the fish and keep them corralled, without feeling like he was imposing unnatural restrictions on their behavior. I can really see Hodgin’s realistic artistic sensibilities coming out in his algorithms, seeing that he went from working with mathematical shapes, to pushing realistic and complex 3D models. I really admire this about his work, and how he was able to manipulate code to simulate such a complex and specific action/behavior. Seeing the result is surreal, and I really feel as if I am in the middle of this crazy fish feeding session, watching the animals swim around me.

Here is a link to the video:

Shark cam from flight404 on Vimeo.

HaeWanPark-LookingOutwards-2

I AM By Sergio Albiac, 2016

I am Portraits by Sergio Albiac

“I am portrait” is a generative collage portrait project by Sergio Albiac. The main source of this project is personal data of one who is portrayed. With his generative custom computer code, Sergio transforms gathered data into a portrait which is an identity metaphor. The portrait which is depicted in the typographic illustration consists of all the personal data that tells stories about the person who is portrayed. He intended his generative computer code to become a medium to tell someone’s personal story and to represent his or her identity. He also developed his own generative techniques and sentiment analysis to have his own artistic style. His generative technique uses machine learning networks trained by only him in order to prevent imitating other artist’s style.

This artwork is incorporated with machine learning. It includes a system being trained from an artist who executes. What I think interesting is he only uses one person’s data at once and also trains machine learning networks alone. So, the portrait is made out of unique personal data within the uniquely trained machine learning networks. In my opinion, this artist understands that visual representation conveying personal meaning must be unique. It is pretty successful to illustrate someone’s unique identity within artist’s own expression and style.

mmiller5_Project-2

sketch

var faceWidth = 225;
var faceHeight = 225;
var faceType = 1;
var earSize = 50;
var earType = 1;
var earStroke = 10;
var faceR = 225;
var faceG = 184;
var faceB = 153;
var eyeSize = 30;
var eyeR = 255;
var eyeG = 255;
var eyeB = 255;
var eyeStroke = 1;
var mouthSize = 40;
var mouthType = 1;
var types = [1,2,3]; // faces, ears, and mouths have 3 different versions which will get randomly chosen
 
function setup() {
    createCanvas(480, 640);
    rectMode(CENTER);
}
 
function draw() {
    background(255-faceR, 255-faceG, 255-faceB); //background color is inverse color of face
    fill(faceR, faceG, faceB);


    //Ear types
    strokeWeight(earStroke);
    stroke(faceR - 10, faceG - 10, faceB - 30);
    if(earType == 2){
	ellipse(width/2 - faceWidth/2, height/2 - faceHeight/4, earSize/3 * 2, earSize);
	ellipse(width/2 + faceWidth/2, height/2 - faceHeight/4, earSize/3 * 2, earSize);
    }
    if(earType == 3){
	triangle(width/2 - faceWidth/4, height/2 - faceHeight/5,
		 width/2, height/2 - faceHeight/3,
		 width/2 - faceWidth/2, height/2 - faceHeight/2 - earSize/2);
	triangle(width/2 + faceWidth/4, height/2 - faceHeight/5,
		 width/2, height/2 - faceHeight/3,
		 width/2 + faceWidth/2, height/2 - faceHeight/2 - earSize/2);
    }

    
    //Face types
    strokeWeight(5);
    if(faceType == 1){
	ellipse(width/2, height/2, faceWidth, faceHeight);
    }
    if(faceType == 2){
	rect(width/2, height/2, faceWidth, faceHeight);
    }
    if(faceType == 3){
	triangle(width/2 - faceWidth/2, height/2 - faceHeight/2,
		 width/2 + faceWidth/2, height/2 - faceHeight/2,
		 width/2, height/2 + faceHeight/2);
    }

    //Eye Sockets
    strokeWeight(0);
    fill(faceR - 30, faceG - 30, faceB - 50);
    ellipse(width/2 - faceWidth/6, height/2 - faceHeight/6, eyeSize + 2*eyeStroke, eyeSize + 2*eyeStroke);
    ellipse(width/2 + faceWidth/6, height/2 - faceHeight/6, eyeSize + 2*eyeStroke, eyeSize + 2*eyeStroke);
    
    //Eyes will follow mouse (kinda)
    strokeWeight(eyeStroke);
    stroke(eyeR/5, eyeG/5, eyeB/3);
    fill(eyeR, eyeG, eyeB);
    var eyeXL = constrain(mouseX, width/2 - faceWidth/6 - eyeSize/15, width/2 - faceWidth/6 + eyeSize/15);
    var eyeY = constrain(mouseY, height/2 - faceHeight/6 - eyeSize/15, height/2 - faceHeight/6 + eyeSize/15);
    var eyeXR = constrain(mouseX, width/2 + faceWidth/6 - eyeSize/15, width/2 + faceWidth/6 + eyeSize/15);
    ellipse(eyeXL, eyeY, eyeSize, eyeSize);
    ellipse(eyeXR, eyeY, eyeSize, eyeSize);

    //Pupils will follow mouse (kinda)
    fill(0);
    strokeWeight(0);
    var pupilXL = constrain(mouseX, width/2 - faceWidth/6 - eyeSize/4, width/2 - faceWidth/6 + eyeSize/4);
    var pupilY = constrain(mouseY, height/2 - faceHeight/6 - eyeSize/4, height/2 - faceHeight/6 + eyeSize/4);
    var pupilXR = constrain(mouseX, width/2 + faceWidth/6 - eyeSize/4, width/2 + faceWidth/6 + eyeSize/4);
    ellipse(pupilXL, pupilY, eyeSize/2, eyeSize/2);
    ellipse(pupilXR, pupilY, eyeSize/2, eyeSize/2);
    
    //Mouth
    fill(eyeR/3, eyeG/5, eyeB/5);
    if(mouthType == 1){
	strokeWeight(mouthSize/10);
	line(width/2 - mouthSize/2, height/2 + faceHeight/6, width/2 + mouthSize/2, height/2 + faceHeight/6);
    }
    if(mouthType == 2){
	strokeWeight(mouthSize/5);
	point(width/2, height/2 + faceHeight/6);
    }

}
 
function mousePressed() {
    faceWidth = random(150, 300);
    faceHeight = random(150, 300);
    faceType = random(types);
    
    earSize = random(75, 125);
    earType = random(types);
    earStroke = random(5, 20);
    //Skin colors are setup so as to mostly resemble realistic skin tones
    faceR = random(70,255);
    faceG = random(faceR/4, faceR);
    faceB = random(faceR/4, faceG);
    
    eyeSize = random(20, 35);
    eyeR = random(0, 255);
    eyeB = random(0, 255);
    eyeG = random(0, 255);
    eyeStroke = random(1, 4);
    
    mouthSize = random(30, 60);
    mouthType = random(types);
    }

I really wanted to focus on creating different types of features rather than just adjusting the same feature by changing variables, and so I found out about using arrays from which the program makes a selection to decide which version of a feature to use, if any.  I wanted to make it even more interactive, so I tried to make the eyes follow the mouse (it kinda worked, but I know there’s a different way to do it that I’ll probably try later).

mjnewman Project-02 Variable Faces, Section A

project-02-variable

//Meredith Newman
//Section A
//mjnewman@andrew.cmu.edu
//Project-02-Variable Face

//snout components
var nostril = 50;
var snoutWidth = 200;
var snoutHeight = 150;

//eye components
var eyeSize = 50;
var white = 70;
var eyeDist = 300;

//ear components
var earX = 90;
var earY = 35;

//colors
var colorR = 232;
var colorG = 103;
var colorB = 183;


function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    background(colorR, colorG, colorB);
    noStroke();

    //snout 
    fill(colorB, colorG, colorR);
    ellipse(width / 2, height * 0.60, snoutWidth,  snoutHeight);

    //nose holes
    var noseLX = width / 2 - snoutWidth * 0.25;
    var noseRX = width / 2 + snoutWidth * 0.25;
    fill(colorG, colorR, colorG);
    ellipse(noseLX, height * 0.60, nostril, nostril);
    ellipse(noseRX, height * 0.60, nostril, nostril);

    //whites behind eyes
    var eyeLX = width / 2 - eyeDist / 2;
    var eyeRX = width / 2 + eyeDist / 2;
    fill(255);
    ellipse(eyeLX, height * 0.30, white, white);
    ellipse(eyeRX, height * 0.30, white, white);

    //eyes
    var eyeLX = width / 2 - eyeDist / 2;
    var eyeRX = width / 2 + eyeDist / 2;
    fill(colorG, colorR, colorG);
    ellipse(eyeLX, height * 0.30, eyeSize, eyeSize);
    ellipse(eyeRX, height * 0.30, eyeSize, eyeSize);

    //ears
    fill(colorR - 30, colorG - 30, colorB - 30);
    //left
    triangle(earX, earY, earX + 60, earY + 40, earX - 20, earY + 80);
    //right
    triangle(earX + 460, earY, earX + 400, earY + 40, earX + 480, earY + 80);

    //oink text
    textSize(60);
    text("oink", 50, 450);
    fill(0, 102, 153);
}
 
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.
    colorR = random(1,255);
    colorG = random(1,255);
    colorB = random(1,255);
    eyeSize = random(30,50);
    eyeDist = random(250,300);
    earX = random(90,110)
    earY = random(25,35);
    snoutWidth = random(75, 150);
    snoutHeight = random(75, 100);
    nostril = random(10, 30);
}

 

For the project this week, I could definitely tell the prompts are becoming much more complicated. The random functions required a lot more trial and error than the previous assignments. But the recurrent theme across the two projects is that it’s hard to determine what to do creatively. I want it to be interesting enough for me to make as well as for people to use, but still keep in mind the constraints I have as a novice coder.

I chose to approach this project with the principle of gestalt in mind. I wanted to try to use as few elements as possible to suggest the face of a pig. I drew inspiration from some sketches Henri Matisse did that show the general visual of a face (below).

mjeong1-Project02-Variable Faces-SectionA

sketch

//Min Young Jeong
//Section A 9:30am
//mjeong1@andrew.cmu.edu
//Project-02-Variable Faces


var facewidth = 150;
var faceheight = 170;
var eyesize = 10;
var a = 100;
var b = 45;
var c = 74;
//color rgb
var earwidth = 50;
var earheight = 40;
var hairx = 200;
var hairy = 400;
//hair
var line = 2;
//eyes stroke weight
var beardlengthx = 0;
var beardlengthy = 0;
var bright = 0;
//background brightness


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

function draw() {
	if (mouseIsPressed) {bright = 0;}
	background(bright);
	bright = bright + 1;
	//background

    noStroke();
    fill(a,b,c);
	quad(width/2,hairy,width/2+hairx,200,width/2+100,100,width/2-100,100);
	triangle(width/2-100,100,width/2-hairx,200,width/2,hairy);
	//hair

    fill(248,170,35);
    ellipse(width/2,height/2-20,facewidth,faceheight);
    //facefoundation

    arc(width/2-facewidth*0.35,height/2-120,earwidth,earheight,PI,0,CHORD);
    arc(width/2+facewidth*0.35,height/2-120,earwidth,earheight,PI,0,CHORD);
    //ear

    fill(253,108,1);
    arc(width/2-facewidth*0.35,height/2-120,earwidth/2,earheight/2,PI,0,CHORD);
    arc(width/2+facewidth*0.35,height/2-120,earwidth/2,earheight/2,PI,0,CHORD);

    fill(a,b,c);
    ellipse(width/2-65,height/2+50,65,65);
    ellipse(width/2+65,height/2+50,65,65);
	//hair2
	
	noStroke();
	fill(253,108,1);
	rectMode(CORNER);
	fill(248,134,35);
	quad(width/2-33,height/2+50,width/2-15,height/2,width/2+15,height/2,width/2+33,height/2+50);
	fill(241,87,1);
	rect(width/2-15,height/2-105,30,155);
	//inside face

	noFill();
	strokeWeight(4);
	stroke(a,b,c);
	ellipse(width/2,height/2-20,facewidth,faceheight);
	//outerfaceline

	noFill();
	strokeWeight(2);
	stroke(b,a,c);
	beginShape();
	curveVertex(width/2,height/2+50);
	curveVertex(width/2,height/2+52);
	curveVertex(width/2+30+beardlengthx,height/2+38+beardlengthy);
	curveVertex(width/2+70+beardlengthx,height/2+40+beardlengthy);
	curveVertex(width/2+80+beardlengthx,height/2+50+beardlengthy);
	endShape();
	beginShape();
	curveVertex(width/2,height/2+50);
	curveVertex(width/2,height/2+52);
	curveVertex(width/2+30+beardlengthx,height/2+48+beardlengthy);
	curveVertex(width/2+70+beardlengthx,height/2+50+beardlengthy);
	curveVertex(width/2+80+beardlengthx,height/2+60+beardlengthy);
	endShape();
	beginShape();
	curveVertex(width/2,height/2+50);
	curveVertex(width/2,height/2+52);
	curveVertex(width/2-30-beardlengthx,height/2+38+beardlengthy);
	curveVertex(width/2-70-beardlengthx,height/2+40+beardlengthy);
	curveVertex(width/2-80-beardlengthx,height/2+50+beardlengthy);
	endShape();
	beginShape();
	curveVertex(width/2,height/2+50);
	curveVertex(width/2,height/2+52);
	curveVertex(width/2-30-beardlengthx,height/2+48+beardlengthy);
	curveVertex(width/2-70-beardlengthx,height/2+50+beardlengthy);
	curveVertex(width/2-80-beardlengthx,height/2+60+beardlengthy);
	endShape();
	//beard

	noStroke();
	fill(253,108,1);
	arc(width/2,height/2+50,70,70,0,PI,CHORD);
	fill(a,b,c);
	arc(width/2,height/2+50,30,30,0,PI,CHORD);
	//nose

	strokeWeight(line);
	stroke(250);
    fill(0);
    ellipse(width/2-facewidth*0.25,height/2-20,eyesize,eyesize);
    ellipse(width/2+faceheight*0.25,height/2-20,eyesize,eyesize);
    //eyes

}
function mousePressed(){
    eyesize = random(0,20);
    earwidth = random(10,60);
    earheight = random(10,80);
    hairx = random(200,240);
    hairy = random(400,440);
    a = random(0,15);
    b = random(50,200);
    c = random(50,100);
    line = random(1,7);
    beardlengthx = random(0,30);
    beardlengthy = random(0,20);

}

For this assignment, I drew lion’s face with variables for eye size, ear size, hair style, hair color, and length of beard. Background also fades alway as soon as a person presses the mouse and it reappears for each mouse click, which I wanted to highlight each variable face of the lion. For this assignment I challenged to use curveVertex to depict the smooth curve for lion’s beard.