Forked from: Event's Human Clock diff:(365) share BOJIN DOKEI / forked from: Human Clock gct256 forked:0favorite:10lines:212/21/47license: MIT License modified:2010-07-29 23:50:10 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)); }; function drawLine(cx, x0, y0, x1, y1) { var d = Math.ceil(Math.sqrt((x1-x0)*(x1-x0)+(y1-y0)*(y1-y0)) / 20), s; var x, y; for (var c = 0; c < 5; ++c) { cx.beginPath(); cx.moveTo(x0 + rnd(-2, 2), y0 + rnd(-2, 2)); for (var i = 1; i <= d; ++i) { s = i / d; x = x0 * (1-s) + x1 * s + rnd(-2, 2); y = y0 * (1-s) + y1 * s + rnd(-2, 2); cx.lineTo(x, y); } cx.stroke(); } } /* -------------------------------------------------------------------------- */ 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); <canvas id="canvas" width="256" height="256"></canvas> <div id="info"> <p class="name">Bouningen <span class="honorific">san</span></p> <dl> <dt>birthday /</dt> <dd>2010/7/14</dd> <dt>home /</dt> <dd>canvas element</dd> <dt>blood type /</dt> <dd>rgb(0,0,0)</dd> <dt>height /<dt> <dd>40 pixel</dd> <dt>3size /</dt> <dd>B:- W:- H:- (A cup)</dd> <dt>occupation /</dt> <dd>neet</dd> <dt>favorite website /</dt> <dd><a href="http://jsdo.it/">jsdo.it</a></dd> </dl> </div> <button id="reload" type="button" onclick="javascript:force_reload()">reload</button> BOJIN DOKEI / forked from: Human Clock HTML,BODY,OL,UL,LI,DL,DT,DD,P,DIV,SPAN { margin:0; padding:0; font-size:100%; } BODY { background:#fff; } #canvas { position:absolute; left:10px; top:10px; background:#eee; } #info { position:absolute; left:276px; top:10px; } .name { font-size:100%; height:1em; line-height:1; margin-bottom:0.2em; padding:0.2em; border-bottom:1px dotted #ccc; } .name .honorific { font-size:75%; } DD { line-height:2; } DT { color:#a28; font-size:75%; line-height:1.2; } DD { color:#666; font-size:80%; } #reload { position:absolute; right:10px; bottom:10px; } Code Fullscreen use an iframe compat browser, deer Preview Fullscreen clock css html5 javascript neta narutohyper tkinjo ngtn OKASUKE canvastag playahata yasigani_ni kichon : csshtml5javascriptおもしろい paq : clock mash : clock