Project 6: Abstract Clock

For my project, I decided to create an abstract clock that tells the time through an animated frog. In this project, the frog slow closes its eyes following every passing second, and when a minute passes its eyes jump back to their starting position. The background itself is programmed to change subtly for every minute that passes. At the bottom of the canvas are blades of grass, one representing each hour that has already passed in the day.

sketch frog

var flyX = 225;
var flyY = 0;

function setup() {
    createCanvas(480, 480);
    background(255, 220, 220);
    ellipseMode(CENTER);
    rectMode(CENTER);
}

//function that draws the frog on canvas
function frog(){
//frog body
    stroke(163, 207, 144);
    fill(163, 207, 144);
    quad(20, 480, 460, 480, 340, 308, 140, 308);
//frog head
    stroke(176, 217, 159);
    fill(176, 217, 159);
    ellipse(width/2, height/2, 360, 302);
    ellipse(130, 130, 126, 120);
    ellipse(350, 130, 126, 120);
//frog blush
    stroke(240, 142, 117)
    fill(240, 142, 117);
    ellipse(70, 218, 83, 46);
    ellipse(410, 218, 83, 46);
}

//function for the flies that surround the frog
function flies(x, y){
    translate(width/2, height/2)
    for(var i = 0; i < 24; i++){
        push();
        rotate(TWO_PI*i/24);
        fill(0);
        rect(x, y, 1, 1);
        pop();
        }
    for(var i = 0; i < 12; i++){
        push();
        noStroke();
        fill(0);
        rotate(TWO_PI*i/12);
        rect(x, y, 5, 5)
        pop();
    }
}

function grass(){
    var x = 0;
    var hr = hour();
    for(var x = 0; x <= 20*(hr-1); x += 20){
        fill(61, 118, 37);
        triangle(x, 480, x+20, 480, x+10, 460);
    }
}

function draw() {
//initializaing variables for time
    var sec = second();
    var min = minute();
    var hr = hour();
    var eyeX = 56;
    var eyeY = 66;

    background(min*5, min*3.5, min*3);
//draws the frog on to the canvas
    frog(); 
//draws blades of grass on canvas that represent the hour of the day
    noStroke();   
    grass();
//frog mouth and eyes
    stroke(0);
    strokeWeight(2);
    fill(0);
    ellipse(350, 140, eyeX, eyeY-sec**1);
    ellipse(130, 140, eyeX, eyeY-sec**1);
    line(210, 168, 270, 168);
//calling function to draw flies
    flies(flyX, flyY);
    flyX += random(-1, 1);
    flyY += random(-1, 1);
//draws blades of grass
}