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.

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)
  rotate (radians(bgshift*1.75))
  noStroke();
  fill(20, 20, 50);
  rect (0, 0, height* 1.5, height *1.75)
  pop ();
  

  
}