イノベーション エンジニアブログ


株式会社イノベーションのエンジニアたちの技術系ブログです


このエントリーをはてなブックマークに追加

再帰的アルゴリズムを学びつつドラゴン曲線をps5.jsで描画

こんばんはオザサです。

最近はスクラムを学びつつ開発プロセスの改善に取り組んでおり、
コーディングの時間自体は少し減ってしまったなとも思い、
再帰的アルゴリズムのお勉強ついでにドラゴン曲線を描画してみました。

実装について

描画には以前も使用したps5.jsを用いてみました。

ドラゴン曲線を描画するため、A地点からB地点まで結んだ直線に対し、
直角になる二本の線分を引くことのできるC地点を求めることになるのですが、
さらにそのA地点からC地点に結んだ直線に対し、
直角になる二本の線分を引くことのできるD地点を求めることになる、
といった処理になります。

コードの一部

var xx = bx - ax;
var yy = -(by - ay);
var cx = ax + (xx + yy) /2;
var cy = by + (xx + yy) /2;

こんな風に2点を元に新たな1点を求め、描画する部分を再帰的に記述することができるわけです。

やってみた

再帰回数0回

dragon0.png

ざっくり処理の流れをイメージするとこんな感じです。

dragon0f.png

再帰回数1回

dragon1.png

再帰回数2回

dragon2.png

再帰回数12回

dragon12.png

うん、なんとなくフラクタル図形はかっこいいように思います。
しかし、再帰回数の指定をあげすぎると私のパソコンがうなりだしましたので、
これ以上複雑な図形をお見せできないのは申し訳ないです!

感想

再帰的アルゴリズムを用いれば、
記述自体はかなりすっきりするなと感じました。
抽象度と可読性のバランスを考慮しつつDRYを意識していこうと思います!!

しかしながら数学的な知識が私にないので、
かなり色々調べつつになってしまいアウトプットはできているもののかなり時間がかかってしまいました。
精進あるのみです。

また、今回折角ps5.jsを使っているのにも関わらず、
line関数くらいしか用いておらず、色すら付けられていない現状なので、
リベンジしようと思います!

ちなみにGoogleで「再帰」と検索するとほっこりしますのでオススメです!
こちらからは以上です!!