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);
    }

}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.js
  2. https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.dom.js