Emma NM-Project-06(Abstract Clock)

abstractClock

/* 
Emma Nicklas-Morris
Section B
enicklas
Project-06 (Abstract clock)
*/

var adj = 85;
var rMin = 200; // radius of min circle
var rH = 300; // radius of hour circle
var rectW = 18;
var rectH = 8;
var totMin = 60;
var hours = 12;
var mAngle = 6; // minute angle
var hAngle = 30; // hour angle
var start;
var stop;
// for color gradient
var center = 128;
var width2 = 127;
var y = - 165; // y position of rectangle


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

function draw() {
    background("#f2f2f2");
    
    // sets the time
    var sec = nf(second(), 2);
    var min = nf(minute(), 2);
    var hourCir = hour() % hours; // accounts for a 12 hour clock, not 24 hour
    if (hourCir === 0) { // if 0, set to 12
        hourCir = numHours;
    }

    // draws the current time in the corner
    time = hourCir + ":" + min + ":" + sec; 
    textSize(20);
    fill("black");
    text(time, width - adj, adj/3);
    
    // draw hours circle
    drawHours();

    // draw minute circle
    drawMinute();
    
    // draws seconds on the outside
    drawSeconds();

}

function drawSeconds() {
    var secs = nf(second(), 2);
    var freq = .1;

    push();
    translate(width/2, height/2);
    for (var s = 0; s < 60; s ++) {
        rectMode(CENTER);

        // rotate the rectangles to make different circular patterns each second
        rotate(secs * mAngle);

        // color changes every second
        noStroke();
        red = sin(freq * secs) * width2 + center;
        b = sin(freq * secs + 2) * width2 + center;
        g = sin(freq * secs + 4) * width2 + center;
        fill(red, g, b);

        // draws rectangles
        rect(0, y, rectW, rectH);
            
    }

    pop();
}

function drawMinute() {
    // set minute value
    var mins = nf(minute(), 2);
    push();
    translate(width/2, height/2); // put in center of canvas
    noStroke();

    // // angles to get the left side of the purple wedge at 12 o'clock
    var top = 270;
    pAngle = mins / totMin; // slowly rotates circle constantly
    // smooth rotation for the minute 
    currAngle = mins * mAngle + (mAngle * pAngle);
    rotate(radians(currAngle + top));
    for (var m = 0; m < 360; m += 6) {
        var freq = .1;
        if (m === 0) { // if its the first wedge, start at 0
            start = 0;
        }
        else { // set the start position to the previous wedge's stop position 
            start = stop;
        }
        stop = start + TWO_PI * (1 / totMin); // sets the current wedge's stop position
        
        // colors based on sin wave to make rainbow
        i = m / 6;
        red = sin(freq * i) * width2 + center;
        b = sin(freq * i + 2) * width2 + center;
        g = sin(freq * i + 4) * width2 + center;
        fill(red, g, b);
        arc(0, 0, rMin, rMin, start, stop, PIE);
    }
    pop();
}

function drawHours() {
    //set the hour and minutes
    var hCir = hour() % hours;
    var mins = nf(minute(), 2);
    
    push();
    translate(width/2, height/2); // put in center of canvas
    noStroke();

    // angles to get the left side of the purple wedge at 12 o'clock
    var top = 270;
    partAngle = mins / totMin; // slowly rotates circle constantly
    // smooth rotation for the hour
    currAngle = hCir * hAngle + (hAngle * partAngle);
    rotate(radians(currAngle + top));

    // draws the 12 wedges
    for (var h = 0; h < 360; h += 30) {
        var freq2 = .2;
        if (h === 0) { // if its the first wedge, start at 0
            start2 = 0;
        }
        else { // set the start position to the previous wedge's stop position 
            start2 = stop2;
        }
        stop2 = start2 + TWO_PI * (1 / hours); // sets the current wedge's stop position
        
        // colors based on sin wave to make rainbow
        hWedge = h / 12;
        red2 = sin(freq2 * hWedge) * width2 + center;
        blue = sin(freq2 * hWedge + 2) * width2 + center;
        green = sin(freq2 * hWedge + 4) * width2 + center;
        fill(red2, green, blue);
        arc(0, 0, rH, rH, start2, stop2, PIE);
    }
    pop();
}

For this project I knew I wanted to use something with colors and have it still be readable to some degree. I came up with the idea of having the different colors being the “numbers” on the clock. For the seconds, I was thinking of doing rectangles increasing as it goes around the circle, but what I have in my final product, I think looks “cooler.” The most difficult part was trying to get the color gradient to work how I envisioned. As you play with the frequency, the colors change. Also, for the second, I struggled to get what I originally intended, but a happy accident happened and I like my final product. You can still tell the time to some degree. At 12:00:00 both circles will have the purple wedge at the top (left side exactly at top). And the 00 seconds have one single purple rectangle at the top too.