雑食性雑感雑記

知識の整理場。ため込んだ知識をブログ記事として再構築します。

Canvas

【JavaScript & Canvas】Boids アルゴリズム 習作

「群制御みたいなもの」をなんか作ってみたいなーと調べていたらたどり着いた Boids アルゴリズム。 まずはアルゴリズムを理解するのに、良く書かれているコードの内容を見て、整理しながら書いてみました。 作成物 正方形領域だと移動範囲が狭いので、縦長…

【JavaScript & Canvas】等速度運動のボールを弾ませてみる

先日にボールを壁に反射させるのを作った。 コレ、ボールが反射するときに弾ませてみたら面白いかなーと思い、弾ませる方法を考えてみた。 作成物 内容は前と一緒。Canvas エリアにマウスカーソルを持っていくと、mousemove イベントによりボールが生成され…

【JavaScript & Canvas】一定間隔で更新する描画を作ってみる。(ライフゲーム)

前回まではベストエフォートで常に更新処理終わったら描画の更新をかける方針でした。 そうではなく「一定のタイミングで更新」かける方式の描画についても試してみます。 ライフゲームはよく作っていて分かりやすいのでこれで。 作成物 ライフゲームについ…

【JavaScript & Canvas】 投射と跳ね返り

前回 : 等速度運動。 等速度運動やったなら、斜方投射もやっておこうと物理の計算を復習。 作成物 マウスオーバーで円 (= ボール) を作り出すのは前回と同じ。 右方向を0°として、0° ~ 180°の方向にランダムなボールを生成して投射します。 X方向の範囲外部…

【JavaScript & Canvas】 等速度運動と反射

前回に下地となるクラスを作ったので、アニメーションが活かせる簡単な処理を作ってみます。 『ボールを投げて壁に反射して――』が分かり易そうなのでコレを作ってみよう。 作成物 Canvas エリアにマウスカーソルを持っていくと、mousemove イベントにより球…

【JavaScript & Canvas】 アレコレ作るための下地クラスを整備

前回、JavaScript の復習と仕事の復習かねて Canvas やってたら楽しかったので、もう少しアレコレ作ってみる。 ――その前に、アニメーションとかやろうとするとコードがごちゃごちゃになるのは目に見えているので、 その辺を整理する。 作成物 今回は特に工夫…