動的にグラフを描画する

点が動きながらグラフを描いていくというツールの作り方です。

時間とともに変化していくのですから、コンピュータの内部時計を使います。そのための関数と環境がCindyScriptには用意されています。

環境というのは、内部時計にアクセスしたりするコードを書かなくてもすむように、すでに用意されているものです。それが、Timer Tickスロットです。

このスロットに t=seconds(); と書くと、内部時計を参照してその時刻がtに代入されます。このとき、絶対的な時刻ではなく、resetclock()関数を実行してから経過した時間が取得されるのです。resetclock() は、SimulationStart  スロットに書いておきます。

こうすると、Cinderellaの画面の左下にコントロールボタンが現れます。

Timer Tickスロットには次のようなコードを書いておきます。

===========================================================================

t=v*seconds();

if(t<tstop,

  P.x=fx(t);

  P.y=fy(t);

  plotrose(0,t);

  Q.x=2.5+t/2;

  Q.y=r(t);

  plot(r(2*(#-2.5)),start->2.5,stop->2.5+t/2);

  ,

  plotrose(0,tstop);

  plot(r(2*(#-2.5)),start->2.5,stop->2.5+tstop/2);

);

if(t>tstop,drawtext([0.1,-2.3],"描画終了 STOPボタンを押してください",color->[1,0,0],size->16););

===========================================================================

画面のプレイボタンを押すと、Simulation Startスロットに書いた resetclock() が実行された後、このスロットのコードが実行されます。

まず1行目で時刻を取得します。このスロットはおよそ1ミリ秒ごとに実行され、seconds()によって時刻が刻々と代入されるのです。

係数vによって実行の速度を調整しています。

tstop は描画を終了するtの値です。それ以前であれば if 分の前半を実行します。点Pと点Qの位置を関数値で決め、plotrose(0,t)で０からｔ、つまりその時のtの値までグラフを描画します。これにより、点P,Qのあるところまでグラフが描かれるのです。

時刻が tstopを超えたら、if 文の後半を実行します。tstopまで描画します。時刻はどんどんすぎていきますが、描画されるのはtstopまでです。

なお、plotroseは自作した、正葉曲線を描画する関数、plotはCindyScriptに用意されている、グラフを描く関数です。

そのほか、必要は初期設定は Initializationスロットに書き、スライダの位置からパラメータを取得するコードは Draw スロットに書きます。

「正葉曲線を動的に描く」ページで使っているツールの全コードをつぎに掲載しておきます。

==== Initialization ======================

n=2;

k=1;

m=0;

v=0.5;

tstop=2*pi;

r(t):=sin(n*t/k)+m;

fx(t):=r(t)*cos(t);

fy(t):=r(t)*sin(t);

reset():=(

  P.x=fx(0);

  P.y=fy(0);

  Q.xy=[2.5,r(0)];

);

reset();

// バラ曲線 fx,fy をsからeまで描く

plotrose(s,e):=(

  nn=500;

  p1=[fx(s),fy(s)];

  repeat(nn,t,

    p2=[fx(s+(e-s)*t/nn),fy(s+(e-s)*t/nn)];

    draw(p1,p2);

    p1=p2;

  );

);

==== Draw ============================

n=floor((C.x-A.x)*4+0.01)+1;

k=floor((R.x-N.x)*4+0.01)+1;

m=U.x-S.x;

v=P0.x-Y.x;

drawtext([C.x+0.05,C.y+0.1],"n="+n,size->16);

drawtext([R.x+0.05,R.y+0.1],"k="+k,size->16);

drawtext([U.x+0.05,U.y+0.1],"m="+m,size->16);

drawtext([2.5+pi/2-0.05,-0.2],"π",size->16);

drawtext([2.5+pi-0.1,-0.2],"2π",size->16);

==== Timer TIck =========================

t=v*seconds();

if(t<tstop,

  P.x=fx(t);

  P.y=fy(t);

  plotrose(0,t);

  Q.x=2.5+t/2;

  Q.y=r(t);

  plot(r(2*(#-2.5)),start->2.5,stop->2.5+t/2);

  ,

  plotrose(0,tstop);

  plot(r(2*(#-2.5)),start->2.5,stop->2.5+tstop/2);

);

if(t>tstop,drawtext([0.1,-2.3],"描画終了 STOPボタンを押してください",color->[1,0,0],size->16););

==== Simulation Start ======================

resetclock();

====================================

＜ 戻る ＞