44:["$","title",null,{"children":"3D Draggable Audio Heads | Jacob Ritchie | Observable"}] 4c:Ta70,{ vidya; audya; var video = document.getElementById('video'); var initial_coords = [0,0] //https://stackoverflow.com/questions/38655964/how-to-remove-dragghost-image# document.addEventListener("dragstart", function( e ) { var img = new Image(); img.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs='; e.dataTransfer.setDragImage(img, 0, 0); initial_coords[0] = e.clientX - e.target.offsetLeft; initial_coords[1] = e.clientY - e.target.offsetTop; e.target.style.cursor = 'none' }, false); var drag_handler = function(e) { e.preventDefault(); if (e.clientX != 0) { // TODO - what is the appropriate transformation from e.clientX, e.clientY to the corner of the image? e.target.style.left = e.clientX - initial_coords[0] + "px"; e.target.style.top = e.clientY - initial_coords[1] + "px"; //console.log(this.id); //TODO: fix disgusting hack document.getElementById("add-room").style.left = e.clientX - initial_coords[0] + 105 + "px"; document.getElementById("add-room").style.top = e.clientY - initial_coords[1] - 85 + "px"; var room_coords = [350,500] var target_coords = [+e.target.style.left.slice(0,-2) + 50, +e.target.style.top.slice(0,-2) + 50] let name = this.id; if (Math.sqrt((room_coords[0] - target_coords[0])**2 + (room_coords[1] - target_coords[1])**2) > 150) { document.querySelector("#"+name+"-room").textContent = name+" is not in a room." room[name] = 0; } else { document.querySelector("#"+name+"-room").textContent = name+" is in room 1." room[name] = 1; } if (room["video"] == room["oscar"]) { document.getElementById("oscar_noise").volume = 1.0; } else { document.getElementById("oscar_noise").volume = 0.0; } if (room["video"] == room["brent"]) { document.getElementById("brent_noise").volume = 1.0; } else { document.getElementById("brent_noise").volume = 0.0; } } } video.addEventListener("drag", drag_handler); document.getElementById('oscar').addEventListener("drag", drag_handler); document.getElementById('brent').addEventListener("drag", drag_handler); document.getElementById('add-room').addEventListener("click", function () {document.getElementById("room-1").style.visibility = "visible"}); document.addEventListener('dragover', function(e) { e.preventDefault(); return false; }); }4d:[{"id":"12aa97d6e76bcec79fd6f136a7fbc65722ea00d86abae2966b96c2969df9568f8083c9077a42d991e1548d25337b533f4659683bc25ed3477642dfe1ec1f6027","href":"https://static.observableusercontent.com/files/12aa97d6e76bcec79fd6f136a7fbc65722ea00d86abae2966b96c2969df9568f8083c9077a42d991e1548d25337b533f4659683bc25ed3477642dfe1ec1f6027","name":"oscar.mp3","type":"audio/mpeg","lastModified":1597887325319.701,"size":3059598},{"id":"7c71054e481b3aad3b5ea72b5bc573a8213a480332be353dd4f763e2367014c6d5a060c5837ae6108ac28ab6edc1bec90628cdc5800ce24068ca3e9001e6764b","href":"https://static.observableusercontent.com/files/7c71054e481b3aad3b5ea72b5bc573a8213a480332be353dd4f763e2367014c6d5a060c5837ae6108ac28ab6edc1bec90628cdc5800ce24068ca3e9001e6764b","name":"brent.mp3","type":"audio/mpeg","lastModified":1597887325319.701,"size":3942746},{"id":"c9c05e83b6bf18a1d9a8ddacd60c8b5278fed493b20aea8e19f54958bf26dd3bfefa6e970b30f70dd3e20f0fc45ebf7a946d47842f78236cfbdb955eee5b1b3d","href":"https://static.observableusercontent.com/files/c9c05e83b6bf18a1d9a8ddacd60c8b5278fed493b20aea8e19f54958bf26dd3bfefa6e970b30f70dd3e20f0fc45ebf7a946d47842f78236cfbdb955eee5b1b3d","name":"oscar.png","type":"image/png","lastModified":1597887325319.701,"size":471272},{"id":"1220c3e64076c0f50fda988bf3e41e1d760227347e91829ecba32d47daacf4db7bfada30058fd433557ab730594818b655f5a5dc4cf65291878917d393b9d2a8","href":"https://static.observableusercontent.com/files/1220c3e64076c0f50fda988bf3e41e1d760227347e91829ecba32d47daacf4db7bfada30058fd433557ab730594818b655f5a5dc4cf65291878917d393b9d2a8","name":"butt.png","type":"image/png","lastModified":1597887325319.701,"size":444178}] 48:{"id":"006869c6616b0528","slug":"3d-draggable-audio-heads","title":"3D Draggable Audio Heads","thumbnail":null,"access_level":"public","create_time":"$D2020-08-20T01:35:25.319Z","update_time":"$D2020-08-20T20:31:07.345Z","view_time":null,"first_public_time":"$D2020-08-20T04:00:10.809Z","has_unpublished_edits":null,"fork":{"id":"4d3edbbbf27ebbc2","slug":"untitled","title":"Draggable Audio Heads","owner":{"id":"d5e404bcd9c0e3ce","login":"jritch","name":"Jacob Ritchie"}},"stars":0,"starred":false,"owner":{"type":"team","id":"d5e404bcd9c0e3ce","login":"jritch","name":"Jacob Ritchie","avatar_url":"https://avatars-next.observableusercontent.com/cc9a01ea0b8139bd823eb34c2bd92861dadd005871add59849d9c018d6f16253","tier":"starter_2024","bio":"","following":false},"version":416,"publish_version":416,"role":null,"authored":false,"authors":[{"type":"individual","id":"02becc903fe8438d","login":"jritch","name":"Jacob Ritchie","avatar_url":"https://avatars-next.observableusercontent.com/cc9a01ea0b8139bd823eb34c2bd92861dadd005871add59849d9c018d6f16253","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"02becc903fe8438d","login":"jritch","name":"Jacob Ritchie","avatar_url":"https://avatars-next.observableusercontent.com/cc9a01ea0b8139bd823eb34c2bd92861dadd005871add59849d9c018d6f16253","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"3D Draggable Audio Heads","cells":[{"id":201,"value":"md`# 3D Draggable Audio Heads`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"vidya = html`

Drag Me!!!!!

Get closer to either Brent or Oscar to listen in on their conversation.

\n

video is not in a room

oscar is not in a room

brent is not in a room

\n\n

\n\n\n

\n\n

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"{\nvidya;\nvar video = document.getElementById('video').firstChild;\n\nif(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {\n navigator.mediaDevices.getUserMedia({ video: true, audio: false }).then(function(stream) {\n video.srcObject = stream;\n video.play();\n });\n}\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"audya = html`\n

\n\n

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":394,"value":"{\nvar audioCtx = new (window.AudioContext || window.webkitAudioContext)();\nvar myAudio = document.querySelector('#oscar_noise');\nvar source = audioCtx.createMediaElementSource(myAudio);\nsource.crossOrigin = \"anonymous\";\n\nvar analyser = audioCtx.createAnalyser();\n \nanalyser.fftSize = 2048;\nvar bufferLength = analyser.frequencyBinCount;\nvar dataArray = new Float32Array(bufferLength);\nanalyser.getFloatTimeDomainData(dataArray);\n\nconsole.log(dataArray)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"{\naudya;\ndocument.getElementById(\"oscar_noise\").play();\ndocument.getElementById(\"brent_noise\").play();\n\ndocument.getElementById(\"oscar_noise\").volume = 1.0//100 / 900;\ndocument.getElementById(\"brent_noise\").volume = 1.0//(900 - 100) / 900;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"my_css = html`\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"room = Object({video:0, brent:0, oscar:0})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"$4c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"1"}} 24:null