Sean Meng – Project 02 – Variable face

hmeng-project 2

//Sean(Han) Meng
//Section C
//hmeng@andrew.cmu.edu
//Project-02-Variables-Face

var hairColor = 20;
var hairShape = 10;
var glassThickness = 3; 
var mouthSize = 2

function setup() {
    createCanvas(480, 480);
    background(240);
 
}

function draw() {   
    background(240);

 //Left Ear
    stroke(240,224,179);
    fill(240,224,179);
    strokeWeight(1);
    strokeJoin(ROUND);
    beginShape();
    vertex(180, 240);
    vertex(167, 240);
    vertex(160, 260);
    vertex(180, 290);
    vertex(195, 300);
    vertex(195, 260);
    endShape();

//Right Ear
    stroke(240,224,179);
    fill(240,224,179);
    strokeWeight(1);
    strokeJoin(ROUND);
    beginShape();
    vertex(340, 240);
    vertex(344, 240);
    vertex(350, 260);
    vertex(330, 290);
    vertex(325, 300);
    vertex(195, 260);
    endShape();

 //Face
    stroke(255,244,189);
    fill(255,244,189);
    strokeWeight(3);
    strokeJoin(ROUND);
    beginShape();
    vertex(195, 270); 
    vertex(195, 310);  
    vertex(230, 335);  
    vertex(247, 342); 
    vertex(270, 345);
    vertex(317, 298); 
    vertex(317, 225);   
    vertex(195, 225); 
    endShape();

 //The color of hair changes in different shades of blue randomly everytime mouse clicks
    stroke(hairColor, hairColor * 2, hairColor * 3);
    fill(hairColor, hairColor * 2, hairColor * 3);
    strokeWeight(4);
    strokeJoin(ROUND);
    beginShape();
    vertex(182.5, 262.5);
    vertex(167.5, 220);

//The silhouette of hair expands randomly everytime mouse clicks
    vertex(180 - hairShape * 2, 150 + hairShape);
    vertex(250, 127.5 - hairShape * 2);
    vertex(317.5 + hairShape / 2, 150 - hairShape / 2);
    vertex(340 + hairShape * 2, 202.5 - hairShape * 2);
    vertex(328, 263.25);
    vertex(322, 265.25);
    vertex(317.5, 225);
    vertex(198, 231);
    vertex(280, 225);
    vertex(255, 235);
    vertex(240, 230);
    vertex(230, 235);
    vertex(197, 230);
    vertex(195, 270);
    vertex(182.5, 262.5);
    endShape();

//The thickness of the glasses frame varies everytime mouse clicks
    stroke(0);
    strokeWeight(3);
    fill(255);
    strokeWeight(glassThickness);
    arc(225, 265, 42, 37, 0, PI + PI);
    fill(255);
    arc(285, 265, 42, 37, 0, PI + PI);
    stroke(150);
    strokeWeight(3);
    curve(246, 263, 246, 260, 260, 260, 282, 263);
    stroke(0);
    strokeWeight(3);
    line(195, 260, 205, 260);
    line(305, 260, 319, 260);

//Nose
    strokeWeight(2);
    line(255, 270, 250, 300);
    line(250, 300, 255, 300);

//The size of the mouth increases when mouse clicks
    noStroke();
    fill(240,214,159);
    triangle(240 - mouthSize, 325, 273 + mouthSize, 325, 250, 320 - mouthSize);
}


function mousePressed(){
    hairColor = random(0, 80);
    hairShape = random(5, 30);
    glassThickness = random(3, 7);
    mouthSize = random(2, 10);
}

In this project, I explored with interactive component “mousePressed” to assign random variables such as color or shape to my drawings. In this drawing, I was inspired by the character in Rick and Morty, so the hair varies in shades of blue and expand outwards.