自作のWebアプリ「Quarter」を公開しました。
マウスを動かすとその場所の円が少しずつ4分割されていき、隠れていたアルバムジャケットの画像がじわじわと姿を現すクイズです。
Quarter
tool.stabucky.com
Quarterとは
「Quarter」は、名前の通り画像を4分の1ずつに割っていくことで少しずつ絵柄を明らかにするミニゲームです。
最初は画面いっぱいに大きな円が1つ表示されているだけですが、カーソルを近づけた場所から徐々に円が分割されていき、色の違いが積み重なることで元のジャケット画像のシルエットや色合いが浮かび上がってきます。
題材にしているのは、ディープ・パープルやレッド・ツェッペリン、ピンク・フロイドといったロックの名盤のジャケットです。
何のアルバムかを当てながら遊んでみてください。
遊び方
操作はとてもシンプルです。
- マウスを動かすと、その場所の円が少しずつ4分割されて解像度が上がっていきます
- ダブルクリックすると、その画像の分割状態が最初にリセットされます
- 「別の画像にする」ボタンで次のジャケットに切り替わります
- 「答えを見る」ボタンを押すと、元のジャケット画像をそのまま確認できます
一箇所にカーソルを置き続けるほどその部分がくっきりしていくので、正解が分かるまでどれくらい粘るかも遊び方の一つです。
裏側の仕組み
見た目はシンプルですが、裏側では画像をあらかじめ四分木(quadtree)という構造に変換しています。
画像の領域を4つに分割し、それぞれの領域の色のばらつきが大きい場合はさらに4分割、というのを再帰的に繰り返して、色が均一な領域に達したところで分割を止める処理です。
この分割データを事前に計算してファイルに書き出しておき、実際にブラウザ上で遊ぶときはカーソルの位置に応じてその木構造を少しずつ辿りながら、対応する円を分割して描画しています。
分割済みのデータを使い回しているだけなので、重い画像処理をリアルタイムで行わなくても滑らかにアニメーションできる仕組みです。
コメント