3e:null 3f:["$","title",null,{"children":"Interactive Sphered - Multi-touch | epsilonite | Observable"}] 45:T422,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.pulses = []; } addClick( x, y ){ this.pulses.push(new pulse(x - this.pos.x, y - this.pos.y, 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.pulses)); this.pulses.forEach(p => p.update()); this.pulses = this.pulses.filter(function(value, index, arr){ return value.t > 0;}); } draw (ctx, nn, aa, ss) { this.pulses.forEach( p => p.draw(ctx,nn,aa,this.pulses.length)); this.nodes.forEach(node => node.draw( this.nodes, ctx, nn, aa, ss)); } }46:T6b5,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 , pulses ) { const aa = 2 * Math.PI * Math.random(); if (pulses.length > 0) { this.p.x += this.v.x; this.p.y += this.v.y; pulses.forEach(p => { let ckx = this.p.x-p.x; let cky = this.p.y-p.y; let ckr = Math.sqrt(ckx*ckx+cky*cky); this.v.x += 0.8*l*p.t*ckx/ckr/ckr/ckr + 0.1 * (Math.sin(aa)) - 0.01 * this.v.x; this.v.y += 0.8*l*p.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":"0aad3d0217cefc6c","slug":"interactive-sphered-multi-touch","title":"Interactive Sphered - Multi-touch","thumbnail":"8670f1c50c1fad24ba2d2e4e64c0607425e3db4f14f58a56c3781c0ef38f0084","access_level":"public","create_time":"$D2020-12-27T11:51:44.172Z","update_time":"$D2020-12-27T12:39:09.211Z","view_time":null,"first_public_time":"$D2020-12-27T12:10:02.347Z","has_unpublished_edits":null,"fork":{"id":"960c36d4f5ccd736","slug":"interactive-sphered","title":"Interactive Sphered","owner":{"id":"3aaf46bb6ad1bd38","login":"epsilonite","name":""}},"stars":5,"starred":false,"owner":{"type":"team","id":"3aaf46bb6ad1bd38","login":"epsilonite","name":"","avatar_url":"https://avatars-next.observableusercontent.com/fa500008646e04a16f30cf136815b365f28231e752e4c1990d317f03ddcc64da","tier":"starter_2024","bio":""},"version":1103,"publish_version":1103,"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":3,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Interactive Sphered - Multi-touch","cells":[{"id":0,"value":"md`# Interactive Sphered - Multi-touch`","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