見出し画像

スケールの変換と、ズーム機能の実装

うーん、フラクタルな画像を生成する「fract-ol」という42 Tokyoの課題に手こずっている。

すでに50時間ほどこの課題に使い、なんとかマンデルブロ集合、ジュリア集合、バーニングシップ・フラクタルの実装が済んだ。

以下はバーニングシップ・フラクタル。

画像を描写する際に複素数平面のスケールから、実際に描写するウィンドウサイズのスケールへと変換するのに必要な「スケールの変換」と、フラクタルであることを確認するための、「ズーム機能」の実装をしたので、簡単にまとめる。

スケールの変換

例えば、複素数平面の実数の軸(横軸)の最小値が-2最大値を2とした時に、その間にある、ある数字xを、ウィンドウの横幅、最小値が0で最大値が500(ピクセル)のススケールに変換すると、どんな数字になるのかというものを計算するものだ。

上の例で具体的にいうと、複素数平面で0であれば、ウィンドウでは250ということになる。

左から数えて250ピクセル目ということだ。

スケールの変換を計算するには、以下サイトに共有されている数式を使用した。


ズーム機能の実装

ズーム機能の実装には、アフィン変換を使用した。

アフィン変換とは、幾何学の分野である図形を回転させたり引き延ばしたりする変換のことだ。

マウス位置の座標をまずは①原点へと移動し、次に②画像の拡大処理を行う。

最後に③原点からマウスの位置の座標へと戻すという3つのステップを踏めば、マウスの位置で拡大と縮小を行うことができる。

なぜわざわざこんなことをするのかというと、画像の拡大縮小は原点を中心に行われるからだ。

この3つのステップについては以下のサイトが図入りでわかりやすい。

数式は以下のサイトを参考にした。

行列の計算方法がわからなかったので、参考にしたサイトは以下となる。


現在抱える問題点

今抱える問題は、画像が無限に拡大されないことだ。

複素数平面をdoubleで数値を設定しているので、もっと幅の大きいlong doubleにすれば違うのかもしれない。

これは明日試そうと思う。

ちなみに現在の着色方法では、スイカがでてくるようになった。

また、ルパンの靴のような箇所も発見した。

フラクタル、面白すぎる。

匿名のコメ・質問はmondまで👍 https://mond.how/ja/hovinci_jp