yushano_Project 06 – Abstract Clock

sketch

var xS = []; //for seconds
var yS = [];
var xM = []; //for minutes
var yM = [];
var xL = []; //for hours
var yL = [];
var dxS = []; // velocity in x direction 
var dyS = []; // velocity in y direction
var dxM = []; 
var dyM = []; 
var colS = []; //color array
var colM = [];
var colL = [];
var smR = 15;
var mdR = 25;
var lgR = 35;

function setup() {
    createCanvas(480, 480);  
    
	for (var i = 1; i < 61; i++) { // for loop initializing 60 seconds
        xS[i] = random(width/3+smR,width/3*2-smR);
        yS[i] = random(height/3+smR,width/3*2-smR);
        dxS[i] = random(-5, 5);
        dyS[i] = random(-5, 5);
        var colR = random(102,199);
        var colScale = (colR-137)/(199-137);
        colS[i] = color(colR, 85+(173-85)*colScale, 96+(190-96)*colScale);
    }
    
    for (var i = 1; i < 61; i++) { // for loop initializing 60 minutes
        xM[i] = random(mdR,width-mdR);
        yM[i] = random(mdR,height-mdR);
        while (dist(xM[i],yM[i],width/2,height/2) <= width/4+mdR/2) {
        	xM[i] = random(width);
        	yM[i] = random(height);
        }
        dxM[i] = random(-5, 5);
        dyM[i] = random(-5, 5);
        var colR = random(99,179);
        var colScale = (colR-99)/(179-99);
        colM[i] = color(colR, 59+(143-59)*colScale, 61+(145-61)*colScale);
    }

    for (var i = 1; i < 25; i++) { // for loop initializing 24 hrs
        xL[i] = random(lgR,width-lgR);
        yL[i] = random(lgR,height-lgR);
        while (dist(xL[i],yL[i],width/2,height/2) <= width/4+lgR/2) {
        	xL[i] = random(width);
        	yL[i] = random(height);
        }
        dxM[i] = random(-3, 3);
        dyM[i] = random(-3, 3);
        var colR = random(151,232);
        var colScale = (colR-151)/(232-151);
        colL[i] = color(colR, 120+(215-120)*colScale, 157+(241-180)*colScale);
    }
}

function draw() {
	var H = hour();
	var M = minute();
	var S = second();
	var cirC = [];
	
	background(241,227,228);
	noStroke();
	fill(235,219,204);
	ellipse(width/2, height/2,width/2);
	
    frameRate(4);
	for (var i = 1; i < S+1; i++) {  //for each ellipse - seconds
        fill(colS[i]);
        ellipse(xS[i], yS[i], smR);
        xS[i] += dxS[i];
        yS[i] += dyS[i];
		if (dist(xS[i],yS[i],width/2,height/2)>=width/4-smR/2) {
        	dxS[i] = - dxS[i];
        	dyS[i] = - dyS[i];        	
        }
	}
	for (var j = 1; j < M+1; j++) { //for each ellipse - minutes
		fill(colM[j]);
		ellipse(xM[j], yM[j], mdR);
		xM[j] += dxM[j];
		yM[j] += dyM[j];
		if (dist(xM[j],yM[j],width/2,height/2) <= width/4+mdR/2) {
        	dxM[j] = - dxM[j];
        	dyM[j] = - dyM[j];
        } else if (xM[j]+mdR>width || xM[j]-mdR<0){
        	dxM[j] = - dxM[j];
        	dyM[j] = - dyM[j];
    	} else if (yM[j]+mdR>width || yM[j]-mdR<0){
    		dxM[j] = - dxM[j];
    		dyM[j] = - dyM[j];
    	}
        
	}
	for (var j = 1; j < H+1; j++) { //for each ellipse - hours
		fill(colL[j]);
		ellipse(xL[j], yL[j], lgR);
		xL[j] += dxM[j];
		yL[j] += dyM[j];
		if (dist(xL[j],yL[j],width/2,height/2) <= width/4+lgR/2) {
        	dxM[j] = - dxM[j];
        	dyM[j] = - dyM[j];
        } else if (xL[j]+lgR>width || xL[j]-lgR<0){
        	dxM[j] = - dxM[j];
        	dyM[j] = - dyM[j];
    	} else if (yL[j]+lgR>width || yL[j]-lgR<0){
    		dxM[j] = - dxM[j];
    		dyM[j] = - dyM[j];
    	}
        
	}
	
	

}

For my project, I used the amount of circles to represent the time. Then central circle represents the seconds that are randomly distributed within the circle. The circles outside of the central circle represents the minutes. The other larger moving circles represent the hours. They have different moving velocity to show the difference among them.