DIR : /home/kozerus/public_html/jkwii/js/jsdoit/clock_kt/index.js

/home/kozerus/public_html/jkwii/js/jsdoit/clock_kt

var CV = document.getElementById('canvas');
var CX = CV.getContext('2d');
var SIZE = 300, SIZE1_2 = SIZE >> 1, RADIUS = SIZE1_2 * 0.7;
var WIDTH, HEIGHT, CENTER_X, CENTER_Y, SCALE;
var RADIAN = Math.PI / 180, PI2 = Math.PI * 2;
var FPS = 20;
var LAST_SECOND, LAST_MINUTE;

var S_COLOR = [235,  97,   1];
var M_COLOR = [ 34, 139,  34];
var H_COLOR = [220,  20,  60];

function rnd(min, max) {
  return Math.random() * (max - min) + min;
}

function get_color(c, a) {
  if (arguments.length == 2)
    return 'rgba(' + c.join(',') + ',' + a + ')';
  return 'rgb(' + c.join(',') + ')';
}

function transition(t) {
  return t * t * t * t;
}

function transition2(t) {
  return -(2 * t - 3) * t * t;
}

/* -------------------------------------------------------------------------- */

Bouningen.prototype.blend = function(another, t) {
  if (!another instanceof Bouningen) return null;
  var b = new Bouningen, s = 1 - t, x, v0 = this.joints, v1 = another.joints;
  for (x in v0) b.joints[x] = v0[x] * s + v1[x] * t;
  v0 = this.sizes;
  v1 = this.sizes;
  for (x in v0) b.sizes[x] = v0[x] * s + v1[x] * t;
  b.x = this.x * s + another.x * t;
  b.y = this.y * s + another.y * t;
  b.update();
  return b;
};

/* -------------------------------------------------------------------------- */

var Pool = function() {
  this.list = [];
};
Pool.prototype.push = function(actor) {
  if (actor &&
      actor.update instanceof Function &&
      actor.draw instanceof Function)
    this.list.push(actor);
};
Pool.prototype.update = function() {
  for (var x = this.list.slice(), y = this.list = [], l = x.length, i = 0;
       i < l; ++i)
    if (x[i].update() !== false) y.push(x[i]);
};
Pool.prototype.draw = function(cx) {
  for (var x = this.list, l = x.length, i = 0; i < l; ++i) {
    cx.save();
    x[i].draw(cx);
    cx.restore();
  }
};

var POOL = new Pool;

/* -------------------------------------------------------------------------- */

var Person = function(scale, color) {
  this.person_1 = new Bouningen;
  this.person_2 = new Bouningen;
  this.rate = 0;
  this.count = 0;
  this.angle = 0;
  this.scale = scale;
  this.color = get_color(color);
};
Person.prototype.next = function(nextPose, frameCount, angle) {
  if (nextPose) {
    this.person_2 = Bouningen.unserialize(nextPose);
  }
  this.rate = 0;
  this.count = frameCount;
  this.angle = angle;
};
Person.prototype.update = function() {
  if (this.count > 0 && this.rate++ == this.count) {
    this.person_1 = this.person_2;
    this.rate = this.count = 0;
    POOL.push(new Wave(this.angle));
  }
};
Person.prototype.draw = function(cx) {
  cx.strokeStyle = this.color;
  cx.fillStyle = '#000';
  if (this.rate == 0) this.person_1.draw(cx, 1, 1);
  else {
    var s = transition(this.rate / this.count);
    this.person_1.blend(this.person_2, s).draw(cx, 1, 1);
  }
};

var PERSON = new Person(0.7, [51,102,255]);
//var M_PERSON = new Person(0.8, [0,51,204]);
POOL.push(PERSON);
//POOL.push(M_PERSON);

/* -------------------------------------------------------------------------- */

var Wave = function(angle) {
  this.radian = (angle - 0) * RADIAN;
  this.count = this.max = FPS * 2;
  this.size = 4;
  this.ax = 4;
  this.offset = 30;
  this.max_size = RADIUS;
};
Wave.prototype.update = function() {
  this.size += this.ax *= 1.5;
  if (this.size > this.max_size) {
    this.size = this.max_size;
    this.ax = 0;
    POOL.push(new Wave2(this.radian, this.size + this.offset));
  }
  return this.count-- > 0;
};
Wave.prototype.draw = function(cx) {
  cx.strokeStyle = get_color(S_COLOR, this.count / this.max);
  cx.fillStyle = '#ff0';
  cx.lineWidth = cx.lineWidth * 2;
  cx.beginPath();
  cx.rotate(this.radian);
  cx.moveTo(this.offset, 0);
  cx.lineTo(this.offset + this.size, 0);
  cx.stroke();
  if (this.ax > 0) {
    cx.beginPath();
    cx.arc(this.offset + this.size, 0, 2, 0, PI2, true);
    cx.fill();
  }
};

var Wave2 = function(radian, radius) {
  this.radian = radian;
  this.radius = radius;
  this.count = this.max = FPS;
  this.r = 0;
  this.ar = 0.01;
};
Wave2.prototype.update = function() {
  this.ar *= 1.1;
  this.r += this.ar;
  return this.count-- > 0;
};
Wave2.prototype.draw = function(cx) {
  cx.strokeStyle = get_color(S_COLOR, this.count / this.max);
  cx.rotate(this.radian);
  cx.beginPath();
  cx.arc(0, 0, this.radius, -this.r, this.r, false);
  cx.stroke();
};


/* -------------------------------------------------------------------------- */

function drawHand(angle, width, length) {
  CX.save();
  CX.lineWidth = CX.lineWidth * width;
  CX.rotate(angle * RADIAN);
  CX.beginPath();
  CX.moveTo(30, 0);
  CX.lineTo(RADIUS * length, 0);
  CX.stroke();
  CX.restore();
}

function drawDate(d) {
  CX.strokeStyle = get_color(H_COLOR, 0.8);
  drawHand(d.getHours() * 30 - 90, 5, 0.7);
  CX.strokeStyle = get_color(M_COLOR, 0.8);
  drawHand(d.getMinutes() * 6 - 90, 3, 0.9);
};

/* -------------------------------------------------------------------------- */

function set_canvas_size() {
  CENTER_X = (WIDTH = CV.width = window.innerWidth) >> 1;
  CENTER_Y = (HEIGHT = CV.height = window.innerHeight) >> 1;
  SCALE = Math.min(WIDTH / SIZE, HEIGHT / SIZE);
}

window.addEventListener('resize', set_canvas_size, false);
set_canvas_size();

/* -------------------------------------------------------------------------- */

var POSES = {};
(function() {
  var e = document.getElementById('poses'), c = e.childNodes, v;
  for (var l = c.length, i = 0; i < l; ++i) {
    if ((v = c[i]).nodeType == 1) {
      v = v.id.replace(/^pose_/, '')|0;
      POSES[v] = c[i].innerHTML;
    }
  }
})();

setInterval(function() {
  var d = new Date();
  var s = d.getSeconds(), m =d.getMinutes();

  if (s !== LAST_SECOND) {
    LAST_SECOND = s;
    PERSON.next(POSES[s], FPS / 2, (s) * 6 - 90);
  }
  POOL.update();
  CX.clearRect(0, 0, WIDTH, HEIGHT);
  CX.save();
  CX.translate(CENTER_X, CENTER_Y);
  CX.scale(SCALE, SCALE);

  drawDate(d);
  PERSON.draw(CX);

  POOL.draw(CX);
  CX.restore();
}, 1000 / FPS);