Category: Section A

yushano-project02

var noseSize = 20;
var noseWidth = 150;
var noseHeight = 100;
var faceWidth = 250;
var faceHeight = 250;
var earX = 80;
var earY = 66;
var eyeWidth = 25;
var eyeHeight = 40;
var eyeX = 150;
var eyeY = 160;
var eyeSize = 8;
var earnoseColor = 221;

function setup() {
    createCanvas(400, 400);
}

function draw() {
    background(180,180,180);
    //draw the ears
    stroke(225,110,110);
    strokeWeight(3);
    fill(246,earnoseColor,earnoseColor);
    triangle(width/4, height/3, width/8*3, height/9*2, earX, earY);
    triangle(width/4*3, height/3, width/8*5, height/9*2, width-earX, earY);
    //draw the face
    fill(246,221,221);
    ellipse(width/2, height/2, faceWidth, faceHeight);
    //draw the eyes
    noStroke();
    fill(128,128,128);
    ellipse(width/8*3, height/5*2, eyeWidth, eyeHeight);
    ellipse(width/8*5, height/5*2, eyeWidth, eyeHeight);
    fill(250);
    ellipse(eyeX, eyeY, eyeSize, eyeSize);
    ellipse(width-eyeX, eyeY, eyeSize, eyeSize);
    //draw the nose outline
    fill(235,184,184);
    ellipse(width/2, height/5*3, noseWidth,  noseHeight);
    //draw the nose inside
    var noseLX = width/2 - noseWidth*0.25;
    var noseRX = width/2 + noseWidth*0.25;
    fill(246,earnoseColor,earnoseColor);
    ellipse(noseLX, height/5*3, noseSize, noseSize);
    ellipse(noseRX, height/5*3, noseSize, noseSize);
}

function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges.
    noseWidth = random(100, 200);
    noseHeight = random(80, 150);
    noseSize = random(10, 40);
    faceHeight = random(200, 300);
    faceWidth = random(250, 350);
    earX = random(50, 90);
    earY = random(55, 75);
    eyeWidth = random(30,45);
    eyeHeight = random(30,60);
    eyeX = random(140,160);
    eyeY = random(150,170);
    earnoseColor = random(110,221);
}

When I designed this variable face, I want it to be a cartoon and cute face. That’s why I chose to do pig.

Rachel Karp Variable Faces

//face
var faceColorR = (0);
var faceColorG = (200);
var faceColorB = (40);
var faceWidth = 200;
var faceLength = 300;
var faceOutline = (3);

//mouth
var mouthColorR = (0);
var mouthColorG = (0);
var mouthColorB = (0);
var mouthSize = 100;
var mouthOutline = (2);

//eyes
var eyeColor = (0);
var eyeStroke = (255);
var eyeSclera = (6); // strokeWeight for the eye

//canvas
var canvasColorR = (0);
var canvasColorG = (0);
var canvasColorB = (0);

function setup() {
    createCanvas(640, 480);
    angleMode(DEGREES); // Change the mode to DEGREES
}

function draw() {

    background(canvasColorR, canvasColorG, canvasColorB);

    //face
    stroke(255);
    strokeWeight(faceOutline);
    fill(faceColorR, faceColorG, faceColorB);
    ellipse(width/2, height/2, faceWidth, faceLength);

    //mouth
    strokeWeight(mouthOutline);
    fill(mouthColorR, mouthColorG, mouthColorB);
    arc(width/2, height/2+faceLength/6, mouthSize, mouthSize, 0, 160, CHORD);

    //eyes color and outline
    stroke(eyeStroke);
    strokeWeight(eyeSclera);
    fill(eyeColor);
    
    //left eye
    ellipse(width/2 - faceWidth/4, height/2-faceLength/6, 20, 20);

    //right eye
    ellipse(width/2 + faceWidth/4, height/2-faceLength/6, 20, 20);

}

