Yoshi Torralva – Project 06 – Abstract Clock

sketch

// Yoshi Torralva
// yrt@andrew.cmu.edu
// Section E
// Project-06-Abstract Clock
function setup() {
    createCanvas(480, 480);
}
function draw() {
    background(255, 188, 0);
    var H = hour();
    var M = minute();
    var S = second();
    noStroke();
    //grass
    fill(0, 104, 47);
    rect(0,405,480, 75);
    // tree 
    fill(107, 38, 0);
    rect(376,50, 63, 300);
    fill(5, 73, 39);
    ellipse(410, 50, 300, 300);
    //Sun for Hour
    fill(255, 211, 26);
    ellipse(125, 200, 200, 200);
    fill(249, 206, 0);
    ellipse(125, 200, H * 5, H * 5);
    // plants 
    fill(5, 73, 39);
    rect(0,260,480, 145);
    //fence backing 
    fill(173, 66, 11);
    rect(0,  280, 480, 20);
    rect(0,  350, 480, 20);
    //horizon line grass
    fill(7, 63, 31);
    rect(0,400,480, 10);

    //fence for loop
    for(var i = 0; i < 59; i++) {
            fill(173, 66, 11);
            rect(i * 8.2,  250, 7, 155);
            ellipse(i * 8.2 + 3.4, 250, 7, 7);
        }
    //filled in fence for variable M
    for(var i = 0; i < M; i++) {
            fill(137, 42, 0);
            rect(i * 8.2,  250, 7, 155);
            ellipse(i * 8.2 + 3.4, 250, 7, 7);
        }
    //calling dog into canvas
    dachshund(S * 1, 0);
    //clock in the tree
    fill(0, 104, 47);
    textSize(32);
    text(H, 300, 40);
    text(M, 320, 120);
    text(S, 390, 150);
}
//dog
function dachshund (x, y) {
    push();
    translate(x, y);
    //tail
    strokeWeight(5);
    stroke(5);
    line(46, 360, 20, 385);
    noStroke();
    fill(255);
    //body
    rect(50, 357, 80, 32);
    //back
    ellipse(50, 373, 32, 32);
    //chest
    ellipse(130, 373, 32, 32);
    //back leg
    rect(34, 370, 13, 35);
    //front leg
    rect(120, 370, 10, 35);
    //paws
    ellipse(130, 402, 6, 6);
    ellipse(47, 402, 6, 6);
    //black fur front chest
    fill(0);
    arc(130, 373, 32, 32, 3 * PI / 2, PI/2, CHORD);
    //ear
    fill(73, 33, 7);
    rect(130, 340, 16, 30);
    ellipse(138,370, 16, 16);
    //head
    fill(0);
    quad(145, 340, 180, 350, 175, 365, 145, 370);
    //eyes
    fill(255);
    ellipse(155,350,6, 6);
    fill(0);
    ellipse(156,349, 4, 4);
    //spots
    fill(0);
    arc(100, 357, 40, 40, 2 * PI, PI, CHORD);
    arc(70, 389, 30, 30, PI, 2 * PI, CHORD);
    ellipse(48,370, 15, 15);
    pop();
} 

With this project, I wanted to create an abstract clock set in a scene with my dog. Planning was important before I could start making this scene with p5.js as I would need to know what shapes I would use to create my dog. In the sketch, I illustrate the shapes I will have to create. In my editor, I made my dog a function I could call to free up space in the function draw(). In terms of inserting time-based motion, the dog moves by seconds, the fence changes color to minutes, and the sun increases in size to hours. I used a loop to replicate the base fence and another for the minutes’ fence to fill in.