Skip to content

夏休みの宿題はこれで決まり!絵心ゼロでもブラウザだけで簡単にアートが作れる!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}
}

こんな感じで再帰の複数呼び出しを行うと簡単に木のようなものを作ることができる。

また、以下のような構文もあり

startshape Shape

rule Shape{
 4* {x 2 r 5} SQUARE{}
}

こうすると、同じルール呼び出しを複数回まとめて行うこともできる。
この場合は、SQUAREをxに2、rに5を加えながら4回呼び出して、以下のような実行結果になる

ってな感じで、Context Freeは非常に手軽かつ強力なアート言語だと言える。
人間には絶対に描けないような美しい図形を簡単に描くことができるんだ。

しかもCTXFR.COMなら、他の人が作ったアートをFORKして、ちょっとパラメータを変えただけで自分自身のアレンジを加えて新しいアートを作り出すことができる。

夏休みの宿題に、ちょっとしたアートを題材に選ぶなら、Context Freeで遊んでみるのもオススメだぞ

このエントリーをはてなブックマークに追加
はてなブックマーク - 夏休みの宿題はこれで決まり!絵心ゼロでもブラウザだけで簡単にアートが作れる!CTXFR.COM
Post to Google Buzz
Share on GREE

Related posts:

  1. enchant.jsで3Dゲームを作ってみる!
  2. かんたんプログラミング #4 コンピュータが判断する?

Facebook comments:

Post a Comment

Your email is never published nor shared. Required fields are marked *
*
*