#javascript PAGE3

diffusion

拡散は単体で利用するというより、ランダムで自然な散らばりを演出の一部として取り入れるケースが多いベーシックなロジックです。 今回は「形」と「ルール」を変えて、いくつかのパターンが切り替わるデモを作ってみました。 ベーシックな拡散 直線を起点とした拡散 ドーナツ状の拡散 半円が放射状に広がる拡散 四角形内に広がる拡散 パーティクルの定義 まずはパーティ

#javascript#canvas 2016.11.22
VIEW

nodegarden

プログラミングの練習でもよく用いられる、ノードガーデンを作成しました。 基本的なノードガーデンの仕組みに関しては、こちらを参考にさせていただきました。 もし実際に案件でこの表現を使用するとなると、完全にランダムで動きまわるよりは、ある程度の形を保って動いた方が使い勝手が良さそうなので、今回は少しだけ動きにルールを持たせることにしました。 目標とする形 下記の図のように、エリア

#javascript#canvas 2016.11.22
VIEW

boids

群行動シミュレーション 群れのシミュレーションで有名な「boids」です。 パーティクル一つ一つは、X座標、Y座標、X方向の速度、Y方向の速度の4つを保持するだけの単純なオブジェクトで、各パーティクルは「凝集」「連帯」「分離」の単純な3つの演算を積み重ねることで動作します。 単純なロジックの組み合わせによって、一見複雑に見える結果が生まれることを「創発的」と言うそうですが、「boid

#javascript#canvas 2016.11.22
VIEW

snow

雪を降らせる表現です。 雪を降らせるライブラリは既存のものもいくつかありますが、今回は下記の2点に注意して自力で実装しました。 数が多いので、できるだけ軽い処理にする どのような画角で見ても雪の密度を同じにする 雪の定義 まずは雪単体のSnowクラスを定義します。 ランダムな動きを持たせるため、Math.random()で取得できるランダムな小数を2つ引数に

#javascript#canvas 2016.11.22
VIEW