JavaScript Console

JavaScript コンソール ホーム目次

バイオリズム

　バイオリズムを表示するプログラムです。
バイオリズムは、身体(Physical)、感情(Sensitivity)、知性(Intellectual)が、誕生日を基準に、それぞれ23日、28日、33日の周期があるしています。
誕生日を入力すれば、本日を中心に前後30日のバイオリズムを表示します。

var bd = window.prompt('Input day (yyyy/mm/dd)?');

var dbd = new Date(bd);
var dnw = new Date();
var dif = dnw.getTime() - dbd.getTime();
dif = Math.floor(dif / 24 / 60 / 60 / 1000);

console.log('   Input day : ' + dbd);
console.log('   Today     : ' + dnw);
console.log('   Period    : ' + dif + ' days');

var canvas = document.getElementById('jsccanvas');
var context = canvas.getContext('2d');
context.clearRect(0, 0, 640, 400);

drawline(0, 200, 620, 200, 'rgb(255, 255, 255)');
drawline(20, 0, 20, 400, 'rgb(255, 255, 255)');
drawline(320, 0, 320, 400, 'rgb(128, 128, 128)');

context.fillStyle = 'rgb(255, 255, 255)';
context.fillText('Today', 320, 200);
drawline(30, 360, 50, 360, 'rgb(255, 0, 0)');

context.fillStyle = 'rgb(255, 0, 0)';
context.fillText('Physical', 55, 365);
drawline(30, 370, 50, 370, 'rgb(0, 255, 0)');

context.fillStyle = 'rgb(0, 255, 0)';
context.fillText('Sensitivity', 55, 375);
drawline(30, 380, 50, 380, 'rgb(0, 0, 255)');

context.fillStyle = 'rgb(0, 0, 255)';
context.fillText('Intellectual', 55, 385);

var i;
context.beginPath();
context.strokeStyle = 'rgb(255, 0, 0)';
context.moveTo(20, -180*Math.sin(2*Math.PI*(dif-30)/23)+200);
for(i = -30; i < 30; i = i + 0.5) {
  context.lineTo(10*(i+30)+20, -180*Math.sin(2*Math.PI*(dif+i)/23)+200);
}
context.stroke();

context.beginPath();
context.strokeStyle = 'rgb(0, 255, 0)';
context.moveTo(20, -180*Math.sin(2*Math.PI*(dif-30)/28)+200);
for(i = -30; i < 30; i = i + 0.5) {
  context.lineTo(10*(i+30)+20, -180*Math.sin(2*Math.PI*(dif+i)/28)+200);
}
context.stroke();

context.beginPath();
context.strokeStyle = 'rgb(0, 0, 255)';
context.moveTo(20, -180*Math.sin(2*Math.PI*(dif-30)/33)+200);
for(i = -30; i < 30; i = i + 0.5) {
  context.lineTo(10*(i+30)+20, -180*Math.sin(2*Math.PI*(dif+i)/33)+200);
}
context.stroke();

function drawline(x0, y0, x1, y1, color) {
  context.beginPath();
  context.strokeStyle = color;
  context.moveTo(x0, y0);
  context.lineTo(x1, y1);
  context.stroke();
}

目次へ