juyeonk – project02 – face

sketch

var eyeSize = 20;
var upperfaceWidth = 180;
var lowerfaceWidth = 160;
var faceHeight = 240;
var eyelength = 25;
var eyewidth = 25
var earheight = 50;
var noseheight = 70;
var nostrilsize = 15;
var hornheight = 90;
var faceR = 0;
var faceG = 0;
var faceB = 0;




function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    background(96, 158, 81);
    
    var lefteyeposition = width/2 - upperfaceWidth*0.25;
    var righteyeposition = width/2 + upperfaceWidth*0.25;
    var eyeposition = height/2 - faceHeight*0.25;
    
    //face of the horse
    noStroke();
    fill(109 + faceR, 83 + faceG, 43 + faceB);
    quad(width/2 - upperfaceWidth/2, height/2 - faceHeight/2, width/2 + upperfaceWidth /2, height/2 - faceHeight/2, width/2 + lowerfaceWidth/4, height/2 + faceHeight/2, width/2 - lowerfaceWidth/4, height/2 + faceHeight/2);
    
   
    //left ear
    fill(109 + faceR, 83 + faceG, 43 + faceB);
    triangle(width/2 - upperfaceWidth/2, height/2 - faceHeight/2, width/2 - upperfaceWidth/2 + 0.25 * upperfaceWidth, height/2 - faceHeight/2, width/2 - upperfaceWidth/2 + 0.125 * upperfaceWidth, earheight);
    
    //left inner ear
    fill(0);
    triangle(width/2 - upperfaceWidth/2 + 5, height/2 - faceHeight/2, width/2 - upperfaceWidth/2 + 0.25 * upperfaceWidth - 5, height/2 - faceHeight/2, width/2 - upperfaceWidth/2 + 0.125 * upperfaceWidth, earheight * 1.25);
    
    //right ear
    fill(109 + faceR, 83 + faceG, 43 + faceB);
    triangle(width/2 + upperfaceWidth/2, height/2 - faceHeight/2, width/2 + upperfaceWidth/2 - 0.25 * upperfaceWidth, height/2 - faceHeight/2, width/2 + upperfaceWidth/2 - 0.125 * upperfaceWidth, 50);
    
    //right inner ear
    fill(0);
    triangle(width/2 + upperfaceWidth/2 - 5, height/2 - faceHeight/2, width/2 + upperfaceWidth/2 - 0.25 * upperfaceWidth + 5, height/2 - faceHeight/2, width/2 + upperfaceWidth/2 - 0.125 * upperfaceWidth, earheight * 1.25);
    
    //left eye
    fill(0);
    ellipse(lefteyeposition, eyeposition, eyewidth, eyelength);
    
    //right eye
    fill(0);
    ellipse(righteyeposition, eyeposition, eyewidth, eyelength);
    
    //nose
    fill(56, 45, 27);
    ellipse(width/2, height/2 + faceHeight/2, lowerfaceWidth * 0.7, noseheight);
    
    //left nostril
    fill(0);
    ellipse(width/2 - 0.1 * lowerfaceWidth, height/2 + faceHeight/2, nostrilsize, nostrilsize * 1.3);
    
    //right nostril
    fill(0);
    ellipse(width/2 + 0.1 * lowerfaceWidth, height/2 + faceHeight/2, nostrilsize, nostrilsize * 1.3);
    
    
    //unicorn
    //unicorn's horn
    fill(255);
    triangle(width/2, height/2 - faceHeight/2 - hornheight, width/2 - 0.1 * upperfaceWidth, height/2 - faceHeight/2, width/2 + 0.1 * upperfaceWidth, height/2 - faceHeight/2);
    
    

    
    
}
 

function mousePressed() {
    hornheight = random(0, 100);
    upperfaceWidth = random(180, 220);
    lowerfaceWidth = random(140, 240);
    faceHeight = random(220, 260);
    nostrilsize = random(15, 20);
    eyewidth = random(20, 50);
    eyelength = random(20, 30);
    faceR = random(0, 40);
    faceG = random(0, 40);
    faceB = random(0, 40);
}

I tried to program it so that the species of the horse would change when you click on it.
At first I tried to input three types of horses: a regular one, a unicorn, and a pegasus to make the horn pop up if the horse is a unicorn and make the wings pop up if the horse is a pegasus. But I had some trouble incorporating conditionals with the mouthpressed function, so I had to be satisfied with the changes in color of the horse’s skin and the and the sizes of its features. I made the range for the value of the hornheight 0-100 so that the horse would sometimes look like it doesn’t have a horn, but I hope I could make that happen by using conditionals.

Author: Claire

B.Arch Class of 2021 (Sophomore)

Leave a Reply