Month: September 2019

sketch

// Yinjie Tian
// yinjiet@andrew.cmu.edu
// Section D
// Project 02

var earSize = 20
var hairColor = 0
var glassSize = 45
var pocketPosition = 450
var rgb1 = 250
var rgb2 = 250
var rgb3 = 250
var mouthSize = 30

function setup() {
    createCanvas(600, 600);
    background(180);
 
}

function draw() {   
//Background
    stroke(0);
    fill(rgb1, rgb2, rgb3);
    rect(80, 50, 80, 550);
    fill(rgb2, rgb1, rgb3);
    rect(110, 80, 140, 520);
    fill(rgb3, rgb1, rgb2);
    rect(300, 100, 200, 500);
    fill(rgb1, rgb3, rgb2);
    rect(160, 170, 300, 430);
    fill(rgb2, rgb3, rgb1);
    rect(400, 200, 200, 400);

//Neck
    noStroke();
    fill(230,214,169);
    quad(240, 310, 235, 370, 320, 370, 315, 310);

//Ears
    stroke(240,224,179);
    fill(240,224,179);
 
    rect(195, 240, earSize, 40, 10);
    rect(340, 240, earSize, 40, 10);

//Face
    stroke(255,244,189);
    fill(255,244,189);
    strokeWeight(3);
    
    beginShape();
    vertex(210, 270); 
    vertex(210, 310);  
    vertex(250, 335);  
    vertex(310, 335); 
    vertex(340, 310); 
    vertex(340, 225);   
    vertex(215, 225); 
    endShape();

//Hair
    stroke(0);
    fill(hairColor);
    strokeWeight(4);

    beginShape();
    vertex(190, 220);
    vertex(205, 150);
    vertex(270, 125);
    vertex(338, 150);
    vertex(360, 218);
    vertex(342, 235);
    vertex(330, 235);
    vertex(290, 225);
    vertex(250, 235);
    vertex(217, 230);
    vertex(210, 230);
    endShape();

//Glasses
    stroke(225, 215, 0);
    strokeWeight(3);
    fill(255);
    rect(220, 240, glassSize, glassSize, 15);
    rect(288, 240, glassSize, glassSize, 15);
    line(265, 250, 288, 250);

//Nose
    stroke(0);
    strokeWeight(2);
    line(275, 280, 270, 300);
    line(270, 300, 275, 300);

//Mouth
    noStroke();
    fill(290,214,159);
    ellipse(290, 320, mouthSize, 10);

//Jacket
    stroke(0, 0, 0);
    fill(0, 0, 0);
    strokeWeight(4);
    beginShape();
    vertex(150, 365);
    vertex(90, 480);
    vertex(90, 600);
    vertex(430, 600);
    vertex(490, 480);
    vertex(410, 365);
    endShape();  

//Pocket
    stroke(255,165,0);
    rect(190, pocketPosition, 50, 60);

}

function mousePressed() {
    
    earSize = random(15, 30);
    hairColor = random(0, 220);
    glassSize = random(35, 55);
    pocketPosition = random(425, 475);
    rgb1 = random(0, 250);
    rgb2 = random(0, 250);
    rgb3 = random(0, 250);
    mouthSize = random(20, 50)
}

I used my portrait for project 1 as the base file. The three factors for variations I looked into were size, position and color. Based on the three factors, I created variables that can change the sizes of my nose, glasses, and mouth; alter the color of my hair and the background; reposition the pocket on my sweatshirt.

In my process of making this face, I learned a lot about using variables to code. I also experimented a lot with “else” and “if” to produce what I want to happen.

Erin Lim – Project 02

var eyeSize = 30;
var faceWidth = 260;
var faceHeight = 320;
var noseX = 275;
var noseY = 270;
var noseSize = 15;
var faceX = 300;
var faceY = 265;
var eyecolor = 255;
var pupilcolor = 0;
var lefteyeX = 250;
var eyeY = 200;
var righteyeX = 350;
var leftpupilX = 250;
var rightpupilX = 350;
var pupilY = 200;
var pupilWidth = 10;
var pupilHeight = 10;
var browHeight = 160;
var leftbrowX = 220;
var rightbrowX = 330;
var browY = 160;
var leftbrowWidth = 270;
var rightbrowWidth = 380;
var earHeight = 45;
var earY = 250;
var leftearX = 150;
var rightearX = 450;
var mouthX = 300;
var mouthY = 350;
var mouthSize = 45;
var r = 255;
var g = 241;
var b = 209;

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

function draw() {
  background(227, 103, 84);
  noStroke(0);

    fill(255, 241, 209); //face Q: HOW DO I USE VARIABLES FOR THIS?
    ellipse(faceX, faceY, faceWidth, faceHeight);

    fill(eyecolor, eyecolor, eyecolor); //left eye
    ellipse(lefteyeX, eyeY, eyeSize, eyeSize);

    fill(eyecolor, eyecolor, eyecolor); //right eye
    ellipse(righteyeX, eyeY, eyeSize, eyeSize);

    fill(pupilcolor, pupilcolor, pupilcolor); //right pupil
    ellipse(rightpupilX, pupilY, pupilWidth, pupilHeight);
    if (mouseX < width*0.33) { // HOW DO I CHANGE FACE COLOR?
        fill(255, 0, 0);
      } else if (mouseX > width*0.66) {
        fill(0, 255, 0);
      } else {
        fill(0, 0, 255);
      }

    fill(pupilcolor, pupilcolor, pupilcolor); //left pupil
    ellipse(leftpupilX, pupilY, pupilWidth, pupilHeight);
    if (mouseX < width*0.33) { // HOW DO I CHANGE FACE COLOR?
        fill(255, 0, 0);
      } else if (mouseX > width*0.66) {
        fill(0, 255, 0);
      } else {
        fill(0, 0, 255);
      }

    circle(mouthX, mouthY, mouthSize); // mouth


    stroke(0, 0, 0); // left eyebrow
    line(220, 160, 270, 160);

    stroke(0, 0, 0); // right eyebrow
    line(330, 160, 380, 160);

    fill(255, 241, 209); // left ear
    circle(150, 250, 45);

    fill(255, 241, 209); // right ear
    circle(450, 250, 45);

    fill(0);  // nose
    ellipse(275, 270, 15, 15);
    ellipse(275 + 20, 270, 15, 15);
}

function mousePressed() {

  faceWidth = random(260, 300);
  faceHeight = random(320, 400);
  eyeSize = random(10, 50);
  noseX = random(275, 300);
  noseY = random(270, 300);
  leftbrowWidth = random(270, 300);
  rightbrowWidth = random(380, 400);
}