3f:null 40:["$","title",null,{"children":"Collisions in 2D | Sam Verstraete | Observable"}] 46:T632,particles = { let particles = this // get the build object let build = setupFunctions[ctrl.sel.value] // we make a new array if the selection changed - reset the sliders and 'push' again if (ctrl.sel.changed) { particles = [] ctrl.n.set(build.n) ctrl.speed.set(1.0) ctrl.size.set(1.0) ctrl.again.changed=true } // the nr of particles changed if (ctrl.n.changed) { // bigger if (particles.length < ctrl.n.value ) { particles = particles.concat(new Array(ctrl.n.value - particles.length).fill().map(()=>build.init( new Circle()))) // new array - so inform the collider collider.setParticles(particles) } // smaller else particles.length = ctrl.n.value } // if again was pressed, do the init again but use the ctrl settings! if (ctrl.again.changed) { // if needed do the general init before doing all the particles if (build.once) build.once(ctrl.n.value) // reinitialise particles.forEach( particle => { build.init(particle) particle.radius *= ctrl.size.value particle.speed.x *= ctrl.speed.value particle.speed.y *= ctrl.speed.value }) // we're done return particles } // size setting changed.. if (ctrl.size.changed) particles.forEach( p => p.radius *= ctrl.size.value/ctrl.size.prev ) // speed setting changed.. if (ctrl.speed.changed) particles.forEach( p => { p.speed.x *= ctrl.speed.value/ctrl.speed.prev p.speed.y *= ctrl.speed.value/ctrl.speed.prev }) return particles }47:Td08,md`### Plane collider The plane collider checks for each frame which particles can collide during that frame and passes these candidates to a user supplied collision function that actually calculates the effect of the collision. Collision checks are done based on the bounding box of the particle. For a moving particle the bounding box will be determined by its position in *frame n* and its position in *frame n+1*. If that space overlaps with the bounding boxes of other particles, then there is a possible collision between the particles. If that is the case the two particles and their probable collision time are pushed on the collision array. Note that a particle does not *have* to be moving - it can be a stationary obstacle, in that case the bounding box is the bounding box of the stationary particle. When all collision candidates have been found, the collision array is sorted in time order, and all the collisions are calculated. As mentioned, the collision functions are supplied by the user. In a chemistry simulation the particles could stick together, in a physics simulation they could bounce elastically of each other and in a simulation of social interaction it might be different still. The types of particles in the particle array can be very different in characteristics and behaviour. Collision checks grow as *n²* with n the number of particles, so in order to keep the calculations manageable the collider uses a recursive quad-tree to subdivide the space. The parameters to be supplied to the collider are: * **min(x,y) and max(x,)**: size of the rectangular area where the collider operates. * **detectors**: an array of functions that returns the *probable collision time* of two particles if they collide - returns *Infinity* if no collision. * **colliders**: an array of functions to calculate the actual result of the collision between two particles. * **leaving**: a function to handle the list of particles that has moved outside of the quad-tree area that is handled by the collider. If the area is closed, one could simply reflect these particles back in (see the example). Another important parameter is the *array of particles* that are handled by the collider. A separate function is used to set this parameter, because the array can change more often. The particles need to have the following members and method: * **bBox**: the bounding box determined by min(x,y) and max(x,y). * **cKey**: the collision key. This key is used to retrieve the detector and collider function. If two particles collide the cKey of each particle is collated and is used as an index in the detector/collider object. Typically the key is one character. * **next**: a pointer used to construct linked lists used by the collider internally. * **nextFrame(interval)**: this method is called every frame for every particle, typically to calculate the new position of the particle without taking into account collisions, typically this is *speed x time*. The particles of the collider are set with the function *setParticles(p)*. The particles only have to be set again when the array reference changes. When the collider is setup, all that has to be done is to call the function *collider.nextFrame(interval)* at the start of each new frame, where *interval* is the duration of the frame - typically 1/60 sec. `48:T1641,function getPlaneCollider(parameters) { // the parameters to be supplied by you let {min, max, detectors, colliders, leaving} = parameters // internals let collisions = [] let leavers = [] let particles = [] let qtree = null function Qtree(min, max, level) { // creates the qtree recursively - the quadrant is defined by two diagonal points this.min = min this.max = max // quadrant can contain up to 4 smaller quadrants this.quadrant = null // the linked list that will contain all objects in this quadrant that do not fit in sub quadrant this.particleList = getLinkedList() // if not at the lowest level if (level > 0) { // it contains 4 new quadrants let [dx, dy] = [(max.x-min.x)/2, (max.y-min.y)/2] this.quadrant = [ new Qtree({x:min.x, y:min.y }, {x: min.x+dx, y: min.y+dy}, level-1), new Qtree({x:min.x+dx, y:min.y }, {x: max.x, y: min.y+dy}, level-1), new Qtree({x:min.x, y:min.y+dy}, {x: min.x+dx, y: max.y }, level-1), new Qtree({x:min.x+dx, y:min.y+dy}, {x: max.x, y: max.y }, level-1) ] } } Qtree.prototype = { // adapt the size of the quadrants sizeChange(min,max) { this.min = min this.max = max if (!this.quadrant) return let [dx, dy] = [(max.x-min.x)/2, (max.y-min.y)/2] this.quadrant[0].sizeChange({x:min.x, y:min.y }, {x: min.x+dx, y: min.y+dy}) this.quadrant[1].sizeChange({x:min.x+dx, y:min.y }, {x: max.x, y: min.y+dy}) this.quadrant[2].sizeChange({x:min.x, y:min.y+dy}, {x: min.x+dx, y: max.y }) this.quadrant[3].sizeChange({x:min.x+dx, y:min.y+dy}, {x: max.x, y: max.y }) }, // all the object lists are reset reset() { this.particleList.reset() this.quadrant ? this.quadrant.forEach( q => q.reset() ) : null }, // object is checked against the other objects already in the octree // secTime is the duration of the interval in seconds // collisions is an array that will contain all collision events in the interval check( particle, interval, collisions) { // take the first particle in this quadrant let other = this.particleList.first let when = 0.0 let detector = null // check against collisions with objects stored at this level - getCollTime = calculate collision time while (other != null ) { // get the collision detection function detector = detectors[particle.cKey + other.cKey] // calculate if the objects intersect and if so at what time in the interval - inifinity means no collision if ( ( when = detector(particle, other, interval)) != Infinity ) collisions.push({a:particle,b:other,time:when}) // take the next object other = other.next } // check the sub-quadrants if (this.quadrant) { // check for each quadrant.. for (let i=0; i<4; i++) { // ..if the particle bbox has an intersection with the quadrant space if (this.quadrant[i].intersects(particle.bBox)) // ..then check for collisions in the quadrant - 'true' means the particle fits in a quadrant if ( this.quadrant[i].check( particle, interval, collisions ) ) return true } } // return true if the particle bBox fits completely in the quadrant return (this.contains(particle.bBox) ? this.particleList.push(particle) || true : false) }, intersects(bBox) { return (bBox.min.x > this.max.x) || (bBox.max.x < this.min.x) || (bBox.min.y > this.max.y) || (bBox.max.y < this.min.y) ? false : true }, contains(bBox) { return (bBox.min.x < this.min.x) || (bBox.max.x > this.max.x) || (bBox.min.y < this.min.y) || (bBox.max.y > this.max.y) ? false : true } } // sets the particle array const setParticles = p => particles = p // function to calculate the next frame function nextFrame(xinterval) { collisions = [] leavers = [] qtree.reset() // for each particle check if it collides with other particles or the container particles.forEach( particle => { particle.nextFrame(xinterval) if (! qtree.check(particle, xinterval, collisions)) leavers.push(particle) }) // sort the collisions in time order collisions.sort( (col1, col2) => col1.time - col2.time ) // calculate all collisions - select and call the appropriate collider collisions.forEach( col => colliders[col.a.cKey + col.b.cKey](col.a, col.b, col.time) ) // handle the leavers leaving(leavers, qtree.min, qtree.max, xinterval) } // a very simple linked list generator function getLinkedList() { return { first: null, reset() { this.first = null }, push(p) { p.next = this.first this.first = p return this }} } // make the qtree - level 4 means 16*16 = 256 quadrants qtree = new Qtree(min, max, 4) // the only functions that need to be exposed return { setParticles, nextFrame } }// getPlaneCollider49:T66e,Circle = { function Circle() { // required by the collider this.next= null this.bBox = {min:{x:0,y:0}, max:{x:0,y:0}} // other this.pos = {x:0.0,y:0.0} this.speed = {x:0.0,y:0.0} this.radius = 1.0 this.mass = 1.0 this.color = "#ffffff" } Circle.prototype = { // required by the collider to select the detector/collider function cKey:"C", // this method is called every frame - in our case to determine the new particle position and bBox nextFrame(t) { let {pos,speed, bBox, radius} = this // calculate the new position let newPos = {x: pos.x + speed.x*t, y: pos.y + speed.y*t} // adjust the bounding box - we subtract/add r to make sure the particle lies completely in the box bBox.min.x = pos.x < newPos.x ? pos.x-radius : newPos.x-radius bBox.min.y = pos.y < newPos.y ? pos.y-radius : newPos.y-radius bBox.max.x = pos.x > newPos.x ? pos.x+radius : newPos.x+radius bBox.max.y = pos.y > newPos.y ? pos.y+radius : newPos.y+radius // copy the new position pos.x = newPos.x pos.y = newPos.y }, // this is how we will render the particle - very small particles will still be visible as 2x2 pixels. render(ctx) { let {pos, color, radius} = this ctx.beginPath() ctx.fillStyle = color let iRadius = Math.ceil(radius) iRadius <= 2 ? ctx.rect(pos.x, pos.y, 2*iRadius,2*iRadius) : ctx.arc(pos.x, pos.y, iRadius, 0, 2 * Math.PI) ctx.fill() }, } return Circle }4a:T1541,// a function to select the function to initialise position and speed setupFunctions = (() => { let W = canvas.width, H = canvas.height, SQ = W > H ? H : W let speed = 150.0, alfa=0.0, rnd let count = 0, nCols = 0, dx = 0, dy = 0, R=0 const pStyle = "font: italic 14px Menlo, Consolas, monospace; margin: auto;color:blue; background:white;" return { "random":{ n:100, once(n){ R = Math.sqrt(W*H/n)/3 }, init(p) { alfa = 2*Math.PI*Math.random() p.pos.x = W*Math.random() p.pos.y = H*Math.random() p.speed.x = speed*Math.cos(alfa) p.speed.y = speed*Math.sin(alfa) p.radius = R*Math.random() + 5 p.mass = p.radius**2 p.color = d3.hsl(alfa/Math.PI*180, 1.0, 0.5) return p }, text:`

Basic simulation - position, speed and size are random within a set range. Mass of the particle is radius², so smaller particles are sped up by the collisions.

` }, "diffusion": { n:2000, init(p) { const b = 2.5 p.radius = Math.random() > 0.5 ? b : 2*b alfa = 2*Math.PI*Math.random() p.pos.x = p.radius > b ? W/2*Math.random() : W/2 + W/2*Math.random() p.pos.y = H*Math.random() p.speed.x = p.pos.x < W/2 ? speed : -speed p.speed.y = 0 p.mass = p.radius**2 p.color = p.radius > b ? "#0080c0" : "#ff8000" return p }, text:`

Could be the basis for a diffusion experiment to check Fick's law, see diffusion on wikipedia

` }, "ribbon": { n:5000, init(p) { rnd = Math.random() alfa = 2*Math.PI*rnd p.pos.x = W*rnd p.pos.y = H*rnd p.speed.x = speed*Math.cos(alfa) p.speed.y = speed*Math.sin(alfa) p.radius = 0.05 p.mass = p.radius**2 p.color = d3.interpolateCool(rnd) return p }, text:`

For the color I used the d3.interpolateCool function. The particles used here are not too big, so there are not too many collisions and the particle ribbon keeps reflecting for some time.

` }, "reflection": { n:2000, init(p) { alfa = 2*Math.PI*Math.random() p.pos.x = W/2 + SQ*Math.cos( alfa )/8 p.pos.y = H/2 + SQ*Math.sin( alfa )/8 p.speed.x = speed*Math.cos(alfa) p.speed.y = speed*Math.sin(alfa) p.radius = 0.02 p.mass = p.radius**2 p.color = "#35f7a2" return p }, text:`

Particle waves! The particles are small in this simulation so the particle waves keep reflecting for some time.

` }, "explosion": { n:1000, init(p) { alfa = 2*Math.PI*Math.random() p.pos.x = W/2 + SQ*Math.cos( alfa )/2 p.pos.y = H/2 + SQ*Math.sin( alfa )/2 p.speed.x = -speed*Math.cos(alfa) p.speed.y = -speed*Math.sin(alfa) p.color = d3.interpolatePuOr(Math.random()) p.radius = 0.01 p.mass = p.radius**2 return p }, text:`

This simulation surprised me. The explosion behaviour is not programmed, but just follows from the collision behaviour in a small area. This also stress-tests the quad tree, as the particles go to the same location in the plane. If you add too many particles, you will see the fps nose-dive.

` }, "blobs":{ n:2000, init(p) { alfa = 2*Math.PI*Math.random() rnd = SQ/8*Math.random() p.radius = 0.1 p.mass = p.radius**2 if (Math.random() < 0.5) { p.pos.x = W/8 + rnd*Math.cos( alfa ) p.pos.y = H/8 + rnd*Math.sin( alfa ) p.speed.x = speed*W/H p.speed.y = speed p.color = "#0080c0" } else { p.pos.x = 7*W/8 + rnd*Math.cos( alfa ) p.pos.y = 7*H/8 + rnd*Math.sin( alfa ) p.speed.x = -speed*W/H p.speed.y = -speed p.color = "#ff8000" } return p }, text:`

Blobs colliding.

` }, "formation": { n:900, once(n) { nCols = Math.ceil(Math.sqrt( n )) count = 0 dx = W/nCols dy = H/nCols R = Math.floor(dy/3)-1 }, init(p) { alfa = Math.random()*360 p.pos.x = (count % nCols) * dx + dx/2 p.pos.y = Math.floor(count / nCols)* dy + dy/2 p.speed.x = speed p.speed.y = 0 p.color = d3.hsl(alfa, 1.0, 0.5) p.radius = R*(Math.random() + 0.1) p.mass = p.radius**2 count++ return p }, text:`

In this simulation the particles have no initial speed y-component, so they just keep moving parallel to the x-axis. If you increase the size of the particles so that there is contact between the rows...

` }, } })()4b:T6fb,detectors = ({ "CC"(p1,p2,interval) { let b1 = p1.bBox, b2 = p2.bBox // check if the rectangles overlap if ((b1.min.x <= b2.max.x)&&(b1.max.x >= b2.min.x)&&(b1.min.y <= b2.max.y)&&(b1.max.y >= b2.min.y)) { // we have a candidate - calculate relative position and speed // p = p2-p1, v= v2-v1 - note that p is already the new position t sec ago let p = {x: p2.pos.x - p1.pos.x, y: p2.pos.y - p1.pos.y} let v = {x: p2.speed.x - p1.speed.x, y: p2.speed.y - p1.speed.y} // calculate a,b and c of the quadratic distance equation let a = v.x*v.x + v.y*v.y let b = 2*(p.x*v.x + p.y*v.y) let c = p.x*p.x + p.y*p.y - (p2.radius + p1.radius)**2 // the determinant let det = b*b - 4*a*c // if the determinant is positive there are intersections if ( det > 0) { // calculate the roots - nota that t1 is the smallest root let sqrt = Math.sqrt(det) let t1 = (-b - sqrt)/(2*a) // there is a second 'collision' at t2 when the balls intersect when moving apart // t2 = (-b + sqrt)/(2*a) // t2 = -tCol - b/a // t2 > 0 becomes then t1 < -b/a // so if we have missed the first intersection (at t1) but t2 is still in the future, we still consider t1 // the collision should have happened in the interval except when the second collision is still in the future if ( ( t1 < 0 ) && ((t1 > -interval) || (t1 < -b/a)) ) return t1 else return Infinity } else return Infinity } return Infinity }, })4c:T506,colliders = ({ // p1 and p2 are the two particles and tCol is the collision time in the interval. // tCol is negative with respect to end of the current interval and means a collision ocurred tCol seconds ago "CC"( p1,p2, tCol){ // bring the two objects back to the moment of the collision - tCol is always negative ! p1.pos.x += p1.speed.x*tCol p1.pos.y += p1.speed.y*tCol p2.pos.x += p2.speed.x*tCol p2.pos.y += p2.speed.y*tCol // we use the relative position and speed of the particles let p = {x: p1.pos.x - p2.pos.x, y: p1.pos.y - p2.pos.y} let v = {x: p1.speed.x - p2.speed.x, y: p1.speed.y - p2.speed.y} // the factor for the speed calculation let f = ( 2 / (p1.mass + p2.mass) ) * ( v.x*p.x + v.y*p.y ) / (p.x*p.x + p.y*p.y) // calculate the new speeds p1.speed.x -= f*p2.mass*p.x p1.speed.y -= f*p2.mass*p.y p2.speed.x += f*p1.mass*p.x p2.speed.y += f*p1.mass*p.y // the two objects have still tCol seconds to travel with the new speed (-tCol is positive !) p1.pos.x -= p1.speed.x*tCol p1.pos.y -= p1.speed.y*tCol p2.pos.x -= p2.speed.x*tCol p2.pos.y -= p2.speed.y*tCol }, })4d:T409,fChrono = (()=>{ return { start:0.0, cumul:0.0, count:0, fixed:-1.0, factor: 1.0, _fps: 0, reset() { this.start = window.performance.now() this.count = 0 this.cumul = 0.0 }, interval(){ let now = window.performance.now() // we can have a fixed time interval or a flexible real-time interval let interval = this.fixed > 0 ? this.fixed * this.factor : (now - this.start) * this.factor // bookkeeping this.cumul += now - this.start this.start = now this.count++ // large intervals mean the simulation was stopped - start with something reasonable - return seconds not mSec ! return interval > 1000.0 ? 1/60 : interval/1000 }, mSec(){ return this.count > 0 ? this.cumul/this.count : 0.0 }, fps(){ if (this.count > 10) { this._fps = 1000*this.count/this.cumul this.count = 0 this.cumul = 0.0 } return this._fps }, }})()4e:T53d,function slider({type,min, max, step, value, description}) { // styles used for the input, output an p element const iStyle = "width: 200px;" const oStyle = "font: 12px Menlo, Consolas, monospace; margin-left: 0.5em;" const pStyle = "font: italic 12px Menlo, Consolas, monospace; margin: 0em 0em 0em 0.5em;" // the html const form = html` ` // the value form.sldr.value = +value form.value = form.prev = type == "log" ? Math.exp(+form.sldr.value*Math.LN10) : +form.sldr.value // the slider can be set from the outside form.set = (value) => { form.prev = form.value form.value = +value form.sldr.value = type == "log" ? Math.log10(value) : +value form.querySelector("output[name='exp']").innerHTML = form.value.toFixed(2) } // event handler form.oninput = () => { form.prev = form.value form.value = type == "log" ? Math.exp(+form.sldr.value*Math.LN10) : +form.sldr.value form.querySelector("output[name='exp']").innerHTML = type == "log" ? form.value.toFixed(2) : form.value.toFixed(0) } // call it once form.oninput() // done return form }4f:T61b,function inputRow(views,ids){ // put all the widgets in a single row const iRow = html`

${views.map( (input,i) => { input.id = ids[i] return html`

${input}

` }) }

`; // The value is a bit more elaborate iRow.value = {} ids.forEach( (id,i) => iRow.value[id] = {value:null, changed:false, prev: 0, set: (v)=> { if (views[i].set) views[i].set(v) iRow.value[id].value = v iRow.value[id].changed = true }}) // event handlers iRow.oninput = (e) => { views.forEach( (v,i) => { let id = ids[i] iRow.value[id].changed = iRow.value[id].value !== v.value iRow.value[id].value = v.value iRow.value[id].prev = v.prev ? v.prev : 0 }) // the lowly push button has no memory if (e && e.detail && e.detail.name == "push") iRow.value[e.detail.id].changed = true } // buttons - toggle or push - do not generate input events but clicks iRow.onclick = (e) => { let name = e.target.name let id = e.target.id if (name == "toggle" || name == "push") iRow.dispatchEvent(new CustomEvent("input",{detail:{name,id}})) } // call it once iRow.oninput(); // done return iRow; }50:[] 44:{"id":"938c8e96ecb518f0","slug":"collisions-in-2d","title":"Collisions in 2D","thumbnail":"a6cea00aa8af1c05df50b540e58bd8968b5a9b30369052d7362ee6bef547a5bb","access_level":"public","create_time":"$D2020-04-24T11:26:17.199Z","update_time":"$D2020-04-30T13:37:40.462Z","view_time":null,"first_public_time":"$D2020-04-29T19:11:03.542Z","has_unpublished_edits":null,"fork":false,"stars":8,"starred":false,"owner":{"type":"team","id":"a850affe6f62e128","login":"samvers","name":"Sam Verstraete","avatar_url":"https://avatars-next.observableusercontent.com/1988baa60c6ad1326c04b67570c17f170a07022a7592f5e5d1383703fa64940e","tier":"starter_2024","bio":"Visualize Analyze Simulate","following":false},"version":1106,"publish_version":1106,"role":null,"authored":false,"authors":[{"type":"individual","id":"0cabb0106e483fce","login":"samvers","name":"Sam Verstraete","avatar_url":"https://avatars-next.observableusercontent.com/1988baa60c6ad1326c04b67570c17f170a07022a7592f5e5d1383703fa64940e","tier":null,"bio":"Visualize Analyze Simulate","following":false}],"members":[{"type":"individual","id":"0cabb0106e483fce","login":"samvers","name":"Sam Verstraete","avatar_url":"https://avatars-next.observableusercontent.com/1988baa60c6ad1326c04b67570c17f170a07022a7592f5e5d1383703fa64940e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":7,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Collisions in 2D","cells":[{"id":0,"value":"md`# Collisions in 2D\nSimulations sometimes need a 2D collision detector.\nBelow is an implementation of a 2D collider which is easily configurable\nand useful for several types of simulations.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"md`## Examples\nLet's start with some examples. Below you can select different simulations all based on elastic collisions of particles. The differences between the simulations are due to the nr of particles, their size, their initial position and speed.\n\nNote that, as explained below, the particles do not have to be circular and the collision behaviour is actually supplied by the user.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":384,"value":"{\n const ctx = canvas.getContext('2d')\n particles\n //let running = ctrl.run.value == \"stop\" ? true : false\n \n // loop forever\n while (true) { \n \n // let the collider calculate a new frame ...\n if (ctrl.run.value == \"stop\") collider.nextFrame(fChrono.interval())\n \n // and render the result\n ctx.clearRect( 0,0,canvas.width, canvas.height) \n particles.forEach( p => p.render(ctx) )\n \n //..and yield\n yield(\"running at \" + fChrono.fps().toFixed(0) + \" fps\")\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":792,"value":"canvas = {\n await visibility()\n let canvas = DOM.canvas(width, width*0.75)\n return canvas\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":398,"value":"viewof ctrl = inputRow(\n [ toggle(\"start\",\"stop\"),\n push(\"again\"),\n dropdown(Object.keys(setupFunctions),\"select setup\"),\n slider({ type:\"linear\", min: 100, max: 5000, value: 1000, step: 100,description:'number of particles'}),\n slider({ type:\"log\", min: -1, max: +1, value: 0, step: 0.01,description:'particle size multiplier'}),\n slider({ type:\"log\", min: -1, max: +1, value: 0, step: 0.01, description:'particle speed multiplier'}),\n ], [\"run\", \"again\",\"sel\",\"n\",\"size\",\"speed\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1035,"value":"html`

${setupFunctions[ctrl.sel.value].text}

${title ? title : \"select\"}

\n `\n el.value = list[0]\n el.oninput = (e) => {el.value = e.target.value}\n return el\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":463,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1098,"value":"md`..and of course d3.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"style = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W50","stdlib":"1"}} 45:"$44:body"