Project 2: Variable Faces

For this self Portrait, I tried to learn more about static tools like the arc and Curve Vertex, as well as varying tools that change color, shape, positioning depending on a number of conditions. Over the process of creating the piece, I began to like the limits created with horizontal/vertical movement of the mouse.

sketch 

//Graham Murtha Section A
// MAKE SURE TO MOVE THE MOUSE DOWN TO THE BOTTOM :)
var eyeSize = 40;
var earSize = 50

var skinR = 160
var skinG = 20
var skinB = 160

var shirtR = 150
var shirtG = 150
var shirtB = 0


function setup() {
    createCanvas(350, 500);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {

    if (mouseX < width/2) {
        if (mouseY < height/2) {
            background(140,20,140); //purple 1
        } else {
            background(100,10,150); // purple 2
        }
    } else {
        if (mouseY < height/2) {
            background(170,50,170); // purple 3
        } else {
            background (200,20,140); //purple 4
        }
    }                                   // BACKGROUND
    
    fill(skinR,skinG,skinB);
    strokeWeight(2);
    stroke(1);
    ellipse(250, 216, earSize, earSize*1.66) //ear left
    ellipse(97,216,earSize,earSize*1.66)   //ear Right

    fill(shirtR,shirtG,shirtB)
    triangle(175,400,350,500,0,500) // SHIRT


    fill(skinR,skinG,skinB);
    beginShape();
    curveVertex(175, 175);
    curveVertex(175, 75);
    curveVertex(300, 375);
    curveVertex(175,470);
    curveVertex(50, 375);
    curveVertex(175, 75);
    curveVertex(175, 175);
    endShape();       // HEAD SHAPE

    fill(255,141,176)
    rect(110.17,60.72,129,133.3);
    strokeWeight(4)
    arc(175,191,160,30,0,3.14159265); // hat

    
    fill(255,255,240);
    noStroke()
    ellipse(125,270,eyeSize,eyeSize*.75); // eye 1
    ellipse(230,270,eyeSize,eyeSize*.75); // eye 2

    fill(255,0,255);
    noStroke()
    if(mouseX < width/3){
    ellipse(125,270,10,10); // pupil 1a
    ellipse(230,270,10,10); // pupil 1b
    }
    if(mouseX >= width/3 & mouseX < (2*width)/3){
        rect(120,265,10,10); //pupil 2a
        rect(225,265,10,10); //pupil 2b
    }
    if(mouseX >= (2*width)/3){
        triangle(120,265,130,265,125,275); //pupil 3a
        triangle(225,265,235,265,230,275); //pupil 3b
    }


    if (mouseY < height/1.2) {
            fill(0,0,0);
            ellipse(175,400,(mouseX/6),(mouseY/9)); // open, moving mouth
            } else {
                stroke(1)
                strokeWeight(4);
            line(125,400,225,400); // closed mouth
        }
    
    if (mouseY < height/1.2) {
            arc(125,210,30,10,3.14159265,0) //normal brow 1
            arc(230,210,30,10,3.14159265,0) //normal brow 2
            } else {
                fill(skinR,skinG,skinB)
            arc(125,265,50,30,3.14159265,0) // angry brow 1
            arc(230,265,50,30,3.14159265,0) // angry brow 2
        }

    if (mouseY > height/1.2) {
            arc(125,278,50,30,0,3.14159265) // eyebag 1
            arc(230,278,50,30,0,3.14159265) //eyebag 2
            }

    
 
}

function mousePressed() {
    eyeSize = random(20, 60);
    earSize = random(40,80);
    skinR = random(150,240);
    skinG = random(10,60);
    skinB = random(150,240);
    shirtR = random(140,255);
    shirtG = random(140,255);
    shirtB = random(0,10);

}

Leave a Reply