タートルグラフィクス用カメの表示 📖

タートルグラフィクスのPromise版を作成した際にカメの画像が無くて寂しかったので「あれ、円と円形のグラディエーションの組み合わせで似た感じのがかけそう？」ということで書いてみました。タートルグラフィクスでは使わないんですがクリックすると足の動きが変わります。

プログラム: (→大)
円グラディエーション = NULL 足揺れ = 0 揺れ向き = 1 揺れ幅 = 5 足モード = 「停止」 向き = -90 FID = 0 準備 0でメインループ ●足モードチェンジ 　足モードで条件分岐 　　「停止」ならば、足モードは「移動」。ここまで。 　　「移動」ならば、足モードは「回転」。ここまで。 　　「回転」ならば、足モードは「停止」。ここまで。 　ここまで ここまで ●準備 　CTX = 描画中コンテキスト 　# 甲羅用の緑のグラディエーション 　円グラディエーション = CTXの"createRadialGradient"を[32,32,0,32,32,24]でJSメソッド実行 　円グラディエーションの"addColorStop"を[0.0,"rgb(240,255,240)"]でJSメソッド実行 　円グラディエーションの"addColorStop"を[0.3,"rgb(224,255,224)"]でJSメソッド実行 　円グラディエーションの"addColorStop"を[1.0,"rgb(80,255,80)"]でJSメソッド実行 　描画中キャンバスの「click」に「足モードチェンジ」をDOMイベント追加 　 　「キャンバスをクリックすると足の動きが変わるよ」を表示 ここまで ●後始末 　描画中キャンバスの「click」から「足モードチェンジ」をDOMイベント削除 　FIDを画面更新処理取消 ここまで ●(TIMESTAMPで)メインループ 　足前後 　全描画クリア 　向きに足揺でマイカメ描画 　FID = 「メインループ」を画面更新時実行 ここまで ●足前後 　足揺れ = 足揺れ + 揺れ向き 　もし、ABS(足揺れ) ≧ 揺れ幅ならば、 　　揺れ向き = - 揺れ向き 　ここまで ここまで ●(Dに揺れで)マイカメ描画 　F = 0 　B = 0 　足モードで条件分岐 　　「回転」ならば、F = 揺れ。ここまで。 　　「移動」ならば、B = 揺れ。ここまで。 　ここまで 　キャンバス状態保存 　# 頭と足の描画の準備 　"rgb(144,144,64)"に線色設定 　"rgb(208,192,80)"に塗色設定 　１に線太さ設定 　# 頭描画 　X = COS(DEG2RAD(D))*23+32 　Y = SIN(DEG2RAD(D))*23+32 　[X,Y]へ8の円描画 　# 足描画 　DEGで[50+F,130-F,230-F,310+F]を反復する 　　X = COS(DEG2RAD(D+DEG))*24+32 　　Y = SIN(DEG2RAD(D+DEG))*24+32+B 　　[X,Y]へ5の円描画 　　B = -B 　ここまで 　# 甲羅描画の準備 　円グラディエーションに塗色設定 　　"rgb(16,160,16)"に線色設定 　　２に線太さ設定 　# 甲羅描画 　[32,32]へ24の円描画 　キャンバス状態復元 ここまで