CoffeeScriptでLOGO風に絵を描けるサイトを作った

FAQ

なに?

LOGOタートルグラフィックスは、子どもや学生でも簡単にプログラムで作図できるように作られたプログラミング言語です。
今回このLOGOのいくつかの命令セットをCoffeeScriptによって実装し、ブラウザ上で動かせるサイトを作りました。

どこ?

ここです!
TurtleMochaという名前です。
ぜひ遊んでみてね!
最初TurtleMocaと書いたのを直したのはないしょだよ…(コミットログに残ってるけど)

どうやって?

はじめに、LOGOは子どもでも簡単にできると言いました。
しかし、このサイトにはまだコードの入力欄と実行結果の表示欄があるだけです。
初学者に役立つようなナビゲーション機能はなんら実装されていません。
つまりすでにLOGOを知っていないと遊ぶのは難しいかもしれません。ごめんなさいm(_ _)m

現在実装されている命令はfd, bd, lt, rt, pendown, penup, pencolor, pensize, clear(), home()です。
repeatなど制御系の文がありませんが、コードはcoffee-script.js上でコンパイル・実行されるので文法はCoffeeScriptで書けます。すなわち関数定義や繰り返し処理は簡単に出来ます。もっとも、それはもはやLOGOとは呼ばないかもしれませんが。
CoffeeScript書くの楽しいですよ!

冒頭のイチョウ型っぽい形を描くコードを掲載します。LOGOがわからない方でも、このコードを貼り付けて実行するだけで動くので、どうぞ一度試してみてください。あ、Canvasを使っているので動くブラウザを使ってください(IE9,Firefox,Chromeなど)。

home()
clear()
pensize 1
tree = (n, angle) ->
  if(n==1)
    return false
  else
    d = n*4
    left angle
    forward d
    tree n-1, angle
    backward d
    right angle*2
    forward d
    tree n-1,angle
    backward d
    left angle
    return

for i in [1..4]
  tree 10,10
  lt 90

なぜ?

LOGOに愛着があったからです。初めて触れたプログラミング言語でした。
なお、LOGOをJavaScriptで実装しブラウザで動かそう、というサイトはすでにいくつかあります。
wikipedia:Turtle Graphicsの外部リンクを参照するといいかもしれません。

さらに、CoffeeScriptによってLOGOを動かそうという試みもすでに存在しますjsdo.it CoffeeScriptでタートルグラフィックス(再帰的な木)
TurtleMochaのコードはこれを基にいくつかの機能を付け足したに過ぎないものです。

jsdo.itでForkすればいいじゃないの、という意見もありそうですが、この手のコードは無用な夾雑物(Turtleの定義部など余計な情報が見える画面)を除いて使えることが大切なのだと考えています。

他の機能を挙げます。サイトにアクセスすると、テキストエリアの下部分に書いたコードがリアルタイムでカラーリングされたものが表示されます。これはhighlight.jsの機能を利用したものです。Codeacademyのコードがリアルタイムでカラーリングをされているのを見ていて、同様の機能を持たせたいと思い調べていたのですが、中途半端な実装になってしまいました。textareaを直接シンタックスハイライトすることはできないので、これをうまい具合に表示するのはJavaScriptやDOMに明るくないわたしにはやや難しい課題です(Codeacademyのソースを読んでも何をしているのか良く分からなかった)。

Issues

  • カメがいない! 向いている方向もわからない!
  • 各種メソッドを実装する。
  • コードがリアルタイムにハイライトされる入力欄をちゃんと作る。
  • 入門者でも使えるように教育的機能を揃え(る|たい)。
  • Git & Githubの使い方を覚える。

(おまけ)いつ、だれが?

CoffeeScriptを勉強しはじめてひと月近く経ったので、なにか作ってみようと思いやってみました。あとGitHubのアカウントを作りっぱなしで放置してたのをどうにかしたかったので! 製作期間は半日ほどです。前述のとおり、Turtleのコードは借り物なので手間も時間もかかっていませんが、coffee-script.jsやhighlight.jsやTwitter bootstrapやGitHubの使い方を調べていて時間がかかりました。
GitHubのユーザ名はほぼ本名だけど気にしたら負け。