selinal-Project-06

sketch

//Selina Lee
//Section C
//selinal@andrew.cmu.edu
//Project-06

var prevSec;
var millisRolloverTime;
var centX = 300; //center coordinates
var centY = 300;
var numcirc = 12; // number of circles to draw 
var distanceS = 250; //distance away from center with second pi clock 
var distanceM = 225; //distance away from center with minute pi clock 
var distanceH = 175; //distance away from center with hour pi clock 
var angle = 0;  //start angle for circle rotation

function setup() {
    createCanvas(600, 600);

    millisRolloverTime = 0;
}

function draw() {
	background(170, 170, 255);

	// Fetch the current time
    var H = hour();
    var M = minute();
    var S = second();
    
    // Reckon the current millisecond, 
    // particularly if the second has rolled over.
    // Note that this is more correct than using millis()%1000;
    if (prevSec != S) {
        millisRolloverTime = millis();
    }
    prevSec = S;
    var mils = floor(millis() - millisRolloverTime);
    
    var hourArcAngle   = map(H, 0, 23, 0, 360); //angles away from 0 or 12 o'clock
    var minuteArcAngle = map(M, 0, 59, 0, 360);
    
    // Make a bar which *smoothly* interpolates across 1 minute.
    // We calculate a version that goes from 0...60, 
    // but with a fractional remainder:
    var secondsWithFraction   = S + (mils / 1000.0);
    var secondsWithNoFraction = S;
    //var secondBarWidthChunky  = map(secondsWithNoFraction, 0, 60, 0, width);
    var secondArcAngleSmooth  = map(secondsWithFraction,   0, 60, 0, width);
    
    var strike = radians(270); //so that arcs start at 12:00 placement

    var alphaincS = map(S, 0, 59, 0, 155); //increase transparency from full circle
    var alphaincM = map(M, 0, 59, 0, 105); 
    var alphaincH = map(H, 0, 23, 0, 105);

    noStroke();
    fill(255, 230, 130, 100 + alphaincS);
    arc(centX, centY, 500, 500, strike, radians(secondArcAngleSmooth) + strike); //yelllow outside circle for seconds

    fill(255, 180, 130, 150 + alphaincM);
    arc(centX, centY, 450, 450, strike, radians(minuteArcAngle) + strike); //orange circle for minutes

    fill(255, 150, 130, 150 + alphaincH);
    arc(centX, centY, 350, 350, strike, radians(hourArcAngle) + strike); //red circle for hours by 24

    var angleObjectS = 360/numcirc; //divides circles evenly on outside
	for (var i = 0; i < numcirc; i++) //for loops for making circles revolve around center point
	{
		var posX = centX + distanceS *cos( radians(angleObjectS*i + angle) );
	var posY = centY + distanceS *sin( radians(angleObjectS*i + angle) );
	fill(255, 0, 0, 50);
	ellipse(posX, posY, 30, 30);
	}

	var angleObjectM = 360/numcirc;
	for (var i = 0; i < numcirc; i++)
	{
	var posX = centX + distanceM *cos( radians(angleObjectM*i + angle) );
	var posY = centY + distanceM *sin( radians(angleObjectM*i + angle) );
	fill(255, 150, 0, 50);
	ellipse(posX, posY, 30, 30);
}
	var angleObjectH = 360/numcirc;
	for (var i = 0; i < numcirc; i++)
	{
	var posX = centX + distanceH *cos( radians(angleObjectH*i + angle) );
	var posY = centY + distanceH *sin( radians(angleObjectH*i + angle) );
	fill(255, 255, 0, 50);
	ellipse(posX, posY, 30, 30);
}
}