HTML and CSS Reference
In-Depth Information
if (dist < minDist) {
var ax = dx * springAmount,
ay = dy * springAmount;
partA.vx += ax;
partA.vy += ay;
partB.vx -= ax;
partB.vy -= ay;
}
}
function move (partA, i) {
partA.x += partA.vx;
partA.y += partA.vy;
if (partA.x > canvas.width) {
partA.x = 0;
} else if (partA.x < 0) {
partA.x = canvas.width;
}
if (partA.y > canvas.height) {
partA.y = 0;
} else if (partA.y < 0) {
partA.y = canvas.height;
}
for (var partB, j = i + 1; j < numParticles; j++) {
partB = particles[j];
spring(partA, partB);
}
}
function draw (particle) {
particle.draw(context);
}
(function drawFrame () {
window.requestAnimationFrame(drawFrame, canvas);
context.clearRect(0, 0, canvas.width, canvas.height);
particles.forEach(move);
particles.forEach(draw);
}());
};
</script>
</body>
</html>
Make sure the background color of the canvas element is set to black (using CSS in the document
header), so you can see the white nodes. At the top of the script, we declare variables for the particles, the
minimum distance we mentioned, and a spring value:
var particles = [],
numParticles = 30,
minDist = 100,
