25:["$","title",null,{"children":"(New!) Simulation Controls | Adam Krawitz | Observable"}] 49:T62e,### Demonstration of `random` This demo provides an example of the **`random`** functionality. The simulation makes use of pseudo-randomly generated numbers. The starting point for each pseudo-random sequence is determined by a 9-digit seed. By default, a new seed is used each time the simulation is reset. But the user has the option of rerunning a previous sequence by reusing the same seed. Seeds are tracked for easy reuse (until the page is reloaded or the control cell is rerun) but they can also be copied elsewhere and re-entered manually. * **Reset** reinitializes the simulation with the pseudo-random seed provided by **Next Seed**, or a newly generated seed if the value of **Next Seed** is **`Generate`**. * **Step** advances by one cycle. * **Start**/**Stop** begins a sequence of cycles or halts a running sequence of cycles. * **Speed** adjusts how quickly the cycles run. * **Next Seed** is used to choose the seed for the _next_ run of the simulation. If **`Generate`** is selected then a new seed will be pseudo-randomly generated. If a 9-digit number is selected or entered, then it will be used as the seed. The drop-down menu lists all of the previously used seeds since the page was loaded (or the **`control`** cell was rerun). The most recently used seed is at the _top_ of the menu (but note that each seed is only listed _once_, so when you reuse a seed, it won't be re-added to the drop-down). * **Current Seed** provides a _read-only_ display of the seed for the _current_ run of the simulation. Clicking it will copy it to the clipboard for easy use!4a:T5c0,### Demonstration of `random` without `run` This last demo provides an example of the **`random`** functionality without controls for running a simulation. Sometimes you just need a sampler. The sampler makes use of pseudo-randomly generated numbers. The starting point for each pseudo-random sequence is determined by a 9-digit seed. By default, a new seed is used each time the user resamples. But the user has the option of rerunning a previous sampler by reusing the same seed. Seeds are tracked for easy reuse (until the page is reloaded or the control cell is rerun) but they can also be copied elsewhere and re-entered manually. * **Resample** reinitializes the sampler with the pseudo-random seed provided by **Next Seed**, or a newly generated seed if the value of **Next Seed** is **`Generate`**. * **Next Seed** is used to choose the seed for the _next_ resample. If **`Generate`** is selected then a new seed will be pseudo-randomly generated. If a 9-digit number is selected or entered, then it will be used as the seed. The drop-down menu lists all of the previously used seeds since the page was loaded (or the **`control`** cell was rerun). The most recently used seed is at the _top_ of the menu (but note that each seed is only listed _once_, so when you reuse a seed, it won't be re-added to the drop-down). * **Current Seed** provides a _read-only_ display of the seed for the _current_ sampler. Clicking it will copy it to the clipboard for easy use!4b:Td1d,### Interface for `controls` * When first called, controls emits a single initialization update with {reset: true}. If **`run`** and **`skip`** are enabled then skip: false will also be included. And if **`random`** is enabled then the function **`random`** and the 9-digit **`seed`** will also be included. * **Reset** emits a single update with {reset: true}. If **`skip`** is enabled then skip: false will also be included. And if **`random`** is enabled then the function **`random`** and the 9-digit **`seed`** will also be included. Note that a running simulation will continue running, and a skipping simulation will continue skipping. **Reset** is only available if **`run`** is enabled. * **Resample** emits a single update with {reset: true}, the function **`random`**, and the 9-digit **`seed`**. **Resample** is only available if **`run`** is disabled. * **Step** emits a single update with {reset: false}. If **`skip`** is enabled then skip: false will also be included. And if **`random`** is enabled then the function **`random`** and the 9-digit **`seed`** will also be included. **Step** is only available if **`run`** is enabled. * **Skip** initiates a regular sequence of updates with {reset: false, skip: true, stopSkip}. If **`random`** is enabled then the function **`random`** and the 9-digit **`seed`** will also be included. **Skip** is only available if **`run`** and **`skip`** are enabled. * **Start** initiates a regular sequence of updates with {reset: false}. If **`skip`** is enabled then skip: false will also be included. And if **`random`** is enabled then the function **`random`** and the 9-digit **`seed`** will also be included. **Start** is only available if **`run`** is enabled. * **Stop** ends a currently running sequence of updates. Note that it does _not_ generate an update. **Stop** is only available if **`run`** is enabled and the simulation is currently running. * The **Speed** slider determines the interval between updates in a sequence, which ranges from **`max`** milliseconds at the far left, to **`min`** milliseconds at the far right. Note that manipulating it does _not_ generate an update, although it changes the rate at which updates occur. **Speed** is only available if **`run`** is enabled. * **Next Seed** is a combo-box used to choose the seed for the _next_ run of the simulation or sample, which will be initiated by **Reset** or **Resample**. If **`Generate`** is selected then a new seed will be pseudo-randomly generated. If a 9-digit number is selected or entered, then it will be used as the seed. The drop-down menu lists all of the previously used seeds since the page was loaded (or the **`control`** cell was rerun). The most recently used seed is at the _top_ of the menu (but note that each seed is only listed _once_, so when you reuse a seed, it won't be re-added to the drop-down). Note that manipulating it does _not_ generate an update. * **Current Seed** provides a read-only display of the seed for the _current_ run of the simulation or sample. Clicking it will copy it to the clipboard for easy use! Note that clicking it does _not_ generate an update. 4c:T422,### Return value for `controls` * **`reset`** is a boolean value indicating whether the simulation should be reinitialized or not. It is always available. * **`stopSkip`** is a function with no arguments to be called by the simulation in order to programmatically stop an epoch. It is only available if **`run`** and **`skip`** are enabled. * **`random`** is a function with no arguments that returns pseudo-random numbers in the interval [0,1). It is an instance of [d3.randomLcg](https://github.com/d3/d3-random#randomLcg) initialized with the current **`seed`**, so it can be used as is, or provided as a [source](https://github.com/d3/d3-random#random_source) for other [d3-random](https://github.com/d3/d3-random#api-reference) distributions. It is only available if **`random`** is enabled. * **`seed`** is the 9-digit number used to seed the current **`random`** function. This can be useful in situations where the repeated use of the already initialized **`random`** function would be inappropriate. It is only available if **`random`** is enabled.4d:T943,### Parameters for `controller` The **`controller`** can be called with two different signatures. If there are separate visualization and simulation functions: ~~~js controller(controls, visualizer, simulator, settings?) ~~~ If a single function will handle both the visualization and the simulation: ~~~js controller(controls, visualizer, settings?) ~~~ * **`controls`** is the DOM node returned by a call to **`controls()`**, optionally wrapped in a call to `display()`. * **`visualizer`** is a function that will update the visualization by one step on each call. If both a visualizer and a simulator are used, then it's signature should be: ~~~js visualizer(controls, visualization, simulation, settings?) ~~~ Otherwise, the signature should be: ~~~js visualizer(controls, visualization, settings?) ~~~ Where: * **`controls`** is the _value_ emitted by the **`controls`** interface * **`visualization`** is the DOM node holding the visualization * **`simulation`** is optionally an object holding the current state of the simulation (if there isn't a simulation function, then the simulation state must be stored in the **`visualization`**) * **`settings`** is optionally an object holding settings for the **`visualizer`** function to use (it may also have settings for the **`simulator`** function) And the **_return value_** is the DOM node holding the visualization. This DOM node should be the same one passed in as **`visualization`**.
**Note:** To modify the visualization, change the children of this node, but not the node itself. * **`simulator`** is optionally a function that will update the simulation by one step on each call. It's signature should be: ~~~js simulator(controls, simulation, settings?) ~~~ Where: * **`controls`** is the _value_ emitted by the **`controls`** interface * **`simulation`** is an object holding the current state of the simulation * **`settings`** is optionally an object holding settings for the **`simulator`** function to use (it may also have settings for the **`visualizer`** function) And the **_return value_** is the object holding the simulation. This object can be a different one than the one passed in as **`simulation`**. * **`settings`** is optionally an object holding settings for either or both the **`visualizer`** and **`simulator`** functions.4e:T1b6d,const controls = function({running = false, speed = 25, min = 0, max = 1000, run = true, skip = false, random = false} = {}) { // Layout the controls const newSeed = 'Generate'; const startLabel = html`

