var gap = 0;

function setup() {

  createCanvas(400, 1.618*400);

  startTime = second() + 60*minute() + 3600*hour();

  blendMode(ADD);

  frameRate(30);

  noStroke();

}

​

function draw() {

  if(time > 86399.9) {

    startTime=0;

    gap = millis()/1000;

  }

  time = startTime + millis()/1000- gap;

  var seconds = time - floor(time/60)*60;

  var minutes = (time - floor(time/3600)*3600)/60;

  var hours = (time - floor(time/86400))/3600;

  var red = map(hours,0,24,0,255);

  var green = map(minutes,0,60,0,255);

  var blue = map(seconds,0,60,0,255);

  var spacing = 40;

  redX = width/2;

  redY = height/2 - spacing;

  blueX = width/2 + spacing*cos(PI/6);

  blueY = height/2 + spacing*sin(PI/6);

  greenX = width/2 + spacing*cos(5*PI/6);

  greenY = height/2 + spacing*sin(5*PI/6);

  var maxRadius = 100;

  redRadius = map(red, 0,255, 0,maxRadius);

  greenRadius = map(green, 0,255, 0,maxRadius);

  blueRadius = map(blue, 0,255, 0,maxRadius);

  blendMode(BLEND);

  background(red,green,blue);

  /*fill(red,green,blue);

  triangle(width*3/8,0, width,0, width,height);

  fill(255-red,255-green,255-blue);

  triangle(width*3/8,0, width*3/8,height, width,height);*/

  drawDate();

  //background(255);

  //fill(120);

  //fill(red, green, blue);

  /*var tr = (spacing*sin(HALF_PI/3) + maxRadius)/sin(HALF_PI/3); //tri radius

  var cx = width/2;

  var cy = height/2;

  triangle(cx,cy - tr, cx+tr*cos(HALF_PI/3),cy+tr*sin(HALF_PI/3),

            cx-tr*cos(HALF_PI/3),cy+tr*sin(HALF_PI/3))*/

  ///ellipse(width/2,height/2,2*(spacing+maxRadius),2*(spacing+maxRadius));

  fill(0);

  ellipse(redX,redY, redRadius*2,redRadius*2);

  ellipse(greenX,greenY, greenRadius*2,greenRadius*2);

  ellipse(blueX,blueY, blueRadius*2,blueRadius*2);

  blendMode(ADD);

  fill(red,0,0);

  ellipse(redX,redY, redRadius*2,redRadius*2);

  fill(0,green,0);

  ellipse(greenX,greenY, greenRadius*2,greenRadius*2);

  fill(0,0,blue);

  ellipse(blueX,blueY, blueRadius*2,blueRadius*2);

  /*blendMode(BLEND);

  noFill();

  strokeWeight(1);

  stroke(255-red,255-green,255-blue);

  ellipse(redX,redY, redRadius*2,redRadius*2);

  noStroke();*/

  //blendMode(BLEND);

  //var dashes = 12;

  //var size = 4;

  /*strokeWeight(size);

  stroke(255-red,255-green,255-blue);

  line(redX,redY, redX,redY+maxRadius);

  line(blueX,blueY, 

       blueX-maxRadius*cos(HALF_PI/3),blueY-maxRadius*sin(HALF_PI/3));

  line(greenX,greenY,

       greenX+maxRadius*cos(HALF_PI/3),greenY-maxRadius*sin(HALF_PI/3));

  noStroke();*/

  /*fill(255-red,255-green,255-blue);

  for(var i=0; i<=dashes; i++) {

    var r = maxRadius*(i/dashes);

    ellipse(redX,redY+r, size,size);

    ellipse(blueX-r*cos(HALF_PI/3),blueY-r*sin(HALF_PI/3), size,size);

    ellipse(greenX+r*cos(HALF_PI/3),greenY-r*sin(HALF_PI/3), size,size);

  }

  noStroke();*/

  //fill(red,green,blue);

  //ellipse(width/2,height/2, width-200,height-200);

  //drawRing(red,green,blue, width*2,30);

  //drawBorder(red,green,blue, 40);

}

​

function drawRing(r,g,b, radius,thickness) {

  var density = 360

  for(var i=0; i<density; i++) {

    var x = width/2 + radius*cos(map(i,0,density,0,TWO_PI));

    var y = height/2 + radius*sin(map(i,0,density,0,TWO_PI));

    fill(r,g,b);

    ellipse(x,y, thickness,thickness);

  }

}

​

function drawBorder(r,g,b, thickness) {

  fill(r,g,b);

  rect(thickness,0, width-thickness,thickness);

  rect(width-thickness,thickness, thickness,height);

  rect(thickness,height-thickness, width-thickness*2,thickness);

  rect(0,0, thickness,height);

}

​

function drawDate() {

  //var colW = width/4;

  //month

  var mX = 70;

  var mY = 70;

  for(var i=0; i<month(); i++) {

    var gray = map(i,0,month()-1,0,255);

    fill(gray);

    rect(mX,i*(height-2*mY)/month() + mY, 

         3*(width-2*mX)/9,(height-2*mY)/month() + 1);

  }

  //year

  for(var i=0; i<year()-2000; i++) {

    var gray = map(i,0,year()-2001,255,0);

    fill(gray);

    rect(mX + 3*(width-2*mX)/9 - 1,i*(height - 2*mY)/(year()-2000) + mY, 

         2*(width-2*mX)/9 + 1,(height - 2*mY)/(year()-2000) + 1);

  }

  //day

  for(var i=0; i<day(); i++) {

    var gray = map(i,0,day(),0,255);

    fill(gray);

    rect(mX + 5*(width-2*mX)/9 - 1,i*(height-2*mY)/day() + mY, 

         4*(width-2*mX)/9 + 1,(height-2*mY)/day() + 1);

  }

}