content正n角形の完全グラフを一筆書きで描くJavaScriptアルゴリズムcanvas数学es2015はじめに正n角形の完全グラフを描くプログラムをJavaScriptで書いてみました。頂点の数が奇数のときは、一筆書きになるようにしています。偶数のときは一筆書きはできないので、何も描いていません。完全グラフを描いている途中のスクリーンショットです。ここでは、正9角形の完全グラフを描いています。入力欄に整数を入れて、Startボタンを押せば、多角形の完全グラフを描くアニメーションが始まります。次は、正9角形の完全グラフを描き終わった状態のスクリーンショットこの記事の最後に、CodePenで書いたコードを貼り付けているので、実際に動きを確かめることができます。作成したクラスMyCanvasCanvasAPIをラップした独自のCanvasクラス。ここに、線を引くアニメーションのコードを実装してあります。LineInfo2つの頂点を結ぶ線を表すクラス。ここで静的なフィールドを扱いたかったのだけど、JavaScriptでどう書くのが本来のやり方なのかがわからなかったです。動的型付け言語の性質を利用して宣言無しで、動的に値を代入しています。PerfectGraph完全グラフを表すクラス。完全グラフに対する基本操作を実装。完全グラフの一筆書きを求める処理はここには実装していません。Solver正n角形の一筆書きの完全グラフの一筆書きを求めるクラス。再帰処理を使って求めています。Program実質的なMainクラス。このプログラムの制御を担当。イベント処理もここで行う。頂点に振られた整数の番号を表す。引数で与えた線が既に引いてある線かを調べる。下位クラスとして、PerfectGraphクラス(完全グラフに関する基本メソッドを持つクラス)を利用。最初の頂点を引数に、_searchPathを呼び出す。頂点1から始める完全グラフを求めている。その候補一つ一つに対して、試していく。線を引いた先の地点を与えて、再帰呼び出し。すべての候補で試したが見つからなかった。Programクラス。Solverクラスを使って問題を解く。描画もこのクラスで受け持つ。実際のPixi.jsを使った描画は、MyCanvasクラスが担当。ここでは真上の角度を0度とする。順番に描画する必要があるため、一つのanimateDrawLineが終わったら、次のanimateDrawLineを呼び出す。animateDrawLineが非同期で実行されるので、単純なforEachだと、順番に線を引くことができない。program.run();};CodePenの埋め込み上記コードをCodePenで書いて、埋め込んでみました。入力欄に数値を入れて、[start]ボタンを押すと描画が始まります。upLoginユーザーは見つかりませんでした。