Margot Gersing – Project – 01

This project was a really good way for me to get more comfortable in p5js. I enjoyed the challenge of creating a simple face made from a limited selection of graphic elements. I also enjoyed using playful colors. Lastly, I decided to include a simple mouse interaction that we learned in class on Friday to add another level of interest and introduce more colors.

margot-project01

function setup() {
    createCanvas(700,700);
    // background(255,200,0);
}

function draw() {

	// background
	noStroke();
	fill('#f4cf92');
    if(mouseIsPressed){
    	fill('#6f968e');
    }else {
    	fill('#f4cf92');
    }
	rect(0,0,700,700);

	// face
	noStroke();
	fill('#d5541a');
	if(mouseIsPressed){
    	fill('#e2babf');
    }else {
    	fill('#d5541a');
    }
    ellipse(350,350,650,650);

    // left eye
    noFill();
	stroke('#e2babf');
	if(mouseIsPressed){
    	stroke('#d5541a');
    }else {
    	stroke('#e2babf');
    }
	strokeWeight(6);
    arc(200, 250, 110, 70, PI, TWO_PI);
    fill('#e2babf');
    if(mouseIsPressed){
    	fill('#d5541a');
    }else {
    	fill('#e2babf');
    }
    ellipse(200,240,50,50);

    // left eyelashes
    strokeWeight(4);
    line(150,260,135,270);
    line(160,270,150,280);
    line(170,275,165,285);

    // right eye
    noFill();
	stroke('#e2babf');
	if(mouseIsPressed){
    	stroke('#d5541a');
    }else {
    	stroke('#e2babf');
    }
	strokeWeight(6);
    arc(500, 250, 110, 70, PI, TWO_PI);
    fill('#e2babf');
    if(mouseIsPressed){
    	fill('#d5541a');
    }else {
    	fill('#e2babf');
    }
    ellipse(500,240,50,50);

    // left eyelashes
    strokeWeight(4);
    line(550,260,565,270);
    line(540,270,550,280);
    line(530,275,535,285);

    // eyebrows
    strokeWeight(8);
    line(130,150,300,150);
    line(400,150,570,150);

    // nose
    line(300,150,300,400);
    noFill();
    arc(350,400, 100, 100, QUARTER_PI, PI);

    // mouth
    strokeWeight(10);
    line(270,560,370,560);
    arc(345,560,150,70,PI,TWO_PI);    
}