dinkolas-clock

This project was very frustrating for me. I had an initial idea of a monster that would grow parts every second, and by the end of each day would be a total mess of limbs. However, I couldn't figure out a good/efficient way to do that, so I simplified my idea to faces. I also wanted there to be a calendar mode in which you could see characters from previous days/hours/minutes. I spent a long time trying to get the calendar to work, but for some reason it kept breaking in different ways.

Anyway, the final result that I do have is not very satisfying to me. It doesn't really have any personality, and each minute is hardly unique. Maybe next time things will turn out better.

var seed;
var ear;
var eye;
var eyeIris;
var mouthLip;
var mouthJaw;
var mouthTongue;
var noseFront;
var noseBack;
var t = new Date();
var currentMin = -1;
var face = [];
function setup() {
  createCanvas(600, 360);
  colorMode(HSB, 1);
  ear = loadImage("https://i.imgur.com/il1frFT.png")
  eye = loadImage("https://i.imgur.com/8yvvzFW.png")
  eyeIris = loadImage("https://i.imgur.com/3ZpiPHQ.png")
  mouthLip = loadImage("https://i.imgur.com/YAltCcA.png")
  mouthJaw = loadImage("https://i.imgur.com/UZXYDA5.png")
  noseFront = loadImage("https://i.imgur.com/5QIAcvW.png")
  noseBack = loadImage("https://i.imgur.com/khomfzm.png")
}
function realRand()
{
 	for (var i = 0; i < seed; i++)
  {
   	random(); 
  }
}
 
function draw() {
 
    t = new Date();
    if (currentMin != t.getMinutes())
    {
      bgCol = color(random(0,1),random(0.3,0.8),random(0.7,1));
      newFace(seed);
      currentMin = t.getMinutes();
    }
    background(0,0,1);
 
    for (var s = 0; s <= t.getSeconds(); s++)
    {
      drawFeature(face[s]); 
    }
    blendMode(MULTIPLY);
    background(bgCol);
    blendMode(BLEND);
}
 
function newFace() {
  var order = randomSixtyList();
  print(order);
 
  for (var i = 0; i < 60; i++)
  {
    var X = order[i] % 10;
    var Y = floor(order[i] / 10);
    //face format: [x,y,featureType,phaseShift,rotation, scale]
    face.push([X*60,Y*60,random(0,1),random(0,1),random(-PI,PI), random(0.5,1.5)]);
  }
}
 
function drawFeature(feature)
{
  push();
  translate(feature[0]+30,feature[1]+30);
  scale(feature[5]);
  if (feature[2] < 1/4){drawMouth(feature);}
  else if (feature[2] < 2/4){drawNose(feature);}
  else if (feature[2] < 3/4){drawEye(feature);}
  else {drawEar(feature);}                   
  pop();
}
 
function drawEar(feat)
{
  phase = feat[3]
  rot = feat[4]
  xOff = mouseX - feat[0];
  yOff = mouseY - feat[1];
  push()
  rotate(rot);
  scale(1 + 0.02*sin((millis()/1000+phase)*2*PI), 1)
  image(ear, -20, -30, 60, 60);
  pop()
}
 
function drawEye(feat)
{
  phase = feat[3]
  rot = feat[4]
  xOff = mouseX - feat[0] - 30;
  yOff = mouseY - feat[1] - 30;
 
  push()
  translate(xOff/50,yOff/50)
  rotate(rot);
  image(eyeIris, -30, -25, 60, 60);
  pop()
 
  push()
  rotate(rot);
  image(eye, -30, -30, 60, 60);
  pop()
}
 
function drawNose(feat)
{
  phase = feat[3]
  rot = feat[4]
  xOff = mouseX - feat[0];
  yOff = mouseY - feat[1];
 
  push()
  translate(0,0);
  rotate(rot);
  image(noseBack, -30, -30, 60, 60);
  pop()
 
  push()
  translate(xOff/100,yOff/100)
  rotate(rot);
  scale(1.2);
  image(noseFront, -30, -31, 60, 60);
  pop()
}
 
function drawMouth(feat)
{
  phase = feat[3]
  rot = feat[4]
  xOff = mouseX - feat[0];
  yOff = mouseY - feat[1];
 
  push()
  translate(-xOff/100,-yOff/100)
  rotate(rot);
  translate(0,0 * (1 + sin((millis()/1000+phase)*2*PI)))
  scale(0.8)
  image(mouthJaw, -30, -20, 60, 60);
  pop()
 
  push()
  translate(xOff/300,yOff/300)
  rotate(rot);
  image(mouthLip, -30, -30, 60, 60);
  pop()
}
 
function randomSixtyList()
{
  var out = [];
  for (var i = 0; i < 60; i++)
  {
    out.push(i);
  }
  for (var j = 0; j < 60; j++)
  {
   	var swap = floor(random(0,60));
    var J = out[j];
    out[j] = out[swap];
    out[swap] = J;
  }
  return out;
}