{"id":20129509,"url":"https://github.com/dra1ex/js_particlesystem","last_synced_at":"2025-04-09T16:12:03.040Z","repository":{"id":60270903,"uuid":"537785355","full_name":"DrA1ex/JS_ParticleSystem","owner":"DrA1ex","description":"Gravity Simulation (Galaxy Birth) in real time, N-Body and 1-Body","archived":false,"fork":false,"pushed_at":"2023-09-26T18:09:01.000Z","size":10984,"stargazers_count":46,"open_issues_count":0,"forks_count":8,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-09T16:11:52.796Z","etag":null,"topics":["canvas","galaxy-birth","galaxy-evolution","gravity-simulation","javascript","n-body","physics","physics-simulation","simulation","webgl"],"latest_commit_sha":null,"homepage":"https://dra1ex.github.io/JS_ParticleSystem/n_body","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DrA1ex.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-09-17T11:19:25.000Z","updated_at":"2025-02-24T19:42:57.000Z","dependencies_parsed_at":"2023-09-26T21:52:46.057Z","dependency_job_id":null,"html_url":"https://github.com/DrA1ex/JS_ParticleSystem","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DrA1ex%2FJS_ParticleSystem","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DrA1ex%2FJS_ParticleSystem/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DrA1ex%2FJS_ParticleSystem/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DrA1ex%2FJS_ParticleSystem/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DrA1ex","download_url":"https://codeload.github.com/DrA1ex/JS_ParticleSystem/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248065283,"owners_count":21041872,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["canvas","galaxy-birth","galaxy-evolution","gravity-simulation","javascript","n-body","physics","physics-simulation","simulation","webgl"],"created_at":"2024-11-13T20:34:39.948Z","updated_at":"2025-04-09T16:12:03.014Z","avatar_url":"https://github.com/DrA1ex.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Simulation of Gravity / Galaxy Birth simulation\n\u003cp align=\"center\"\u003e\n\u003cimg width=\"480\" alt=\"Simulation gif\" src=\"https://user-images.githubusercontent.com/1194059/193450370-278ae448-c71b-4282-9045-2f8097a3f6cf.gif\"\u003e\n\u003c/p\u003e\n\n## N-Body Simulation\n\nThe simulation is an N-Body system, where all particles interact with each other. It can be referred to as a galaxy simulation, although certain assumptions are made. The formation of a galaxy is a lengthy process, shaped over millions of years of interactions. Furthermore, the sheer number of particles in a galaxy is so immense that recreating the birth of a galaxy with high accuracy is beyond the capabilities of any computer. However, this simulation provides the opportunity to witness the process on a smaller scale.\n\n_50,000 particles forms a Galaxy-like\nimage_ (Try it yourself: [#1](https://dra1ex.github.io/JS_ParticleSystem/n_body/?state=../static/galaxy1.json), [#2](https://dra1ex.github.io/JS_ParticleSystem/n_body/?state=../static/galaxy2.json), [#3](https://dra1ex.github.io/JS_ParticleSystem/n_body/?state=../static/galaxy3.json))\n\n[\u003cimg height=\"250\" alt=\"image\" src=\"https://user-images.githubusercontent.com/1194059/194406835-25e8af62-3361-45d9-8e53-836f68ae04b3.png\"\u003e](https://user-images.githubusercontent.com/1194059/194406257-721f5516-9685-425c-b157-f4f28aa12c64.png) [ \u003cimg height=\"250\" alt=\"image\" src=\"https://user-images.githubusercontent.com/1194059/194406943-f9996d31-2b2d-402f-b50c-6634538a7a5d.png\"\u003e](https://user-images.githubusercontent.com/1194059/194406416-311b8dfc-857f-458c-8d7c-5cba1cac4636.png) \u003cimg height=\"250\" alt=\"image\" src=\"https://user-images.githubusercontent.com/1194059/193401669-acc131b5-9aa6-4ddb-b2b2-582986dc7320.png\"\u003e \u003cimg height=\"250\" alt=\"image\" src=\"https://user-images.githubusercontent.com/1194059/193060048-2f9dd976-e675-42f2-aef1-1f381a807ced.png\"\u003e \u003cimg height=\"250\" alt=\"image\" src=\"https://user-images.githubusercontent.com/1194059/193402299-c9728ea3-b29d-4174-a4d1-3930c85cd863.png\"\u003e \u003cimg height=\"250\" alt=\"image\" src=\"https://user-images.githubusercontent.com/1194059/193402786-c9d376cf-5170-47e0-974d-c31bd3710558.png\"\u003e \u003cimg height=\"250\" alt=\"image\" src=\"https://user-images.githubusercontent.com/1194059/193416793-244cf9ba-1218-455b-abf8-da453f3bc14e.png\"\u003e\n\nGiven the complexity of accurately calculating gravitational interactions, several optimizations have been employed. \nThe particles are organized into hierarchical segments, forming a Spatial Tree. Each particle within a segment interacts with every other particle in the same segment, rather than engaging with particles in different segments. Consequently, the segments themselves are treated as larger particles and interact with one another. This approach ensures an acceptable complexity level: _O(N*logN)_, as opposed to the unoptimized _O(N*N)_ approach.\n\n_Visualization of Spatial tree used to optimize 100,000 particles interaction_\n\n\u003cimg width=\"720\" alt=\"image\" src=\"https://user-images.githubusercontent.com/1194059/192269736-64fe4b19-d0bb-4cbc-b0df-591e17191355.png\"\u003e\n\nYou can see Spatial Tree segmentation in real-time: [link](https://dra1ex.github.io/JS_ParticleSystem/n_body?debug=1\u0026segment_random=0)\n\nIn practical terms, this means that we can simulate _100,000_ particles using approximately _500,000_ operations. Without optimization, simulating _100,000_ particles would require _10,000,000,000_ operations, which is _20,000_ times more computationally intensive.\n\n_Visualization of 1,000,000 particles (click image to open YouTube video)_\n\n[\u003cimg width=\"720\" alt=\"image\" src=\"https://user-images.githubusercontent.com/1194059/195990061-9fcf8693-faea-4038-80a3-30ccd9158182.png\"\u003e](https://youtu.be/Gu8Y1t5cblE)\n\n### Demo Links\n\n- Accurate simulation, galaxy-like pattern may born (#1): [link](https://dra1ex.github.io/JS_ParticleSystem/n_body/?segment_max_count=32\u0026particle_count=131072)\n- Accurate simulation, galaxy-like pattern may born (#2): [link](https://dra1ex.github.io/JS_ParticleSystem/n_body/?segment_max_count=32\u0026particle_count=100000\u0026particle_init=bang)\n- Fast simulation (#1): [link](https://dra1ex.github.io/JS_ParticleSystem/n_body/?particle_init=rotation\u0026g=1000)\n- Fast simulation (#2): [link](https://dra1ex.github.io/JS_ParticleSystem/n_body/?particle_init=collision\u0026g=1000)\n- Big GPGPU simulation (#1): [link](https://dra1ex.github.io/JS_ParticleSystem/n_body/?backend=gpgpu\u0026particle_count=16384\u0026segment_max_count=128\u0026particle_init=uniform\u0026particle_mass=10\u0026g=10)\n- Big GPGPU simulation (#2): [link](https://dra1ex.github.io/JS_ParticleSystem/n_body/?backend=gpgpu\u0026particle_count=16384\u0026segment_max_count=128\u0026particle_mass=10\u0026g=100)\n- Particle collisions CPU (accurate): [link](https://dra1ex.github.io/JS_ParticleSystem/n_body/?collision=1)\n- Particle collisions CPU (fast): [link](https://dra1ex.github.io/JS_ParticleSystem/n_body/?collision=1\u0026g=10)\n- Particle collisions GPGPU (accurate): [link](https://dra1ex.github.io/JS_ParticleSystem/n_body/?collision=1\u0026backend=gpgpu\u0026particle_count=16384\u0026segment_max_count=128)\n- Particle collisions GPGPU (fast): [link](https://dra1ex.github.io/JS_ParticleSystem/n_body/?collision=1\u0026backend=gpgpu\u0026particle_count=16384\u0026segment_max_count=128\u0026g=100)\n\nMore links you can find below.\n\n### Simulation Player\nYou can use [Simulation Player](https://dra1ex.github.io/JS_ParticleSystem/n_body/player) to watch recorded simulations.\n\n_Note:_ Please be patient, files may be very large, so loading may take a while. Pay attention to the package size written in brackets.\n\n_Demo links_:\n\n- 16k particles with `collision=1`: [player](https://dra1ex.github.io/JS_ParticleSystem/n_body/player/?url=https://media.githubusercontent.com/media/DrA1ex/docs_storage/main/JS_ParticleSystem/records/record_collision_16k.bin) / [recorded track (6MB)](https://github.com/DrA1ex/docs_storage/blob/main/JS_ParticleSystem/records/record_collision_16k.bin) / [simulation](https://dra1ex.github.io/JS_ParticleSystem/n_body/?backend=gpgpu\u0026particle_count=16384\u0026segment_max_count=128\u0026collision=1\u0026g=10)\n- 65k particles with `collision=1`: [player](https://dra1ex.github.io/JS_ParticleSystem/n_body/player/?url=https://media.githubusercontent.com/media/DrA1ex/docs_storage/main/JS_ParticleSystem/records/record_collision_65k.bin) / [recorded track (72MB)](https://github.com/DrA1ex/docs_storage/blob/516cd347644427ae493f290c8d5f0cf62fb43986/JS_ParticleSystem/records/record_collision_65k.bin) / [simulation](https://dra1ex.github.io/JS_ParticleSystem/n_body/?backend=gpgpu\u0026particle_count=65536\u0026segment_max_count=256\u0026collision=1\u0026min_distance=0.1)\n- 128k particles with `g=100`: [player](https://dra1ex.github.io/JS_ParticleSystem/n_body/player/?url=https://media.githubusercontent.com/media/DrA1ex/docs_storage/main/JS_ParticleSystem/records/record_128k.bin) / [recorded track (56MB)](https://github.com/DrA1ex/docs_storage/blob/main/JS_ParticleSystem/records/record_128k.bin) / [simulation](https://dra1ex.github.io/JS_ParticleSystem/n_body/?backend=gpgpu\u0026particle_count=128000\u0026segment_max_count=360\u0026g=100)\n- 128k particles with self-collision burst, `collision=1\u0026g=10`: [player](https://dra1ex.github.io/JS_ParticleSystem/n_body/player/?url=https://media.githubusercontent.com/media/DrA1ex/docs_storage/main/JS_ParticleSystem/records/record_128k_self_collisions.bin) / [recorded track (52MB)](https://github.com/DrA1ex/docs_storage/blob/main/JS_ParticleSystem/records/record_128k_self_collisions.bin) / [simulation](https://dra1ex.github.io/JS_ParticleSystem/n_body/?backend=gpgpu\u0026particle_count=129600\u0026segment_max_count=360\u0026g=10\u0026collision=1\u0026min_distance=0.8)\n\n\n### Real-Time Simulation\nYou can combine different [parameters](https://github.com/DrA1ex/JS_ParticleSystem#parameters), [renderer](https://github.com/DrA1ex/JS_ParticleSystem#renderer) and [backend](https://github.com/DrA1ex/JS_ParticleSystem#backend).\nTo change parameter just add it to url as query parameter, e.g.: [`/?particle_count=10000\u0026particle_init=bang`](https://dra1ex.github.io/JS_ParticleSystem/n_body?particle_count=10000\u0026particle_init=bang)\n\n_Collision:_\n- Enabled collisions: [link](https://dra1ex.github.io/JS_ParticleSystem/n_body/?collision=1)\n- Enabled collisions with gpgpu simulation: [link](https://dra1ex.github.io/JS_ParticleSystem/n_body/?collision=1\u0026backend=gpgpu\u0026particle_count=16384\u0026segment_max_count=128)\n- Enabled collisions with gpgpu simulation and `min_distance=3`: [link](https://dra1ex.github.io/JS_ParticleSystem/n_body/?collision=1\u0026backend=gpgpu\u0026particle_count=16384\u0026segment_max_count=128\u0026min_distance=3)\n\n_Different initializers:_\n- circle initializer: [link](https://dra1ex.github.io/JS_ParticleSystem/n_body/?particle_init=circle)\n- uniform initializer: [link](https://dra1ex.github.io/JS_ParticleSystem/n_body/?particle_init=uniform)\n- bang initializer: [link](https://dra1ex.github.io/JS_ParticleSystem/n_body/?particle_init=bang)\n- rotation initializer: [link](https://dra1ex.github.io/JS_ParticleSystem/n_body/?particle_init=rotation)\n- collision initializer: [link](https://dra1ex.github.io/JS_ParticleSystem/n_body/?particle_init=collision)\n- swirl initializer: [link](https://dra1ex.github.io/JS_ParticleSystem/n_body/?particle_init=swirl)\n\n_Different gravity forces:_\n- rotation initializer with `x1000` gravity: [link](https://dra1ex.github.io/JS_ParticleSystem/n_body/?particle_init=rotation\u0026g=1000)\n- collision initializer with `x1000` gravity: [link](https://dra1ex.github.io/JS_ParticleSystem/n_body/?particle_init=collision\u0026g=1000)\n\n_Different resistance:_\n- bang initializer with `0.99` resistance and `x100` gravity: [link](https://dra1ex.github.io/JS_ParticleSystem/n_body/?particle_init=bang\u0026resistance=0.99\u0026g=100)\n- collision initializer with `0.995` resistance and `x100` gravity: [link](https://dra1ex.github.io/JS_ParticleSystem/n_body/?particle_init=collision\u0026resistance=0.995\u0026g=100)\n\n_Particle mass variation:_\n- Mass variation `3` and `x0.5` gravity: [link](https://dra1ex.github.io/JS_ParticleSystem/n_body/?particle_mass=3\u0026g=0.5)\n- Mass variation `5` with accurate gpgpu simulation: [link](https://dra1ex.github.io/JS_ParticleSystem/n_body/?particle_mass=5\u0026backend=gpgpu\u0026segment_max_count=64\u0026particle_count=4096)\n- Mass vartiation `10` with accurate big gpgpu simulation: [link](https://dra1ex.github.io/JS_ParticleSystem/n_body/?backend=gpgpu\u0026particle_count=16384\u0026segment_max_count=128\u0026particle_init=uniform\u0026particle_mass=10\u0026g=10)\n\n_Debug mode:_\n- Spatial tree: [link](https://dra1ex.github.io/JS_ParticleSystem/n_body/?debug=1\u0026debug_tree=1\u0026g=10\u0026dfri=0)\n- Speed and momentum vectors: [link](https://dra1ex.github.io/JS_ParticleSystem/n_body/?particle_count=5\u0026particle_init=rotation\u0026segment_max_count=5\u0026g=200\u0026debug=1\u0026debug_tree=0\u0026debug_velocity=1)\n\n\n### Renderer\nSupported render engines:\n\n##### `Canvas`\nUse HTML5 Canvas to render particles. In order to reduce delays, rendering through the ImageBuffer is utilized.\nThe rendering performs well on mobile platforms but experiences a significant drop in performance at high resolutions.\nFurthermore, canvas renderer does not support dynamic particle size, making particles difficult to discern on screens with high pixel density.\n\n_Demo links_:\n\n- With _enabled_ device pixel rate: [link](https://dra1ex.github.io/JS_ParticleSystem/n_body/?render=canvas\u0026dpr=1)\n- With _disabled_ device pixel rate: [link](https://dra1ex.github.io/JS_ParticleSystem/n_body/?render=canvas\u0026dpr=0)\n\n\n##### `webgl2`\nUse WebGL 2.0 to render particles. This rendering method effectively displays numerous particles in high resolution.\nThe render works well on screens with high pixel density and maintains dynamic particle size. However, it may not function on older browser versions and older mobile devices. This rendering technique is highly recommended for screens with high refresh rates due to its fast performance.\n\n_Demo links_:\n\n- With _enabled_ device pixel rate: [link](https://dra1ex.github.io/JS_ParticleSystem/n_body/?render=webgl2\u0026dpr=1)\n- With _disabled_ device pixel rate: [link](https://dra1ex.github.io/JS_ParticleSystem/n_body/?render=webgl2\u0026dpr=0)\n \n### Backend\nSupported backends:\n\n##### `worker`\nA web worker is utilized for physics calculations. All computations are performed separately from the main thread, ensuring a smooth rendering experience even with complex simulation configurations. This calculation approach is particularly suitable for mobile platforms and systems with basic integrated graphics.\nPlease note that since the computations are entirely handled by the CPU, it may not deliver high performance for tasks such as N-Body simulation. You should manage your expectations accordingly.\n\nYou can fine-tune the performance by adjusting the `segmentation_max_count` parameter. Decreasing its value reduces the computational complexity but sacrifices the accuracy of the simulation.\n\n_Demos with different segment max sizes_:\n- Max segment size `8`: [link](https://dra1ex.github.io/JS_ParticleSystem/n_body/?backend=worker\u0026segment_max_count=8)\n- Max segment size `32`: [link](https://dra1ex.github.io/JS_ParticleSystem/n_body/?backend=worker\u0026segment_max_count=32)\n- Max segment size `128`: [link](https://dra1ex.github.io/JS_ParticleSystem/n_body/?backend=worker\u0026segment_max_count=128)\n- Max segment size `256`: [link](https://dra1ex.github.io/JS_ParticleSystem/n_body/?backend=worker\u0026segment_max_count=256)\n\nIncreasing `segmentation_max_count` significantly degrades performance, but improves calculation accuracy.\n\n_Simulation demo links with maximum accuracy_:\n- Max segment size `1024`: [link](https://dra1ex.github.io/JS_ParticleSystem/n_body/?backend=worker\u0026particle_count=1024\u0026segment_max_count=1024)\n- Max segment size `2048`: [link](https://dra1ex.github.io/JS_ParticleSystem/n_body/?backend=worker\u0026particle_count=2048\u0026segment_max_count=2048)\n- Max segment size `4096`: [link](https://dra1ex.github.io/JS_ParticleSystem/n_body/?backend=worker\u0026particle_count=4096\u0026segment_max_count=4096)\n\n\n##### `gpgpu`\nGPGPU (General-purpose computing on graphics processing units) is employed for calculations in a dedicated worker, utilizing the power of the GPU. The highly parallelized nature of these computations enables significant acceleration, particularly for complex simulation configurations. However, it's worth noting that this method may not be suitable for mobile platforms but delivers excellent results on desktops equipped with discrete graphics cards.\n\nIn this calculation method, the `segmentation_max_count` parameter is interpreted as the dimension of the 2D texture, indicating the size of each segment. For example, a value of 128 actually corresponds to a segment size of 16,348 (128 * 128).\n\nThis method enables the simulation of gravity with utmost accuracy, accommodating a high volume of particles. However, it exhibits inefficiency and performs worse than the `worker` backend when used with small segment sizes.\n\n_Demos with different segment max sizes_:\n- Max segment size `64*64` and `32k` particles: [link](https://dra1ex.github.io/JS_ParticleSystem/n_body/?backend=gpgpu\u0026particle_count=32768\u0026segment_max_count=64)\n- Max segment size `128*128` and `131k` particles: [link](https://dra1ex.github.io/JS_ParticleSystem/n_body/?backend=gpgpu\u0026particle_count=131072\u0026segment_max_count=128)\n- Max segment size `256*256` and `262k` particles: [link](https://dra1ex.github.io/JS_ParticleSystem/n_body/?backend=gpgpu\u0026particle_count=262144\u0026segment_max_count=256)\n\nAlthough increasing the `segmentation_max_count` adversely affects GPGPU performance, it facilitates the simulation of a significantly larger number of particles while maintaining maximum accuracy.\n\n_Simulation demo links with maximum accuracy_:\n- Max segment size `96*96`: [link](https://dra1ex.github.io/JS_ParticleSystem/n_body/?backend=gpgpu\u0026particle_count=9216\u0026segment_max_count=96)\n- Max segment size `128*128`: [link](https://dra1ex.github.io/JS_ParticleSystem/n_body/?backend=gpgpu\u0026particle_count=16384\u0026segment_max_count=128)\n- Max segment size `176*176`: [link](https://dra1ex.github.io/JS_ParticleSystem/n_body/?backend=gpgpu\u0026particle_count=30976\u0026segment_max_count=176)\n- Max segment size `256*256`: [link](https://dra1ex.github.io/JS_ParticleSystem/n_body/?backend=gpgpu\u0026particle_count=65536\u0026segment_max_count=256)\n\n### Parameters:\nSee params description here: [link](./settings.md)\n\n## Limitations:\nApplication originally developed and optimized for Chrome browser. In other browsers app can have significant performance degradation.\n\n### Known issues\n- Due to lack of [WebWorker modules](https://caniuse.com/mdn-api_worker_worker_ecmascript_modules) the simulation may not work in Firefox.\n- Due to lack of [OffscreenCanvas](https://caniuse.com/offscreencanvas) GPGPU backend may not be available in Safari/Firefox.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdra1ex%2Fjs_particlesystem","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdra1ex%2Fjs_particlesystem","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdra1ex%2Fjs_particlesystem/lists"}