波を表現する[正弦波][角速度ω][sin][Math.PI][canvas][JavaScript]

今回表現する波は下記のイラストのような波形で、正弦波と呼ばれています。正弦波の厳密な説明は省きますが、振幅がrの単振動のy軸上の位置は、変位r*sin(ωt)として求められます。

またその変位に対する時間軸がx軸方向として表現されています。つまり単振動しているオブジェクトの位置を時間ごとに並べた様子が波のように表現されています。

変位はr*sin(ωt)として求めることができますが、ω（オメガ）は単位時間に進む角度のことで以下のように求められます。

角速度ω ＝θ（rad）／t（s）

1	角速度ω ＝θ（rad）／t（s）

以上の関係から、単振動の一往復、つまり円の一周（360°=2π ）を周期Tで割っても角速度が求められることが分かります。

角速度ω = 2π（rad）／ 周期T（s）

1	角速度ω = 2π（rad）／周期T（s）

デモ画面

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>波</title>

<style>
*{ margin: 0px; padding: 0px; }
#canvas { background-color: #000; }
</style>

<head>
<body>

<canvas  id="canvas" width="600" height="500">
ブラウザが対応しておりません。
</canvas>

<script>

window.addEventListener('load', draw, false);

function draw(){
    var r  = 100; // 振幅
    var T  = 600; // 周期
    
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    
    ctx.strokeStyle ='green';
    ctx.lineWidth = 2;
    ctx.beginPath();
    ctx.moveTo(0,250); //始点

    for(var x=1; x<=canvas.width; x +=1) {
        var y =-r*Math.sin((2*Math.PI/T)*x); //振幅 * Math.sin( 角速度(2π/周期)*時間 )
        ctx.lineTo(x, y+(canvas.height/2));
    }
    
    ctx.stroke();

}

</script>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

*{ margin: 0px; padding: 0px; }

#canvas { background-color: #000; }

</style>

<head>

<body>

ブラウザが対応しておりません。

</canvas>

window.addEventListener('load', draw, false);

function draw(){

var r = 100; // 振幅

var T = 600; // 周期

var canvas = document.getElementById('canvas');

var ctx = canvas.getContext('2d');

ctx.strokeStyle ='green';

ctx.lineWidth = 2;

ctx.beginPath();

ctx.moveTo(0,250); //始点

for(var x=1; x<=canvas.width; x +=1) {

var y =-r*Math.sin((2*Math.PI/T)*x); //振幅 * Math.sin( 角速度(2π/周期)*時間 )

ctx.lineTo(x, y+(canvas.height/2));

}

ctx.stroke();

}

</script>

</body>

</html>

思考の葉

プログラミング・批評

思考の葉

プログラミング・批評

波を表現する[正弦波][角速度ω][sin][Math.PI][canvas]