// グローバル変数
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 = 100, ampy = 100, ampz = 100; // 【変更】x軸方向及び、y軸方向、z軸方向の振幅を表す変数を初期値と共に宣言
var omegax = 1, omegay = 1, omegaz = 1; // 【変更】x軸方向及び、y軸方向、z軸方向の周波数を表す変数を初期値と共に宣言
var thetax = 0, thetay = 0, thetaz = 0; // 【変更】x軸方向及び、y軸方向、z軸方向の位相を表す変数を初期値と共に宣言
var t = 0, dt = 1.0; // 時刻及び、時間の刻み幅を表す変数を初期値と共に宣言
var xi, yi, zi, xf, yf, zf; // 【変更】始点及び終点のx座標、y座標、z座標を宣言
var xidraw, xfdraw, yidraw, yfdraw; // 【追加】描画用の変数を宣言
window.onload = function(){
cvs = document.getElementById("lissajous3d"); // canvas要素のオブジェクトを取得
cnt = cvs.getContext("2d"); // コンテキストを取得
setup(); // 初期化処理（背景色と軸の描画を含む）
};
// 初期化処理をまとめた関数（背景色と軸の描画を含む）
var setup = function(){
ampx = parseFloat(document.getElementById("ampx").value);
ampy = parseFloat(document.getElementById("ampy").value);
ampz = parseFloat(document.getElementById("ampz").value); // 【追加】
// 【追加】x軸方向及び、y軸方向、z軸方向の振幅をテキストフィールドの文字列を実数化して取得
omegax = parseFloat(document.getElementById("omegax").value);
omegay = parseFloat(document.getElementById("omegay").value);
omegaz = parseFloat(document.getElementById("omegaz").value); // 【追加】
// 【追加】x軸方向及び、y軸方向、z軸方向の周波数をテキストフィールドの文字列を実数化して取得
thetax = parseFloat(document.getElementById("thetax").value);
thetay = parseFloat(document.getElementById("thetay").value);
thetaz = parseFloat(document.getElementById("thetaz").value); // 【追加】
// 【追加】x軸方向及び、y軸方向、z軸方向の位相をテキストフィールドの文字列を実数化して取得
linecolor = document.getElementById("linecolor").value;
// リサジュー図形の描画色を表す文字列をテキストフィールドから取得して、変数に代入
t = 0; // 時刻を初期化
thetax = thetax * Math.PI/180; // 度数法から孤度法への変換
thetay = thetay * Math.PI/180; // 度数法から孤度法への変換
thetaz = thetaz * Math.PI/180; // 【追加】度数法から孤度法への変換
omegax = omegax * Math.PI/180; // 度数法から孤度法への変換
omegay = omegay * Math.PI/180; // 度数法から孤度法への変換
omegaz = omegaz * Math.PI/180; // 【追加】度数法から孤度法への変換
cnt.fillRect(0, 0, w, h); // canvas全体を黒色の矩形で塗りつぶす
drawColorLine(370, 90, 130, 410, "#c0c0c0"); // 【変更】x軸を銀色の直線で描画
drawColorLine(90, 130, 410, 370, "#c0c0c0"); // 【変更】y軸を銀色の直線で描画
drawColorLine(250, 50, 250, 450, "#c0c0c0"); // 【変更】z軸を銀色の直線で描画
};
// 共通の描画処理をまとめた関数（更新処理を含む）
var draw = function(){
xi = ampx * Math.sin(omegax * t + thetax); // 【変更】始点のx座標
yi = ampy * Math.sin(omegay * t + thetay); // 【変更】始点のy座標
zi = ampz * Math.sin(omegaz * t + thetaz); // 【追加】始点のz座標
xidraw = hw - xi * 0.6 + yi * 0.8; // 【追加】始点の描画用キャンバス内のx座標
yidraw = hh + xi * 0.8 + yi * 0.6 - zi; // 【追加】始点の描画用キャンバス内のy座標
t += dt; // 時刻の更新処理（微小時間dtだけ進める）
xf = ampx * Math.sin(omegax * t + thetax); // 【変更】終点のx座標
yf = ampy * Math.sin(omegay * t + thetay); // 【変更】終点のy座標
zf = ampz * Math.sin(omegaz * t + thetaz); // 【追加】終点のz座標
xfdraw = hw - xf * 0.6 + yf * 0.8; // 【追加】終点の描画用キャンバス内のx座標
yfdraw = hh + xf * 0.8 + yf * 0.6 - zf; // 【追加】終点の描画用キャンバス内のy座標
drawColorLine(xidraw, yidraw, xfdraw, yfdraw, linecolor);
};
// カラー版直線を引く関数
var drawColorLine = function(x0, y0, x1, y1, color){
cvs = document.getElementById("lissajous3d"); // canvas要素のオブジェクトを取得
cnt = cvs.getContext("2d"); // コンテキストを取得
cnt.beginPath();
cnt.moveTo(x0,y0);
cnt.lineTo(x1,y1);
cnt.strokeStyle = color;
cnt.stroke();
};
// 3次元リサジュー曲線を描画する関数本体
var lissajous3d = function(){
setup(); // 初期化処理（背景色と軸の描画を含む）
setInterval("draw()",10); // 共通の描画処理（更新処理を含む）
};
// PNG画像として保存
var saveasPNG = function(){
var png = cvs.toDataURL("image/png");
document.getElementById("newImg").src = png;
};
|