Sarah Yae Project 6 Section B

sketch

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

function draw() {
    
    var H = hour();
    var M = minute();
    var S = second();

//Sky gets lighter with an hourly increment 
    background (0, 10 * H, 255);

//Sun moves position with the minute
    fill (250,218,94); 
    noStroke();
    ellipse (M * 5, 50, 50, 50);

//Cloud floats with the second
    fill('White');
    noStroke();
    arc(20 + S * 4,100,30,30, PI/2, 3*PI/2);

    fill('White');
    noStroke();
    arc(30 + S * 4,85,30,30, 3*PI/4, (3*PI/4) + 3*PI/2);

    fill('White');
    noStroke();
    arc(50 + S * 4,85,30,30, 3*PI/4, (3*PI/4) + 3*PI/2);

    fill('White');
    noStroke();
    arc(60 + S * 4,100,30,30, 3*PI/2, PI/2);

    fill ('White');
    noStroke();
    rect(20 + S * 4,85,40,30);

//Sand 
    fill (225,191,146);
    rect (0, 190, width, height);

//Sand particles
    for (var x = 0; x < width; x += 10) {
        for (var y = 210; y < height; y += 20) {
           textSize (25);
            fill(87,72,60);
            text ('.', x, y); 
        }   
    }
}

I originally wanted to create a project that would continuously draw stars (constellation) as the seconds go by, but as I worked on the project, realized that I wanted to move an object across- thus, I used a cloud. I had a difficult time creating a shape of the cloud, so I decided to hardcode each piece of the cloud (4 arcs + 1 rectangle). I even had a difficult time getting ideas about how I would want my abstract clock to reflect… However, I am satisfied with my final outcome and how it turned out; I especially like the smooth transition of the background, which reflects the hour. A great addition would have been if the sky reflected the actual sky color at specific hours, instead of just going from dark blue to light blue.