D3 Examples - Plasma

Plasma

Simulation of attraction-of-opposites particles, similar to the interaction between protons and electrons.

Uses D3's force plugin forceMagnetic to simulate the asymmetrical attraction/repulsion of objects in an inverse-square relationship with distance. Further, particles are prevented from overlapping by applying a non-elastic collision force using forceBounce.

Using the slider controls you can add/remove particles to the system, and regulate the ratio of positive (+) vs negative (-) particles.

xxxxxxxxxx
 
<head>
    <script src="//cdnjs.cloudflare.com/ajax/libs/d3/4.10.2/d3.min.js"></script>
    <script src="//unpkg.com/d3-force-bounce"></script>
    <script src="//unpkg.com/d3-force-surface"></script>
    <script src="//unpkg.com/d3-force-magnetic"></script>
​
    <link rel="stylesheet" href="style.css">
</head>
​
<body>
    <div id="controls">
        Particles:
        <input id="density-control" class="slider-control" type="range" min="0" max="0.001" step="0.00001" oninput="onDensityChange(this.value)">
        <span id="numparticles-val"></span>
        <br>
        <span style="color: darkslategrey">(-)</span>:
        <input id="polarity-control" class="slider-control" type="range" min="0" max="1" step="0.01" value="0.03" oninput="onPolarityChange()">
        <span style="color: crimson">(+)</span>
    </div>
    <svg id="canvas"></svg>
​
    <script src="index.js"></script>
</body>
    