HTML5+Canvasでパーティクルっぽいのを作ってみる
Posted: 2015.07.16 / Category: javascript / Tag: HTML5, アニメーション HTML5+Canvasを使用して簡単な横に流れるパーティクルを作成してみます。 パーティクルオブジェクトを作成して動かす 基本的な作りは下記記事をベースに作成します。 HTML5で作るCanvasアニメーションの基礎 上記の記事では一つの円を動かすだけだったので描画関数だけ作成しました。 function drawCircle(x, y, scale, color) { ctx.beginPath(); ctx.arc(x, y, scale, 0, 2*Math.PI, false); ctx.fillStyle = color; ctx.fill(); } パーティクルの場合、粒子一つ一つに位置情報や速度の設定をしたいので、少し拡張してオブジェクトとして作成
第7回 粒子同士が引き合う力を直線の濃淡で示す | gihyo.jp
前回は、ランダムに動く粒子それぞれの間にバネのような力を与えてアニメーションさせた。すると、粒子は互いに集まっては離れることを繰り返す、という面白い動きになった（再掲第6回図3）。ここまでのコードは、以下のjsdo.itに掲げてある（第6回コード2）。 第6回 図3 オブジェクトがひと固まりに集まっては離れる（再掲） オブジェクトが引合う力の範囲をかぎる 互いに離れれば離れるほど、引き戻す力は強まるというのがバネの性質だ。ただし、それを単純に当てはめたために、仲間から外れた粒子の激しい動きが止められず、しかも仲間はずれは次第に増えてしまうというのが前回の問題だった。 もともと、バネはいくらでも伸び縮みするものではない。むしろ、その動きを正しく保てる範囲はかぎられる。そこで、この粒子のアニメーションでも、互いの間に引合う力が及ぶ距離を決めてしまおう。2点の座標からその間の距離を導くに
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
tmlib.js でグラフィックスプログラミング – 幾何学っぽいなにか | tmlife
