分123前回の第31回「位置座標の相互作用で弾力を表す」では,ふたつの点を棒でつなぎ,つぎのjsdo.itのコードのように放物線状に落としてみた。複数のオブジェクトをつなげた弾力のある動きが,座標の移動と位置関係や動く範囲を定めるだけの四則演算で表せた。今回は,点と棒の数を増やして多角形の動きをつくりたい。点と棒で組上げた三角形を落とす前回,点と棒のオブジェクトは,それぞれのクラス(VerletPointとVerletStick)からつくった。これらふたつのクラスは,今回そのまま用いる。多角形になっても,クラスの仕組みは変わらないということだ。参照しやすいように,それぞれのクラスを定めた第31回のコード3とコード6を以下に改めて掲げておく。this._point1.y);};そして,前回のコード5「ふたつの点を棒でつないで放物線状に落とす」を,以下の抜書きのように書き替える。棒(VerletStickオブジェクト)も複数になるので,変数(_sticks)の配列に納めることにした。新たに加えた関数(makeSticks())で点(VerletPointオブジェクト)の数に応じてインスタンスをつくり,この配列に加える。forループを抜けてから,終わりの点と初めの点を棒で結ばないと多角形が閉じないことに注意したい。多角形の頂点数が自由に決められるように,点をつぎの関数により生成して,やはり変数(_points)の配列に納めることにした。始めは,三角形をつくる。頂点数)多角形の頂点をつくるこの関数は,-π/2ラジアンつまり時計の12時の角度(angle)から,引数の頂点数に応じた中心角(theta)と引数の半径(radius)で点のインスタンスをつくって,配列(_points)に加えている。この計算の考え方については,第15回「Matrix2Dクラスで座標を回す」の「星形を頂点座標と直線で描く」が参考になるだろう。_points[0]));}Ticker.tickイベントのリスナー関数(draw())は,扱う棒のオブジェクトが複数になったので,更新と描画はそれぞれ新たに設けた関数(updateSticks()とrenderSticks())の呼出しにより行う。どちらの関数も,棒が納められた配列(_sticks)からオブジェクト(stick)を取り出して,それぞれに応じたメソッド(update()とrender())を呼び出している。}}これらの書き替えを終えたJavaScriptが以下のコード1だ。3つの点と棒で三角形をつくって,放物線状に落としている。アニメーションはつぎのjsdo.itのコードで確かめてほしい。三角形になると,Canvasの下端でも弾むような動きが見られる。