Eliza Pratt – abstract clock

sketch

/*
Eliza Pratt
Section E
elpratt@andrew.cmu.edu
Project-06
*/


var fluffX = []; // x position of fixed seeds
var fluffY = []; // y position of fixed seeds
var angle = 0; //angle of fixed seeds

var looseX = []; //x position of floating seeds
var looseY = []; //y position of floating seeds
var dir = []; //direction of floating seeds
var w = 3; //width of fluff

var centerX = []; //x center of each hour stem
var centerY = []; // y center of each hour stem


function setup() {
    createCanvas(480, 380);

    //fills arrays for fixed and floating 
    //seed positions with random numbers
    for (var i = 0; i < 60; i++) {

        //converts angle to distribute fixed seeds around the stem
        var min = 270 + map(angle, 0, 60, 0, 360);
        angle++;

        //positions for fixed seeds
        fluffX[i] = random(20, 30)*cos(radians(min));
        fluffY[i] = random(20, 30)*sin(radians(min));

        //positions for floating seeds
        looseX[i] = random(0, width);
        looseY[i] = random(0, height);

        //direction of floating seeds
        dir[i] = random(-0.5, 0.5);

    }

    var x = 28; //starting position for first stem

    //fills array for stem position
    for (var i = 0; i < 12; i++) {
        centerX[i] = x;
        x+= 38
        if (i % 2) { 
            centerY[i] = random(80, 170);
        }
        else {
            centerY[i] = random(180, 260);
        }

    }

}


function draw() {
    background("lightBlue");
    drawSeed(); //draws fixed seeds
    drawFloat(); //draws floating seeds
    drawStem(); //draws stems

}


//draws fixed and minute-based seeds
function drawSeed() {
    stroke(255);
    if (hour() == 12 || hour() == 0) {
        var flowerX = 12;
    }
    else {
        var flowerX = hour() % 12;
    }

    //draws seeds around hours that have not passed
    for (var j = 12; j >= flowerX; j--) {
        for (var i = 0; i < 60; i++) {
            stroke(240);
            line(centerX[j] + fluffX[i], centerY[j] + fluffY[i], centerX[j], centerY[j]);
            noStroke();
            ellipse(centerX[j] + fluffX[i], centerY[j] + fluffY[i], w, w);
        }
    }

    //draws seeds around hour stem corresponding to the current minute
    //depletes one seed for every minute passed
    for (var i = 60; i > minute(); i--) {
        stroke(240);
        line(centerX[flowerX - 1] + fluffX[i], centerY[flowerX - 1] + fluffY[i], centerX[flowerX - 1], centerY[flowerX - 1]);
        noStroke();
        ellipse(centerX[flowerX - 1] + fluffX[i], centerY[j] + fluffY[i], w, w);
        
    }
}


//draws floating seeds corresponding to current second
function drawFloat() {
    noStroke();

    //adds floating seed at random position for each second passed
    for (var i = 0; i < second(); i++) {
        ellipse(looseX[i], looseY[i], w, w);

        //assigns each seed a direction
        looseX[i] += dir[i];
        looseY[i] += dir[i + 1];

        //resets seed position if it floats off the canvas
        if (looseX[i] > width) looseX[i] = 0;
        else if (looseX[i] < 0) looseX[i] = width;
        if (looseY[i] > height) looseY[i] = 0;
        else if (looseY[i] < 0) looseY[i] = height;
    }
}


//draws stems and centers
function drawStem() {
    stroke(255);
    for (var i = 0; i < 12; i++) {
        line(centerX[i], centerY[i], centerX[i], centerY[i] + height);
        ellipse(centerX[i], centerY[i], 8, 8);
    }

}

How to read: The 12 stems represent hours, and the seeds that are positioned around them are the minutes. The seeds deplete each minute around the stem corresponding to the current hour. The loose bits of fluff appear each second and float aimlessly until they reset each minute.

This has been my favorite assignment so far! Learning about arrays has made many of my ideas more tangible. I knew for this assignment that I wanted to do something pictorial, and I originally considered using balloons or planets. Nevertheless, I’m very happy with how this clock turned out.
Early sketches: