HTML and CSS Reference
In-Depth Information
canvas.addEventListener('mousedown', function () {
if (utils.containsPoint(ball0.getBounds(), mouse.x, mouse.y)) {
ball0_dragging = true;
}
if (utils.containsPoint(ball1.getBounds(), mouse.x, mouse.y)) {
ball1_dragging = true;
}
}, false);
canvas.addEventListener('mouseup', function () {
if (ball0_dragging || ball1_dragging) {
ball0_dragging = false;
ball1_dragging = false;
}
}, false);
canvas.addEventListener('mousemove', function () {
if (ball0_dragging) {
ball0.x = mouse.x;
ball0.y = mouse.y;
}
if (ball1_dragging) {
ball1.x = mouse.x;
ball1.y = mouse.y;
}
}, false);
function springTo (ballA, ballB) {
var dx = ballB.x - ballA.x,
dy = ballB.y - ballA.y,
angle = Math.atan2(dy, dx),
targetX = ballB.x - Math.cos(angle) * springLength,
targetY = ballB.y - Math.sin(angle) * springLength;
ballA.vx += (targetX - ballA.x) * spring;
ballA.vy += (targetY - ballA.y) * spring;
ballA.vx *= friction;
ballA.vy *= friction;
ballA.x += ballA.vx;
ballA.y += ballA.vy;
}
(function drawFrame () {
window.requestAnimationFrame(drawFrame, canvas);
context.clearRect(0, 0, canvas.width, canvas.height);
if (!ball0_dragging) {
springTo(ball0, ball1);
}
if (!ball1_dragging) {
springTo(ball1, ball0);
}
Search WWH ::




Custom Search