p5.js アーク模様

p5.jsを使って「アーク」をベースにした模様を作ってみました。

デモページとソースコードは以下にあります。

よかったら見てみてください。

editor.p5js.org

上記のような模様を作る仕組みは簡単です。

１．キャンバス上にグリッドを配置する

２．各グリッドにアークを描画する（アークとは円弧のことです）

３．キャンバスをクリックしたら、グリッド数が増えるようにする

これだけです。

各グリッドに描画するアークは以下４パターンのうちのどれかです。

どのパターンにするかはプログラム中でランダムに決めています。

模様ができるまでの流れは以下のような感じになります。

※グリッドがわかりやすいように以下の説明では赤線で各グリッドを囲っています。

初期状態（2×2のグリッドを作成） 

キャンバス上をクリックしてグリッド数を増やします（3×3のグリッドを作成）

さらにクリックしてグリッド数を増やします（4×4のグリッドを作成）

こんな感じでどんどんキャンバス上をクリックしていくと、

以下のような模様が浮かび上がってきます。

仕組みは単純ですが、出来上がる模様が面白いなぁと思いました。

今日はここまでにします。

最後まで読んでいただきありがとうございました。