Forked from: Event's Human Clock diff(365)

BOJIN DOKEI / forked from: Human Clock

gct256

2010-07-29 23:50:10

License: MIT License

Fork: 0

Fav: 10

View: 1348

Play
Stop
Reload

Fullscreen

Smart Phone

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 on jsdo.it games
Share
Embed
QR
Tag
Download

Complete!

Description どんなゲームですか？

Control Device

	スマートフォンコントローラー jsdo.it WebSocket Controller»
	マウス
	キーボード
	タッチデバイス

Fullscreen

有効
無効

jsdo.it games から削除する Submit

style

Design view
Code view

code

<script type="text/javascript" src="http://jsdo.it/blogparts/4vHm/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/gct256/4vHm" title="BOJIN DOKEI / forked from: Human Clock">BOJIN DOKEI / forked from: Human Clock - jsdo.it - share JavaScript, HTML5 and CSS</a></p>

QR Code