verlet0.html

<!DOCTYPE html>
<html>
<head>
	<title></title>
	
	<style type="text/css">
	html, body {
		margin: 0px;
	}
	canvas {
		display: block;
		position: absolute;
		top: 0px;
		left: 0px;
	}
	</style>
</head>
<body>
<canvas id="canvas"></canvas>
</body>

<script type="text/javascript">

window.onload = function() {
	var canvas = document.getElementById("canvas"),
		context = canvas.getContext("2d"),
		width = canvas.width = window.innerWidth,
		height = canvas.height = window.innerHeight;

	var points = [],
		bounce = 0.9,
		gravity = 0.5,
		friction = 0.999;

	points.push({
		x: 100,
		y: 100,
		oldx: 95,
		oldy: 95
	});

	update();

	function update() {
		updatePoints();
		renderPoints();
		requestAnimationFrame(update);
	}

	function updatePoints() {
		for(let i = 0; i < points.length; i++) {
			let p = points[i],
				vx = (p.x - p.oldx) * friction, // vx = dx / dt -> dt = 1: vx = dx
				vy = (p.y - p.oldy) * friction;

			p.oldx = p.x;
			p.oldy = p.y;
			p.x += vx;
			p.y += vy;
			p.y += gravity;

			if(p.x > width) {
				p.x = width;
				p.oldx = p.x + vx * bounce;
			}
			else if(p.x < 0) {
				p.x = 0;
				p.oldx = p.x + vx * bounce;
			}
			if(p.y > height) {
				p.y = height;
				p.oldy = p.y + vy * bounce;
			}
			else if(p.y < 0) {
				p.y = 0;
				p.oldy = p.y + vy * bounce;
			}
		}
	}

	function renderPoints() {
		context.clearRect(0, 0, width, height);
		for(let i = 0; i < points.length; i++) {
			let p = points[i];
			context.beginPath();
			context.arc(p.x, p.y, 5, 0, Math.PI * 2); // draw a small ball
			context.fill();
		}
	}
};

</script>
</html>