HTML5 の canvas を使って動くトップ画像を作ってみた

  • ????????????????????

このブログは現在(2011/8)、wordpress 3.2.1 に標準搭載された html5 対応テーマ「TwentyEleven」を改造して使っています。標準状態ではトップ画像の部分には美しい写真がランダムに表示されることになっていますが、この部分を html5 の練習がてら、canvas要素を使って動かしてみました(暇だなあ)。

IEの対応とかそういう細かいこと(といったら怒られるかもしれませんが)は気にしていません。canvas に対応していない場合は標準のランダム画像が表示されます。ところでこの記事、タイトルから見ると canvas の解説でも始めそうな勢いですが、canvas については全く触れません。あしからず。

このウィルスのようにうごめく気色の悪いアニメはイジング模型と呼ばれる(物理学の有名な)強磁性体のモデルが元になっています。各マス目の二色の色は -1, 1 の二状態に対応しています。マス目の数が N 個あるとすれば、状態は2のN乗通りの状態があります。この状態を x (各成分が -1, 1 の値を取るN次元ベクトル)としましょう。ランダムな状態 x からスタートして、J>0 を適当なパラメータとして
H(x)=-J \, \sum_{(i,j)}x_ix_jというエネルギー関数(ハミルトニアン)を最適化する過程をアニメーションさせると、トップ画像のようになるわけです。ただし、和は格子状で隣り合うペアについて重複なく(周期境界条件で)とっています。

鋭い人はこのエネルギー関数の最適解は全部のマスが -1 もしくは 1 になるときじゃないか!と気づくと思いますが、(視覚的な意味で)それじゃ面白く無い(それに現実もそうなっていない、ある状況では真の最適解は実現しない)ので、局所的な最適化っぽいことをしています。

アルゴリズムについて解説しましょう。ある状態 x が与えられたときにランダムに選んだひとつのマス目の状態を反転(フリップ)させます。フリップした新しい状態を x’ としたときに、この新しい状態に移行するかを
\exp(H(x)-H(x'))>Uという条件で判定してそれをひたすら繰り返す、というだけです。ただし、U は判定ごとに発生する [0,1] の一様乱数です[1]

10分くらい眺めているとパターンができてくると思います。このパターンは毎回異なります。つまり、毎回異なる局所解に落ちているわけです。

プログラムは非常に簡単で、しかも軽いです。なぜならエネルギーの差分
H(x)-H(x')はフリップしたマス目の周囲にだけ注目すれ十分であり、ハミルトニアンに現れる和を取る必要がまったくないからです。プログラムを書く際にはいろいろな表現方法があると思います。

canvas への描画部分はどの入門サイトにもあるような基本的なものしか使ってません。canvas の練習をしたいけど適当な題材が見つからない、という人はこの例のような単純なセル・オートマトンを実装してみるというのもひとつの手かもしれません。

HTML5 Canvas HTML5 Canvas
Steve Fulton,Jeff Fulton,安藤 慶一

オライリージャパン
売り上げランキング : 88581

Amazonで詳しく見る

はてなブックマーク - HTML5 の canvas を使って動くトップ画像を作ってみた
Pocket

  1. [1]
    シミュレーテッドアニーリングに似ていますが、温度が低下していきません。状態がボルツマン分布に従うとしたときの、MCMC としては理論的には正しいはずです(いわゆるメトロポリス法になっている)。しかしエネルギー関数があまりにも性質が悪く、提案分布もいい加減すぎるために、このアルゴリズムでは有限の時間でただしいサンプリングはできないと確信してよいでしょう。