CompVisJS Editor

⚠️Graphの操作に必要なcanvasはidが'canvas'で存在しています。
document.getElementById('canvas');で取得してください。
⚠️DOM操作はdocument.getElementById('canvas');以外は使用できません。

console.log('Log:CompVisJS Editor');

//canvasの準備
const canvas = document.getElementById('canvas'); //canvasのelementを取得
const id_ctx = CompVis._create_canvas(canvas); //canvasを生成するメソッド

//変数の設定
let T = 0; //グラフを動かすための変数(再描画時に動かす)
const pos = CompVis._toComp([0,0]); //原点の座標
const r = [128,64,32,16,8,4]; //円の半径
const phi = [0,Math.PI/2,Math.PI/3,Math.PI/4,Math.PI/5,Math.PI/6]; //円の初期位相
const N = r.length; //円の数
let data = []; //再描画用の配列
//それぞれの円を描画する
for(let k = 0; k < N; k++){
  function func(t){ //円の方程式の計算
    //tは媒介変数のようなもの(e^(2πit)で半径1の円が描画される。)
    /*
      r[0]*e^(0*2πTi/N-φ[0])+r[1]*e^(1*2πTi/N-φ[1])
      +...+
      r[k-1]*e^(0*2πTi/N-φ[k-1])
        <ここまでで、描画する円の中心の座標を計算している>
      +r[k]*e^(k*2πti/N-φ[k]) <小文字のtであることに注意>
    */

let num_k = new CompVis(0,0);
    for(let j = 0; j < k; j++){
      num_k = num_k.add(new CompVis(0,2*Math.PI*(j+1)*T/N-phi[j]).exp.pro(r[j]));
    }
    num_k = num_k.add(new CompVis(0,2*Math.PI*t/N-phi[k]).exp.pro(r[k]));
    return num_k.add(pos);
  }

//円を描画
  const data_k = CompVis._graph(id_ctx,func,0,2*Math.PI,0.005,{line_color:"#00b500",timeout:10000});
  data.push(data_k); //再描画用の配列に保存
}

//再描画する
setInterval(() => {
  T += 0.05; //グラフを移動させるための変数の値を変更する。
  CompVis._clear_canvas(id_ctx); //キャンバスをリセット
  CompVis._re_graph(data); //再描画を実行
},1000/30); //framerateを設定(ms[ミリ秒])。これは30fpsになる。