2c:null 2d:["$","title",null,{"children":"Spacial audio : where we lean our ears shape the conversation | Fabien Benetou | Observable"}] 32:T433, sourceOnly = p5(s => { let animationPaused = false let waveOpacities = [] s.setup = () => { s.createCanvas(800,400); } s.draw = () => { var radius = 10 s.clear() s.noFill() // source s.translate(radius,s.height/2) s.noFill() s.stroke(0) s.textSize(20) s.text("👄",0,7) // s.ellipse(0+radius,0,2*radius) let max = Math.round( s.map(s.frameCount%300,0,300,2,audioExample.length) ) // let waveOpacities = Math.round( s.map( ,0,300, 0, 200) ) for (let i=2; i 300-2 && endPaused) { s.noLoop() animationPaused = true } } })33:T521,waveformVisualZoomedSplit = p5(s => { let zoom = 100 let radius = 10 s.setup = () => { s.createCanvas(800,200); } s.draw = () => { let waveformLength = s.width s.clear() s.noFill() // waveform var yOffset = s.height/2 s.fill(0) s.noStroke() var bandWidth = waveformLength/audioExample.length for (var i in audioExample){ // s.line(i,-audioExample[i]*scale+yOffset,i,audioExample[i]*scale+yOffset) s.rect(i*bandWidth,-(audioExample[i]*zoom)/2+yOffset, bandWidth, audioExample[i]*zoom) } // visual split silences var groups = [] let c s.noFill() for (var i in audioExample){ audioExample[i] > silenceVolume ? c = "green" : c = "red" if (groups.length){ let previousGroup = groups[groups.length-1] if (previousGroup.color == c) previousGroup.width+=bandWidth else groups.push({color:c,width:bandWidth}) } else { groups.push({color:c,width:bandWidth}) } } s.text(groups.length,10,100) let x = 0 let w = 4 s.strokeWeight=w*2 for (let group of groups){ s.stroke(group.color) s.rect(x+w/2, w/2, group.width-w/2, s.height-w/2) x += group.width } s.noLoop() } })34:T925,canvas = p5(s => { let animationPaused = false let waveOpacities = [] s.setup = () => { s.createCanvas(800,400); } s.draw = () => { var radius = 10 s.clear() s.noFill() // source s.push() s.translate(waveformLength+100,radius) s.stroke(0) s.textSize(20) s.text("👄",0,7) // s.ellipse(0+radius,0,2*radius) let max = Math.round( s.map(s.frameCount%300,0,300,2,audioExample.length) ) // let waveOpacities = Math.round( s.map( ,0,300, 0, 200) ) for (let i=2; i 300-2 && endPaused) { s.noLoop() s.frameCount = 1 // to allow restarting with the mouse animationPaused = true } } s.mouseClicked = () => { if (s.mouseX < 0 || s.mouseX > s.width || s.mouseY < 0 || s.mouseY > s.height) return // insure that we are indeed within the current canvas if (animationPaused) s.loop(); else s.noLoop() animationPaused = !animationPaused } })35:T5be,multipleSources = p5(s => { let persons = [] let animationPaused = false let waveOpacities = [] let radius = 10 let i s.setup = () => { s.createCanvas(800,400); for (let p=0;p<5;p++){ persons.push( { x:radius + Math.round(Math.random()*s.width*0.9), y:radius + Math.round(Math.random()*s.height*0.9), theta:Math.random()*Math.PI } ) } i = {x:s.width/2, y:s.height/2} } s.draw = () => { s.clear() s.noFill() s.stroke(0) s.textSize(20) for (let p of persons){ for (let i=2; i<50;i++){ s.stroke( i*10 ) s.arc(p.x,p.y, 2*radius*i, 2*radius*i, p.theta, p.theta+Math.PI/2); } } // let areaAroundSelf = s.get(i.x-radius,i.y-radius*2,radius*4,radius*4) // areaAroundSelf.loadPixels() // var avg = areaAroundSelf.pixels.reduce( (a,v) => a+v ) / areaAroundSelf.pixels.length // // if (avg==0) avg = 100 // // console.log( avg ) // // s.image(areaAroundSelf,100,100,radius*4,radius*4) // s.noStroke() // s.fill(0) // s.text("Capture sound volume: "+1/avg,10,20) for (let p of persons){ s.text("👄",p.x,p.y) } s.text("👂",i.x,i.y) } s.mouseClicked = () => { if (s.mouseX < 0 || s.mouseX > s.width || s.mouseY < 0 || s.mouseY > s.height) return // insure that we are indeed within the current canvas i.x = s.mouseX i.y = s.mouseY } })36:T44e,alternativeRoles = p5(s => { let persons = [] let animationPaused = false let waveOpacities = [] let radius = 10 let groups = [] let p = {v:{x:0,y:0}, theta:Math.PI/4, color:"black"} s.setup = () => { s.createCanvas(800,200); } s.draw = () => { s.translate(s.width/4,s.height/2) s.stroke( 0 ) s.noFill() for (let i=2; i<10;i++){ s.stroke( i*10 ) s.arc(p.v.x,p.v.y, groupRadius*i/20, groupRadius*i/20, p.theta, p.theta+Math.PI/2); } s.text("👄",p.v.x-radius/2,p.v.y+radius/2) s.translate(s.width/4,0) s.stroke( 0 ) s.noFill() for (let i=2; i<10;i++){ s.stroke( i*10 ) s.arc(p.v.x,p.v.y, groupRadius*i/20, groupRadius*i/20, p.theta, p.theta+Math.PI/2); } s.text("👂👄👂",p.v.x-2*radius,p.v.y+radius/2) s.translate(s.width/4,0) for (let i=2; i<10;i++){ s.stroke( i*20 ) s.ellipse(p.v.x,p.v.y, groupRadius*i/20, groupRadius*i/20); } s.fill(p.color) s.ellipse(p.v.x,p.v.y,radius*2,radius*2) s.noLoop() } })37:T4af,fromWordsToColor = p5(s => { let radius = 10 let steps = 4 let topicExamples = ["something", "else"] // could instead pick from words s.draw = () => { s.translate(s.width/(steps+1)/2,s.height/4) for (let t in topicExamples){ let color = colors[t] s.stroke(color) for (let i=1;i<=steps;i++){ s.fill(color) s.textSize(20/i) for (let x=0;x { s.createCanvas(800,300); } })38:T847,multipleSourcesMultipleTopics = p5(s => { let persons = [] let animationPaused = false let waveOpacities = [] let radius = 10 let groups = [] s.draw = () => { s.textSize(20) s.fill(0) for (let p of persons){ let foundGroups = persons.map( op => { return {p:op, d:Math.round( p.v.dist(op.v) )} } ) .filter( e => { if (e.d < groupRadius && e.d > 0) return e } ) if (foundGroups.length){ groups.push({node:p,neighbours:foundGroups}) } } let links = groups.map( v => v.neighbours ).reduce( (acc, val) => acc += val.length, 0 ) / 2 // unidirectional links s.text("Links: "+links, 10, 20) // interest based on color let matchingInterest = 0 for (let g of groups){ for (let n of g.neighbours){ if (n.p.color == g.node.color) matchingInterest++ } } s.text("Matching interest: "+matchingInterest/2, 10, 40) s.text("Ratio: "+(matchingInterest/2)/links, 10, 60) s.translate(0,100) s.noFill() for (let p of persons){ for (let i=2; i<10;i++){ s.stroke( i*20 ) // s.arc(p.v.x,p.v.y, 2*radius*i, 2*radius*i, p.theta, p.theta+Math.PI/2); s.ellipse(p.v.x,p.v.y, groupRadius*i/20, groupRadius*i/20); } } for (let p of persons){ s.fill(p.color) s.ellipse(p.v.x,p.v.y,radius*2,radius*2) } s.noLoop() } s.setup = () => { s.createCanvas(800,400); for (let p=0;p { if (s.mouseX < 0 || s.mouseX > s.width || s.mouseY < 0 || s.mouseY > s.height) return // insure that we are indeed within the current canvas // could drag and drop each person to reduce noise / maximize signal } })39:[] 30:{"id":"52370b003156b2bc","slug":"spacial-audio-where-we-lean-our-ears-shape-the-conversation","title":"Spacial audio : where we lean our ears shape the conversation","thumbnail":"d4571604f7ceb1ee52fb09205d9c0c6ea16e3251f076d27368a7d3f8de662d66","access_level":"public","create_time":"$D2020-06-30T08:35:48.148Z","update_time":"$D2021-02-16T20:38:08.863Z","view_time":null,"first_public_time":"$D2021-02-02T15:37:09.678Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"571c54f23a22112c","login":"utopiah","name":"Fabien Benetou","avatar_url":"https://avatars-next.observableusercontent.com/0bac47d5eff199771ce966f6c35b81d0456f55f761089445a09ea05e73e51aab","tier":"starter_2024"},"version":1292,"publish_version":1292,"role":null,"authored":false,"authors":[{"type":"individual","id":"fa8cd470e660c7d6","login":"utopiah","name":"Fabien Benetou","avatar_url":"https://avatars-next.observableusercontent.com/0bac47d5eff199771ce966f6c35b81d0456f55f761089445a09ea05e73e51aab","tier":null}],"members":[{"type":"individual","id":"fa8cd470e660c7d6","login":"utopiah","name":"Fabien Benetou","avatar_url":"https://avatars-next.observableusercontent.com/0bac47d5eff199771ce966f6c35b81d0456f55f761089445a09ea05e73e51aab","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Spacial audio : where we lean our ears shape the conversation","cells":[{"id":0,"value":"md`# Spacial audio : where we lean our ears shape the conversation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1280,"value":"md`*warning:* this is still work in progress. Some parts are not finished in particular group merge/split behaviors. Unfortuantely endless regression to explain the \"basis\" lead to more work that expected. Suggestions welcome!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":299,"value":"md`This notebook explores how spacial audio helps to improve the quality of our conversations.\n\nWe will explore :\n- how sound propagates in a room\n- how the volume of the sound changes with our movements\n- how we move our body to focus on interesting sounds and ignore noise\n- how groups can subsequently emerge\n- why groups splitting and merging changes the quality of the conversation\n- what solutions exist today to leverage spacial audio.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":468,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":310,"value":"md`This was a sentence, what do you think it means?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":302,"value":"waveformVisual = p5(s => {\n let zoom = 10\n s.setup = () => {\n s.createCanvas(800,50); \n }\n \n s.draw = () => {\n var waveformLength = s.width\n var radius = 10\n \n s.clear()\n s.noFill()\n \n // waveform\n var yOffset = s.height/2\n s.fill(0)\n s.noStroke()\n var bandWidth = waveformLength/audioExample.length\n for (var i in audioExample){\n // s.line(i,-audioExample[i]*scale+yOffset,i,audioExample[i]*scale+yOffset) \n s.rect(i*bandWidth,-(audioExample[i]*zoom)/2+yOffset,\n bandWidth, audioExample[i]*zoom)\n }\n s.noLoop()\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":315,"value":"md`It might be a bit too small so let's zoom in.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":317,"value":"waveformVisualZoomed = p5(s => { \n let zoom = 100\n var radius = 10\n s.setup = () => {\n s.createCanvas(800,200); \n }\n \n s.draw = () => {\n var waveformLength = s.width\n \n s.clear()\n s.noFill()\n \n // waveform\n var yOffset = s.height/2\n s.fill(0)\n s.noStroke()\n var bandWidth = waveformLength/audioExample.length\n for (var i in audioExample){\n // s.line(i,-audioExample[i]*scale+yOffset,i,audioExample[i]*scale+yOffset) \n s.rect(i*bandWidth,-(audioExample[i]*zoom)/2+yOffset,\n bandWidth, audioExample[i]*zoom)\n }\n s.noLoop()\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":324,"value":"md`This does not seem like much but we can already distinguish two things :`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":327,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":487,"value":"md`Unfortunately we can not always ask the speaker to speak louder. What can we do instead?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1221,"value":"waveformHoverZoom = p5(s => { \n let zoom = 10\n var radius = 10\n s.setup = () => {\n s.createCanvas(800,200); \n }\n \n s.draw = () => {\n var waveformLength = s.width\n zoom = s.mouseY/2\n if (zoom<10) zoom=10\n if (zoom>100) zoom=100\n \n s.clear()\n s.noFill()\n \n \n \n s.stroke(0)\n s.textSize(20)\n s.text(\"👄\",radius,radius)\n s.text(\"👂\",radius,radius)\n \n // waveform\n var yOffset = s.height/2\n s.fill(0)\n s.noStroke()\n var bandWidth = waveformLength/audioExample.length\n for (var i in audioExample){\n // s.line(i,-audioExample[i]*scale+yOffset,i,audioExample[i]*scale+yOffset) \n s.rect(i*bandWidth,-(audioExample[i]*zoom)/2+yOffset,\n bandWidth, audioExample[i]*zoom)\n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":199,"value":"md`Move the slide to move further (left) or closer (right) to the audio source.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":37,"value":"viewof scale = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":551,"value":"md`Can you navigate through the noise to listen to good conversations?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":516,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":863,"value":"md`Usually a speaker is also often a listener and vice-versa, alternating roles.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":879,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":943,"value":"md`Each person also talks about something, those sentences constitute a overall topic.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":940,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":807,"value":"md`## Beyond a private conversation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":808,"value":"md`Radius constituting a group`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":768,"value":"viewof groupRadius = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":824,"value":"md`Maximum number of interets`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":777,"value":"maximumNumberOfInterests = colors.length-1 // should be the other way around, defining colors from the number of interets","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":828,"value":"md`Maximum number of interets`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":782,"value":"viewof numberOfParticipants = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":613,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1181,"value":"md`## Content to organize`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":838,"value":"md`Convinced, try the existing solutions\n\n- https://hubs.mozilla.com\n- https://gather.town\n- https://map.highfidelity.com\n- https://rambly.app\n- https://skittish.com/\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":286,"value":"startPaused = true","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":463,"value":"endPaused = true","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":347,"value":"bandWidth = waveformLength/audioExample.length","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":18,"value":"audioExample = Array(words.length*samplePerLetter).fill(0).map( _ => Math.random()+silenceVolume )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":105,"value":"samplePerLetter = 10","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":355,"value":"waveformLength = 400","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":115,"value":"silenceVolume = 0.01","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":96,"value":"addSilences = { \n for (var i in words) { \n if (!words[i].match(/[a-z]/i)) \n for (var x=0;x`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1127,"value":"md`## Own utils`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":84,"value":"perceivedWordViaDistance = (words, distance) => {\n // no coherence so when called repetitively causes flickering (fine here)\n // should also include the minimum distance (here 200)\n var result = \"\"\n for (let c of words)\n Math.random()