29:null 2a:["$","title",null,{"children":"Tutorial: Particle Lenia from scratch | Alexander Mordvintsev | Observable"}] 2f:T525,The simulation above shows [Particle Lenia](${urls.plenia}): the system of particles that move to minimize local energy of their interaction, leading to the formation of complex and diverse structures. The system can be concisely formulated as an energy function of particle positions, and [automatic differentiation (AD)](https://en.wikipedia.org/wiki/Automatic_differentiation), conveniently provided by [JAX](https://github.com/google/jax), helps to convert potential energy into explicit motion rules. But what if we would like to implement Particle Lenia without depending on AD libraries and languages? Both original [Lenia](https://chakazul.github.io/lenia.html) and [The Game of Life](https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life) are defined by explicit sets of rules that can be easily translated into code in any language, which definitely helped their popularity. In this short article we are going to manually derive Particle Lenia laws of motion and implement them from scratch using the world's [most popular](https://survey.stackoverflow.co/2022/#most-popular-technologies-language) language that runs in every browser and even in some server environments: Javascript. We are going to use very few language features, so the code should be easy to translate to any other programming language.30:T452,We can easily find the gradient of ${tex`\mathbf{E}`} using the derivative of sum and the [chain rule](https://en.wikipedia.org/wiki/Chain_rule): ${tex.block`∇\ \mathbf{E}(\mathbf{x}) = ∇\mathbf{R}-\dot{G}(\mathbf{U})\ ∇\mathbf{U} \tag{1}`} where ${tex`\dot{G}`} denotes the first derivative of the scalar function ${tex`G`}. Gradients ${tex`∇\mathbf{R}`} and ${tex`∇\mathbf{U}`} are sums of radial vector fields produced by individual particles: ${tex.block`∇\mathbf{R} = \sum_i \dot{R}(r_i)\ ∇r_i`} ${tex.block`∇\mathbf{U} = \sum_i \dot{K}(r_i)\ ∇r_i \tag{2}`} ${tex.block`∇r_i= \frac{\mathbf{x}-\mathbf{p}_i} {\Vert \mathbf{x}-\mathbf{p}_i \Vert}`} The only missing bits are definitions of single-input scalar functions ${tex`K`}, ${tex`G`} and ${tex`R`}. I leave the exercise of deriving expressions for ${tex`\dot{K}`}, ${tex`\dot{G}`} and ${tex`\dot{R}`} to the reader. ${tex.block`K(r) = w_K\exp\big({-(r-\mu_K)^2 \big/ \sigma_K^2}\big)`} ${tex.block`G(u) = \exp\big({-(u-\mu_G)^2 \big/ \sigma_G^2}\big)`} ${tex.block`R(r) = \frac{c_\text{rep}}{2}\max\big(1-r,\; 0\big)^2`}31:[] 2d:{"id":"8e324663a866569c","slug":"particle-lenia-from-scratch","title":"Tutorial: Particle Lenia from scratch","thumbnail":"8a7bc959eca053712f6b999ecfb3c96a929635a4254e60e826e073262bee1a4c","access_level":"public","create_time":"$D2023-01-11T09:27:18.366Z","update_time":"$D2023-01-16T22:59:42.230Z","view_time":null,"first_public_time":"$D2023-01-11T09:27:18.366Z","has_unpublished_edits":null,"fork":false,"stars":41,"starred":false,"owner":{"type":"team","id":"081fe51f10e0fa22","login":"znah","name":"Alexander Mordvintsev","avatar_url":"https://avatars-next.observableusercontent.com/0a58adb6c23ee995d8fb7f6c8bf6feac7af991b35130eaf3aa914cee4e502fa9","tier":"starter_2024"},"version":444,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"df48d1780991b9f2","login":"znah","name":"Alexander Mordvintsev","avatar_url":"https://avatars-next.observableusercontent.com/0a58adb6c23ee995d8fb7f6c8bf6feac7af991b35130eaf3aa914cee4e502fa9","tier":null}],"members":[{"type":"individual","id":"df48d1780991b9f2","login":"znah","name":"Alexander Mordvintsev","avatar_url":"https://avatars-next.observableusercontent.com/0a58adb6c23ee995d8fb7f6c8bf6feac7af991b35130eaf3aa914cee4e502fa9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":17,"collection":null,"type":"notebook","body":{"title":"Tutorial: Particle Lenia from scratch","cells":[{"id":193,"value":"# Tutorial: Particle Lenia from scratch\n\nAuthor | Affiliation | Published\n--------|-------------|----------\n[Alexander Mordvintsev](https://znah.net) | [Google](https://ai.google/) | January 12, 2023\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":186,"value":"{\n const context = DOM.context2d(600, 600);\n const canvas = context.canvas;\n canvas.style.maxWidth = '100%'\n while (true) {\n await visibility();\n animate(context);\n yield canvas;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"viewof steps_per_frame = Inputs.range([0, 10], {value: 5, step: 1, label: \"steps_per_frame\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":296,"value":"{\n const reset = html``;\n reset.onclick = ()=>init(points);\n const status = html``;\n const bench = html``;\n bench.onclick = ()=>{\n init(points);\n const n = 1000, start = performance.now();\n for (let i=0; i