Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Show HN: Simulating 20M Particles in JavaScript

dgerrells.com

Post reply on HN
Print view View original

11–20 of 73 posts

Re: Show HN: Simulating 20M Particles in JavaScript

#11

Post by DrMiaow »

franciscop wrote: post #10

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…

As you stated, Encoding/decoding would kill your performance.

Float16Array would immediately halve your memory requirements

Another possibility would be to have separate precision arrays.

eg. Float16Array for x,y and even Int8Array for dx/dy, but, in both cases you will would get some motion artifacts, especially for Int8 from the clamping and aliasing of dx/dy.

Re: Show HN: Simulating 20M Particles in JavaScript

#12

Post by w_for_wumbo »

andai wrote: post #2

Nice! I'd suggest embedding the simulation in the blog. I had to scroll up and down for a while before finding a link to the actual simulation. (You might want to pick a value that runs reasonably well on old phones, or have it adjust based on frame rate. Alternatively just put a some links at the top of the article.) See https://ciechanow.ski/ (very popular on this website) for a world-class example of just how cool…

That's one of the best examples of an explanatory blog that I've ever seen. I wish that this would become the standard of which information was shared - if it's worth sharing, it's worth making it easy to understand.

Re: Show HN: Simulating 20M Particles in JavaScript

#14

Post by rustystump »

int0x29 wrote: post #13

Might want a strobe warning. At least for Firefox and Chromium in Linux on a desktop it strobes heavily in the starting state.

It depends on the display type. When run on something with low per pixel lighting it can flicker a bit due to how quickly the average light changes frame to frame. Anything with local dim zones may struggle. I looked at ways to fix this but could not come up anything other than running a blur filter which ends up looking terrible.

Re: Show HN: Simulating 20M Particles in JavaScript

#15

Post by shash7 »

rustystump wrote: post #5
dado3212 wrote: post #3

The videos look awesome but the "try it out here" codesandbox links don't work for me on MacOS Chrome desktop. I get 'Uncaught ReferenceError: SharedArrayBuffer is not defined' and some CORS errors: 'ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep'.

You have to open the previews in a dedicated tab as codesandbox's inline editor blocks the header from being set. It also may get blocked if you are using a privacy focused browser. I'll try to include embedded examples in the future. You can try out the final version here https://dgerrells.com/sabby

Whoa this is like fine sand. Amazing!

Re: Show HN: Simulating 20M Particles in JavaScript

#16

Post by tlarkworthy »

rustystump wrote: post #6
andai wrote: post #2

Nice! I'd suggest embedding the simulation in the blog. I had to scroll up and down for a while before finding a link to the actual simulation. (You might want to pick a value that runs reasonably well on old phones, or have it adjust based on frame rate. Alternatively just put a some links at the top of the article.) See https://ciechanow.ski/ (very popular on this website) for a world-class example of just how cool…

I do agree about embedding. I thought about embedding each version but was worried about having too many workers all going at once. I'll update the article to include the final version embedded at the end. Thanks for the feedback. That blog is amazing. Each example is so polished. I love it. edit: I tried adding an embedded version but the required headers didn't play well with other embeds. The older versions are al…

An intersection observer can be used to turn the non visible parts off when out of view. https://developer.mozilla.org/en-US/docs/Web/API/Intersectio...

Re: Show HN: Simulating 20M Particles in JavaScript

#19

Post by Lerc »

w_for_wumbo wrote: post #12
andai wrote: post #2

Nice! I'd suggest embedding the simulation in the blog. I had to scroll up and down for a while before finding a link to the actual simulation. (You might want to pick a value that runs reasonably well on old phones, or have it adjust based on frame rate. Alternatively just put a some links at the top of the article.) See https://ciechanow.ski/ (very popular on this website) for a world-class example of just how cool…

That's one of the best examples of an explanatory blog that I've ever seen. I wish that this would become the standard of which information was shared - if it's worth sharing, it's worth making it easy to understand.

I have done a few blog posts with interactive doodads like this. It takes a lot (like really a _lot_) more time to do, but I think it's the right way to go. There is so much noise on the internet caused by people casting their 2 cents into the void.

Interactive thingywotsits may slow down individuals making posts, but there are a lot of individuals out there.

Post reply on HN