winter force
A particle simulation renders two clusters of nodes as colored circles on a canvas, demonstrating split and unite interactions. The d3.forceSimulation engine manages repulsion via `d3.forceManyBody`, collision through `d3.forceCollide`, and position constraints with `d3.forceX` and `d3.forceY`. Users adjust cluster sizes, toggle box-bounded constraints, or trigger split/unite actions, while low alpha and high position strength maintain a cohesive, fluid aesthetic.
AI-generated description..to play around with splitting and re-uniting nodes. This can surely happen in numbers as it's canvas but I'd stay below a total of 5k nodes.
The only forces to keep this aesthetic were:
- a low alpha of 0.3 (0.2 on split and unite)
- a low repulsion with
d3.forceManyBody().strength(-5) - a radius-appropriate colliding force with
d3.forceCollide(2)(2 is the radius) - and a relatively high position strength with
d3.forceX(width/2).strength(.7)(ame for .forceY)
Box-bounded toggles the constraint for the nodes to stay canvas-bound. Really simple 2 lines of code in the ticked() function:
d.x = Math.max(d.radius, Math.min(width - d.radius, d.x));
d.y = Math.max(d.radius, Math.min(height - d.radius, d.y));
It takes either the current value of d.x or (if that's higher than the width minus the radius) the edge of the canvas. If this is smaller than the radius (in keeping this would be 0 + radius) it shall take that minimum position on the left. Whatever it takes, it overwrites the current value of d.x. Same for d.y.
Mike Bostock suggests to use forces to keep simulations within bounds, but sometimes you need to force them, I guess.
Built with blockbuilder.org
forked from <a href='http://bl.ocks.org/larsvers/'>larsvers</a>'s block: <a href='http://bl.ocks.org/larsvers/5f8ab586c29faa8c2d0e3d2e4b424759'>Force split/unite playground</a>
forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/2e4ad2012fca6ae219220702bcea2c9b'>Force split/unite playground</a>