2010/12/14

JavaScriptでミステリーサークルのようなものを自動生成

フラクタル図形等を作成する際によく用いられる形式文法L-Systemを使って、ミステリーサークルのようなものを自動で生成するものをつくりました。これにより、なんかの儀式にミステリーサークル的な模様が必要になった時に簡単に模様をつくることができます。でも、自分で念を込めて模様を考えたほうが、儀式はうまくいくと思います。

例えばこんな感じの模様ができます。

 

デモ
Key :






なにをしているのか
以下のようなL-Systemを構成し、JavaScriptでCanvasに描画しています。詳しくはソースコードを御覧ください。
Grammer
  Variables : 0
  Constants : [1-9][a-f]
  Start : 0
  Rule : 0 -> md5hash
  Iterate count : 3
ここでmd5hashというのはテキストエリアに入力された文字列のMD5Hash値です。
Semantics
  0 : なにもしない
  d=[1-9] : 左に d x 10 度回転
  a : 50前に直線を描いて進む
  b : 回れ右する
  c : 半径50の円を描く
  d : 原点に戻る
  e : 32前にジャンプする
  f : 半径32の円を描く


余談
テキストエリアに入力された値が同じであれば、同じ模様が出力されます。なにか面白い模様ができたらぜひKeyをコメントしてください!
MD5Hashの計算にはサイボウズ・ラボの光成茂雄さんのライブラリを使用させていただきました。ありがとうございます。

参考
Canvasに色々描いてみた - Webと文字

2010/12/01

Webサイトのサムネイルを撮ってBase64で返すWebサービスつくりました

サーバーサイドでのWebページレンダリングについて調べていたらいつの間にかつくっていました。Base64形式でサムネイルを出力してくれるものは今のところ見当たらなかったので、便利かな。

こちらです!
※負荷がかかった場合にうまくリクエストを捌けないバグがあり、うまく動いていないかもしれません。申し訳ないです。対策中です。

こんな感じのものが撮れます。



使い方
URLをテキストボックスに入力して、Sendボタンを押してしばらく待つと、テキストエリアに何か出力されます。エラーメッセージっぽい場合は無視してください。正しそうならテキストエリアをまるごとコピーしてHPなりブログなりに貼り付けると、うまく画像が表示されるはずです。

内部仕様
使用しているブラウザ : Firefox4 beta7 (en)
フラッシュプラグイン   : Adobe Flash Player 10.2 beta

どんなことをしているか
Xvfbで仮想フレームバッファをつくり、その上でFirefoxを動かし、スクリーンショットを撮って適当に加工してサムネイル化しています。

似たようなサービス
SimpleAPI
IgWebCap
Mozshot
websnaper
2010/12/01現在、僕が試したところ、上記のサービスはあまりうまく機能していませんでした。多分リクエストが多くて負荷が高いのでしょう。
それに加えhttpsに対応していなかったり複雑なURLを送信すると、思ったとおりの結果が得られません。
上記のサービスはサーバー側で画像を一定期間保存するため、サーバーの容量への負担が大きく、また貼りつけ先からのGETリクエストにも答えなければなりません。
拙作のモノはBase64で出力するので、サーバー側で画像を貯めておく必要はありません。

余談
実はこのサービスはNode.jsでのCanvas共有アプリに、書いた絵を保存する機能を付けることを目的にしてできた副産物です。現在のCanvas共有はクライアントから送られてきたデータをそのままサーバーに保存するため、任意のpng画像がサーバーに送り込まれてしまう脆弱性が存在します。事実、公開初日に何者かによりイーノックさんの画像が送り込まれてしまいました。その脆弱性を解消するべく考案したのが、サーバーサイドでのHTMLレンダリング、というわけです。そいういわけでブラウザにはWebSocketおよびWebWorkersに対応したFirefox4betaを選びました。

ご本尊はhttp://etsukata.com/web2img/w2i.plであり、それにたいしてXHRでリクエストをおくっています。サーバーの処理能力に余裕があったらレスポンスヘッダにAccess-Control-Allow-Origin: * を追加してみなさんに使ってもらえるようにしたいと思っています。


参考
pomo123の日記
http://d.hatena.ne.jp/pomo123/20080430/1209532590
The "data" URL scheme - RFC 2397
http://tools.ietf.org/html/rfc2397