Munching Square

デモを見る（github.io）

座標変換とMunching Squareの組み合わせです。モアレ模様が出ています。

Munching Squareは x^y という簡単な式で現れる模様です。

var x, y
for (y = 0; y < canvas.Height; ++y) {
    for (x = 0; x < canvas.Width; ++x) {
        canvas.setPixel(x, y, brightnessToColor(x ^ y))
    }
}

Go言語に興味を持ってA Tour of Goを進めていたところSliceの演習で x^y が紹介されていたことが制作のきっかけとなりました。素のMunching Squaresは以下の画像のようになります。

-

私がMunching Squareのことを知ったのは、XScreenSaverがきっかけです。iOSで動くのでごろ寝しながら楽しめます。動画のMunching Squaresは、説明によると古典的な動きをシミュレートしているため上のものとは少し異なっています。

-

実は以前にWebGLでやってみようと思って失敗しています。お手本となるコードは見つけたのですが、そのときは私のコード読解力が低かったので投げました。WebGL 1.0のシェーダでは ^ 演算子が使えないので、XORを自前で実装する必要があります。お手本では ^^ (logical exclusive or) という演算子を使って何とかしています。