Category: Project-02-Variable-Face

sketch

/*
Daniel Noh
Section D
dnoh@andrew.cmu.edu
Project-02
*/

var yolkSize = 230;
var eggX = 0;
var eggY = 0;
var eggA = 0;
var eggB = 0;
var rEye = 20;
var lEye = 20;
var r = -15;
var g = -15;
var b = 15;
var bubbleSize = 30;

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

function draw() {
//fryingpanback
  stroke(0);
  strokeWeight(7);
  fill(40);
  ellipse(320, 480, 1000, 1000);
  noStroke();
  fill(60);
  ellipse(320, 480, 850, 850)

//egg white shape
  fill(240+b, 240+b, 240+b);
  stroke(0);
  strokeWeight(7);

  beginShape();
  curveVertex(100+eggX, 540+eggY);
  curveVertex(100+eggX, 540+eggY);
  curveVertex(80+eggX, 400+eggY);
  curveVertex(110+eggA, 300+eggB);
  curveVertex(200+eggB, 250+eggX);
  curveVertex(320+eggX, 150+eggA);
  curveVertex(440+eggB, 250+eggY);
  curveVertex(530+eggY, 300+eggB);
  curveVertex(560+eggX, 400+eggA);
  curveVertex(540+eggA, 540+eggB);
  curveVertex(540+eggA, 540+eggB);
  endShape();

//yolk face
  fill(255+r, 255+g, 0+b);
  stroke(0);
  strokeWeight(7);
  ellipse(320, 450, yolkSize, yolkSize);

//eyes
  fill(0);
  noStroke();
//uppereye
  ellipse(270+r, 460+r, bubbleSize+r+10, bubbleSize+r+10);
//lowereye
  ellipse(320+g, 400+r, bubbleSize, bubbleSize);

//mouth
  stroke(0);
  ellipse(340, 480, bubbleSize+20+eggA, bubbleSize+40+b);
}

function mousePressed() {
  eggX = random(-25, 25);
  eggY = random(-25, 25);
  eggA = random(-25, 25);
  eggB = random(-25, 25);
  r = random(-15, 0);
  g = random(-25, 0);
  b = random(0, 25);
  yolkSize = random(200, 230);
  bubbleSize = random(20, 25);
  clear();
}

I honestly went directly to coding only knowing that I wanted to create a dynamic egg face, so at first I was slightly confused. I plotted points down relative to the overall canvas and went from there. I reused several randomized variables for different things, which made my code a bit unorganized. However, I am content with my final product.

I really liked the googly-eyes, I feel like it added a little more dynamic to this drawing. There definitely could be more characteristics varied but I think the image should stay somewhat recognizable.

sketch

//Grace Wanying Hou
//15-104 Section D
//ghou@andrew.cmu.edu
//Assignment 02

var faceWidth = 200;
var faceHeight = 250;
var earsize = 100;
var eyesize = 20
var mouthsize = 50;

var faceround = 10;
var earround = 20;

//each of these features have 3 types that will get chosen when clicked 
var facet = 1;
var eart = 1;
var types =[1,2,3];
//colours
var facer = 255;
var faceg = 220;
var faceb = 200;
var eyer = 255;
var eyeg = 255;
var eyeb = 255;

// setting the canvas and changing rectangle mode to center
function setup() {
    createCanvas(480,640);
    rectMode(CENTER);
}


