2a:null 2b:["$","title",null,{"children":"Simulation Controls | Adam Krawitz | Observable"}] 30:T634,### Demonstration of `random` This third 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!31: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!32:Td19,### Interface * When first called, the controller yields 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** yields 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** yields a single update with {reset: true}, the function **`random`**, and the 9-digit **`seed`**. **Resample** is only available if **`run`** is disabled. * **Step** yields 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. 33:T414,### Return value * **`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 used of the already initialized **`random`** function would be inappropriate. It is only available if **`random`** is enabled.34:T1b7b,controls = function({running = false, speed = 25, min = 0, max = 1000, run = true, skip = false, random = false} = {}) { // Layout the controls const newSeed = 'Generate'; const startLabel = htl.html`

Start

`; const stopLabel = htl.html`

Stop

`; const form = htl.html`

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

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

${run ? htl.html`

Speed

` : `` } ${random ? htl.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 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(htl.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 const resetSafety = 20; 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; }); form.update({reset: true}); return form; }35:T6dc,controlsStyle = htl.html.fragment``36:[] 2e:{"id":"a2962b2064e4e957","slug":"simulation-controls","title":"Simulation Controls","thumbnail":"271278f76755830d753797bb5620192825f073ba20f301858945c4ecc4a4d5f0","access_level":"public","create_time":"$D2021-03-04T16:24:51.250Z","update_time":"$D2023-07-21T19:42:15.721Z","view_time":null,"first_public_time":"$D2021-03-04T16:28:56.227Z","fork":{"id":"4f43b0953f02d2c0","slug":"shared-resources","title":"Shared Resources","owner":{"id":"3861495db0d6917b","login":"akrawitz","name":"Adam Krawitz"}},"stars":0,"starred":false,"owner":{"type":"team","id":"3861495db0d6917b","login":"akrawitz","name":"Adam Krawitz","avatar_url":"https://avatars-next.observableusercontent.com/232e39a655b3dffeaad79a6e590471290f026876224f3f7c9825f12c3f0147bc","tier":"starter_2024"},"version":698,"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}],"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,"subscribed":null,"forks":2,"collection":{"id":"bb4f3dd51b3bc8ff","slug":"shared-resources","title":"Shared Resources","owner":{"id":"3861495db0d6917b","login":"akrawitz","name":"Adam Krawitz"}},"type":"notebook","body":{"title":"Simulation Controls","cells":[{"id":0,"value":"# Simulation Controls\nThe **`controls`** function provides a simple but powerful controller for simulations that sends out updates in a disciplined way. Additional options allow for skipping through collections of steps, and managing random seeds for repeatable stochastic simulations.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":210,"value":"To use **`controls`** you need to `import` the function from this notebook:\n~~~js\n import {controls} from '@akrawitz/simulation-controls'\n~~~","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":122,"value":"This demo shows how to call **`controls`** and how to consume its output to control a simulation — in this case, a simple counter of how many cycles have occurred in the simulation.\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"},{"id":31,"value":"viewof con = controls({speed: 50})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":326,"value":"con","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":36,"value":"{\n con;\n let simulation = this;\n if (con.reset) {\n simulation = htl.html`

`;\n simulation.cycle = 0;\n } else {\n simulation.cycle++;\n }\n simulation.innerText = `Cycles: ${simulation.cycle}`;\n return simulation;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":353,"value":"### Demonstration of `skip`\nHere is a second demo that adds the **`skip`** functionality. In this demo, 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_, and **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"},{"id":359,"value":"viewof conSkip = controls({skip: true, speed: 75})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":361,"value":"conSkip","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":364,"value":"{\n conSkip;\n const epochLength = 20;\n let simulation = this;\n if (conSkip.reset) {\n simulation = htl.html`

`;\n simulation.cycle = 0;\n } else {\n simulation.cycle++;\n if (conSkip.skip && (simulation.cycle % epochLength) === 0) {\n conSkip.stopSkip();\n }\n }\n simulation.innerText = `Cycles: ${simulation.cycle}, Epoch: ${Math.floor((simulation.cycle - 1) / epochLength + 1)}`;\n return simulation;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":508,"value":"$30","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":507,"value":"viewof conRandom = controls({speed: 25, random: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":506,"value":"conRandom","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":505,"value":"{\n conRandom;\n let simulation = this;\n if (conRandom.reset) {\n simulation = htl.html`

`;\n simulation.cycle = 0;\n simulation.values = [];\n } else {\n simulation.cycle++;\n simulation.values.push(conRandom.random());\n }\n simulation.innerText = `Cycles: ${simulation.cycle}, Values: ${simulation.values}`;\n return simulation;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":539,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":540,"value":"viewof conResample = controls({run: false, random: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":541,"value":"conResample","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":542,"value":"{\n return htl.html`Samples: ${d3.range(5).map(() => { return htl.html`
${conResample.random()}`; })}`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":504,"value":"## Details\nThe **`controls`** function is best used as an ObservableHQ [_view_](https://observablehq.com/@observablehq/introduction-to-views):\n~~~js\n viewof con = 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 yields:\n~~~js\n {reset: true|false, skip?: true|false, stopSkip?, random?, seed?}\n~~~","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":46,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":502,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":501,"value":"### Options\n* **`running`** determines if the controller will continue after the initial update as if **Start** has already been pressed or if the controller 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.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":222,"value":"## Definitions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":18,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":200,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"## Resources","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$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"},{"id":15,"value":"icons = htl.html.fragment``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 2f:"$2e:body"