巡回グラフを自由に描く

巡回グラフというものがあります。円周上のN個の頂点を所定の間隔を飛ばして結んでいきます。
例えば下図は、頂点数が11あり、それを３つ飛びに結んだ図です。下図をクリックしてから「スタート」ボタンを押すと、その線を引く様子がわかります。スタート地点から、３つ飛びの点を結んでいって、元の点に戻れば終わります。「頂点数」「ステップの回数」「各ステップでの飛ぶ間隔」を変化させていくことで様々な絵が描けます。

そして、下図は頂点数が50個あって、6種類のステップ数で結んだ図です。
線が増えてくると、すべて直線で構成されているのに、包摂された部分が円のように見えていますね。

次の図では、少し複雑なステップ数を順に実行していきます。下図をクリックしてスタートボタンを押してアニメーションを見てください。

巡回グラフは、頂点数とステップ数を変化させることで、様々な幾何学模様を描くことができます。
そこで、これを自分で自由に選択して描けるようにしてみました。
（コードはCopilotに頼んでindex.htmlとcanvasを組み合わせたものを作ってもらいました。）
色も自由に変化させることができます。
新しいステップは必ず頂点0からスタートするので、同じ間隔にしたら上書きされるだけなので注意してください。
中心に近いところで焦点を結ぶには、どのような組み合わせがよいか、とか、星型を描かせるにはどのような組み合わせがよいか、など、いろいろ試してみるとおもしろいです。
頂点数とステップ数の関係で、絵は変わってきます。
たとえば、Copilotは作図のポイントをつぎのように言っています。

こういうことも考えて、いろいろやってみたらおもしろいですね。

【巡回グラフだけの場合】

巡回グラフの作成は下図をクリックするか、ここからどうぞ。

【格子内に色を塗る場合】

格子内に色を塗って、ステンドグラスのようにデザインします。

まず、第1段階でグラフを作成し

次に「面に着色」ボタンで色を塗ります。
この「面に着色」ボタンを押すたびに色の組み合わせが変わります。
下の図の画面をクリック、またはこちらからどうぞ。
なお、画面がはみ出ている場合はctrlボタンを押しながら－（マイナス）ボタンで調整してください。
スマホバージョンはこちらからどうぞ

★三原色を強調したい場合は　こちらからどうぞ　または下図をクリック（PC向けのみ）

★干渉色的な着色はこちらでやってください。または下図をクリック。
　なお「面に着色」ボタンを押すと、ベースの色が変化していきます。
　また、線の色にも関係して着色します。

地図アート研究所のやまだこーじさんは干渉色の巡回グラフ作成のためのすばらしいサイトを公開されています。下図をクリックしてください。開いたら、「01の間隔」、「関数の増分」あるいは下のステップ数の間隔を変えるごとに色が変化しておもしろいです。

【正方形の巡回グラフ】

正方形のバージョンも作りました。
下図をクリックしてください。

【横長長方形の巡回グラフ】
横長16：9の画面の巡回グラフです。
面に着色ボタンで、塗色のパターンが変化します。お好みでどうぞ。
着色するのに少し時間がかかります。
こちらから、または下図から

※前半部分はCopilotで作成、後半はGeminiで作成しました

⇒「生成AIを活用したプログラムの全リスト