Ball bashing head against ceiling

ball.js

// A failed attempt

function animate() {
    g.clearRect(0, 0, 32, 32);

    var t = (new Date().getTime() - start) / 1000;
    var circlePosition = Math.min(1, Math.abs(Math.tan(t * Math.PI) / Math.PI));

    g.beginPath();
    g.arc(16 + Math.cos(circlePosition * Math.PI) * 8, 16 + Math.sin(circlePosition * Math.PI) * 8, 2.5, 0, Math.PI * 2);
    g.fill();

    requestAnimationFrame(animate);
}