31:T403,genMesh = (m)=> { let retval = ""; let randColorArr = ["hotpink","darkviolet","forestgreen","gold","red","orange","green","blue","white","black","orchid","orangered","skyblue","tan","thistle","grey","yellow","maroon"]; // x11 colors for(let i =0; i < m; i++){ let randX = 5 - Math.random()*10; let randY = 5 -Math.random()*10; let randZ = -Math.random()*5; let randColor = randColorArr[Math.floor(Math.random() * randColorArr.length)]; let speed = randSpeed ? Math.floor(Math.random() * 10) / 100 : 0.01; retval += ` ${genGeometry(geometries)} ` } return retval; }32:[] 2f:{"title":"three-elements: Experiments with interactivity","cells":[{"id":0,"value":"md`# three-elements: Experiments with interactivity`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"html`\n

This is based off the sample three-elements code from the home page.

Leveraging Observable's ability to re-render when panel's value changes, you can dynamically update a scene with just a slider

Github:three-elements

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"viewof meshNum = Range([0, 100], {step:1, value: 25, label: \"Number of geometries\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"viewof geometries = Checkbox(\n [\"dodecahedron\", \"box\", \"icosahedron\",\"octahedron\",\"cone\",\"cylinder\",\"sphere\",\"tetrahedron\",\"torus\",\"circle\"], \n {\n label: \"Geometries\",\n value: [\"dodecahedron\"]\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"value":"viewof randSpeed = Toggle({label: \"Randomize rotation\", value: false})","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"viewof pulseSize = Range([0.01, 0.9], {value: 0.6, label: \"Pulse Size\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":121,"value":"viewof pulseRate = Range([100, 1000], {value: 700, label: \"Pulse Rate\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"html`\n

\n \n \n \n ${genMesh(meshNum)}\n \n\n \n \n \n \n \n\n \n \n\n \n \n \n \n\n

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":86,"value":"genGeometry = (arr) => {\n let gName = arr[Math.floor(Math.random() * arr.length)]\n return ``\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"import('https://unpkg.com/three-elements@0.3.0/dist/index.esm.js?module')","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"import {Button, Checkbox, Toggle, Radio, Range, Select, Text, Textarea, Search, Table} from \"@observablehq/inputs\"\n","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}