スパイログラフの説明
このプログラムは，スパイログラフという図形を作成するものです．
スパイログラフは，円形の穴の空いた板と，その穴に入る大きさの円盤を使って描く図形です．プラスティックの板に大きさの異なるいくつかの穴が空いたものと，大きさの異なるいくつかのプラスティックの円盤がセットになったおもちゃ（テンプレート）が市販されています．
穴の内周と円盤の外周には歯が付いていて，その歯を噛み合わせて円盤を動かすと，円盤が回転しながら穴に内接して動くようになっています．
円盤には小さな穴が空いていて，その穴にボールペンなどを挿して紙の上で円盤を動かすことで，穴の位置の軌跡を紙に描きます．ペンを挿す穴も，この画ではひとつしか描いてありませんが，実際のおもちゃでは円盤の中心からの距離が異なるものがいくつも空いています．
穴の大きさと円盤の大きさ，ペンの位置の組み合わせによって，様々なバリエーションの図形を描くことができます．
スパイログラフ（Spirograph）は Hasbro 社の商標で，数学的には内トロコイドというものだそうです．
なお，「遊び部屋」では JavaScript プログラムのことを「おもちゃ」と呼んでいますが，このページで「おもちゃ」と書いた場合は，上で書いた現実のおもちゃのことを指すものとします．
穴と円盤に付いている歯の数は穴／円盤の大きさによって変わります．歯のピッチが同じなら，穴／円盤の円周の長さは歯の数に比例することになります．歯の数は整数ですから，すなわち穴と円盤の円周の比は整数比になることになります．
穴の円周が円盤の円周で割り切れる場合は，円盤を穴に沿って一周させると，円盤の円周上の同じ場所がまた穴と接する位置に来ます．ペンの位置も初めと同じになるので，ペンで描いた図形は描き始めと描き終わりがぴったりつながります．
穴の円周が円盤の円周で割り切れない場合は，一周したときには円盤の傾きが初めと異なるので，ペンの位置も初めとは違うところになります．しかし，何周かして穴と円盤の円周の長さの最小公倍数の長さだけ円盤が動いたところで，再び最初と同じ位置で穴と円盤が接するので，そこでペンで描いた図形も描き始めとつながります．
穴の半径を r1，円盤の半径を r2，ペンを挿す穴から円盤の中心までの長さを r3 としてその関係を図にすると，次のようになります．
穴と円盤の円周の比はそのまま半径の比ですから，r1：r2 が整数比になります．
円盤を穴に沿って動かすと円盤が自転しながら移動（公転？）します．するとペンの位置は円盤の中心の周りを回りながら，円盤と共に穴に沿っても移動することになります．ペンの動きは両者の動きが合成されたものになるので，複雑なものになります．
このプログラムでは r1，r2，r3 をパラメータとして与えて，円盤の移動に伴うペンの移動の軌跡を描画します．
使い方
「r1」，「r2」，「r3」の各フィールドにそれぞれ r1，r2，r3 の値を入力します．「r1」，「r2」には整数値を入力します．「r3」には小数も入力できます．
実際のおもちゃでは，あらかじめ用意されている穴と円盤の大きさ，ペン穴の位置の中からしか組み合わせを選ぶことができませんが，プログラムの場合は自由に大きさ／位置を数値で指定して組み合わせを作れます．
「r3」には「r2」より大きい値を指定することもできます．現実のおもちゃでは，円盤上にペン穴があるため必ず r3 ＜ r2 となりますが，プログラムの場合は r3 ≧ r2 にすることも可能です．r3 ＞ r2 の場合は，ペンが穴からはみ出すような図形が描かれることになります．
もうひとつ，「スケール」という省略可能なパラメータがあります．これは図形を描く大きさを指定するものです．
「スケール」に何も入力しない場合は，図形の描画領域一杯に図形を描くように大きさが調整されます．
穴の中心からペンまでの距離の最大は，上の図から判るように r1 - r2 + r3 になります．「スケール」には，この値との比率で図形を描画する大きさを指定します．たとえば r1 - r2 + r3 の値が 10 のとき「スケール」に 15 と入力すると，描画領域の 2/3 の大きさで図形が描かれます．
r1 - r2 + r3 より小さい値は入力できません．言い換えると，図形の一部が描画領域からはみ出すような大きさの指定はできません．「スケール」には小数も入力できます．
図形をひとつだけ描く場合には，「スケール」を指定しても単に図形の大きさが変わるだけで，あまり大きな意味はありませんが，後述のように複数の図形を重ねて描く場合にこの項目が意味を持ちます．
大きさを自動で決めてしまうと，複数の図形を重ねるときにどの図形も同じ大きさになってしまい，色々な大きさの図形を組み合わせて描くことができません．
実際のおもちゃでは，穴と円盤の大きさ，ペンの位置によって図形の大きさが変わります．複数の図形を描くときに「スケール」に同じ値を指定すれば，それぞれの図形の r1 〜 r3 の数値に比例した大きさで各図形が描かれるので，実際のおもちゃで描くのと同じ状態になります．
さらに，複数の図形で別々の値を「スケール」に指定することもできるので， r1 〜 r3 の値に制限されずにそれぞれの図形の大きさを自由に変えることもできます．
「色」で図形を描く色を選べます．
「途中経過を表示しない」をチェックすると，描画の過程を表示せず最終的に出来上がった図形だけを表示します．チェックしないときは描画の過程をアニメーション表示しますが，図形が完成するまでに時間がかかるので，結果だけを早く見たいときにはこの項目をチェックします．
以上の項目を設定して「描画開始」をクリックすると描画を開始します．描画中に「描画中止」をクリックすると，描画を中止します．ただし，途中経過を表示しない設定にしている場合は「描画中止」は使用できません．
「クリア」をクリックすると，図形を消去して描画領域を白紙の状態に戻します．
ひとつの図形を描いた後，さらに続けて別の図形を描くことができます．図形を消去せずに，再び各項目を設定して「描画開始」をクリックすると，前の図形に重ねて次の図形を描きます．
重ね描きをした後「やり直し」をクリックすると，最後に描いた図形が消去されます．重ね描きした図形が気に入らなかったときは，その図形だけを消去して別の図形を描き直すことができます．「やり直し」で消去できるのは直前に描いた図形のみです．二つ以上前に戻ってやり直すことはできません．
重ね描きを終えて白紙の状態からまた作図したいときは，「クリア」をクリックしてください．
作成例
これは，以下のような設定で描いた 3 つの図形を重ねたものです．
| r1： | 105， | r2： | 80， | r3： | 24， | スケール：80， | 色：赤 |
| r1： | 105， | r2： | 80， | r3： | 50， | スケール：80， | 色：青 |
| r1： | 96， | r2： | 63， | r3： | 26， | スケール：80， | 色：緑 |
