夏休みの宿題はこれで決まり!絵心ゼロでもブラウザだけで簡単にアートが作れる!CTXFR.COM

夏の三連休もいよいよ最終日。
みんなプログラミングしてるかな?

連休初日にwise9編集部のあるUEI/ARCではひさびさにハッカソンをやってみたぞ。

そのハッカソンでenchant.jsの開発者、田中諒くんが開発したのが、このサイト、「CTXFR.COM」

これは「Context Free(コンテキストフリー)」という、一種のプログラミング言語をJavaScriptでシミュレートして、ブラウザ上だけでContext Freeのプログラミングが楽しめるサイトなんだ。

絵心が無くても、コードをちょこちょこっと書くだけでいろんなアートを作り出せるContext Free。
僕も正直良くは知らなかったんだけど、試してみるとメチャクチャ面白いぞ!

ほんとにわずかなコードだけでアートが書けるんだ。

Context Freeのプログラミングは関数型言語のプログラミングにちょっと似ている。
実際のコードを見てみよう。

startshape Shape

rule Shape{
SQUARE {}
}

この一番シンプルなプログラムは、単に画面の真ん中に黒い正方形を表示する。

startshapeは、最初に描かれる図形を意味し、ruleはその名の通り「ルール」、SQUAREは、正方形を描く命令だ。

SQUAREのうしろにある{}の中にパラメータを入れると色をつけることができる。

startshape Shape

rule Shape{
SQUARE {hue 1 sat 1 b 1}
}

このhue(色相)、sat(彩度)、b(明るさ)指定による色の指定は若干戸惑うかも知れない。けど慣れればどうってことないぞ。

さて、これだけでは単に正方形がでてくるだけで面白くない。
Context Freeが面白いのはここから。

関数型言語でお馴染みの再帰呼び出しを使うのだ。

ruleで定義しているShapeをShapeの内部から呼び出すわけ。

startshape Shape

rule Shape{
SQUARE {hue 1 sat 1 b 1}
Shape {x 1 s 0.9}
}

このとき、xに1、sに0.9を渡しているのがポイント。
実際の実行結果は下図のようになる

xに1が足されながら、s、つまりスケールに0.9を掛けている。
その結果、横に小さな正方形がどんどん追加されていくわけ。

s(スケール)以外にr(回転)やyなどもある。
さらに面白いのは、同じ名前で複数のルールを定義できるところ

startshape Shape

rule Shape{
SQUARE {hue 1 sat 1 b 1}
Shape {x 1 s 0.9 hue 2 sat 1}
}

rule Shape{
CIRCLE {hue 1 sat 1 b 1}
Shape {x 1 s 0.9 r 10 hue 5}
}

こんな感じでShapeという全く同じルールを二つ入れておくと、50%の確率でどちらかのルールが適用される。

たとえば、下のほうのShapeの定義では、SQUAREのかわりにCIRCLEを描画し、r 10を与えているので、これが呼ばれたときにググっと曲がることになる。

実行結果は以下。

この、ルールの発動確率を決めることも出来る。

startshape Shape

rule Shape{
SQUARE {hue 1 sat 1 b 1}
Shape {x 1 s 0.9 hue 2 sat 1}
}

rule Shape 0.2{
CIRCLE {hue 1 sat 1 b 1}
Shape {x 1 s 0.9 r 10 hue 5}
}

こんな感じで、ルールの後ろに数字をつけると、発動確率を指定できる。
この場合は、曲がるルールは20%の確率でしか実行されない。

再帰の中で二回自分自身を呼び出すと分岐させることもできる。

startshape Shape

rule Shape{
SQUARE {hue 1 sat 1 b 1}
Shape {y 1 s 0.9 hue 2 sat 1}
}

rule Shape 0.2{
CIRCLE {hue 1 sat 1 b 1}
Shape {y 1 s 0.9 r 10 hue 5}
Shape {y 1 s 0.9 r -20 hue 5}
}