ちょっと前に流行った画像のフラクタル化。

 これをソース等を参考せずに独学でなんとかやってみようと思います。

フラクタルとは

フラクタルとは:フランスの数学者ブノワ・マンデルブロ (Benoît Mandelbrot) が導入した幾何学の概念。図形の部分と全体が自己相似になっているものなどをいう(wikipediaより

つまり全体的に見回しても一部分を拡大しても同じような図形が見られる、という意味みたいです。先へ行くほど分かれていく木の枝や、渦がどんどん小さくなっていく巻貝などが自然界で見られるフラクタルの例です。↑の例でも、全体が一つの画像の長方形であると同時に、無数の小さな長方形で中身が区切られているのがわかるかと思います。

単位面積あたりの標準偏差をとる

ではさっそく、アルゴリズムを考えてみます。

  • 背景の単調な部分は大きな長方形が多い
  • 人物の顔や輪郭部分のような細かい部分には小さい長方形が多い
  • 最初は大きな長方形で大雑把に区切られ、だんだん細かい部分への処理に移っていく

といった特徴があるので、まずは「画像の単調な部分、微細な部分を判定する」という処理を考えてみました。以前作った画像をモザイク化するコードからforkしています。

 さて、このコードの中で注目してほしいのは138〜164行目、画像のチャンネルごとに標準偏差を取っていることです。標準偏差とはバラつきのこと。100点満点のテストの平均点が50点だったとき、全員が50点を取っていたら標準偏差は0でバラつき無し。逆に50人が100点、50人が0点だった場合は標準偏差は50となり、かなりのバラつきがあるということになります。

この標準偏差を、モザイク一つ一つの面積あたりで測定します。「単位面積あたりの色のバラつき」を判定し、そのバラつきが一定値以下だった場合は「単調な部分」と判定して赤色に染めます。逆にバラつきが大きく「微細な部分」と判定された部分はそのまま描画されます。

粗さの値を1にすると1pixずつの判定となるので、バラつきはすべて0、画像も赤で塗りつぶされます。逆に大きい値にすると判定する面積も大きくなり、バラつきも大きくなりがちです。最初の判定面積を画像全体とし、それを半分に区切っていって再起処理をかけ、標準偏差が一定値以下になるまで繰り返し処理をかければよさそうです。

つづく。。。

HTML5飯