function draw() {
    //background will always be in a darker shade than the face
    background(facer-150, faceg-150, faceb-150);
    fill (facer, faceg, faceb);
    
    stroke(facer+25,faceg+25,faceb+25);
    strokeWeight(20);
    
    
    //types of ears
    if(eart == 1){
        ellipse(width/2 - faceWidth/2, height/2 - faceHeight/4, earsize*4/5, earsize);
        ellipse(width/2 + faceWidth/2, height/2 - faceHeight/4, earsize*4/5, earsize);
    }
    if(eart == 2){
        rect(width/2 - faceWidth/2, height/2 - faceHeight/4, earsize/2, earsize, earround);
        rect(width/2 + faceWidth/2, height/2 - faceHeight/4, earsize/2, earsize, earround);
    }
    if(eart == 3){
        triangle(width/2 - faceWidth/4, height/2 - faceHeight/5, width/2, height/2 - faceHeight/3, width/2 - faceWidth/3, height/2 - faceHeight/2 - earsize/2);
        triangle(width/2 + faceWidth/4, height/2 - faceHeight/5, width/2, height/2 - faceHeight/3, width/2 + faceWidth/3, height/2 - faceHeight/2 - earsize/2);
    }
    
    
    //tyes of faces
    strokeWeight(6);
    if(facet == 1){
        ellipse(width/2, height/2, faceWidth, faceHeight);
    }
    if(facet == 2){
        rect(width/2, height/2, faceWidth, faceHeight, faceround);
    }
    if(facet == 3){
        triangle(width/2 - faceWidth/2, height/2 - faceHeight/2,
		 width/2 + faceWidth/2, height/2 - faceHeight/2,
		 width/2, height/2 + faceHeight/2);
    }
    
    
    //eyes
    noStroke();
    
    //the white? part of the eye???
    fill(facer + 100, faceb + 100, faceg + 100)
    ellipse(width/2 - width/16, height/2 - height/40, eyesize*2, eyesize*2);
    ellipse(width/2 + width/16, height/2 - height/40, eyesize*2, eyesize*2);
    
    //eyeballs??
    fill(0);
    noStroke();
    var eyeballrX = constrain(mouseX, width/2 - width/16 - eyesize/3, width/2 - width/16 + eyesize/3);
    var eyeballlX = constrain(mouseX, width/2 + width/16 - eyesize/3, width/2 + width/16 + eyesize/3);
    var eyebally = constrain(mouseY, height/2 - height/40 - eyesize/3, height/2 - height/40 + eyesize/3);
    
    ellipse(eyeballrX, eyebally, eyesize, eyesize);
    ellipse(eyeballlX, eyebally, eyesize, eyesize);
    
    //mouth
    fill(facer-100, faceg-150, faceb-150);
    stroke(facer-25,faceg-25,faceb-25);
    ellipse(width/2, height/2 + faceHeight/4, faceWidth/500*mouthsize);
    
    }
 
function mousePressed() {
    faceWidth = random(150,300);
    faceHeight = random(100,350);
    facet = random(types);
    
    earsize = random(80,150);
    mouthsize = random(0,100);
    
    faceround = random(10,20);
    earround = random(5,20);

    eart = random(types);
    facer = random (100,255);
    faceg = random (100,255);
    faceb = random (100,255);
}

sketch

//Natalie Schmidt
//nkschmid@andrew.cmu.edu
//Section D
//Project-02

function setup() {
    createCanvas(640, 480);
    background(126, 204, 213);
    angleMode(DEGREES);
    noStroke();
}

//variables for the color of the fish
var r = 222
var g = 157
var b = 207
//variables for tail and eye size
var tail1 = 60
var tail2 = 130
var eyeB = 20 //for black part of eye
var eyeW1 = 8 //for large white part of eye
var eyeW2 = 5 //for small white part of eye


function draw() {
    fill(170, 220, 234);
//bubbles
    ellipse(480, 20, 40, 40);
    ellipse(450, 100, 50, 50);
    ellipse(480, 165, 30, 30);
    ellipse(440, 200, 10, 10);
//fish body
    fill(r, g ,b);
    ellipse(width/2, height/2, 160, 120);
//fish black eye
    fill(0);
    ellipse(380, 240, eyeB, eyeB);
//fish white eye
    fill(255);
    ellipse(377, 235, eyeW1, eyeW1); // large
    ellipse(385, 245, eyeW2, eyeW2); //small
//mouth
    fill(r, g, b);
    ellipse(403, 238, 12, 12); //top
    ellipse(403, 249, 12, 12); //bottom
//fish tails
    rotate(-45);
    translate(-210, -40);
    ellipse(width/3, 320, tail1, tail2); //top
    rotate(90);
    translate(170, -400);
    ellipse(width/3, 250, tail1, tail2); //bottom
}

function mousePressed() {
//when the mouse is pressed, the color changes
    r = random(0, 255);
    g = random(0, 255);
    b = random(0, 255);
//when mouse is pressed, tail and eye size changes
    tail1 = random(35, 125);
    tail2 = random(90, 175);
    eyeB = random(10, 35);
    eyeW1 = random(3, 20);
    eyeW2 = random(1, 15);
    clear();
    background(126, 204, 213);
}

sketch

For this project, the first thing that came to mind was a fish. I knew I wanted the color, eyes, and tail size to change, but the difficult part was getting the right proportions and the right angles. The initial shapes were pretty simple, because I figured experimenting with curves and rotate at the same time would be a little too complicated for me right now. I didn’t do any initial sketches, since the fish was only going to be a couple of ellipses. The image of the fish kept overlapping each other instead of replacing when I clicked my mouse, so I had to use the clear function to fix the problem; however, after THAT a chunk of the background was getting cleared too, so I filled in the background again at the very end to make it the way I wanted it to appear. I’m not sure if there was any other (better?) way to fix that problem, but this way seemed to work. All in all, I’m pretty proud of the final product!