Project 06: Abstract Clock

sketch

//Alana Wu
//ID: alanawu
//Project 06 Abstract Clock


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

function draw()
{
//color of background changes by minute
    fill (minute()*5, minute()*3 + 100, 255 - minute());
    rect (0, 0, 400, 400);

//how many curves are drawn depends on hour
    if (hour() > 0)
    {
        anenome (100, 240, 240, 10, 65);
    }
    if (hour() > 1)
    {
        anenome (200, 255, 230, 35, 53)
    }
    if (hour() > 2)
    {
        anenome (200, 0, 200, 17, 35);
    }
    if (hour() > 3)
    {
        anenome (255, 200, 230, 25, 5);
    }
    if (hour() > 4)
    {
        anenome (255, 100, 170, 30, 75);
    }
    if (hour() > 5)
    {
        anenome (100, 240, 240, 10, 65);
    }
    if (hour() > 6)
    {
        anenome (255, 255, 200, 15, 25);
    }
    if (hour() > 7)
    {
        anenome (200, 220, 50, 25, 40);
    }
    if (hour() > 8)
    {
        anenome (150, 100, 255, 10, 85);
    }
    if (hour() > 9)
    {
        anenome (0, 200, 255, 24, 30);
    }
    if (hour() > 10)
    {
        anenome (200, 180, 255, 8, 30);
    }
    if (hour() > 11)
    {
        anenome (255, 50, 50, 28, 92);
    }

//draws 3 octopi, each of which display, hour, minute, or second
    octopus(mouseX, mouseY - 25, minute());
    octopus(mouseX + 30, mouseY + 25, second());
    octopus(mouseX - 30, mouseY + 25, hour());

//while within the canvas, waves move down each second
    waveRows(constrain (second()*25 + 50, 0, height+20));

}

//grid of waves
function waveRows (start)
{
    red = 10;
    green = 100;
    blue = 255;
    for (var h = start; h < height + 60; h +=50)
    {
        row3(h);
        row4(h);
    }
}

//horizontal row of 3 waves
function row3 (y)
{
    for (var x = 85; x <= width; x += 125)
    {   
        for (var i = 5; i > 0; i--)
        {
        strokeWeight (1);
        fill (red, green, blue);
        ellipse (x, y - 25, i*20, i*20);
        red += 30;
        green += 30;
        }

        red = 10;
        green = 100;
    }
}

//horizontal row of 4 waves
function row4 (y)
{
    for (var x = 25; x <= width; x += 125)
    {   
        for (var i = 5; i > 0; i--)
        {
        strokeWeight (1);
        fill (red, green, blue);
        ellipse (x, y, i*20, i*20);
        red += 30;
        green += 30;
        }

    red = 10;
    green = 100;
    }
}

//draws colorful wavy curve
function anenome (red, green, blue, length, tilt)
{   
    push();
    translate (10, 350);
    frameRate (6);
    rotate (radians (-tilt));
    for (var n = 0; n < 10; n++)
    {
        for (var x = 0; x < length; x += .1)
        {
            noStroke();
            fill (red, green, blue);
            circle (x*20 + random (0,15), -25*cos(x) + random (0, 15), 13-x);  

        }
    }
    pop ();
}

//draws octopus w/ a color that changes by the minute
function octopus (x, y, time)
{
    noStroke();
    fill (minute()*10, 255 - minute(), 250);
    ellipse (x, y, 50, 40);
    for (var i = 0; i < 5; i++)
    {
        push();
        translate (x, y);
        rotate (radians (i*15 - 29));
        ellipse (15 - i*6.8, 22, 10, 20);
        pop();
    }
    fill (0);
    ellipse (x - 12, y + 2, 8, 8);
    ellipse (x + 12, y + 2, 8, 8);
    noFill();
    stroke(0);
    arc (x, y+7, 8, 8, 0, PI, OPEN);
    strokeWeight (1);
    textSize (10);
    text (time, x - 14, y - 6);

}

In this project, the abstract waves change by second, the three octopi reflect the time, the number of colorful curves (I was originally thinking anemone, but it really didn’t translate and I liked these anyways) change by the hour, and the colors of the background and the octopi change as the time changes.