{"id":1326,"date":"2026-07-12T18:58:04","date_gmt":"2026-07-12T22:58:04","guid":{"rendered":"https:\/\/jolivo.xenius.org\/?p=1326"},"modified":"2026-07-12T19:32:12","modified_gmt":"2026-07-12T23:32:12","slug":"primordial-cosmic-soup","status":"publish","type":"post","link":"https:\/\/jolivo.xenius.org\/?p=1326","title":{"rendered":"Primordial Cosmic Soup \u2014  A Distant Relative of Conway&#8217;s Game of Life"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-1327\" src=\"https:\/\/jolivo.xenius.org\/wp-content\/uploads\/2026\/07\/PCSoup-300x216.png\" alt=\"\" width=\"300\" height=\"216\" srcset=\"https:\/\/jolivo.xenius.org\/wp-content\/uploads\/2026\/07\/PCSoup-300x216.png 300w, https:\/\/jolivo.xenius.org\/wp-content\/uploads\/2026\/07\/PCSoup-1024x738.png 1024w, https:\/\/jolivo.xenius.org\/wp-content\/uploads\/2026\/07\/PCSoup-768x554.png 768w, https:\/\/jolivo.xenius.org\/wp-content\/uploads\/2026\/07\/PCSoup-1536x1107.png 1536w, https:\/\/jolivo.xenius.org\/wp-content\/uploads\/2026\/07\/PCSoup.png 1699w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/p>\n<p>I&#8217;ve always wanted to do this. And, I think, there&#8217;s still a lot of work to be done, but I&#8217;ll put this on GitHub and see if any others are interested in taking it on. I had my own personal goals when making it, specifically to combine the concept of Conway&#8217;s Cellular Automata with the birth of our universe from four fundamental forces. While I haven&#8217;t quite done that here, my goal, as almost always, was to see complexity evolve from simple rules.<\/p>\n<p>As it is now, Primordial Cosmic Soup is a single self-contained HTML file with no external dependencies. It runs entirely in the browser using an HTML5 Canvas 2D context and vanilla JavaScript. There is no server, no required framework, and no build step required.<\/p>\n<p>Performance-critical data is stored in typed arrays (Float32Array, Uint8Array) for cache-friendly memory layout. The spatial grid uses a linked-list bucket structure (gridHead \/ gridNext) rebuilt each frame.<\/p>\n<p>\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510<br \/>\n\u2502 Layer \u2502 Technology \u2502<br \/>\n\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u253c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524<br \/>\n\u2502 Platform \u2502 Static browser app, single HTML file, zero dependencies \u2502<br \/>\n\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u253c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524<br \/>\n\u2502 Language \u2502 Vanilla JavaScript (ES6: arrow functions, class) \u2502<br \/>\n\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u253c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524<br \/>\n\u2502 Graphics \u2502 Canvas 2D API + rAF render loop \u2502<br \/>\n\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u253c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524<br \/>\n\u2502 Simulation \u2502 Particle-life w\/ typed arrays + spatial-hash grid \u2502<br \/>\n\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u253c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524<br \/>\n\u2502 UI \u2502 Hand-written HTML\/CSS (dark glassmorphism) \u2502<br \/>\n\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u253c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524<br \/>\n\u2502 Docs tooling \u2502 PowerShell + Word COM automation \u2502<br \/>\n\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u253c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524<br \/>\n\u2502 Versioning \u2502 Manual .zip snapshots (no VCS) \u2502<br \/>\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518<\/p>\n<p>Because of this, you could open index.html directly in a browser and it should run, and all performance-critical work is done via typed arrays and a spatial grid rather than any external engine. Browsers these days are amazing! Included in that HTML5 file is an embedded (but downloadable) manual. It should make some sense of some of the bizarre choices I made while putting the app together using Claude.<\/p>\n<p>Primordial Cosmic Soup is a simulation of emergent complexity inspired by particle physics, cellular automata, and agent-based modelling. A handful of<br \/>\nsimple pairwise force rules between colored particle types is sufficient to produce rich, lifelike structures \u2014 orbiting clusters, crawling cells, crystalline lattices, and<br \/>\nchaotic flows \u2014 without any explicit instruction to form them. The key insight is that the attraction and repulsion values between types do not<br \/>\nneed to be symmetric. Type A can strongly attract Type B while Type B mildly repels Type A, and the resulting asymmetry drives directional motion and the formation of multi-body structures.<\/p>\n<p>When particles collide with sufficient energy, they spawn new daughter particles whose color is a blend of the two colliding parents. These daughter particles<br \/>\nbelong to a named spawn class with its own randomized attraction rules, displayed in the sidebar. Over time, a rich ecology of base types and collision-born<br \/>\noffspring builds up \u2014 a primordial soup of emergent chemistry. The simulator uses four base particle types (Red, Green, Blue, Yellow), a spatialgrid force integrator, LHC-inspired collision effects, and a real-time side-panel UI so every rule can be adjusted while the simulation runs.<\/p>\n<p>Every particle stores exactly four numbers at any given moment:<br \/>\n\u2022 x, y \u2014 position in the simulation world.<br \/>\n\u2022 vx, vy \u2014 velocity (world units per simulation step in each axis).<br \/>\nAdditionally, every particle has a fixed type assigned at spawn time. Base particles carry one of four types (Red, Green, Blue, Yellow). Spawned (collision-born)<br \/>\nparticles carry a spawn class index that points to their shared class record. A particle&#8217;s type determines which row of the attraction matrix, which friction value,<br \/>\nand which radius value apply.<\/p>\n<p>Spawned particles also carry a lifetime counter (pLife) that counts down from a randomized maximum. When a spawned particle&#8217;s life reaches zero it is removed.<br \/>\nSetting Spawn Life to 0 in the global controls makes spawned particles immortal.<\/p>\n<p>You can play with it here: https:\/\/xenius.org\/PrimordialCosmicSoup\/<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;ve always wanted to do this. And, I think, there&#8217;s still a lot of work to be done, but I&#8217;ll put this on GitHub and see if any others are interested in taking it on. I had my own personal goals when making it, specifically to combine the concept of Conway&#8217;s Cellular Automata with the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1327,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14,17],"tags":[],"class_list":["post-1326","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-rants","category-simulations"],"_links":{"self":[{"href":"https:\/\/jolivo.xenius.org\/index.php?rest_route=\/wp\/v2\/posts\/1326","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jolivo.xenius.org\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jolivo.xenius.org\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jolivo.xenius.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jolivo.xenius.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1326"}],"version-history":[{"count":8,"href":"https:\/\/jolivo.xenius.org\/index.php?rest_route=\/wp\/v2\/posts\/1326\/revisions"}],"predecessor-version":[{"id":1336,"href":"https:\/\/jolivo.xenius.org\/index.php?rest_route=\/wp\/v2\/posts\/1326\/revisions\/1336"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jolivo.xenius.org\/index.php?rest_route=\/wp\/v2\/media\/1327"}],"wp:attachment":[{"href":"https:\/\/jolivo.xenius.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1326"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jolivo.xenius.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1326"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jolivo.xenius.org\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1326"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}