Start

`; const stopLabel = html`

Stop

`; const form = html`

${icons.cloneNode(true)} ${controlsStyle.cloneNode(true)}

${run ? html`` : `` } ${(run && skip) ? html`` : `` } ${run ? html`` : `` }

${run ? html`

Speed

` : `` } ${random ? html`

Next Seed

Current Seed

` : `` }

`; // Initialize state let state = { running, skipping: false, }; // Stop skip mode function const stopSkip = () => { if (state.running && state.skipping) { form.update({stop: true}); } }; // Event handlers form.reset.onclick = (event) => { form.update({reset: true}); event.stopImmediatePropagation(); } if (run) { form.step.onclick = (event) => { form.update({step: true}); event.stopImmediatePropagation(); } form.startStop.onclick = (event) => { if (state.running) { form.update({stop: true}); } else { form.update({start: true}); } event.stopImmediatePropagation(); } form.speed.oninput = (event) => { event.stopImmediatePropagation(); } } if (run && skip) { form.skip.onclick = (event) => { form.update({skip: true}); event.stopImmediatePropagation(); } } if (random) { form.nextSeedSelect.oninput = (event) => { form.nextSeed.value = form.nextSeedSelect.value; event.stopImmediatePropagation(); } form.nextSeed.oninput = (event) => { event.stopImmediatePropagation(); } form.currentSeed.onclick = (event) => { navigator.clipboard.writeText(form.currentSeed.value); form.currentSeed.nextElementSibling.classList.remove('highlight'); void form.currentSeed.nextElementSibling.offsetWidth; form.currentSeed.nextElementSibling.classList.add('highlight'); event.stopImmediatePropagation(); } } // Random seed handling const seedScale = 1000000000; const createSeed = () => { return Math.floor(Math.random() * seedScale).toString().padStart(9, '0'); } const createRNG = (seed) => { return d3.randomLcg(seed / seedScale) } // Process input const resetSafety = 20; form.update = (action = {}) => { // Update random seed if (random && action.reset) { form.currentSeed.value = (form.nextSeed.value === newSeed) ? createSeed() : form.nextSeed.value; if (!form.nextSeedSelect.querySelector(`[value="${form.currentSeed.value}"]`)) { form.nextSeedSelect.children[0].after(html``); } } // Update internal state state = { running: (action.start || action.skip) ? true : action.stop ? false : state.running, skipping: action.skip ? true : (action.start || action.stop) ? false : state.skipping, delay: run ? max - (form.speed.valueAsNumber * ((max - min) / 100)) : NaN, random: random ? action.reset ? createRNG(form.currentSeed.value) : state.random : null, seed: random ? action.reset ? form.currentSeed.value : state.seed :null, }; // Update exposed value form.value = { ...(run && skip && state.skipping ? {stopSkip} : {}), ...(run && skip ? {skip: state.skipping} : {}), reset: action.reset ? true : false, ...(random ? {random: state.random, seed: state.seed} : {}), }; // Update Start/Stop button if (action.stop) { form.startStop.replaceChild(startLabel, stopLabel); } else if (action.start || action.skip) { form.startStop.replaceChild(stopLabel, startLabel); } // Short circuit the timer on Reset, Step, Skip, Start, and Stop if (form.timeout && (action.reset || action.step || action.skip || action.start || action.stop)) { clearTimeout(form.timeout); form.timeout = null; } // Step the simulation on Reset, Step, or when running if (action.reset || action.step || state.running) { form.dispatchEvent(new CustomEvent('input', {bubbles: true})); } // Keep running if (state.running) { form.timeout = setTimeout( form.update, (action.reset && (state.delay < resetSafety)) ? resetSafety : state.delay, ); } else { form.timeout = null; } } // Init Inputs.disposal(form).then(() => { clearTimeout(form.timeout); form.timeout = null; }); // requestAnimationFrame(() => { form.update({reset: true}); }); form.update({reset: true}); return form; }4f:T783,const controlsStyle = html.fragment` `;50:[] 29:{"id":"f9f9d3cf36d7c3c8","slug":null,"title":"(New!) Simulation Controls","thumbnail":"16ad20bc90365577aafdeee433e902eb1df4fc802b1b4392d787b2d67b58b5f3","access_level":"unlisted","create_time":"$D2026-10-16T03:36:42.628Z","update_time":"$D2026-10-16T03:36:42.628Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"3861495db0d6917b","login":"akrawitz","name":"Adam Krawitz","avatar_url":"https://avatars-next.observableusercontent.com/232e39a655b3dffeaad79a6e590471290f026876224f3f7c9825f12c3f0147bc","tier":"starter_2024","bio":"Assistant Teaching Professor, Department of Psychology, University of Victoria, British Columbia, Canada.\nMy academic interests include cognitive neuroscience, computational modeling, and explorable explanations.","following":false},"version":1753,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"f056c267619fba67","login":"akrawitz","name":"Adam Krawitz","avatar_url":"https://avatars-next.observableusercontent.com/8b0aba291db32e92917b2b37e94c3c5568c23f50e1e769e8f76508b16293220c","tier":null,"bio":"Associate Teaching Professor, Department of Psychology, University of Victoria, British Columbia, Canada.","following":false}],"members":[{"type":"individual","id":"f056c267619fba67","login":"akrawitz","name":"Adam Krawitz","avatar_url":"https://avatars-next.observableusercontent.com/8b0aba291db32e92917b2b37e94c3c5568c23f50e1e769e8f76508b16293220c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"(New!) Simulation Controls","cells":[{"id":0,"value":"# (New!) Simulation Controls\nThe **`controls`** and **`controller`** functions provide a simple but powerful interface for controlling visualizations and simulations. The **`controls`** send out update events in a disciplined way, with options that allow for adjusting the speed, skipping through sequences of steps, and managing random seeds for repeatable stochastic simulations. The **`controller`** manages the execution of steps for a simulation, a visualization, or both.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"To use **`controls`** and **`controller`** you need to `import` the functions from this notebook:\n~~~js\n import {controls, controller} from 'observable:@computational-beauty-of-mind/new-simulation-controls';\n~~~","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"This demo shows how to create **`controls`** and how to use **`controller`** to consume its output to control a visualization — in this case, a simple counter of how many cycles have occurred. A single function, `counter`, handles both the state for the underlying simulation and the visualization of it.\n\n* **Reset** reinitializes the simulation.\n* **Step** advances by one cycle.\n* **Start**/**Stop** begins a sequence of cycles, or halts a running sequence of cycles.\n* **Speed** adjusts how quickly the cycles run.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":548,"value":"const con = display(controls({speed: 50}));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":575,"value":"The value sent from **`con`**:\n${showControlValue(con)}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":556,"value":"controller(con, counter)","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":555,"value":"const counter = function(con, viz) {\n if (con.reset) {\n viz.cycle = 0;\n } else {\n viz.cycle++;\n }\n viz.innerText = `Cycles: ${viz.cycle}`;\n return viz;\n};","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":560,"value":"### Demonstration of separate _visualization_ and _simulation_ functions\nIn this demo the _visualization_ and _simulation_ have been broken out into separate functions. While the distinction is trivial here, in more realistic use cases the separation of concerns is a good programming practice and explicitly distinguishes the logic of the underlying simulation from the particular way in which that simulation is visualized. To make things a bit more interesting the simulation, `countSim`, can be started at a specified `start` value, while the visualization, `countViz`, can use a `bold` font weight for the display of the count.\n\nTo further emphasize the benefits of separating simulation and visualization, a second approach to visualizing the same simulation is implemented in a second visualization function, `counterVizMax`.\n\nTwo instances are created, using the same simulation but different visualizations, and with both driven by the same **`controls`**.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":561,"value":"const conSep = display(controls({speed: 50}));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":586,"value":"The value sent from **`conSep`**:\n${showControlValue(conSep)}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":553,"value":"controller(conSep, counterViz, counterSim, {bold: true, start: 10})","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":554,"value":"controller(conSep, counterVizAlt, counterSim)","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":550,"value":"const counterSim = function(con, sim, {start = 0} = {}) {\n if (con.reset) {\n sim = {cycle: start};\n } else {\n sim.cycle++;\n }\n return sim;\n};","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":552,"value":"const counterViz = function(con, viz, sim, {bold = false} = {}) {\n if (con.reset) {\n viz.replaceChildren(html.fragment``);\n viz.cycle = viz.querySelector('.cycle')\n }\n viz.cycle.innerText = `Cycles: ${sim.cycle}`;\n return viz;\n};","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":582,"value":"const counterVizAlt = function(con, viz, sim) {\n viz.innerText = `Simulation says: ${d3.range(sim.cycle).map(() => { return `Cycle!`; }).join(' ')}`\n return viz;\n};","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"### Demonstration of `skip`\nThis demo adds the **`skip`** functionality. In addition to advancing the simulation step-by-step or running it until **Stop** is pressed, you can also use **Skip** to run it for one _epoch_/_episode_ as defined by the simulation itself. For example, in a reinforcement learning simulation, each step might be one _action_, while **Skip** will run to the end of the current _episode_.\n\n* **Reset** reinitializes the simulation.\n* **Step** advances by one cycle.\n* **Skip** runs the simulation until the end of the current epoch.\n* **Start**/**Stop** begins a sequence of cycles or halts a running sequence of cycles.\n* **Speed** adjusts how quickly the cycles run.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":359,"value":"const conSkip = display(controls({skip: true, speed: 75}));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":574,"value":"The value sent from **`conSkip`**:\n${showControlValue(conSkip)}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":564,"value":"controller(conSkip, skipper, {epochLength: 10})","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":364,"value":"const skipper = function(con, viz, {epochLength = 20} = {}) {\n if (con.reset) {\n viz.cycle = 0;\n } else {\n viz.cycle++;\n if (con.skip && (viz.cycle % epochLength) === 0) {\n con.stopSkip();\n }\n }\n viz.innerText = `Cycles: ${viz.cycle}, Epoch: ${Math.floor((viz.cycle - 1) / epochLength + 1)}`;\n return viz;\n};","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":508,"value":"$49","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":507,"value":"const conRandom = display(controls({speed: 25, random: true}));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":573,"value":"The value sent from **`conRandom`**:\n${showControlValue(conRandom)}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":565,"value":"controller(conRandom, randomer)","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":505,"value":"const randomer = function(con, viz) {\n if (con.reset) {\n viz.cycle = 0;\n viz.values = [];\n } else {\n viz.cycle++;\n viz.values.push(con.random());\n }\n viz.innerHTML = `\n Cycles: ${viz.cycle},
\n Values: ${viz.values.map((value) => { return `
${value}`; }).join('')}\n `;\n return viz;\n};","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":539,"value":"$4a","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":540,"value":"const conResample = view(controls({run: false, random: true}))","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":580,"value":"The value sent from **`conResample`**:\n${inspect(conResample)}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":579,"value":"html`Samples: ${d3.range(5).map(() => { return html`
${conResample.random()}`; })}`","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":504,"value":"## Details for `controls`\nThe **`controls`** function is typically used with `display` from the [Observable Standard Library](https://observablehq.com/@observablehq/notebooks-system-guide#standard-library):\n~~~js\n const con = display(controls({\n running: false,\n speed: 25,\n min: 0,\n max: 1000,\n run: true,\n skip: false,\n random: false\n }));\n~~~\nwhich returns a DOM node that emits custom `'input'` events with the `value`:\n~~~js\n {reset: true|false, skip?: true|false, stopSkip?, random?, seed?}\n~~~","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":584,"value":"It can also be used with `view` from the [Observable Standard Library](https://observablehq.com/@observablehq/notebooks-system-guide#standard-library):\n~~~js\n const con = view(controls({\n running: false,\n speed: 25,\n min: 0,\n max: 1000,\n run: true,\n skip: false,\n random: false\n }));\n~~~\nwhich returns a Generator that yields the same value:\n~~~js\n {reset: true|false, skip?: true|false, stopSkip?, random?, seed?}\n~~~","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"$4b","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":502,"value":"$4c","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":501,"value":"### Options for `controls`\n* **`running`** determines if the controls will continue after the initial update as if **Start** has already been pressed or if the controls will begin in a stopped state.\n* **`speed`** determines the initial slider location, with `0` indicating the far left, and `100` indicating the far right.\n* **`min`** determines the minimum number of milliseconds between updates when the **Speed** slider is at the far right.\n* **`max`** determines the maximum number of milliseconds between updates when the **Speed** slider is at the far left.\n* **`run`** determines if the **Step** button, the **Start**/**Stop** button, and the **Speed** slider are shown and the basic 'run' functionality is enabled.\n* **`skip`** determines if the **Skip** button is shown and the 'skip' functionality is enabled. (Note that **`skip`** only works if **`run`** is enabled.)\n* **`random`** determines if **Next Seed** and **Current Seed** are shown and the 'random' functionality is enabled.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":583,"value":"## Details for `controller`\nIf **`controls`** has been called using `display`, then the **`controller`** function can be called with visualization and simulation functions and settings for both:\n~~~js\n controller(con, visualizer, simulator, settings)\n~~~\nwhich returns a DOM node with the visualization. Note that **`controls`** needs to be called with `display`, not `view`, so that **`controller`** can attach an event listener to the controls DOM node.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":585,"value":"$4d","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":587,"value":"### Return value for `controller`\nThe DOM node holding the visualization.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"## Definitions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":589,"value":"A helper function to display the **_value_** emitted by **`controls`**:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":572,"value":"function showControlValue(controls) {\n return controller(controls, (controls, visualization) => {\n visualization.replaceChildren(inspect(controls));\n return visualization;\n });\n}","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":611,"value":"The harness for running a simulation and visualization using **`controls`**:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":549,"value":"const controller = function(controls, visualizer, simulatorOrSettings = {}, settingsOrUndefined = {}) {\n const simulator = (typeof simulatorOrSettings === 'function') ? simulatorOrSettings : null;\n const settings = (typeof simulatorOrSettings === 'object') ? simulatorOrSettings : settingsOrUndefined;\n let simulation = simulator ? {} : null;\n let visualization = visualizer ? html`

` : null;\n\n const listener = ({currentTarget: {value: controls}}) => {\n if (simulator) {\n simulation = simulator(controls, simulation, settings);\n }\n if (visualizer) {\n if (simulator) {\n visualization = visualizer(controls, visualization, simulation, settings);\n } else {\n visualization = visualizer(controls, visualization, settings);\n }\n }\n };\n controls.addEventListener(\"input\", listener);\n invalidation.then(() => controls.removeEventListener(\"input\", listener));\n\n listener({currentTarget: {value: {reset: true}}});\n return visualization;\n};","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":612,"value":"The function for displaying visual controls for runnning asimulations and visualizations:","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"$4e","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":613,"value":"The CSS styles for displaying the controls UI:","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"$4f","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"## Resources","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"Load [Bootstrap Icons](https://icons.getbootstrap.com/), \"free, high quality, open source icon library with over 1,300 icons\" as a font in a \\`.css\\` file.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"const icons = html.fragment``","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":602,"value":"Load a wrapper around [`@observablehq/inspector`](https://github.com/observablehq/inspector) for displaying JavaScript objects:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":601,"value":"import {inspect} from 'observable:@observablehq/inspector';","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W50","stdlib":"2"}} 24:null