canvasで ”うにょうにょ動く円” を ”複数” 作ってみました
こんにちは、相変わらずプログラミングが覚えられないLQヒロシです。
業務の流れでcanvasで複数のうにょうにょ動く円を作ったのでレシピをまとめてみました。
参考にしたのはこちらの記事。
JavaScriptはじめました。 – くねくねする円を作ってみた。
NIJIBOX Creator’s Blog – JavaScriptで実装！理想の「うにょうにょ動く円」を求めて…
ただ上記の記事の内容では一つの円しか作れませんので、次の記事も参考にしてゴニョゴニョしてみました。
https://jsfiddle.net/39we73t1/
完成はこちら
See the Pen NLrpJv by hirotatsu fujimoto (@LQ_Hiroshi) on CodePen.
さっそく作り方を
うにょうにょ動く円の考え方としてはこちらの「くねくねする円を作ってみた」に詳しく載っていますので、ざっと簡単に言うと、
・１０個のアンカーポイントをサークル上に２次元ベジェ曲線で作成し線でつなぐ
・コサイン波を利用して各ポイントをそれぞれ動かす
という感じでしょうか。実際のコードを見ながら説明していきたいと思います。
アンカーポイントはPointオブジェクトで生成しています。
ここはコサイン波の計算式が主になっていて、数学がからっきしの私は脳死で参照させていただいております。テヘ。
ちなみに9、10行目のthis.speedとthis.rが乱数になっているのでこの数値を変更すると、うにょうにょするスピードや幅を調整できます。
次にイニシャル関数。一つの円だけで良ければPointオブジェクトをMAX（ポイントの数）分だけインスタンス化すれば良いのですが、複数の円を作成する場合はそれぞれの円で配列を作り、それぞれの円ごとにMAX分のpointインスタンスを持つというカタチで行っています。
円の配列については最初に定義（circles）していて、こちらに中心点座標、色、半径などのパラメーターを設定しています。中心座標と半径はPointオブジェクトに引き継がれ、色と各ポイントの配列は後述するdrawCircle関数に引き継がれています。
そしてイニシャル関数からupdate関数を呼び出し、Pointオブジェクトのupdateメソッドを呼び出して実際のアンカーポイントを生成しています。考え方は参照記事と同様なのですが、複数円を対応するのでこちらでも各円ごとに処理を行う必要がでてきます。
ポイントを生成したらdraw関数で描画を行いsetTimeoutで繰り返し処理を行っています。
描画について
draw関数はsetTimeoutで繰り返し実行されるので、まずはclearRectで描画を初期化します。引数でcirclesを渡し、円の数だけdrawCircle関数（実際の描画処理を行う関数）を実行しています。これはcircles内にある各円が色とアンカーポイント情報を持っているので、円ごとに一つづつ描画処理を行うためにこのように処理をしてみました。これはこちらの考え方を参考にしています。
https://jsfiddle.net/39we73t1/
drawCircle関数ですが、こちらは参考にした「JavaScriptはじめました。 – くねくねする円を作ってみた。」の処理方法を活用させていただいてます。引数で各情報を渡して２次元ベジェ曲線を描画し塗りつぶしています。最後にonloadでcanvasお決まりの構文を書いてinitすれば完了です。
これを作成する前に複数の円を描画する記事をググって探してみたんですが、なかなか見当たらなかったので自作した次第なので色々と不手際な部分もあるかと思いますが、canvasでこのような表示をやってみたいと思っている方の一助になれば幸いです。それではまた！
以下、scriptの全文になります。