Category: Uncategorized

sketch

function setup () {
  createCanvas(600, 600);
  headW = random(250, 450);
  headH = random(300, 450);
  noseH = random(60, 150);
  noseW = random(50, 110);
  eyeLX = 300 - (headW / 6);
  eyeRX = 300 + (headW / 6);
  eyeY = 300 - (headH / 5);
  cheekLX = 300 - (headW / 4);
  cheekRX = 300 + (headW / 4);
  cheekY = 300 + (headW / 5);
  r = random(40, 255);
  g = random(40, 255);
  b = random(40, 255);
}
function draw() {
  background(255 - r, 255 - g, 255 - b);
  fill(r, g, b);
  noStroke(0);
  ellipse(300, 300, headW, headH);
  ellipse(cheekLX, cheekY, headW / 2, headH / 2);
  ellipse(cheekRX, cheekY, headW / 2, headH / 2);

  fill(240);
  ellipse(eyeLX, eyeY, headW / 5, headH / 5);
  ellipse(eyeRX, eyeY, headW / 5, headH / 5);
  fill(230 - r, 230 - b, 230 - g);
  ellipse(eyeLX + (headW / 40), eyeY + (headH / 40), 30, 30);
  ellipse(eyeRX - (headW / 40), eyeY + (headH / 40), 30, 30);
  fill(r - 100, g - 100, b - 100);
  bezier(cheekLX, cheekY, cheekLX + headW / 4, cheekY + headH / 4, cheekRX - headW / 4, cheekY + headH / 4, cheekRX, cheekY);

  fill(r - 30, g - 30, b - 30);
  ellipse(300, 300, noseW, noseH);
  ellipse(300 - (noseW / 2), 300 + (noseH / 6), noseH / 3, noseH / 3);
  ellipse(300 + (noseW / 2), 300 + (noseH / 6), noseH / 3, noseH / 3);
}

function mousePressed() {
  headW = random(250, 450);
  headH = random(300, 450);
  noseH = random(60, 150);
  noseW = random(50, 110);
  r = random(40, 255);
  g = random(40, 255);
  b = random(40, 255);
  eyeLX = 300 - (headW / 6);
  eyeRX = 300 + (headW / 6);
  eyeY = 300 - (headH / 5);
  cheekLX = 300 - (headW / 4);
  cheekRX = 300 + (headW / 4);
  cheekY = 300 + (headW / 5);
}

sketch-50.js

var eyeSize = 50;
var faceWidth = 250;
var faceHeight = 300;
var mouthWidth = 100
var mouthHeight = 50
var flufF = 50

function setup() {
    createCanvas(640,480);
}
 
function draw() {
    background(252, 136, 3);

    //body
    fill(234, 255, 0);
    strokeWeight(5);
    ellipse(width / 2, height, faceWidth,  faceHeight);


//face
    fill(234, 255, 0);
    strokeWeight(5);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    

//eyes
    fill(255);
    stroke(0);
    strokeWeight(0);
    var eyeLX = width / 2 - faceWidth * 0.2;
    var eyeRX = width / 2 + faceWidth * 0.2;
    ellipse(eyeLX + 10, height / 2, eyeSize + 10, eyeSize);
    ellipse(eyeRX + 10 , height / 2, eyeSize + 10, eyeSize);
   
    fill(0);
    stroke(0);
    strokeWeight(0);
    var eyeLX = width / 2 - faceWidth * 0.2;
    var eyeRX = width / 2 + faceWidth * 0.2;
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);
   

//mouth
    fill(194, 66, 66);
    strokeWeight(0);
    ellipse(width / 2, height / 1.5, mouthWidth,  mouthHeight);

//fluff
    stroke(234, 255, 0);
    strokeWeight(30);
    line(width / 2.05, 80, width /2.1 , 120);

    stroke(234, 255, 0);
    strokeWeight(20);
    line(width / 2.5, 80, width /2.1 , 120);

     stroke(234, 255, 0);
    strokeWeight(10);
    line(width / 2.3, 50, width /2.1 , 120);

}


    
 
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.
    faceWidth = random(200, 250);
    faceHeight = random(250, 350);
    eyeSize = random(30, 60);
    mouthHeight = random(40, 60);
    mouthWidth = random(75, 100);
}

This is my chick! I first made variables for the values that I wanted to change. Then made a canvas and shapes. I used canvas width/height variable to control a lot of shape positioning. Finally, I set some values to random when click, and also set restraints so shapes don’t come out of the face.

sketch

//Yoshi Torralva
//Section E
//yrt@andrew.cmu.edu
//Project 02 Variable Face
    var eyeSize = 100;
    var eyemvmnt = 50;
    var faceWidth = 400;
    var faceHeight = 600;
    var hatbottom = 320;
    var hatbottomvmt = 320;
    var Qhat = 160;
    var Qhatx1y1x2y2 = 160;
    var windw = 400;
    var windh = 80;
     
    function setup() {
        createCanvas(640, 480);
    }
    function draw() {
        background(232, 253, 255);
        //wind movements 
        fill(181, 246, 255);
        noStroke();
        rect(windh, windw/4, windw, windh);
        rect(windh * 2, windw/2, windw *2, windh/2);
        rect(windh - windh, windw, windw, windh);
        rect(windh * 5, windw/3.5, windw * 3, windh/2.5);
        //face
        fill(255, 199, 15);
        ellipse(faceWidth * 0.8, faceHeight, faceWidth,  faceHeight);
        //two parts of the hat. The base and top.
        fill(5, 59, 66);
        rect(hatbottom/2, hatbottom/1.1, hatbottomvmt, hatbottom/4);
        quad(Qhatx1y1x2y2, Qhatx1y1x2y2/4, Qhatx1y1x2y2 * 3, Qhatx1y1x2y2/4, Qhat * 2.6, Qhat * 2, Qhat * 1.3, Qhat * 2);
        //variables for eyes
        var eyeL = width / 2 - faceWidth * 0.20;
        var eyeR = width / 2 + faceWidth * 0.20;
        //eye
        fill(255);
        ellipse(eyeL, eyeSize * 4.5, eyeSize, eyeSize);
        fill(255);
        ellipse(eyeR, eyeSize * 4.5, eyeSize, eyeSize);
       //pupil
        fill(0);
        ellipse(eyeL, eyeSize * 4.6, eyemvmnt,eyemvmnt);
        ellipse(eyeR, eyeSize * 4.6, eyemvmnt,eyemvmnt);
    }
     
    function mousePressed() {
        faceWidth = random(370, 450);
        //only used to animate the width of the hat for perspective 
        //only changes the first two quadrants of the top hat to keep the parts connected
        Qhatx1y1x2y2 = random(200,330);
        eyemvmnt = random(40,60);
        hatbottomvmt = random(350,400);
        windh = random(20,100);
        windw = random(200, 1000);
    }

With this project, I focused on using random() to create movement and slight perspective shifts within the piece. With the face, only certain variables were animated to create a similar perspective shift to the hat. Rectangles in the background add depth and additional visual cues of wind as the hat jolts to the right side of the screen.