BOJIN DOKEI / forked from: Human Clock

Readme
JavaScript 268 lines
HTML 24 lines
CSS 56 lines

BOJIN DOKEI / forked from: Human Clock
drawing "Bouningen" (Stick figure)

var CV = document.getElementById('canvas');
var CX = CV.getContext('2d');

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

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

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

Bouningen.prototype.rawDraw = function(cx, scale, d) {
  cx.save();
  cx.translate(this.x * scale, this.y * scale);

cx.lineCap = 'round';
  cx.lineJoin = 'round';
  cx.lineWidth = scale;
  cx.strokeStyle = 'rgba(255,255,255, 0.3)';

drawLine(cx, d[0], d[1], d[2], d[3]);
  drawLine(cx, d[2], d[3], d[4], d[5]);
  drawLine(cx, d[4], d[5], d[6], d[7]);

drawLine(cx, d[ 8], d[ 9], d[14], d[15]);
  drawLine(cx, d[ 8], d[ 9], d[10], d[11]);
  drawLine(cx, d[10], d[11], d[12], d[13]);
  drawLine(cx, d[14], d[15], d[16], d[17]);
  drawLine(cx, d[16], d[17], d[18], d[19]);

drawLine(cx, d[20], d[21], d[22], d[23]);
  drawLine(cx, d[22], d[23], d[24], d[25]);
  drawLine(cx, d[26], d[27], d[28], d[29]);
  drawLine(cx, d[28], d[29], d[30], d[31]);
  drawLine(cx, d[20], d[21], d[26], d[27]);

cx.restore();

};

Bouningen.prototype.posing = function(kind) {
  var x = this['_posing_' + kind];
  if (x instanceof Function) x.apply(this, []);
  this.setJoint('left_thigh', rnd(0, 10));
  this.setJoint('left_knee', rnd(-20, -40));
  this.setJoint('right_thigh', rnd(0, -10));
  this.setJoint('right_knee', rnd(20, 40));
  this.update();
};

Bouningen.prototype._posing_1 = function() {
  // front
  this.x = rnd(-2, 2);
  this.y = 11;
  this.setJoint('neck', rnd(-20,20));
  this.setJoint('waist', rnd(-20,20));
  this.setJoint('right_shoulder', rnd(20, 40));
  this.setJoint('right_elbow', rnd(-150, -170));
  this.setJoint('left_shoulder', rnd(-20, -40));
  this.setJoint('left_elbow', rnd(150, 170));
};

Bouningen.prototype._posing_2 = function() {
  // left
  this.x = 5;
  this.y = 10;
  this.setJoint('neck', rnd(10,30));
  this.setJoint('waist', rnd(-20,20));
  this.setJoint('right_shoulder', rnd(40, 60));
  this.setJoint('right_elbow', rnd(120, 140));
  this.setJoint('left_shoulder', rnd(40, 60));
  this.setJoint('left_elbow', rnd(160, 180));
};

Bouningen.prototype._posing_3 = function() {
  // right
  this.x = -5;
  this.y = 10;
  this.setJoint('neck', rnd(-10,-30));
  this.setJoint('waist', rnd(-20,20));
  this.setJoint('left_shoulder', rnd(-50, -70));
  this.setJoint('left_elbow', rnd(-120, -140));
  this.setJoint('right_shoulder', rnd(-40, -60));
  this.setJoint('right_elbow', rnd(-140, -160));
};

Bouningen.prototype._posing_4 = function() {
  // banzai
  this.x = rnd(-2, 2);
  this.y = 13;
  this.setJoint('neck', rnd(-20,20));
  this.setJoint('waist', rnd(-20,20));
  this.setJoint('left_shoulder', rnd(-130, -150));
  this.setJoint('left_elbow', rnd(-170, -190));
  this.setJoint('right_shoulder', rnd(130, 150));
  this.setJoint('right_elbow', rnd(-170, -190));
};

Bouningen.prototype._posing_5 = function() {
  // lower
  this.x = rnd(-2, 2);
  this.y = 3;
  this.setJoint('neck', rnd(-20,20));
  this.setJoint('waist', rnd(-20,20));
  this.setJoint('left_shoulder', rnd(-10, 10));
  this.setJoint('left_elbow', rnd(-30, -50));
  this.setJoint('right_shoulder', rnd(-10, 10));
  this.setJoint('right_elbow', rnd(30, 50));
};

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

