3e:null 3f:["$","title",null,{"children":"Interactive Boxed | epsilonite | Observable"}] 45:T43b,mesh = class { constructor( x, y ) { this.throttledAddNode = _.throttle(this.addNode, 10, { 'trailing': false }); this.throttledRemoveNode = _.throttle(this.removeNode, 10, { 'trailing': false }); this.nodes = []; this.pos = { x: x, y: y}; this.click = {x:0, y:0, t:0}; } addClick( x, y ){ this.click.x = x - this.pos.x; this.click.y = y - this.pos.y; this.click.t = 25; } updatePos( x, y) { this.pos = { x: x, y: y}; } addNode() { this.nodes.push(new node()); } removeNode() { this.nodes.pop();} update(nn) { if (this.nodes.length < nn) this.throttledAddNode(); else if (this.nodes.length > nn) this.throttledRemoveNode(); this.nodes.forEach(node => node.update(this.click)); if (this.click.t > 0) this.click.t--; } draw (ctx, nn, aa, ss) { if (this.click.t > 0) { ctx.beginPath(); ctx.arc(this.click.x, this.click.y, 6, 0, Math.PI * 2); ctx.fillStyle = color_node; ctx.fill(); } this.nodes.forEach(node => node.draw( this.nodes, ctx, nn, aa, ss)); } }46:T5fc,node = class { constructor() { this.p = { x: w*Math.random(), y: h*Math.random()}; this.v = { x: 0.5-Math.random(), y: 0.5-Math.random() }; } update(ck ) { const aa = 2 * Math.PI * Math.random(); if (ck.t > 0) { this.p.x += this.v.x; this.p.y += this.v.y; let ckx = this.p.x-ck.x; let cky = this.p.y-ck.y; let ckr = Math.sqrt(ckx*ckx+cky*cky); this.v.x += 0.8*l*ck.t*ckx/ckr/ckr/ckr - 0.01 * this.v.x; this.v.y += 0.8*l*ck.t*cky/ckr/ckr/ckr - 0.01 * this.v.y; } else { this.p.x += this.v.x; this.p.y += this.v.y; this.v.x += 0.3 * (0.5-Math.random()) - 0.01 * this.v.x; this.v.y += 0.3 * (0.5-Math.random()) - 0.01 * this.v.y; } if (this.p.x > w) { if (this.v.x > 0) this.v.x *= -1; this.p.x = w + this.v.x; } else if (this.p.x < 0) { if (this.v.x < 0) this.v.x *= -1; this.p.x = this.v.x; } if (this.p.y > h) { if (this.v.y > 0) this.v.y *= -1; this.p.y = h + this.v.y; } else if (this.p.y < 0) { if (this.v.y < 0) this.v.y *= -1; this.p.y = this.v.y; } } draw( N, ctx, nn, aa, ss) { N.forEach(n => { const dx = this.p.x - n.p.x; const dy = this.p.y - n.p.y; const d2 = dx*dx + dy*dy; if (d2 < ss) { ctx.globalAlpha = aa*(ss - d2) / (ss * nn); ctx.beginPath(); ctx.moveTo(this.p.x, this.p.y); ctx.lineTo(n.p.x, n.p.y); ctx.stroke(); } }); } }47:[] 43:{"id":"066c4feef34539ca","slug":"interactive-boxed","title":"Interactive Boxed","thumbnail":"ea49c3804a79d5617a6523bd263c0d49929dc8c870242c87c8eaf1d130b1600f","access_level":"public","create_time":"$D2018-06-12T00:49:51.790Z","update_time":"$D2018-06-12T01:34:50.933Z","view_time":null,"first_public_time":"$D2018-06-12T01:05:40.183Z","has_unpublished_edits":null,"fork":{"id":"960c36d4f5ccd736","slug":"interactive-sphered","title":"Interactive Sphered","owner":{"id":"3aaf46bb6ad1bd38","login":"epsilonite","name":""}},"stars":2,"starred":false,"owner":{"type":"team","id":"3aaf46bb6ad1bd38","login":"epsilonite","name":"","avatar_url":"https://avatars-next.observableusercontent.com/fa500008646e04a16f30cf136815b365f28231e752e4c1990d317f03ddcc64da","tier":"starter_2024","bio":""},"version":1076,"publish_version":1076,"role":null,"authored":false,"authors":[{"type":"individual","id":"5e4268da8126dcd6","login":"epsilonite","name":"","avatar_url":"https://avatars-next.observableusercontent.com/fa500008646e04a16f30cf136815b365f28231e752e4c1990d317f03ddcc64da","tier":null,"bio":""}],"members":[{"type":"individual","id":"5e4268da8126dcd6","login":"epsilonite","name":"","avatar_url":"https://avatars-next.observableusercontent.com/fa500008646e04a16f30cf136815b365f28231e752e4c1990d317f03ddcc64da","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Interactive Boxed","cells":[{"id":0,"value":"md`# Interactive Boxed`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":804,"value":"div = html`

controls

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"import {slider,button,radio} from \"@jashkenas/inputs\"\n\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":624,"value":"viewof spawn = radio({ options: ['from center', 'random'], value: \"random\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":618,"value":"viewof reset = new button(\"reset\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"viewof n = slider({\n min: 12, \n max: w*h/500, \n step: 1, \n value: 200+w*h/3000,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"viewof a = slider({\n min: 0, \n max: w/20+10, \n step: 0.1, \n value: n/10+10, \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"viewof s = slider({\n min: 12, \n max: w/10+20,\n step: 0.1, \n value: n/5+20, \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"s2 = s*s","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"viewof color_node = {\n var input = DOM.input('color');\n input.value = '#ff3300';\n return input;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"viewof color_bkgd = {\n var input = DOM.input('color');\n input.value = '#f7faf7';\n return input;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":991,"value":"html`

controls

mutables

objects

fns