Project-02-Variable Face

sketch
function setup() {
    createCanvas(640, 600);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}
// Simple beginning template for variable face.
var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 300;
var mouthHeight = 230;
var noseHeight = 190;
 
var rface = 240;
var gface = 188;
var bface = 212;

var rmouth = 48;
var gmouth = 213;
var bmouth = 200;

var rnose = 62;
var gnose = 12;
var bnose = 94;

var reyes = 208;
var geyes = 255;
var beyes = 206;

function setup() {
    createCanvas(300, 300);
}
 
function draw() {
    background(180);


    fill (rface,gface,bface);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);


    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    fill (reyes,geyes,beyes);
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);

    fill(rmouth, gmouth, bmouth);
    arc (width/2, mouthHeight, 30, 10, TWO_PI, PI); //mouth

    fill (rnose, gnose, bnose);
    ellipse (width/2, noseHeight, 20); //nose
}
 
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(75, 150);
    faceHeight = random(200, 350);
    eyeSize = random(10, 40);
    mouthHeight = random(210, 240);
    noseHeight = random (180, 200);
    rface = random (200, 290);
    gface = random (170, 200);
    bface = random (200, 240);

}

Leave a Reply