function mousePressed() {

    //face color
    //When clicked, face color changes randomly.
    faceColorR = random(0,255);
    faceColorG = random(0,255);
    faceColorB = random(0,255);

    //face size
    //When clicked, face width changes randomly, and face height changes in relation.
    faceWidth = random(100, 340);
    faceLength = random(faceWidth, faceWidth*3/2);

    //mouth color
    //When clicked, mouth color changes in relation to face color.
    mouthColorR = faceColorG;
    mouthColorG = faceColorB;
    mouthColorB = faceColorR;

    //mouth size
    //When clicked, mouth size changes in relation to face width.
    mouthSize = random(10, faceWidth/3);

    //eye
    //Stroke color remains constant.
    eyeStroke = (255);
    //When clicked, the size of the sclera (strokeWeight) changes.
    eyeSclera = random(1,18);

    //face outline
    //When clicked, face outline changes in relation to sclera size.
    faceOutline = eyeSclera/2

    //mouth outline
    //When clicked, mouth outline changes in relation to sclera size.
    mouthOutline = eyeSclera/3

    //canvas
    //When clicked, canvas color changes to match mouth color.
    canvasColorR = mouthColorR;
    canvasColorG = mouthColorG;
    canvasColorB = mouthColorB;

}

This project made me have to figure out a lot of things (some with the help of Maayan Albert during office hours) including how to make colors change and how to make sure different changing shapes (eyes, mouth) could stay inside a bigger changing shape (face). Once I figured out how to make colors change, I wanted to play with that a lot to play with how different colors can affect the viewer’s emotions. I also became interested in how outlines can change the emotional quality of an image. E.g., when the white around the eyes is really big, the figure seems afraid; when the white around the whole face is heavier, the figure seems more active and zany.

sketch
For this project, I wanted to create a “cheesy” looking slice of cheddar cheese. I was having fun and going along with the metaphor as I was coding for this assignment. As my second coding project I felt I had better understanding of the code basics and syntax and I hope I can move on to more complicated ideas and codes later on.

//Scarlet Tong
//sntong@andrew.cmu.edu
//Section A
//Project 02 - Variable Face

//Cheese Slice
var rectX = 320
var rectY = 240
var rectW = 180
var rectH = 130
var rectC = 10

//Eyes
var iStrokeWeight = 5
var eyeLX = 270
var eyeLY = 210

//Mouth
var mouthX = 280
var mouthW = 2

//Heart
var heartX = 224

//Colors
var black = 0
var faceG = 220
var faceB = 151
var heartC = 130
var backgR = 215
var backgG = 244

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

}

function draw() {
  background(backgR,backgG,255);

  //Cheese slice
  fill(255,faceG,faceB);
  noStroke();
  rectMode(CENTER);
  rect(rectX,rectY,rectW,rectH,rectC);
  //left eye
  stroke(black);
  strokeWeight(iStrokeWeight);
  strokeCap(SQUARE);
  line(eyeLX,eyeLY,eyeLX+25,eyeLY-10);
  //right eye
  line(eyeLX+50,eyeLY-5,eyeLX+75,eyeLY);
  //mouth
  ellipse(mouthX,mouthX-40,mouthW,mouthW*4);
  //heart
  fill(249,heartC,heartC);
  noStroke();
  ellipse(heartX,heartX-18,20,20);
  ellipse(heartX+15,heartX-24,20,20);
  triangle(heartX-4,heartX-9,heartX+25,heartX-28,heartX+26,heartX+1);

}

function mousePressed(){
  //Change in color for the background
  backgR = random(254,215);
  backgG = random(254,244);
  //Change in weight and height of the cheese slice
  rectX = random(300,340);
  rectY = random(220,160);
  rectW = random(120,200);
  rectH = random(120,170);
  rectC = random(0,25);

  // change in size od eyes
  iStrokeWeight = random(3,8);
  eyeLX = random(265,275);
  eyeLY = random(190,220);

  //Change in location of mouth
  mouthX = random(275,280);
  mouthW = random(1,4);

  //Change of location of heart on face
  heartX = random(210,230);

  //Different shades of color for the composition
  black = random(0,254);
  faceG = random(213,187);
  faceB = random(146,77);
  heartC = random(151,51);


}