# Project 3: Dynamic Drawing

For this week’s project, I wanted to visualize my (poor) sleep schedule with code. I realized through my time in college that I work better at night, but this makes it hard for me to function normally in the daytime.

night:day
``````var faceWidth;

function setup() {
createCanvas(450, 650);

}

function draw() {
//sky color shift
if (mouseX>= width/2.2) {
background (255, 243, 170);//daytime
} else {
background (66, 56, 148); //nighttime
}

//base figure
var faceWidth = width/2;
push();
noStroke();
fill(20, 20, 50) //facecolor
var faceShift = constrain(mouseX, 150, 500);
ellipse (width/2, height/2, faceWidth, faceWidth);
//body
rectMode(CENTER);
rect (width/2, height/2 + 300, faceWidth, 420, 50, 50,0, 0);
pop();

//moon
var moonX = constrain(mouseX, width/4, width/2);
if (mouseX<width/2.5){
noStroke();
fill(66, 98, 167);
ellipse(moonX, height/5, faceWidth/2, faceWidth/2);
fill(66, 56, 148);
ellipse(moonX +30, height/5, faceWidth/2, faceWidth/2);
}
//sun
var sunX = constrain(mouseX, width- width/2, width - width/4)
if (mouseX>width/2.2){
noStroke();
fill(255, 214, 139);
ellipse(sunX, height/5, faceWidth/2, faceWidth/2);
stroke(255, 214, 139);
strokeWeight(2);
noFill();
ellipse(sunX, height/5, faceWidth/2 + 20, faceWidth/2 +20);
ellipse(sunX, height/5, faceWidth/2 + 40, faceWidth/2+40);
}

//dayface
//eyelids
var eyeWidth= faceWidth/4
push();

//eyebag droop
var bagdroop= constrain(mouseY, height/2, height/2 + faceWidth/10); //eyebag droop factor
if(mouseX>width/2){
//eyebag droop
stroke(173, 85, 255);
strokeWeight(3);
fill(218, 170, 255);
ellipse (176, height/2- faceWidth*1.5+ bagdroop, faceWidth/4, faceWidth/4)
ellipse (width- 176, height/2- faceWidth*1.5 + bagdroop, faceWidth/4, faceWidth/4)
}
pop();

//eyes
push ();
noStroke();
fill(255);
ellipse (176, height/2, eyeWidth, eyeWidth)
ellipse (width- 176, height/2, eyeWidth, eyeWidth)
pop();

//eyelid droop
var droop = constrain(mouseY, height/2- faceWidth/8, height/2);// eyelid droop factor
if(mouseX>width/2){
noStroke();
fill(20, 20, 50);
rect( 140, droop*.75+ eyeWidth/2, eyeWidth+20, eyeWidth)
rect (width- 218, droop*.75+ eyeWidth/2, eyeWidth+20, eyeWidth);
}

//pupils
push ();
noStroke();
fill(20, 20, 50);
ellipse (176, height/2, faceWidth/8, faceWidth/8)
ellipse (width- 176, height/2, faceWidth/8, faceWidth/8)
pop();

//mouth
push();
noFill();
stroke(255);
strokeWeight(10);
beginShape ();
curveVertex( width/2 -50, height/2 +40 );
curveVertex( width/2 -50, height/2 +40 );
curveVertex( width/2 -30, height/2 +55);
curveVertex (width/2, height/2 + 60);
curveVertex( width/2 +30, height/2 +55);
curveVertex( width/2 +50, height/2 +40 );
curveVertex( width/2 +50, height/2 +40);
endShape();
pop();

//sky shift
push();
var bgshift = constrain (mouseX, 120, width - width/3) //shift only happens once
translate (-50, -50)