JavaScript Console

JavaScript コンソール ホーム目次

リサジュー図形２次元グラフィックス

　Canvas の二次元描画機能を用いて、アニメーションのリサジュー図形表示を紹介します。

二次元リサジュー図形

　リサジュー図形を表示します。
リサジュー図形は、以下の様な数式で表されるグラフのようなものです。振幅、振動数、位相の値が、ｘとｙで同じであれば、円になります。振幅が異なれば楕円になり、位相が異なれば傾きます。振動数が異なると、デモで示すように、ねじれた感じになります。


　　　x = 振幅 * cos( 振動数 * t + 位相 )
　　　y = 振幅 * sin( 振動数 * t + 位相 )

　以下の ▶ Run ボタンを押して下さい。
HTML5 の Canvas 要素を利用し、そこに図形を描きます。 Canvas 要素は、テキストコンソールの下に、640 x 400 ピクセルの大きさで重ねて置いてあります。 y の振動数を少しづつ変えて、48 枚描画すると停止します。

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

var step = 1;
jscsetintervalid = setInterval(function() {
  if(step >= 48) clearInterval(jscsetintervalid);
  ++ step;
  context.clearRect(0, 0, 640, 400);
  drawline(step, context);
}, 200);

function drawline(step, context) {
  var i;
  var t;
  context.beginPath();
  context.strokeStyle = 'rgb(20,200,200)';
  context.moveTo(200*Math.cos(0)+320, 200*Math.sin(0)+200);
  for(i = 1; i <= 360; ++i) {
    t = (Math.PI / 180) * i;
    context.lineTo(200*Math.cos(7*t)+320, 200*Math.sin(step*t)+200);
  }
  context.stroke();
}

目次へ

リサジュー図形 ２次元グラフィックス

二次元リサジュー図形

リサジュー図形２次元グラフィックス