// グローバル変数
var cvs; // canvas要素のオブジェクトを取得する為の変数
var cnt; // コンテキストを取得する為の変数
var w = 500; // canvasの横幅
var h = 500; // canvasの高さ
var hw = 250; // canvasの横幅の半値幅
var hh = 250; // canvasの高さの半値幅
var linecolor = "#00ffff"; // リサジュー図形の描画色を表す変数を初期値と共に宣言
var ampx = 200, ampy = 200; // x軸方向及び、y軸方向の振幅を表す変数を初期値と共に宣言
var omegax = 1, omegay = 1; // x軸方向及び、y軸方向の周波数を表す変数を初期値と共に宣言
var thetax = 0, thetay = 0; // x軸方向及び、y軸方向の位相を表す変数を初期値と共に宣言
var t = 0, dt = 1.0; // 時刻及び、時間の刻み幅を表す変数を初期値と共に宣言
var x, y, xx, yy; // 始点及び終点のx座標及びy座標を宣言
window.onload = function(){
cvs = document.getElementById("lissajous"); // canvas要素のオブジェクトを取得
cnt = cvs.getContext("2d"); // コンテキストを取得
setup(); // 初期化処理(背景色と軸の描画を含む)
};
// 初期化処理をまとめた関数(背景色と軸の描画を含む)
var setup = function(){
ampx = parseFloat(document.getElementById("ampx").value);
ampy = parseFloat(document.getElementById("ampy").value);
// x軸方向及び、y軸方向の振幅をテキストフィールドの文字列を実数化して取得
omegax = parseFloat(document.getElementById("omegax").value);
omegay = parseFloat(document.getElementById("omegay").value);
// x軸方向及び、y軸方向の周波数をテキストフィールドの文字列を実数化して取得
thetax = parseFloat(document.getElementById("thetax").value);
thetay = parseFloat(document.getElementById("thetay").value);
// x軸方向及び、y軸方向の位相をテキストフィールドの文字列を実数化して取得
linecolor = document.getElementById("linecolor").value;
// リサジュー図形の描画色を表す文字列をテキストフィールドから取得して、変数に代入
t = 0; // 時刻を初期化
thetax=thetax*Math.PI/180; // 度数法から孤度法への変換
thetay=thetay*Math.PI/180; // 度数法から孤度法への変換
omegax=omegax*Math.PI/180; // 度数法から孤度法への変換
omegay=omegay*Math.PI/180; // 度数法から孤度法への変換
cnt.fillRect(0, 0, w, h); // canvas全体を黒色の矩形で塗りつぶす
drawColorLine(0, hh, w, hh, "#c0c0c0"); // x軸を銀色の直線で描画
drawColorLine(hw, 0, hw, h, "#c0c0c0"); // y軸を銀色の直線で描画
};
// 共通の描画処理をまとめた関数(更新処理を含む)
var draw = function(){
x = hw + ampx * Math.sin(omegax * t + thetax); // 始点のx座標
y = hh - ampy * Math.sin(omegay * t + thetay); // 始点のy座標
t += dt; // 時刻の更新処理(微小時間dtだけ進める)
xx = hw + ampx * Math.sin(omegax * t + thetax); // 終点のx座標
yy = hh - ampy * Math.sin(omegay * t + thetay); // 終点のy座標
drawColorLine(x, y, xx, yy, linecolor);
};
// カラー版直線を引く関数
var drawColorLine = function(x0, y0, x1, y1, color){
cvs = document.getElementById("lissajous"); // canvas要素のオブジェクトを取得
cnt = cvs.getContext("2d"); // コンテキストを取得
cnt.beginPath();
cnt.moveTo(x0,y0);
cnt.lineTo(x1,y1);
cnt.strokeStyle = color;
cnt.stroke();
};
// リサジュー図形を描画する関数本体
var lissajous = function(){
setup(); // 初期化処理(背景色と軸の描画を含む)
setInterval("draw()",10); // 共通の描画処理(更新処理を含む)
};
// PNG画像として保存
var saveasPNG = function(){
var png = cvs.toDataURL("image/png");
document.getElementById("newImg").src = png;
};
|