3e:null 3f:["$","title",null,{"children":"Interactive Sphered | epsilonite | Observable"}] 45:T452,sphere = 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( rr ) { this.nodes.push(new node( rr )); } removeNode() { this.nodes.pop();} update( rr, nn) { if (this.nodes.length < nn) this.throttledAddNode( rr ); else if (this.nodes.length > nn) this.throttledRemoveNode(); this.nodes.forEach(node => node.update(rr, 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:T67c,node = class { constructor( rr ) { const ax = Math.sin(2 * Math.PI * Math.random()); const ay = Math.cos(2 * Math.PI * Math.random()); const dd = rr * Math.sqrt( Math.random() ); if (spawn == "random") { this.p = { x: w/2 + dd * ax, y: h/2 + dd * ay}; this.v = { x: ax, y: ay }; } else { this.p = { x: w/2, y: h/2} ; this.v = { x: 4*ax, y: 20*ay }; } } update( rr , 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.1 * (Math.sin(aa)) - 0.01 * this.v.x; this.v.y += 0.8*l*ck.t*cky/ckr/ckr/ckr + 0.1 * (Math.cos(aa)) - 0.01 * this.v.y; } else { this.p.x += this.v.x; this.p.y += 0.2 * this.v.y; this.v.x += 0.2 * Math.sin(aa) - 0.01 * this.v.x; this.v.y += 0.2 * Math.cos(aa) - 0.01 * this.v.y; } let cx = w/2 - this.p.x; let cy = h/2 - this.p.y; let cr = Math.sqrt(cx*cx+cy*cy); if (cr > rr ) { this.p.x += cx/cr; this.p.y += cy/cr; this.v.x += 0.2*cx/cr - 0.01*this.v.x; this.v.y += 0.2*cy/cr - 0.01*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":"960c36d4f5ccd736","slug":"interactive-sphered","title":"Interactive Sphered","thumbnail":"110dea8db83876cc020f8f5784b8736e022cdbf27b0f4781d24cb01722318119","access_level":"public","create_time":"$D2018-06-05T17:25:25.057Z","update_time":"$D2020-12-27T11:46:27.656Z","view_time":null,"first_public_time":"$D2018-06-05T18:52:54.879Z","has_unpublished_edits":null,"fork":{"id":"1b8ee46fdb0263b9","slug":"sphered","title":"Sphered","owner":{"id":"3aaf46bb6ad1bd38","login":"epsilonite","name":""}},"stars":3,"starred":false,"owner":{"type":"team","id":"3aaf46bb6ad1bd38","login":"epsilonite","name":"","avatar_url":"https://avatars-next.observableusercontent.com/fa500008646e04a16f30cf136815b365f28231e752e4c1990d317f03ddcc64da","tier":"starter_2024","bio":""},"version":1063,"publish_version":1063,"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":4,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Interactive Sphered","cells":[{"id":0,"value":"md`# Interactive Sphered`","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":307,"value":"viewof r = slider({\n min: 100, \n max: w/2, \n step: 0.1, \n value: Math.min(400,5*l/12),\n})","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: 7*w/8+100, \n step: 1, \n value: 1.75*r+100,\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: r/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: r/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