Show HN: Simulating 20M Particles in JavaScript (dgerrells.com)

Article summary

The article describes a challenge to simulate 1 million particles in JavaScript at 60 fps on a phone using only the CPU. The author uses SharedArrayBuffers and web workers to achieve this goal, and also adds interactivity to the simulation by allowing users to affect the particles with their touch input. The simulation is rendered using an ImageData object and an HTML canvas. The author provides a step-by-step explanation of their approach and shares the code for the simulation.

Main themes

• JavaScript performance optimization
• Web workers and parallel processing
• SharedArrayBuffers and memory management
• Interactive simulations
• Mobile device performance
• CPU-based rendering

What commenters say

• Embedding interactive simulations directly in blog posts can enhance the reader's experience and understanding of complex concepts.
• Using frameworks and libraries can make creating interactive simulations easier, but sometimes the simplest approach is the most effective.
• Encoding particle data into a single JavaScript number can be possible, but may come at the cost of performance due to encoding and decoding overhead.
• The simulation's flickering effect may be caused by the display type and lighting settings, and a warning may be necessary to avoid triggering health issues in some individuals.
• The use of WebAssembly and SIMD instructions can potentially improve the performance of numerical computations in web applications.
• The simulation's ability to maintain state when tabbed out is due to the way browsers handle inactive tabs, which are typically paused and their state saved.
• The performance of the simulation can vary across different devices and browsers, with some browsers performing better than others on certain hardware.
• Adding a warning for the strobe effect is necessary to protect users who may be sensitive to it, and techniques like blur filters can be explored to mitigate the issue.