Jaclyn Saik- Project 06

sketch

/* Jaclyn Saik 
Section E
jsaik@andrew.cmu.edu
Assignment-06-Project
*/




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


function draw() {
    background("DimGray"); 
    
    // current time variables
    var H = hour();
    var M = minute();
    var S = second();

    var skin = ("OliveDrab");
    var earPositionX = 390;
    var earPositionY = 200;
    var noseW = 10;
    if ((S % 2) > 0) { //if statement that changes variables based on whether seconds are odd or even 
        earPositionX = 390; 
        earPositionY = 200;
        noseW = 10; //variable that changes nostril size
    } else if ((S % 2) == 0) {
        earPositionX = 380;
        earPositionY = 190;
        noseW = 15;
    }
   


    
    
    var lidPosition = 180-(map(H, 0, 23, 0, 180)); //position of eyelids, how wide the eyes are opened 
    var mouthSize = map(M, 0, 59, 10, 300); //map to create gradual transition in size of mouth

    
    //background elements
    noStroke(); 
    fill("DarkMagenta");
    ellipse(150, 200, 580, 690);
    fill("Purple")
    ellipse(150, 200, 480, 530);
    fill("DarkOliveGreen");
    rect(20, 300, 260, 300);


    //the face:
    fill(skin)
    ellipse(150, 200, 450, 500);

    fill("DarkOliveGreen");
    ellipse(40, 135, 140, 190)
    ellipse(230, 135, 140, 190)

    fill("white");
    ellipse(40, 130, 130, 180)
    ellipse(230, 130, 130, 180)

    fill(0);
    ellipse(40, 130, 50, 80);
    ellipse(230, 130, 50, 80);

    //mouth
    stroke("DarkGreen");
    strokeWeight(6);
    fill("black")
    arc(140, 240, 300, mouthSize, 0, PI, CHORD);
    noStroke();

    //ear 
    fill(skin);
    ellipse(earPositionX, earPositionY, 80, 100) //relies on seconds for x and y position

    //eyelids
    fill(skin)
    rect(-30, 40, 140, lidPosition); //eyelids gradually open as the hours get higher/day goes on 
    rect(160, 40, 140, lidPosition); //rely on mapped position variable declared above

    //right eyelash
    stroke(0);
    strokeWeight(4);
    line(163, 40+lidPosition, 300, 40+lidPosition+7); 
    line(163, 40+lidPosition, 310, 40+lidPosition-2);

    //left eyelash
    line(105, 40+lidPosition, -30, 40+lidPosition+7); 
    line(105, 40+lidPosition, -30, 40+lidPosition+3);
    line(105, 40+lidPosition, -30, 40+lidPosition-2);
    

    //eyebrow
    stroke("Purple");
    strokeWeight(8);
    noFill();
    arc(40, 60, 130, 60, PI, 0)
    arc(230, 60, 130, 60, PI, 0)

    //nose

    noStroke();
    fill(0);
    ellipse(125, 200, noseW, 20);
    ellipse(150, 200, noseW, 20);



}

 

This project was an interesting way to create an animation that relied on the entire length of the day to complete, instead of confined within the frame rate we usually declare. I had a lot of different ideas for representing time after browsing that blog post about the different ways that time was represented before modern clocks. I was drawn to the use of sunlight to create elaborate timekeeping sculptures: to me, they looked as much like tools as beautiful works of art.

My sketches. I played with the idea of using sunflowers and other solar imitations, but I really liked how funny a face could be. I was inspired by all of the moving features on a face to accommodate different units of time.

However, for this project  I wanted to include humor and pull myself away from using traditional numerical qualities to tell time. I decided on a face early on, and as I built this person I felt like making this project Halloween-themed is a fitting start to October. This was also my first time really manipulating the map function, which I’m grateful for because now I have a much better grasp on how to use it.

In this clock, I made the witch’s eyelids reliant on the hour: when it is very early in the morning, her eyes are barely open, but as the day progresses they get wider and wider. Her muppet mouth is reliant on the minute, so her mouth gets progressively wider as the minutes increase, and resets at zero every hour. Her ears and nostrils are designed to be more timekeeping devices, as they tick back and forth with each second.

 

Leave a Reply