iconパーティクル!それはプログラムの砂場であり、最高のおもちゃです。パーティクルに対して様々な処理を行うことで、今まで多くのアニメーションが生まれています。今回はフォースマップという考えを取り入れて、パーティクルを動かしてみましょう。発展的なフォースマップフォースマップとパーティクルフォースマップという言葉を聞いたことがあるでしょうか?フォースマップはその名の通り「力場」を作り、その力場に沿ってパーティクルを動かすときに使われるテクニックです。ググってもあまり出てこないので、もっとメジャーな呼び方があるかもですね。少なくともFlash時代は「フォースマップ」で通じたんですが......今だとなんと呼ぶのでしょうね?フォースマップではキャンバスをマス目状に区切り、それぞれのマスにベクトルが働いています。パーティクルをこれに沿って動かすことで面白い挙動を実現できます。頑張って作ってみましょう!動作デモ実際の動作デモは以下のリンクからどうぞ:https://sbfl.net/blog/wp-content/demo/forcemap-animation/ソースコードソースコードはgithubにもおいてあります。https://github.com/subterraneanflowerblog/forcemap-animation作ってみるまず、パーティクルから作っていきましょう。適当なHTMLファイルと、適当なjsファイルを用意して始めましょう。位置は加速度に応じて変わり、加速度はフォースマップに応じて変わります。計算式は自由ですが、ここでは単純な足し算をしています。フォースマップはまだ作成していませんが、とりあえず受け取って、そこから今のマス目のベクトルを取得し、加速度に加算します。描画機能もつけておきます。パーティクルの描画は1ピクセルの点を描くだけです。次にフォースマップを作ります。同じjsファイル内に書いて大丈夫です。フォースマップは幅・高さと、各マス目の大きさを受け取り、初期化します。}}フォースマップは各マス目ごとにベクトルを持ちます。ここではランダムなベクトルにしています。力場のデータの持ち方は、ここでは一次元配列にしていますが、二次元配列でも大丈夫です。座標(x,y)のベクトルを取得するgetForceメソッドを実装しています。これにより内部表現に関わらずベクトルを取得することができます。描画機能もつけています。これはグリッドとベクトルの矢印を描画するようになっています。フォースマップに描画機能は本来不要なのですが、見えた方が面白いので作りました。矢印の描画周りがちょっと苦しいのでもっと綺麗に書けるかもですね。ここまでできたらあとは必要なものを準備して描画するだけです。Math.random()*canvasSize));canvasの準備と、フォースマップの作成、パーティクルの生成です。canvasのサイズは適当にしておいてください。フォースマップは10x10のマス目で作成します。各マス目の大きさはcanvasのサイズを10で割るだけです(10x10なので)。パーティクルはランダムな位置に生成します。今回は200個生成しました。パーティクルの個数は性能の許す限り増やしていってもいいでしょう。これらのコードの下に、次はループと描画の処理を追加します。ループにはrequestAnimationFrameを使用します。JavaScriptを用いたアニメーションについて詳しくは、「JavaScriptとcanvasでアニメーションを作る」もご覧ください。=>loop(ts));ループ処理は簡単で、パーティクルのアップデート、描画、を繰り返すだけです。ここまでかけたら実行してみましょう。動きましたか?おめでとうございます!より発展的なフォースマップフォースマップは今回はランダムにベクトルを生成しましたが、きちんと計算された力場にしても面白いはずです。すべてのベクトルが外を向いているとか、その逆とか、一方向にひたすら流れるとか。発想次第で色々と面白いことができるので、思いついたら試してみてください。APIを作ってみようDartでファクトリパターン/シングルトンパターンを実装する[翻訳]DartにおけるユニットテストWebGL2で2Dグラフィックスを扱う他人に読んでもらうJavaScriptコードを書くためにRSSプロフィール古都ことふるみやことです。フロントエンドとかいろいろやるよ。