Almost 20 million particles: run and program the simulations https://tinlizzie.org/~ohshima/shadama2/ https://tinlizzie.org/~ohshima/shadama2/live2017/ https://www.youtube.com/watch?v=tqBO_5GMfWw
Show HN: Simulating 20M Particles in JavaScript
51–60 of 73 posts
Re: Show HN: Simulating 20M Particles in JavaScript
#52I did have a question about this:
> Javascript does support an Atomics API but it uses promises which are gross. Eww sick.
With the exception of waitAsync[1], the Atomics APIs don't appear to use promises. I've used Atomics before and never needed to mess with any async/promise code. Is it using promises behind the scenes or is there something else I'm missing?
[1] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...
Edit: formatting
Re: Show HN: Simulating 20M Particles in JavaScript
#53Inspiring tutorial! Does anyone know why/how it maintains state if you tab out? Does Chrome eventually try to clean up the cache or is it locked in?
Re: Show HN: Simulating 20M Particles in JavaScript
#54Earlier quoted context omitted.
Yeah, no idea how to run the code. There are links to the final demo at the end, but everything else just links to this editor :/
This was prototyped on codesandbox before they nuked their product. Each link goes to a specific version which you can test by running bun http.ts in the terminal which serves the content. I updated the article to include this info. In the future I will keep everything self hosted to avoid this issue. I appreciate the patience.
https://github.com/google/playground-elements
not sure if, based on the way it works, whether it supports SharedArrayBuffer
Re: Show HN: Simulating 20M Particles in JavaScript
#55Anyone else having trouble with that web vscode he's using?
Yeah, no idea how to run the code. There are links to the final demo at the end, but everything else just links to this editor :/
The sandbox has a button that's basically "Open a preview in a separate tab". If you click that, the header will be sent, and the demo will work.
If you only use the "in-editor" preview, the proper header will not be sent.
Agree not intuitive. Hope it helps, it was a super cool demo.
Re: Show HN: Simulating 20M Particles in JavaScript
#56Earlier quoted context omitted.
JavaScript is probably the language who has seen the most human-hours spent on optimizations for the various engines. Too bad we cant just rely on JS only and have to involve a bunch of DOM operations, which is usually the slow part of the UIs we create.
"Too bad we cant just rely on JS only and have to involve a bunch of DOM operations, which is usually the slow part of the UIs we create" No? With WebGL and soon WebGPU, or in this case here with writing to a imagebuffer and just passing that to canvas, you don't have to use the DOM anymore since quite a while. (but then you don't get all the nice things html offers, like displaying and styling text etc)
In reality, you're right, there are alternatives, but for the basic web documents, it kind of hurts more than help to use them.
Re: Show HN: Simulating 20M Particles in JavaScript
#57Demo on mobile [0], pretty incredible to play with. [0] https://dgerrells.com/sabby
Re: Show HN: Simulating 20M Particles in JavaScript
#58Random question (genuine, I do not know if it's possible): > I decided to have each particle be represented by 4 numbers an x, y, dx, and dy. These will each be 32-bit floating point numbers. Would it be possible to encode this data into a single JS number (53-bit number, given that MAX_SAFE_INTEGER is 2^53 - 1 = 9,007,199,254,740,991). Or -3.4e38 to 3.4e38, which is the range of the Float32Array used in the blog. Fo…
You may be interested in bitfields and JS optimised vector operations, the @thi.ng universe has some useful implementations (also a WASM simd one): [0]: https://github.com/thi-ng/umbrella/tree/develop/packages/vec... [1]: https://github.com/thi-ng/umbrella/tree/develop/packages/vec... [2]: https://github.com/thi-ng/umbrella/tree/develop/packages/bit... [3]: https://github.com/thi-ng/umbrella/tree/develop/packages/sim…
[0]: https://github.com/dleeftink/QuickSet
[1]: https://github.com/dleeftink/QuickSet?tab=readme-ov-file#see...
Of note is FastIntSet, which uses the technique you described, but I think is only able to store 4 unsigned integers as one JS value (I might be wrong).
[2]: https://github.com/TheLucifurry/fast-int-set/blob/main/src/s...
This notebook demonstrate a MVP bitpacking technique using BigInts (see the 'bitpack' and 'pack' cells):
[3]: https://observablehq.com/@dleeftink/array-bitbuffers
SimSIMD offers various similarity measures and quantisation levels for TypedArrays:
[4]: https://github.com/ashvardanian/simsimd#using-simsimd-in-jav...
Re: Show HN: Simulating 20M Particles in JavaScript
#59I have done a somewhat similar experiment a while ago and achieved to fit quite a lot of particles with a basic physics simulation.