[{"data":1,"prerenderedAt":452},["ShallowReactive",2],{"project-40902012":3},{"id":4,"name":5,"line":6,"line_source":7,"title":8,"url":9,"domain":10,"maker":11,"posted_at":12,"year":13,"points":14,"comments":15,"rank_in_year":16,"shown_in_year":17,"top":18,"tier":19,"category":20,"subcategory":21,"format":22,"keywords":23,"reception":29,"sentiment":30,"stance_mix":31,"scored_comments":35,"aspects":36,"strip":44,"post_text":45,"what":46,"said":84,"maker_in_thread":212,"shape":222,"grid":227,"attempts":415,"same_week":416,"maker_shows":33,"maker_hidden":444,"reader_version":445,"card":446},"40902012","Sabby","Simulating 20M Particles in JavaScript","title","Show HN: Simulating 20M Particles in JavaScript","https:\u002F\u002Fdgerrells.com\u002Fblog\u002Fhow-fast-is-javascript-simulating-20-000-000-particles","dgerrells.com","rustystump",1720403574,2024,561,70,51,3515,2,"legend","creative","particle simulation","web_app",[24,25,26,27,28],"javascript particle simulation","sharedarraybuffer","falling sand","webgpu","typed arrays","mixed",0.255,{"positive":32,"neutral":32,"mixed":33,"critical":34},14,1,4,33,{"design":37,"performance":39,"docs":41,"execution":43},{"positive":38,"critical":33},5,{"positive":33,"critical":40},0,{"positive":42,"critical":33},3,{"positive":42,"critical":18},[38,42,38,40,40,40,42,38,42,38,42,42,42,40,33,38,40,38,38,40,40,40,40,33,42,40,38,42,40,40,33,33,40,40,40,42,40,42,38,38],"Had some fun with shared array buffers over many months of free time.\n\nSkip to the end to play around with the final app.\n\nOpen to ideas on how to simulate more whilst staying in js land.",{"problem":47,"audience":53,"pricing":53,"motivation":54,"time_to_build":53,"stack":58,"openness":81,"stage":82,"team_size":83},{"value":48,"source":49,"evidence":50},"Simulating very large numbers of particles in JavaScript performantly","maker",[51],{"id":52},"post",null,{"value":55,"source":49,"evidence":56},"Fun over many months of free time, exploring shared array buffers",[57],{"id":52},[59,63,73],{"value":60,"source":49,"evidence":61},"JavaScript",[62],{"id":52},{"value":64,"source":49,"evidence":65},"SharedArrayBuffer \u002F Web Workers",[66,69],{"id":67,"by":11,"text":68},"40902286","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…",{"id":70,"by":71,"text":72},"40902243","dado3212","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'…",{"value":74,"source":75,"evidence":76},"Float32Array","commenter",[77],{"id":78,"by":79,"text":80},"40902453","franciscop","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…","unknown","launched","solo",{"praise":85,"objections":123,"requests":147,"questions":171,"alternatives":193},[86,101,112],{"value":87,"source":75,"evidence":88},"Impressive, fun to play with, and the writeup is excellent",[89,93,97],{"id":90,"by":91,"text":92},"40902889","tired_and_awake","Seriously impressive engineering OP, thanks for the awesome writeup too. Looks like you've got a ton of fans now, well earned!",{"id":94,"by":95,"text":96},"40902420","pdsouza","Love this. Enjoyed riding your train of thought from challenge conception through each performance pass to the final form. Surprisingly fun to play around with this sim too.…",{"id":98,"by":99,"text":100},"40904279","dangoodmanUT","This is great work",{"value":102,"source":75,"evidence":103},"Fluid-like visuals look organic and beautiful",[104,108],{"id":105,"by":106,"text":107},"40906392","bloopernova","Wow, looks strangely organic, like lipid structures in primordial ooze.",{"id":109,"by":110,"text":111},"40902665","shash7","Whoa this is like fine sand. Amazing!",{"value":113,"source":75,"evidence":114},"Blog explanations are very clear and polished",[115,119],{"id":116,"by":117,"text":118},"40902513","w_for_wumbo","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,…",{"id":120,"by":121,"text":122},"40902161","andai","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…",[124,132,143],{"value":125,"source":75,"evidence":126},"Codesandbox embeds do not work inline and require a separate tab with headers",[127,128],{"id":70,"by":71,"text":72},{"id":129,"by":130,"text":131},"40905948","pkilgore","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…",{"value":133,"source":75,"evidence":134},"Strobing\u002Fflicker can be a health concern",[135,139],{"id":136,"by":137,"text":138},"40902581","int0x29","Might want a strobe warning. At least for Firefox and Chromium in Linux on a desktop it strobes heavily in the starting state.",{"id":140,"by":141,"text":142},"40903699","lukan","\"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\" Not sure I understand. The flicker is not due…",{"value":144,"source":75,"evidence":145},"Hard to find the simulation link on the page; embed it in the blog",[146],{"id":120,"by":121,"text":122},[148,159,163],{"value":149,"source":75,"evidence":150},"Publish full source code to run locally",[151,155],{"id":152,"by":153,"text":154},"40947908","llmblockchain","Is the code available somewhere? I'd like to see the full code and run locally. It looks like the code sandbox isn't working anymore.",{"id":156,"by":157,"text":158},"40902946","lbj","Anyone else having trouble with that web vscode he's using?",{"value":160,"source":75,"evidence":161},"Embed the simulation in the article",[162],{"id":120,"by":121,"text":122},{"value":164,"source":75,"evidence":165},"Use less memory per particle (Float16Array or packing)",[166,167],{"id":78,"by":79,"text":80},{"id":168,"by":169,"text":170},"40902507","DrMiaow","As you stated, Encoding\u002Fdecoding would kill your performance. Float16Array would immediately halve your memory requirements Another possibility would be to have separate…",[172,179,186],{"value":173,"source":75,"evidence":174},"How to run the code locally",[175],{"id":176,"by":177,"text":178},"40903947","aap_","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 :\u002F",{"value":180,"source":75,"evidence":181},"How Atomics relates to promises",[182],{"id":183,"by":184,"text":185},"40905241","codelikeawolf","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…",{"value":187,"source":75,"evidence":188},"How state persists when tab is backgrounded",[189],{"id":190,"by":191,"text":192},"40902712","thomasfromcdnjs","Inspiring tutorial! Does anyone know why\u002Fhow it maintains state if you tab out? Does Chrome eventually try to clean up the cache or is it locked in?",[194,198,205],{"value":195,"source":75,"evidence":196},"Ciechanow.ski interactive explanations",[197],{"id":120,"by":121,"text":122},{"value":199,"source":75,"evidence":200},"Shadama2 particle simulations",[201],{"id":202,"by":203,"text":204},"40902701","morphle","Almost 20 million particles: run and program the simulations https:\u002F\u002Ftinlizzie.org\u002F~ohshima\u002Fshadama2\u002F https:\u002F\u002Ftinlizzie.org\u002F~ohshima\u002Fshadama2\u002Flive2017\u002F…",{"value":206,"source":75,"evidence":207},"Falling sand p5.js tutorial",[208],{"id":209,"by":210,"text":211},"40907157","jasonjmcghee","p5.js is a great medium. I did a short series in this style - you can inspect it to see full source (non minified \u002F obfuscated) with some comments here and there.…",{"comments":213,"answered":33,"key":214},6,[215,218,221],{"id":216,"text":217},"40902295","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…",{"id":219,"text":220},"40907405","This is an amazing series. Love the style and incremental examples.",{"id":67,"text":68},{"commenters":223,"max_depth":224,"maker_replies":213,"first_comment_mins":225,"lifespan_hours":226},52,7,45,120,[228,230,232,236,238,242,246,249,251,252,254,256,259,263,267,271,272,276,277,278,281,284,286,288,291,293,294,295,299,301,304,307,310,313,318,321,323,325,328,331,335,338,341,343,347,350,354,355,358,360,362,365,369,373,375,377,379,382,383,387,390,392,394,396,398,400,403,407,409,411],[120,40,38,229,121,40],"maker\u002Fpositive\u002Fdesign",[216,40,40,231,11,33],"maker\u002Fneutral\u002Fdocs",[233,40,42,234,235,40],"40902681","maker\u002Fneutral\u002Fperformance","tlarkworthy",[116,40,38,237,117,40],"maker\u002Fpositive\u002Fdocs",[239,40,40,240,241,40],"40902753","commenter\u002Fneutral\u002Fdocs","Lerc",[243,40,40,244,245,40],"40903733","commenter\u002Fneutral\u002Fnone","magicalhippo",[247,40,40,244,248,40],"40905035","interactivecode",[209,40,40,250,210,40],"other\u002Fneutral\u002Fnone",[219,40,40,244,11,33],[253,40,40,244,210,40],"40911023",[255,40,40,250,245,40],"40911501",[257,40,42,231,258,40],"40902999","bahmboo",[260,40,38,261,262,40],"40903860","project\u002Fpositive\u002Fdesign","kragen",[264,33,38,265,266,40],"40902272","project\u002Fpositive\u002Fnone","jekude",[268,33,42,269,270,40],"40902297","project\u002Fmixed\u002Fperformance","jerbear4328",[105,33,38,261,106,40],[273,33,42,274,275,40],"40907182","project\u002Fneutral\u002Fperformance","ruined",[78,18,42,274,79,40],[168,18,42,274,169,40],[279,18,42,274,280,40],"40904135","dleeftink",[282,18,40,283,280,40],"40906398","commenter\u002Fneutral\u002Fperformance",[183,42,42,285,184,40],"project\u002Fneutral\u002Fnone",[202,34,40,287,203,40],"other\u002Fneutral\u002Fidea",[289,34,40,250,290,40],"40905173","scotty79",[70,38,33,292,71,40],"project\u002Fcritical\u002Fexecution",[67,38,40,231,11,33],[109,38,38,261,110,40],[296,213,38,297,298,40],"40904264","project\u002Fpositive\u002Fexecution","edweis",[300,213,40,244,11,33],"40920071",[302,213,38,261,303,40],"40951025","everyos_",[305,213,38,265,306,40],"40951186","cowboylowrez",[308,224,42,234,309,40],"40906694","mjgoeke",[90,311,38,312,91,40],8,"maker\u002Fpositive\u002Fexecution",[314,315,40,316,317,40],"40904198",9,"other\u002Fneutral\u002Fperformance","hereforcomments",[319,315,40,316,320,40],"40904226","diggan",[322,315,40,316,141,40],"40904971",[324,315,40,250,320,40],"40905949",[326,315,40,250,327,40],"40904342","jsheard",[329,315,40,250,330,40],"40904839","dgb23",[332,333,40,287,334,40],"40903948",10,"hopfog",[136,336,33,337,137,40],11,"project\u002Fcritical\u002Fdesign",[339,336,40,340,11,33],"40902657","project\u002Fneutral\u002Fdesign",[140,336,42,342,141,40],"maker\u002Fneutral\u002Fdesign",[344,345,40,250,346,40],"40913688",12,"purple-leafy",[348,345,40,250,349,40],"40918351","tripzilch",[351,352,40,316,353,40],"40906520",13,"Seb-C",[94,32,38,237,95,40],[152,356,42,357,153,40],15,"project\u002Fneutral\u002Fdocs",[190,359,42,274,191,40],16,[361,359,40,244,141,40],"40903707",[363,359,40,244,364,40],"40905543","SamBam",[366,367,40,287,368,40],"40921314",17,"iEchoic",[370,371,40,250,372,40],"40904863",18,"itvision",[156,374,33,292,157,40],19,[176,374,33,376,177,40],"project\u002Fcritical\u002Fdocs",[378,374,40,231,11,33],"40904017",[380,374,40,250,381,40],"40905728","nox101",[129,374,40,240,130,40],[384,385,40,250,386,40],"40902319",20,"a-dub",[388,385,40,250,389,40],"40902791","shakna",[391,385,40,250,386,40],"40902871",[393,385,40,316,389,40],"40904046",[395,385,42,274,386,40],"40905069",[397,385,40,316,389,40],"40905150",[399,385,40,316,386,40],"40906700",[401,402,42,274,262,40],"40903848",21,[404,402,38,405,406,40],"40903866","project\u002Fpositive\u002Fperformance","mandarax8",[408,402,42,231,262,40],"40903884",[98,410,38,312,99,40],22,[412,413,38,237,414,40],"40904374",23,"randall",[],[417,422,426,431,435,440],{"id":418,"name":419,"points":420,"category":421},"40899242","Satyrn",611,"dev_tools",{"id":423,"name":424,"points":425,"category":421},"40932492","Dut",396,{"id":427,"name":428,"points":429,"category":430},"40916326","BitWHIP",353,"infrastructure",{"id":432,"name":433,"points":434,"category":421},"40904862","Onlook",336,{"id":436,"name":437,"points":438,"category":439},"40881836","Telescope",273,"web_saas",{"id":441,"name":442,"points":443,"category":421},"40913736","Crawlee for Python",254,false,"v2",{"id":447,"name":5,"line":6,"ai":444,"cat":20,"year":13,"points":14,"comments":15,"rec":29,"s":448,"top":18,"kw":449,"maker":11,"domain":10,"tier":19,"attempts":40,"strip":450,"url":9,"mix":451,"praise":87,"objection":125,"sub":21},40902012,0.26,[24,25,26,27,28],"5350003535333015055000013053001100030355",[32,32,33,34],1793991095245]