HTML and CSS Reference
In-Depth Information
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);
springTo(ball0, ball2);
}
if (!ball1_dragging) {
springTo(ball1, ball0);
springTo(ball1, ball2);
}
if (!ball2_dragging) {
springTo(ball2, ball0);
springTo(ball2, ball1);
}
context.beginPath();
context.moveTo(ball0.x, ball0.y);
context.lineTo(ball1.x, ball1.y);
context.lineTo(ball2.x, ball2.y);
context.lineTo(ball0.x, ball0.y);
context.stroke();
ball0.draw(context);
ball1.draw(context);
ball2.draw(context);
}());
};
</script>
</body>
</html>
This will create a triangle formation, as shown in Figure 8-7. Once you get the hang of this, you can move
on to creating a square, and from there, all kinds of complex springy structures.
Search WWH ::




Custom Search