高校数学をCinderellaで：２次関数のグラフ(1)
２次関数のグラフは，高校1年生の1学期に学びますが，ここで生徒の理解度に差がついてきます。まず，中学で学ぶ ${y=ax^2}$ のグラフについて確認しておきましょう。教科書に書いてある通り，関数のグラフとは，${x}$ の値と対応する ${y}$の値を座標とする点${(x,y}$の集まり（集合）ですが，そのことが十分理解されていないのが現状ではないでしょうか。
中学校では（高校でも），${x}$ の値と対応する ${y}$の値を表にして点をとりますが，そのあと，「それらの点をなめらかにつなぐ」としているのが多いでしょう。なめらかにつながずに折れ線のグラフを書く生徒もいます。なぜ「なめらかにつなぐ」のかが理解されていないのです。
たくさん点をとって，曲線になるようにしていけばいいのですが，手作業ではとても大変です。そこでコンピュータによる描画の登場です。
リンク先を開くと次の画面になります。
今，点が７個表示されています。定義域の両端の点は画面の上の方にはみ出しているので見えません。
右上に２つスライダがあります。${y=ax^2}$ の ${a}$ の値とプロットする点の数を変えることができます。
原点に青い点があります。この点の座標は $[x,f(x)]$ です。ドラッグすることができます。
次のことをやってみましょう。
・点の数を増減する
・${a}$ の値を変える。今は ${\dfrac{1}{4}}$ ずつ変化させることができます。
・ボタン「グラフ表示」を押してグラフを表示する。もう一度押すとグラフは消えます。
・青い点をドラッグしてみる。
このアプリケーションは，教材提示用としても，生徒の体験用としても使えます。どう使うかは教師次第。
Cinderella での作り方
Cinderella でこのアプリケーションを作る手順を書いておきます。
(1) スライダなどを作図する。
まず，画面下の磁石アイコンをクリックして座標軸と方眼を表示し，スナップモードにしておきます。
作図ツールの「線分を加える」を使って線分ABをとります。スナップ機能を使って格子点に置くとよいでしょう。
次に「点を加える」ツールで，線分上をクリックして点Cを取ります。動かすモードに戻して，Cをドラッグすると線分上を動くことを確かめておきましょう。
同様にして，線分DEと点Fをとります。
原点に点Gをとります。
「文字を追加する」ツールで，「グラフ表示」という文字を適当なところに書いておきます。インスペクタを開いて，「要素の情報」で，「ボタンとして使う」「クリックボタン」の両方にチェックを入れ，スクリプト欄に「graph=!graph」と書いておきます。「!」はブール演算子の「否定」です。これで，この文字列をボタンとして定義し，クリックするたびに graph の値が true と false に交互に変わることになります。
(2) スクリプトを書く
スクリプトメニューからCindyScript を選び，スクリプトエディタを開きます。
まず，Initialization スロットをクリックし，次の1行を書きます。初期設定です。
graph=false;
次に，Draw スロットに次のコードを書きます。
a = C.x - (A.x+B.x)/2;
a = round(a*4)/4; // aをフリーにするときはコメント文に
n = 5 + round(|F,D|2)2;
f(x):= ax^2;
drawtext([5, 8.5], "$y=ax^2$ のグラフ (-4 ≦ x ≦ 4)", size->18);
drawtext([5, 7], "係数 a="+a, size->16);
drawtext([5, 4], "点の数", size->16);
drawtext([0.9, -0.6], "1", size->16);
d = 8/(n-1);
repeat(n, s, start->0,
x = -4 + ds;
draw([x, f(x)], size->2, color->[0, 0, 0]);
);
//G.x = 0;
G.y = f(G.x);
drawtext(G.xy + [0.7, -0.2], "[" + G.x + "," + G.y + "]", size->16);
drawtext([-1.3, -0.6], "-1", size->16);
if(graph, plot(f(x), start->-4, stop->4));１行目で，点Cの位置からaの値を取得します。2行目はそれを${\dfrac{1}{4}}$きざにするものです。この行をコメント文にすればaの値は全くフリーになります。
３行目で，点の個数をスライダから決めます。
４行目は２次関数の定義。
５行目から，画面に文字を表示します。
９行目は，プロットする点の間隔です。
10行目からの repeat 文で点をプロットします。
14行目は，ドラッグする青い点（今はまだ赤）が画面をはみ出してしまったときの予防です。
// をはずせば，点は原点に来ますので，その後 // でコメント文にしておきます。
次の行で，青い点が常にグラフ上にあるようにできます。
最後の２行は目盛数字１とー１の表示です。
(3) 体裁を整える
以上でうまく動いたら，インスペクタで画面の体裁を整えます。
・背景を白にします。
・点や線のラベルを非表示にします。
・スライダの両端の点を小さくし，固定します。（ピンで留める）
・原点の点Ｇの色を青にします。
以上です。
うまくできたら，ファイルメニューの「HTMLに書き出す」でCindyJSのファイルにして，ブラウザで動かしましょう。