# Eliza Pratt – abstract clock

``````/*
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

//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: