25:["$","title",null,{"children":"Springs2 | Paolo Andrenacci | Observable"}] 4c:T6d1,panel = { let h = htl.html`

volume
tf cf damp limit sfact

`; let initResolve = null; $('.binit',h).on('click', function() { $('.binit',h).hide(); initResolve('ok'); }); let oncontrolchange = null; let controls = Generators.observe(change => { oncontrolchange = change; return () => {}; }); $('.contr', h).on('change', function() { let ret = {}; for(let key of 'tf,cf,damp,limit,sfact'.split(',')) ret[key] = $('.contr.'+key, ).val(); oncontrolchange(ret); }); h.volume = Generators.input($('.vrange',h)[0]); h.trigger = Generators.input($('.btrigger',h)[0]); h.restart = Generators.input($('.brestart',h)[0]); h.controls = controls; h.initialized = new Promise(resolve=> { initResolve=resolve}); return h; } 4d:Tc6e,function createModel() { const clone = x => JSON.parse(JSON.stringify(x)); let origin = {nodes:[], springs:[]}; let nodes = [], springs = []; let updateCount = 0; let controls = { tf: .15, cf: .1, damp: .123, limit: 2, sfact:.7 } restart(); function onCommand(cmd) { let ret = null; if (cmd.trigger) trigger(); if (cmd.net) restart(cmd.net); if (cmd.nodes) { nodes.splice(0); for (let n of cmd.nodes) nodes.push(clone(n)); } if (cmd.dump) { ret = { nodes: clone(nodes), origin:clone(origin), controls:clone(controls), updateCount } } if (cmd.controls) controls = clone(cmd.controls); if (cmd.restart) restart(); if (cmd.getNodes) ret = { nodes: clone(nodes)}; if (cmd.ping) ret = { pong:true }; return ret; } const clamp = (x,max) => x>max ? max : (-x > max ? -max : x); function updateNodes() { let { tf, cf, damp, limit,sfact } = controls; function update(point) { if (!point.fixed) { point.vx *= (1 - damp); point.vy *= (1 - damp); point.vz *= (1 - damp); point.x += point.vx; point.y += point.vy; point.z += point.vz; point.x = clamp(point.x, limit); point.y = clamp(point.y, limit); point.z = clamp(point.z, limit); } } for (let s of springs) { let p1 = nodes[s.p1]; let p2 = nodes[s.p2]; let dx = p2.x - p1.x; let dy = p2.y - p1.y; let dz = p2.z - p1.z; let d = Math.hypot(dx, dy, dz)*sfact; let fact = d - s.len; //let d = dquad(dx, dy, dz)*sfact; //let fact = d - s.len2; // fact>0 => troppo lungo, attrarre // fact<0=> troppo corto, respingere fact *= tf; p1.vx += dx * fact; p1.vy += dy * fact; p1.vz += dz * fact; p2.vx += -dx * fact; p2.vy += -dy * fact; p2.vz += -dz * fact; // convergenza verso i punti iniziali let c1 = origin.nodes[s.p1]; let c2 = origin.nodes[s.p2]; p1.vx -= (p1.x - c1.x) * cf; p1.vy -= (p1.y - c1.y) * cf; p1.vz -= (p1.z - c1.z) * cf; p2.vx -= (p2.x - c2.x) * cf; p2.vy -= (p2.y - c2.y) * cf; p2.vz -= (p2.z - c2.z) * cf; update(p1); update(p2); } updateCount++; return this; } function trigger() { let nonFixed = nodes.filter(n => !n.fixed); let sel = nonFixed[Math.floor(Math.random() * nonFixed.length)]; if (sel) sel.z = Math.random() * 2 - 1; return this; } function dquad(dx, dy, dz) { const trunc = x=>(x<.0000001 ? 0 : x); return trunc(dx*dx) + trunc(dy*dy) + trunc(dz*dz); } function restart(net) { if (typeof net !== 'undefined') { origin = clone(net); for (let n of origin.nodes) { n.vx = n.vy = n.vz = 0; } for (let s of origin.springs) { let p1 = origin.nodes[s.p1], p2 = origin.nodes[s.p2]; s.len2 = dquad(p2.x-p1.x, p2.y-p1.y, p2.z-p1.z,p2); s.len = Math.hypot(p1.x - p2.x, p1.y - p2.y, p1.z - p2.z); } } nodes.splice(0); springs.splice(0); for (let n of origin.nodes) nodes.push(clone(n)); for (let s of origin.springs) springs.push(clone(s)); return this; } return { nodes, springs, onCommand, updateNodes } }4e:Ta74,DSPPprocessorClass = { let space = " "; let createModelSrc = space+createModel.toString().replace(/\n/g, '\n'+space); let script = ` class SpringsProcessor extends AudioWorkletProcessor { constructor(...args) { super(...args); try { this.model=this.setModel(); console.log({thisModel:this.model}); this.port.onmessage = (e) => { //console.log({data:e.data, model:!!this.model}); try { let ret = this.model.onCommand(JSON.parse(e.data)); if (ret) { //console.log({onCommandRet:ret}); this.port.postMessage(JSON.stringify(ret)) } }catch(e) { console.log(e);} } this.ph=0; this.computeCount=0; this.send({info:'initialized'}); } catch(e) { console.log(e); this.send({error:e}); } } setModel() { try { ${createModelSrc}; return createModel(); }catch(e) { console.log(e); this.send({error:e}); } } poll() { try{ let info = { count: this.computeCount}; console.log('poll '+this.computeCount); this.port.postMessage(JSON.stringify({info})) }catch(e) { console.log(e); this.send({error:e}); } } restart() { console.log('dsp restart'); try { if (this.model) this.model.restart(); }catch(e) { console.log(e); this.send({error:e}); } } trigger() { try { if (this.model) this.model.trigger(); }catch(e) { console.log(e); this.send({error:e}); } } send(obj) { if (this.port) this.port.postMessage(JSON.stringify(obj)) } nextValue() { try { if (this.model) { this.computeCount++; if ((this.computeCount%100000)==0) this.poll(); this.model.updateNodes(); let a=0; for(let n of this.model.nodes) a+= n.z; //return a; return this.model.nodes[0].z; } else return 0; }catch(e) { console.log(e); this.send({error:e}); return 0; } } process(inputs, outputs, parameters) { const output = outputs[0]; output.forEach(channel => { for (let i = 0; i < channel.length; i++) { channel[i] = this.nextValue(); } }) return true } } registerProcessor('xyz-springs', SpringsProcessor);` return {script}; }4f:T5e7,scene = { const scene = new THREE.Scene(); scene.background = new THREE.Color(0x000000); scene.sNodes = []; scene.cNodes = []; scene.cSprings = []; scene.sSprings = []; for(let n of net.nodes) { let sgeometry = new THREE.SphereGeometry( .03, 16, 8 ); let smaterial = new THREE.MeshBasicMaterial( { color: 0xc0c0c0 } ); let ssphere = new THREE.Mesh(sgeometry, smaterial); ssphere.position.set(n.x, n.y, n.z); scene.sNodes.push(ssphere); //scene.add(sphere); let cgeometry = new THREE.SphereGeometry( .03, 16, 8 ); let cmaterial = new THREE.MeshBasicMaterial( { color: n.fixed ? 0x804040 : 0xff0000 } ); let csphere = new THREE.Mesh(cgeometry, cmaterial ); csphere.position.set(n.x, n.y, n.z); scene.cNodes.push(csphere); scene.add(csphere); } const cmaterial = new THREE.LineBasicMaterial( { color: 0xffff00 } ); const smaterial = new THREE.LineBasicMaterial( { color: 0xc0c0c0 } ); for(let s of net.springs) { const points = []; points.push( new THREE.Vector3(0,0,0) ); points.push( new THREE.Vector3(0,0,0) ); const sgeometry = new THREE.BufferGeometry().setFromPoints(points); const cgeometry = new THREE.BufferGeometry().setFromPoints(points); const sLine = new THREE.Line( sgeometry, smaterial ); const cLine = new THREE.Line( cgeometry, cmaterial ); scene.cSprings.push(cLine) scene.sSprings.push(sLine); scene.add(sLine); scene.add(cLine); } //scene.add(cube); return scene; }50:[] 48:{"id":"a5a5bf71f106dc6d","slug":"springs2","title":"Springs2","thumbnail":"f4e2bcc933de75666c0aa59b04a7ed8f49ce7284cfbb24a6f5752caf1d9e0e2c","access_level":"public","create_time":"$D2024-05-01T14:25:17.244Z","update_time":"$D2024-05-21T10:19:59.731Z","view_time":null,"first_public_time":"$D2024-05-01T14:25:17.244Z","has_unpublished_edits":null,"fork":{"id":"f5061de0eb09ae92","slug":"tch","title":"Tch","owner":{"id":"3b42508407aca5a3","login":"zawinul","name":"Paolo Andrenacci"}},"stars":0,"starred":false,"owner":{"type":"team","id":"3b42508407aca5a3","login":"zawinul","name":"Paolo Andrenacci","avatar_url":"https://avatars-next.observableusercontent.com/5cf0f05427bb66405cd76829c2ade969967efb177b4ffefd635433c153ce8f46","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":2214,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"ed8740f4700202b7","login":"zawinul","name":"Paolo Andrenacci","avatar_url":"https://avatars-next.observableusercontent.com/5cf0f05427bb66405cd76829c2ade969967efb177b4ffefd635433c153ce8f46","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"3b42508407aca5a3","login":"zawinul","name":"Paolo Andrenacci","avatar_url":"https://avatars-next.observableusercontent.com/5cf0f05427bb66405cd76829c2ade969967efb177b4ffefd635433c153ce8f46","tier":"starter_2024","role":"editor"},{"type":"individual","id":"ed8740f4700202b7","login":"zawinul","name":"Paolo Andrenacci","avatar_url":"https://avatars-next.observableusercontent.com/5cf0f05427bb66405cd76829c2ade969967efb177b4ffefd635433c153ce8f46","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Springs2","cells":[{"id":1,"value":"md`# Springs2`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1945,"value":"renderer.domElement","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1259,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2207,"value":"pc = panel.controls","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1715,"value":"controls = {\n let r = {\n tf: .1,\n\t\tcf: .01,\n\t\tdamp: .00025,\n\t\tlimit: 2,\n sfact: .5\n }\n updateControls(r);\n return r;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":532,"value":"md`## model`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2102,"value":"model\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1167,"value":"net2 = { \n let nodes = [], springs=[],N=6;\n \n let cnt=0;\n for(let i=0; i cancelAnimationFrame(frame)); \n return \"screen refresh ok\"\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1198,"value":"md`## audio`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1458,"value":"gestioneVolume = {\n let g = Math.pow(volume,5)*30;\n gain.gain.setValueAtTime(g, audioContext.currentTime+.01);\n $('.vlabel').val(g);\n\n return g;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1464,"value":"gestioneTrigger = {\n try {\n trigger;\n model.onCommand({trigger:true});\n sendDSP({trigger:true});\n return \"ok\";\n }\n catch(e) {\n return e;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":844,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":850,"value":"springsNode = {\n let springsNode = new AudioWorkletNode(audioContext, 'xyz-springs');\n let msgChangeFun = ()=>{};\n function onMessage(e) {\n //console.log({springsNode_onMessage:e.data}); \n msgChangeFun(JSON.parse(e.data));\n }\n springsNode.port.onmessage = onMessage;\n //setInterval(() =>springsNode.port.postMessage(JSON.stringify({dump:true})), 10000);\n let obs = Generators.observe(change => {\n msgChangeFun = change;\n });\n springsNode.observe = obs;\n springsNode.port.postMessage(JSON.stringify({net:net}));\n springsNode.port.postMessage(JSON.stringify({nodes:model.nodes}));\n let interval = setInterval(()=>springsNode.port.postMessage(JSON.stringify({getNodes:true})));\n return springsNode;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1727,"value":"function sendDSP(data) {\n springsNode.port.postMessage(JSON.stringify(data));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1608,"value":"DSP_dataObserver = springsNode.observe;\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1788,"value":"onDspData = {\n let data = DSP_dataObserver;\n //console.log({data});\n if (data.nodes) {\n //console.log('force nodes '+data.nodes.length);\n model.nodes.splice(0);\n for(let node of data.nodes) {\n model.nodes.push(JSON.parse(JSON.stringify(node)));\n }\n updateGraph();\n }\n if (data.info)\n console.log(data);\n if (data.error)\n console.log(data);\n return data;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":846,"value":"audioContext = { \n await panel.initialized;\n var ctx = new (window.AudioContext || window.webkitAudioContext)();\n if (ctx.state !== \"running\") {\n //await new Promise(resolve => {\n // viewof volume.addEventListener('input', resolve);\n //});\n ctx = new (window.AudioContext || window.webkitAudioContext)();\n }\n \n // Close the previous context when this cell reloads.\n // This avoids playing multiple sounds at once.\n invalidation.then(() => ctx.close());\n let u = scriptUrl;\n await ctx.audioWorklet.addModule(u);\n return ctx;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":852,"value":"gain = audioContext.createGain();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":856,"value":"initAudioNode = {\n springsNode.connect(gain);\n gain.connect(audioContext.destination);\n gain.gain.setValueAtTime(0, audioContext.currentTime);\n invalidation.then(() => {\n springsNode.disconnect();\n gain.disconnect();\n });\n return \"audio node initialized\";\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1152,"value":"### graph","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1133,"value":"height = 300","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1401,"value":"function updateGraph() {\n for(let i=0;i renderer.render(scene, camera));\n camera.position.set( 0, 0, 4);\n controls.update();\n invalidation.then(() => (controls.dispose(), renderer.dispose()));\n return renderer;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2136,"value":"firstDraw = {\n model;\n updateGraph();\n return \"ok\";\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1147,"value":"### imports\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1125,"value":"THREE = {\n const THREE = window.THREE = await require(\"three@0.130.0/build/three.min.js\");\n await require(\"three@0.130.0/examples/js/controls/OrbitControls.js\").catch(() => {});\n return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":839,"value":"Tone = await require('tone')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1251,"value":"import { jQuery as $ } from \"@ddspog/useful-libs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1452,"value":"### varie","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1539,"value":"scriptUrl = URL.createObjectURL(new Blob([DSPPprocessorClass.script], {type: \"text/javascript\"}));\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1983,"value":"initialized = panel.initialized","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1438,"value":"volume=panel.volume","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1443,"value":"trigger=panel.trigger;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1427,"value":"restart=panel.restart;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1626,"value":"htl.html`

${DSPPprocessorClass.script.trim()}

` ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W50","stdlib":"1"}} 24:null