CompVis Graph

APIのURLはhttps://makeplayonline.onrender.com/Static/API/CompVisJS/latest/CompVisJS.js
CompVisJSの説明はhttps://makeplayonline.onrender.com/Blog/Contents/API/CompVisJS/explanation

構文例
const canvas = document.getElementById('canvas');
const id_ctx = CompVis._create_canvas(canvas,500,400);
let T = 0;
const data = CompVis._graph(id_ctx,function(t){
    return new CompVis(0,2*Math.PI*t+T).exp.pro(50*t);
},0,5,0.005,{radius:2});

setInterval(() => {
    T += 0.1;
    CompVis._re_graph(data);
},1000/60);
メソッドの説明
- _create_canvasメソッド
  
  _graphメソッドの引数に必要。
  canvasのelementを引数に入れて戻り値を得る。
  
  例:
  html ->
  <canvas id="canvas"></canvas>
  JavaScript ->
  const element = document.getElementById('canvas');
  const id_ctx = CompVis._create_canvas(element); <--
- _graphメソッド
  
  初期描画と、再描画する際に必要なデータの配列を戻り値で得る。
  構文:
  JavaScript ->
  const CompVis._graph(id_ctx,func,start,end,step,params);
  
  _graphメソッドの引数
  1. id_ctx
  2. func
  3. start
  4. end
  5. step
  6. params
  - 1 id_ctx
    
    必須。_create_canvasで得る。
  - 2 func
    
    必須。CompVisクラスの戻り値が必要。引数を変数として用いた関数。変数は実数値である。
    ※現在のバージョンでは、値の1が1pxに対応
    例:
    JavaScript ->
    const func = function(t){
    return new CompVis(0,t).exp.pro(t);
    }
    この場合、t*e^itを描画する。
  - 3 start,4 end,5 step
    
    必須。変数をstartからendまで間隔をstepとして動かす。
  - 6 params
    
    任意。連想配列型。その他の設定を変更する。変更したい変数のみ記すことも可能。
    - thick
      
      default:1
      描画する線の太さ
    - radius
      
      default:0
      func上を変数が動いた点に描画される円の半径
    - line_color,point_color
      
      default:"#000"(黒),"#a00000"(赤)
      線、点の色。"# (rgbのHTMLカラーコード)"
    - timeout
      
      default:20000
      計算時間の上限。整数値。単位はms(ミリ秒)。0以下で計算時間の上限なし。
      タイムアウトするとErrorを発生させる(Too longエラー)。
- _clear_canvasメソッド
  
  CompVis._clear_canvasで画面に表示したもの
  (CompVisクラスから生成されたもの)
  引数はid_ctxのみ(必須)
  _re_graphメソッドを用いて再描画する際、
  このメソッドを使用しないと描画データがそのまま残ってしまう。
- _re_graphメソッド
  
  CompVis._re_graphで再描画できる。
  再描画する場合、CompVis._graphの戻り値を変数に保存しておかなければいけない。
  (複数個_graphで作成したものを動かす場合は、それぞれの戻り値を配列に入れて_re_graphの引数に入れる。)
  funcより前で、ある変数(今回はT)を宣言して、その変数をfuncで使うことで
  その変数の値を変更してグラフを動かすことができるようになる。
  _re_graphはその際に使うメソッドである。
  書き方の一例(特にsetIntervalは変えてもいける。):
  
  ... const id_ctx = ~~ ... let T = 0; //<-- グラフを再描画するときに変更する変数。 ... const data = CompVis._graph(~~~); setInterval(() => { T += 0.01; CompVis._clear_canvas(id_ctx); CompVis._re_graph(data); //<-- 引数には_graphメソッドの戻り値を入れる。 },1000/30);
- _draw_textメソッド
  
  Textを表示する。
  引数はid_ctx,text,position,params
  positionは左上基準のCompVisクラスの数(new CompVis(width,height))
  書き方の一例
  
  ... const id_ctx = ~~ ... CompVis._draw_text(id_ctx,'Text',new CompVis(100,150)); ...
- 全体のコード例
  <!DOCTYPE HTML> <html lang='ja'> <head> <meta charset='utf-8'> <title>CompVisJS Demo — CompVis._graph</title> <script src='https://makeplayonline.onrender.com/Static/API/CompVisJS/latest/CompVisJS.js'></script> </head> <body> <canvas id="canvas"></canvas> <script> let T = 0; const canvas = document.getElementById("canvas"); const id_ctx = CompVis._create_canvas(canvas,500,400); function func1(t){ let circle1 = new CompVis(0,Math.PI*T/4).exp.pro(150); let circle2 = new CompVis(0,4*Math.PI*t).exp.pro(250*Math.sin(T)); return circle1.add(circle2); } function func2(t){ let circle = new CompVis(0,2*Math.PI*t).exp.pro(100*T); return circle; } const data1 = CompVis._graph(id_ctx,func1,0,1,0.005,{radius:2,point_color:"#00f",timeout:10000}); const data2 = CompVis._graph(id_ctx,func2,0,1,0.005,{line_color:"#00b500",timeout:10000}); const data = [data1,data2]; setInterval(() => { T += 0.1; CompVis._clear_canvas(id_ctx); CompVis._re_graph(data); },1000/60); </script> </body> </html>

CompVis Graph

構文例

メソッドの説明

_create_canvasメソッド

_graphメソッド

_graphメソッドの引数

1 id_ctx

2 func

3 start,4 end,5 step

6 params

thick

radius

line_color,point_color

timeout

_clear_canvasメソッド

_re_graphメソッド

_draw_textメソッド

全体のコード例