Forked from: Event's Human Clock diff(365) BOJIN DOKEI / forked from: Human Clock gct256 Follow 2010-07-29 23:50:10 License: MIT License Fork0 Fav10 View1348 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)); }; 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; } 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> 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; } use an iframe compat browser, deer Play on jsdo.it games Share Embed QR Tag Download Complete! Description どんなゲームですか? Control Device スマートフォンコントローラー jsdo.it WebSocket Controller» マウス キーボード タッチデバイス Fullscreen 有効 無効 jsdo.it games から削除する Submit Tweet 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> neta Tweet twitter Tags clock css html5 javascript neta Favorite by narutohyper tkinjo ngtn OKASUKE canvastag fingaholic yasigani-ni kichon: csshtml5javascriptおもしろい paq: clock mash: clock Forked sort new page view favorite forked forked: BOJIN DOKEI / forked f.. xwc 00 52views 269/24/56 neta