Particles, 5 ways

James Proctor

James Proctor

— 1 min read

A while back I created this Observable notebook as a reference for rendering particle systems using a few different front-end libraries. You can debate whether 100 particles is 'lots' but this will likely keep your browser happier when all 5 examples are loaded at once. I agree with Irene Ros that ~1000 elements is where SVG + D3 caps out and you'll want to swap to another approach for better performance.

I do appreciate that the SVG + D3 update cell is nice and compact:

updateSvgD3 = {
  // creating a copy of each datum (object) to avoid overwriting values used by other renderers
  const D3Data = data.map((d) => ({ ...d }));
  const container = d3.select(svg);

  const circleUpdate = container
    .selectAll("circle")
    .data(D3Data, (d) => d.id)
    .attr("fill", fill)
    .call((update) =>
      update
        .transition()
        .duration(duration)
        .ease(d3.easeQuadInOut)
        .attr("cx", (d) => d.x)
        .attr("cy", (d) => d.y)
    );

  const circleEnter = circleUpdate
    .enter()
    .append("circle")
    .attr("r", radius)
    .attr("cx", (d) => d.x)
    .attr("cy", (d) => d.y);

  return "D3 rendered to SVG Code";
}

Here's the introduction from the notebook:

Description

 
A series of examples demonstrating how to render and transition points using a variety of methods and libraries. D3 rendering to SVG is likely the most familiar, but the least scalable, maxing out at several hundred elements. D3 rendering to canvas takes advantage of D3 data binding and update cycle and makes it more efficient - there are also several other ways to use D3 with a canvas renderer as demonstrated in this excellent article. Also included is a simple Vanilla JS example, as well as implementations using Three.js (best for 3d), and PIXI.js (oriented toward games but with good tools for managing a large number of particles).
 
 

Examples Index

 

Further Reading

 

The example I embedded above is the D3 + SVG example. The following is Three.js. This is the most visually distinct because it uses a camera with perspective. Notice how the circles distort into ovals around the edges of frame.

Read more