var COORDS = [
  [15,40,   0,40, 0,20,   5, 0,15, 2,  20, 0,20,20,  20,35,10,40],
  [ 0,10,   0,20,10, 0,  10,20,10,40],
  [ 0, 0,   0, 0,10, 0,  20,20,10,25,   0,25, 0,35,   5,35,20,40],
  [10, 0,  20, 0,20,10,  20,20, 5,20,  20,20,20,30,  20,40, 0,40],
  [20,30,  10,25, 0,27,   0,13,16, 0,  18,20,16,40],
  [20, 0,  10, 2, 4, 0,   0,15, 0,25,  10,18,14,20,  20,20,20,30,  10,40, 0,40],
  [10, 0,   0, 0, 0,30,   0,40,10,40,  15,40,20,30,  20,15, 5,20],
  [ 0, 5,   5, 0,20, 0,  13,30, 5,40],
  [17, 3,  10, 0, 3,10,   3,20, 5,20,  20,25,20,30,  18,40, 5,40,   0,40, 0,38,
            0,35, 2,30,  10,20,20, 4],
  [17, 5,  10, 0, 3,10,   0,26,13,20,  20,10,20, 0,  10,40,15,40],
  [10,10,  10,13,15,13],
  [ 9,30,  14,30,14,33]];

var NUMBER_WIDTH = 20, NUMBER_HEIGHT = 40;

function drawNumber(cx, n) {
  if (!COORDS[n]) return;
  var x, v = COORDS[n].slice(), w = [], l = v.length, i;
  for (var c = 0; c < 10; ++c) {
    x = Math.floor(rnd(204,255));
    cx.strokeStyle = 'rgba(' + x + ',' + x + ',' + x + ',0.5)';
    for (i = 0; i < l; ++i)
      w[i] = v[i] + rnd(-3, 3);
    cx.beginPath();
    cx.moveTo(w[0], w[1]);
    for (i = 2; i < l; i += 4)
      cx.quadraticCurveTo(w[i], w[i+1], w[i+2], w[i+3]);
    cx.stroke();
  }
}

function drawDate(cx, d, spacing) {
  cx.save();
  var h = d.getHours(), m = d.getMinutes();

drawNumber(cx, Math.floor(h / 10));
  cx.translate(NUMBER_WIDTH + spacing, 0);

drawNumber(cx, h % 10);
  cx.translate(NUMBER_WIDTH + spacing, 0);

drawNumber(cx, 10);
  drawNumber(cx, 11);
  cx.translate(NUMBER_WIDTH + spacing, 0);

drawNumber(cx, Math.floor(m / 10));
  cx.translate(NUMBER_WIDTH + spacing, 0);

drawNumber(cx, m % 10);

cx.restore();
}

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

var BOU = new Bouningen, SCALE = 6;
var SCALES = {1: 12, 2: 12, 3: 12, 4: 9, 5: 8};
var BG;
var LAST;
BOU.setSize('lower_arm', 5);

function newPicture() {
  var pose = Math.floor(rnd(1, 6));
  BOU.posing(pose);
  SCALE = SCALES[pose];
  newBackground();
}

function newBackground() {
  CX.save();

var x = [0,1,2];
  x.sort(function() { return rnd(-1,1); });
 
  var q = rnd(0,1);
  for (var r, g, b, c, i = 0; i < 100; ++i) {
    r = Math.floor(rnd(200,255));
    g = Math.floor(rnd(150,255));
    b = Math.floor(rnd(0,150));
    c = [r,g,b];
    c = [c[x[0]], c[x[1]], c[x[2]]];
    CX.fillStyle = 'rgba(' + c.join(',') + ',0.5)';
    CX.beginPath();
    CX.arc(rnd(-20,80),rnd(-20,80),rnd(10,30),0,Math.PI*2,true);
    CX.fill();
  }
  CX.restore();

CX.drawImage(CV, 0, 0, 64, 64, 0, 0, 256, 256);
  BG = CX.getImageData(0, 0, 256, 256);
}

function redraw() {
  var d = new Date, m = d.getMinutes();
  if (m !== LAST) {
    newPicture();
    LAST = m;
  }

CX.clearRect(0, 0, 256, 256);

if (BG) CX.putImageData(BG, 0, 0);

CX.save();
  CX.translate(128, 128);

BOU.draw(CX, SCALE);
  var c0 = BOU.getCoord('right_hand'), c1 = BOU.getCoord('left_hand');
  var x = Math.sqrt((c1[0]-c0[0])*(c1[0]-c0[0]) + (c1[1]-c0[1])*(c1[1]-c0[1]));
  var w = (NUMBER_WIDTH + 10) * 5 + 20, h = NUMBER_HEIGHT + 40;
  x = x * SCALE / w;
  CX.translate((BOU.x + c0[0]) * SCALE, (BOU.y + c0[1]) * SCALE);
  CX.rotate(Math.atan2(c1[1]-c0[1], c1[0]-c0[0]));
  CX.scale(x, x);

CX.save();
  CX.fillStyle = 'rgba(0,51,0,0.6)';
  CX.strokeStyle = 'rgb(204,153,51)';
  CX.lineWidth = 8;
  CX.fillRect(0, -h / 2, w, h);
  CX.strokeRect(0, -h / 2, w, h);
  CX.restore();

CX.translate(15, -20);
  drawDate(CX, new Date, 10);

CX.restore();
}

function force_reload() {
  newPicture();
}

setInterval(function() {
  redraw();
}, 200);

BOJIN DOKEI / forked from: Human Clock

Play
Stop
Reload