Springing in two dimensions
<!doctype html> <html> <head> <style>canvas{border:1px solid red;}</style> </head> <body> <canvas id="canvas" width="400" height="400"></canvas> <script> class Ball { //from w ww.j ava 2 s. c o m constructor() { this.radius = 4; this.x = 0; this.y = 0; this.vx = 0; this.vy = 0; this.rotation = 0; this.scaleX = 1; this.scaleY = 1; this.color = "#ff0000"; this.lineWidth = 1; } draw(context) { context.save(); context.translate(this.x, this.y); context.rotate(this.rotation); context.scale(this.scaleX, this.scaleY); context.lineWidth = this.lineWidth; context.fillStyle = this.color; context.beginPath(); context.arc(0, 0, this.radius, 0, (Math.PI * 2), true); context.closePath(); context.fill(); if (this.lineWidth > 0) { context.stroke(); } context.restore(); } getBounds() { return { x: this.x - this.radius, y: this.y - this.radius, width: this.radius * 2, height: this.radius * 2 }; } } window.onload = function () { let canvas = document.getElementById('canvas'), context = canvas.getContext('2d'), ball = new Ball(), spring = 0.03, friction = 0.95, targetX = canvas.width / 2, targetY = canvas.height / 2, vx = 0, vy = 0; (function drawFrame () { window.requestAnimationFrame(drawFrame, canvas); context.clearRect(0, 0, canvas.width, canvas.height); let dx = targetX - ball.x, dy = targetY - ball.y, ax = dx * spring, ay = dy * spring; vx += ax; vy += ay; vx *= friction; vy *= friction; ball.x += vx; ball.y += vy; ball.draw(context); }()); }; </script> </body> </html>