Alec Albright – Project 06 – Abstract Clock

sketch

// Alec Albright
// aalbrigh@andrew.cmu.edu
// Section B
// Project 06

var quartPossibleTop = [] // possible upper y values for quarter notes
var quartPlacesTop = [] // actual upper y values for quarter notes
var quartPossibleBottom = [] // possible lower y values for quarter notes
var quartPlacesBottom = [] // actual lower y values for quarter notes
var halfPossibleTop = [] // possible upper y values for half notes
var halfPlacesTop = [] // actual upper y values for half notes
var halfPossibleBottom = [] // possible lower y values for half notes
var halfPlacesBottom = [] // actual lower y values for half notes
var wholePossible = [] // possible y values for whole notes
var wholePlaces = [] // actual y values for whole notes

function setup(){
    createCanvas(480, 480);
    ellipseMode(CENTER);

    // defining possible quarter note y values
    for(i = 20; i < 92; i += 8){
        quartPossibleTop.push(i);
    }
    for(i = 115; i < 185; i += 8){
        quartPossibleBottom.push(i);
    }
    // predetermines random vertical placements on the staff
    for(i = 0; i <= 30; i++){
        quartPlacesTop.push(random(quartPossibleTop));
    }
    for(i = 0; i <= 30; i++){
        quartPlacesBottom.push(random(quartPossibleBottom));
    }
    
    // defining possible half note y values
    for(i = 205; i < 275; i += 8){
        halfPossibleTop.push(i);
    }
    for(i = 300; i < 370; i += 8){
        halfPossibleBottom.push(i);
    }
    // predetermines random vertical placements on the staff
    for(i = 0; i <= 30; i++){
        halfPlacesTop.push(random(halfPossibleTop));
    }
    for(i = 0; i <= 30; i++){
        halfPlacesBottom.push(random(halfPossibleBottom));
    }
    
    // defining possible whole note y values
    for(i = 390; i < 460; i += 8){
        wholePossible.push(i);
    }
    // predetermines random vertical placements on the staff
    for(i = 0; i < 24; i++){
        wholePlaces.push(random(wholePossible));
    }
}

function draw(){
    // record current time
    var h = hour();
    var m = minute();
    var s = second();

    background("white");
    stroke("black");
    strokeWeight(1.5);

    // drawing seconds
    fill("black")
    for(i = 1; i <= s; i++){
        // draws a quarter note depending on minute
        if(i <= 30){
            // head
            ellipse(15 * i, quartPlacesTop[i], 10, 8);
            // stem
            // top half
            if(quartPlacesTop[i] < 52){
                line(15 * i + 5, quartPlacesTop[i], 15 * i + 5,
                     quartPlacesTop[i] - 15);
            // bottom half
            } else {
                line(15 * i - 5, quartPlacesTop[i], 15 * i - 5,
                     quartPlacesTop[i] + 15);
            }
        } else {
            ellipse(15 * (i - 30), quartPlacesBottom[(i - 30)], 10, 8);
            // stem
            // top half
            if(quartPlacesBottom[(i - 30)] < 147){
                line(15 * (i - 30) + 5, quartPlacesBottom[(i - 30)],
                 15 * (i - 30) + 5, quartPlacesBottom[(i - 30)] - 15);
            // bottom half
            } else {
                line(15 * (i - 30) - 5, quartPlacesBottom[(i - 30)],
                 15 * (i - 30) - 5, quartPlacesBottom[(i - 30)] + 15);
            }
        }
    }

    // drawing minutes
    fill("white")
    for(i = 1; i <= m; i++){
        // draws a half note depending on minute
        if(i <= 30){
            // head
            ellipse(15 * i, halfPlacesTop[i], 10, 8);
            // stem
            if(halfPlacesTop[i] < 237){
                line(15 * i + 5, halfPlacesTop[i], 15 * i + 5,
                     halfPlacesTop[i] - 15);
            } else {
                line(15 * i + 5, halfPlacesTop[i], 15 * i + 5,
                     halfPlacesTop[i] + 15);
            }
        } else {
            // head
            ellipse(15 * (i - 30), halfPlacesBottom[(i - 30)], 10, 8);
            // stem
            // top half
            if(halfPlacesBottom[(i - 30)] < 348){
                line(15 * (i - 30) + 5, halfPlacesBottom[(i - 30)],
                 15 * (i - 30) + 5, halfPlacesBottom[(i - 30)] - 15);
            // bottom half
            } else {
                line(15 * (i - 30) - 5, halfPlacesBottom[(i - 30)],
                 15 * (i - 30) - 5, halfPlacesBottom[(i - 30)] + 15);
            }
        }
    }

    // drawing hours
    for(i = 1; i <= h; i++){
        // draws a whole note
        ellipse(36 * i, wholePlaces[i], 10, 8);
    }   

    // drawing staves
    // seconds
    strokeWeight(1);
    drawStaff(20);
    drawStaff(115);
    // connecting
    line(10, 20, 10, 179);
    strokeWeight(3);
    line(5, 15, 5, 184);
    line(5, 15, 15, 12);
    line(5, 184, 15, 188);
    // resetting strokeweight
    strokeWeight(1);
    
    // minutes
    drawStaff(205);
    drawStaff(300);
    // connecting
    line(10, 205, 10, 364);
    strokeWeight(3);
    line(5, 200, 5, 369);
    line(5, 200, 15, 197);
    line(5, 369, 15, 372);
    // resetting strokeweight
    strokeWeight(1);

    // hours
    drawStaff(390)
}

// function to draw a staff
function drawStaff(startY){
    stroke("black");

    // draw a consistent staff
    for(i = 0; i < 80; i += 16){
        let lineY = startY + i
        line(10, lineY, width, lineY);
    }
}

In the creation of this clock, I wanted to see whether some interesting musical elements could be added, leading me to represent various elements of time by different rhythms, with notes placed randomly every increment of time. In this way, a new “piece” of music can be generated every second, with very low likelihood of being reproduced by any replication of this program due to the amount of randomness involved. Though unorthodox, this method of keeping time is certainly interesting. Particularly difficult was managing the spacing of the staves and the notes within a line, simply due to the fact that there can be as many as 30 notes on one line at a time in this representation.