Canvasで円に重力を与える

Canvas（JavaScript）の勉強をしています。

今回は重力です。
以前に円が動き、上下左右に当たると跳ね返るというものを作りましたが、それのちょっと発展版です。

重力

function render() {
	ctx.clearRect(0, 0, canvas.width, canvas.height);

	ctx.fillStyle = 'crimson';
	ctx.fillRect(0, 0, canvas.width, canvas.height);

	velY = velY + graY;
	locX = locX + velX;
	locY = locY + velY;
	drawArc(locX, locY);

	if (locY < 0 || locY > canvas.height) {
		velY = velY * -1;
	} else if (locX < 0 || locX > canvas.width) {
		velX = velX * -1;
	}

	window.requestAnimationFrame(render);
}

function drawArc(x, y) {
	ctx.beginPath();
	ctx.arc(locX, locY, 10, 0, Math.PI * 2, false);
	ctx.fillStyle = 'blue';
	ctx.fill();
}

以前に作った、円が動き上下左右に当たると跳ね返るというものに、下向き（yのプラス方向）に足しています。

velY = velY + graY;

この部分です。

これだけでイメージ通りになるとは思っていなく、今回も自分で作っておきながら、あまり理解できていません。

前進あるのみ！で引き続きがんばっていきます。

参考にしたもの

参考にしているのは、前回に引き続き、田所淳さんの『Processing クリエイティブ・コーディング入門−コードが生み出す創造表現』です。

こちらは、CanvasではなくProcessingの本なのですが、考え方は同じなのですごく参考になります。