30:[] 2e:{"title":"Random Squares","cells":[{"id":0,"value":"md`# Random Squares`","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"md`This notebook uses Matt Dzugan's [Open Color table](https://observablehq.com/@mattdzugan/open-color)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"field = html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"viewof delay = Range([0, 1000], {value: 500, label: \"Delay\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"viewof y = Button(html`Clear Elements`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"y, field.innerHTML=\"\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"html`\n \n `","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"{\n //field.appendChild(html`hi`)\n // while(true){\n // yield Promises.delay(1000, `Previous text: ${text}`);\n // }\n while(true){\n yield Promises.delay(delay);\n field.appendChild(createBox())\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"createBox = () => {\n \n let randomX = Math.floor(Math.random() * width);\n let randomY = Math.floor(Math.random() * 300);\n let randomHeight = Math.floor(Math.random() * 100) + 10;\n let randomWidth = Math.floor(Math.random()* 100) + 10;\n let randomBackground = opencolorsarray[Math.floor(Math.random() * opencolorsarray.length)].color;\n \n return html`

\n `\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"md`--- \n## Imports\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"import {opencolorsarray} from \"@mattdzugan/open-color\"\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":53,"value":"import {Button, Range} from \"@observablehq/inputs\"\n","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}