趣味は車輪の再発明♪

JavascriptとSVGでタートルグラフィックスやってみよう!



javascriptでSVGを簡単に描けるようにベタなルーチンを作っていたら、なぜか昔懐かしい「タートルグラフィック」ってのを思い出してしまいまして、久しぶりに再帰処理でフラクタルな図形などを描いて見ましょかねとやってみた。

タートルグラフィックスってのは、LOGOという教育用のプログラミング言語に備わっていた(らしい)グラフィックルーチン(?)です。 タートル(=亀)という仮想的なロボットみたいなの(元はホントのロボットだったらしい)を動かして絵を描かせます。 タートルに「前進」や「回転」という指示を与え、動いた経路が絵になっているというね。聞くだけでかわいいでしょ。 単純な制御で結構複雑な図形が描けます。特に再帰処理によるフラクタル図形が有名です。

とはいえ、手元にLOGOの処理系がないので、タートルに相当するクラスをjavascriptで実装し、svgに描くようにしてみました。

形状={ クランク?, 木?, コッホ曲線, シェルピンスキーの三角形, }
再帰の深さ(depth)={ 0, 1, 2, 3, 4, 5, 6, }

svgの描画ルーチンやタートルの実装は、 GitHubに置いてありますので、ご参考に。



RSS Feed Widget
JavascriptとSVGでタートルグラフィックスやってみよう!
(http://bicycle.life.coocan.jp/takamints/index.php/techtips/turtleGraphics)
by Koji Takami ( email: vzg03566@gmail.com, GitHub: takamin )