ねこでじ(Nekodigi)

Nekodigi’s diary

学習中の気づきをまとめています。応援よろしくお願いします

【Processing】イスラム風星模様を描く

成果物

www.youtube.com

こんな単純に見える模様にも、ベクトルの交差や、三角関数、内接円など高度な数学が使われています。かなり苦戦しました。

仕組み

delta angleで模様をコントロールしています。具体的には。

タイルの各辺の中央から、deltaの量だけずらした場所から、angleの角度で、対角線上で他の線とぶつかるまで線を伸ばすアルゴリズムです。

この論文の図がわかりやすいと思います。

http://www.cgl.uwaterloo.ca/csk/papers/kaplan_gi2005.pdf

他の線とぶつかるまでというのが難点で、CodingTrainでも一時間以上の解説になっています。

www.youtube.com

今回使った交差点を求めるアルゴリズムは、こちらです。

paulbourke.net

※追記 ベクトルの交差点求めなくてよいみたいです…代わりに三角関数で辺の長さを求めることができるようです。Githubの中身を更新して、辺の長さのレベルも変えられるようにしました。

作り方・コード

今回は、まず交差点を求めるプログラムから始めました。

次にCodingTrainにはないN角形の星模様を作れるようにしました。

※追記 p5.jsバージョンでは、CodingTrainにありました。完敗…

github.com

N角形の星模様一つのバージョンはIslamic_Star_Patterns_Singleという名前です。

最後に、先ほど作ったN角形の星模様を配置しました。簡単なものを作ってみたのですが、それでも数式が難しいです。Islamic_Star_Patterns_Multiという名前です。

github.com