ベレの方法を使ったコードサンプル「ベレの方法」というのは、互いの間に力が働く粒子の動きを表す物理の考え方(方法)である。微分により運動を考える」参照)。ところが、ベレの方法では、速度でなく位置と粒子間の位置関係から運動を定める。すると、一見複雑そうな動きが、四則演算だけで表せる。Meetupで務めた同名の高座の参加者向けとして書いた。当日のYouTube録画をつぎに掲げる。ベレの方法とはベレの方法を使うと、一見複雑な粒子同士の動きが四則演算でつくれる(サンプル001)。Draggableベレの方法は、つぎの方程式で表される(>>式の意味)。前の位置からつぎの位置を求める考え方だ。微分により運動を考える」04「バネのように伸び縮みする動き」参照)。速度ベレの方法では、今の位置と前の位置の差を速度とみなして、つぎの位置を求める。一時預かりベレの方法で動く点をクラス(VerletPoint)として定めると、つぎのようになる。y;};初めに一度だけ位置を動かせば、等速運動になる。位置を動かすと、加速度が与えられる。velocityX;}したがって、アニメーションを更新するたびに同じ動きを加えれば、等加速度運動になる。壁の制約を加える表示領域の外に消え去ってしまわないためには、いわゆる「壁ドン」対策が要る。速度から位置を求める場合は、ベクトルの方向を壁に対して反転させる(>>速度ベクトルを使った跳ね返り)。ベレの方法では、めり込んだら戻すだけだ。位置が壁を超えたら壁の端に留めるクラス(VerletPoint)にメソッド(constrain())を加えて、引数に渡した矩形領域の外に出たら、位置を矩形領域上に戻す。bottom;}};アニメーションを進めて位置を動かすたびに、前掲の表示領域の矩形内に留めるメソッド(constrain())を呼出した(サンプル002)。ふたつの点を棒でつなぐふたつの点を棒で結ぶには、距離を棒の長さに保たなければならない(図001)。そこで、ずれたふたつの点の位置は、棒の長さに均等に合わせる(>>ふたつの点の位置合わせ)。offsetY);};複数の点に位置の制約が加わって、跳ね返りが生じる(サンプル003)[*1]。高座で引用したネタ画像はつぎのとおり。(‏@sumokyokai)「<常陸大宮場所>玉鷲を追いかける、大砂嵐。点と棒で三角形を組立てる点と棒を組合わせると多角形ができる。多角形でも、点と棒のクラス(VerletPointとVerletStick)は、基本的にそのまま使う。ルールは変わらないということだ。三角形は、つぎのように3点を棒で結んでつくれる(サンプル004)。Triangleしかし、4点を棒で結んだだけの四角形はつぶれてしまう(図002)。図002■四角形が落ちるとかたちはつぶれる「筋交い」(すじかい)を加える手もある(図003)。多角形に一般化しにくい。多角形のすべての頂点を棒で結ぶ多角形のすべての点を棒で結べば、任意の多角形がつぶれないようにつくれる(サンプル005)。Squareただし、頂点数が増えると、距離の制約を一気に解決できず、かたちが歪んでしまう(図004)。図004■六角形のかたちが歪んで定まらないそこで、距離の差は少しずつ縮めることにして、クラス(VerletStick)にそのためのプロパティ(elasticity)を加える(サンプル006)。中心に点を加えてドラッグする多角形をドラッグできるようにするため、その対象となる中心の点を加える(サンプル007)。Point点は座標データでしかないため、ドラッグできるかどうかはマウス座標から導く。中心点からの距離が半径以内であれば、ドラッグ対象とする(図005)。このようにしてドラッグ操作を加えたのが、前掲サンプル001になる。ベレの方法を使ったコードサンプルサンプルのコードについて詳しくは、gihyo.jp連載「HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う」のつぎの3つの記事で解説した。YouTube録画を掲載し、若干の修正を加えた。