Random Time

I must say this design happened a bit by accident. I was trying to make it so that based on my clock motions, particularly of the dot that represents the second hand, that I would have moving dots around it that would change position using noise. During this process because of how I was doing my rotations using frameCount, I ended up creating this instead. I liked it so much on the second hand I used it for my hour and minute to create the moving circles. They move very fast but sometimes it will show down and the hour and minute circles will intersect and I think it is very beautiful.

sketchfile

//Georgia Miller
//15-104
//section d

var w; 
var seconds; 
var minutes;
var hours;

function setup() {
    createCanvas(480, 480);
    background(220);
    var radius = min(width, height) / 2;
    seconds = radius * 0.71; //radius measurements for circle shape
    minutes = radius * 0.5;
    hours = radius * 0.5;
    w = width / 2;
}


function draw() {
    background(255);
    var s = map(second(), 0, 60, 0, TWO_PI) - HALF_PI; //for second
    var m = map(minute() + norm(second(), 0, 60), 0, 60, 0, TWO_PI) - HALF_PI; //for minute
    var h = map(hour() + norm(minute(), 0, 60), 0, 24, 0, TWO_PI * 2) - HALF_PI; //for hour
    push();
for(var elhour = 0; elhour < 50; elhour++){ //create circles around hour circle
        //frameRate(30);
        translate(w + cos(h) * hours, w + sin(h) * hours);
        rotate(frameCount/1000);
        stroke(0)
        fill(120, 0, 120);
        ellipse(35, 0, 30, 30);
        fill(140, 0, 140);
        ellipse(0, 35, 30, 30);
        fill(160, 0, 160);
        ellipse(35, 35, 30, 30)
        fill(160, 0, 160);
        ellipse(-35, -35, 30, 30);
        fill(180, 0, 180);
        ellipse(0, -35, 30, 30);
        fill(200, 0, 200);
        ellipse(-35, 0, 30, 30);
        fill(220, 0, 220);
        ellipse(35, -35, 30, 30);
        fill(240, 0, 240);
        ellipse(-35, 35, 30, 30);
}
pop();
push();
    for(var elmin = 0; elmin < 50; elmin++){ //create circles around minute circle
        translate(w + cos(m) * minutes, w + sin(m) * minutes);
        rotate(frameCount/800);
        stroke(0)
        fill(150, 75, 0);
        ellipse(25, 0, 20, 20);
        fill(200, 100, 0);
        ellipse(0, 25, 20, 20);
        fill(250, 130, 0);
        ellipse(25, 25, 20, 20)
        fill(255, 150, 50);
        ellipse(-25, -25, 20, 20);
        fill(150, 75, 0);
        ellipse(0, -25, 20, 20);
        fill(200, 100, 0);
        ellipse(-25, 0, 20, 20);
        fill(255, 130, 0);
        ellipse(25, -25, 20, 20);
        fill(255, 150, 50);
        ellipse(-25, 25, 20, 20);
}
pop();
    push();
    for(var elsec = 0; elsec < 50; elsec++){ //create circles around second circle
        translate(w + cos(s) * seconds, w + sin(s) * seconds);
        rotate(frameCount/500);
        stroke(0)
        fill(100, 0, 0);
        ellipse(15, 0, 10, 10);
        fill(120, 0, 0);
        ellipse(0, 15, 10, 10);
        fill(140, 0, 0);
        ellipse(15, 15, 10, 10)
        fill(160, 0, 0);
        ellipse(-15, -15, 10, 10);
        fill(180, 0, 0);
        ellipse(0, -15, 10, 10);
        fill(200, 0, 0);
        ellipse(-15, 0, 10, 10);
        fill(220, 0, 0);
        ellipse(15, -15, 10, 10);
        fill(240, 0, 0);
        ellipse(-15, 15, 10, 10);
    }
    pop();
     stroke(0);
    fill(255);
    ellipse(w + cos(s) * seconds, w + sin(s) * seconds, 10, 10); //second circle
    ellipse(w + cos(m) * minutes, w + sin(m) * minutes, 20, 20); //minute circle
    ellipse(w + cos(h) * hours, w + sin(h) * hours, 30, 30); //hour circle
}

">