Live data from Hacker News

Show HN: Simulating 20M Particles in JavaScript

dgerrells.com

51–60 of 73 posts

Re: Show HN: Simulating 20M Particles in JavaScript

#51
post #17

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

another tutorial that make it easier to grasp what that is: https://www.youtube.com/watch?v=R81egpgDzbY

Re: Show HN: Simulating 20M Particles in JavaScript

#52
This is really awesome!

I 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

#54
post #32

Earlier 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.

if you want a self-hosted codepen there's this

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

#55
post #32
post #23

Anyone 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 :/

For security reasons you cannot use some of the features in this code without setting a specific header (the blog mentions this).

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

#56
post #47
post #38

Earlier 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)

+ built in accessibility + extensions who does something with the DOM + ...

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

#58

Random 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…

I also did some experimenting with number packing and ended up creating a QuickSet implementation[0]. However, it turned out that operating on TypedArrays proved more performant, which I settled on in the end. I've collected some related packages here:

[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...

Post reply on HN