29:null 2a:["$","title",null,{"children":"Hyperbolic Paraboloid Audio Saddle Visualizer | dduyg | Observable"}] 2f:T103b,controlsPanel = { const container = html`

`; const grid = container.querySelector(".controls-grid"); const playBtn = html``; const pauseBtn = html``; grid.append(playBtn, pauseBtn); const AudioContext = window.AudioContext || window.webkitAudioContext; const ctx = new AudioContext(); const audio = new Audio(); audio.src = "https://cdn.jsdelivr.net/gh/dduyg/LiminalLoop@shelf/0-6/stream/S%CC%A7ebnem%20Ferah-Sigara.mp3"; audio.crossOrigin = "anonymous"; const source = ctx.createMediaElementSource(audio); const analyser = ctx.createAnalyser(); analyser.fftSize = 256; const dataArray = new Uint8Array(analyser.frequencyBinCount); source.connect(analyser); analyser.connect(ctx.destination); playBtn.onclick = () => { if (ctx.state === "suspended") ctx.resume(); audio.play(); }; pauseBtn.onclick = () => { audio.pause(); }; container.analyser = analyser; container.dataArray = dataArray; container.audio = audio; return container; }30:T1a31,graph = { const aspect = 0.7; const height = width * aspect; const scene = new THREE.Scene(); const pi = Math.PI; const matmatsurface = options.surface; const matSolidLine = options.line; var centerHelper = new THREE.Group(); var gridHelper = new THREE.Group(); let xScale = d3.scaleLinear([0, 1], domain.x); let yScale = d3.scaleLinear([0, 1], domain.y); let xRes = 10 * 10 + 1; let yRes = 10 * 10 + 1; let surfaceGeo = new THREE.Geometry(); for (let i = 0; i < yRes; i++) { for (let j = 0; j < xRes; j++) { surfaceGeo.vertices.push( new THREE.Vector3(yScale(i / (yRes - 1)), 0, xScale(j / (xRes - 1))) ); } } let diagonal; let centerPoint = [0, 0, 0]; for (let i = 0; i < xRes - 1; i++) { for (let j = 0; j < yRes - 1; j++) { diagonal = true == ((xScale((i + 1) / xRes) < centerPoint[0] && yScale((j + 1) / yRes) < centerPoint[1]) || (xScale((i + 1) / xRes) > centerPoint[0] && yScale((j + 1) / yRes) > centerPoint[1])); if (diagonal) { surfaceGeo.faces.push( new THREE.Face3(i + j * xRes, i + 1 + j * xRes, i + (j + 1) * xRes), new THREE.Face3( i + 1 + j * xRes, i + 1 + (j + 1) * xRes, i + (j + 1) * xRes ) ); } else { surfaceGeo.faces.push( new THREE.Face3( i + j * xRes, i + 1 + j * xRes, i + 1 + (j + 1) * xRes ), new THREE.Face3( i + j * xRes, i + 1 + (j + 1) * xRes, i + (j + 1) * xRes ) ); } } } surfaceGeo.computeFaceNormals(); let surfaceMesh = new THREE.Mesh(surfaceGeo, matmatsurface); let gridList = []; let ticks = domain.ticks; for (let i = 0; i < ticks; i++) { let xGeo = new THREE.Geometry(); let yGeo = new THREE.Geometry(); for (let j = 0; j < yRes; j++) { xGeo.vertices.push( new THREE.Vector3(yScale(j / (yRes - 1)), 0, xScale(i / (ticks - 1))) ); } for (let j = 0; j < xRes; j++) { yGeo.vertices.push( new THREE.Vector3(yScale(i / (ticks - 1)), 0, xScale(j / (xRes - 1))) ); } const xLine = new THREE.Line(xGeo, matSolidLine); const yLine = new THREE.Line(yGeo, matSolidLine); gridList.push(xLine, yLine); gridHelper.add(xLine, yLine); } gridHelper.position.set(0, 0.0005 * Math.abs(domain.z[0] - domain.z[1]), 0); centerHelper.add(surfaceMesh); centerHelper.add(gridHelper); scene.add(centerHelper); centerHelper.scale.set( 2 / Math.abs(domain.y[0] - domain.y[1]), 2 / Math.abs(domain.z[0] - domain.z[1]), 2 / Math.abs(domain.x[0] - domain.x[1]) ); let xMove = -(domain.x[0] + domain.x[1]) / Math.abs(domain.x[0] - domain.x[1]); let yMove = -(domain.y[0] + domain.y[1]) / Math.abs(domain.y[0] - domain.y[1]); let zMove = -(domain.z[0] + domain.z[1]) / Math.abs(domain.z[0] - domain.z[1]); const basePos = new THREE.Vector3(yMove, zMove, xMove); centerHelper.position.copy(basePos); const camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000); camera.position.set(-2.0, 1.75, 2.0); camera.lookAt(0, 0, 0); const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); renderer.setClearColor(0x000000, 0); renderer.setSize(width, height); const controls = new THREE.OrbitControls(camera, renderer.domElement); controls.enableZoom = false; controls.enablePan = false; controls.enableRotate = true; const hemiLight = new THREE.HemisphereLight(0xffffff, 0xffffff, 0.9); hemiLight.color.setHSL(0.6, 0.6, 0.5); hemiLight.groundColor.setHSL(0.095, 0.5, 0.75); hemiLight.position.set(0, 50, 0); scene.add(hemiLight); const dirLight1 = new THREE.DirectionalLight(0xffffff, 0.65); dirLight1.color.setHSL(0.8 / 6, 0.7, 0.5); dirLight1.position.set(Math.sin((1.5 / 3) * pi), 2, Math.cos((2 / 3) * pi)); dirLight1.position.multiplyScalar(50); scene.add(dirLight1); const dirLight2 = new THREE.DirectionalLight(0xffffff, 0.5); dirLight2.color.setHSL(3 / 6, 0.2, 0.5); dirLight2.position.set(Math.sin((3.5 / 3) * pi), 1, Math.cos((4 / 3) * pi)); dirLight2.position.multiplyScalar(50); scene.add(dirLight2); const dirLightBottom = new THREE.DirectionalLight(0xffffff, 0.6); dirLightBottom.position.set(0, -20, 0); scene.add(dirLightBottom); let t = 0; let lastTime = new Date().getTime() / 1000; let xpos, ypos, zpos, transformList; function savePoints(mesh) { mesh.savedPoints = mesh.geometry.clone(); } savePoints(surfaceMesh); for (let i = 0; i < gridList.length; i++) { savePoints(gridList[i]); } function updateSurface(mesh, intensity) { const count = mesh.geometry.vertices.length; for (let i = 0; i < count; i++) { xpos = mesh.savedPoints.vertices[i].x; ypos = mesh.savedPoints.vertices[i].z; zpos = f(xpos, ypos, t, intensity); transformList = transform(xpos, ypos, zpos, t); mesh.geometry.vertices[i].x = transformList[0]; mesh.geometry.vertices[i].z = transformList[1]; mesh.geometry.vertices[i].y = transformList[2]; } mesh.geometry.computeVertexNormals(); mesh.geometry.verticesNeedUpdate = true; } renderer.domElement.update = function render() { const currentTime = new Date().getTime() / 1000; const deltaTime = currentTime - lastTime; lastTime = currentTime; let intensity = 0; let isPlaying = false; if (controlsPanel && controlsPanel.analyser && controlsPanel.audio) { if (!controlsPanel.audio.paused && !controlsPanel.audio.ended) { isPlaying = true; t += deltaTime; controlsPanel.analyser.getByteFrequencyData(controlsPanel.dataArray); let sum = 0; for (let i = 0; i < controlsPanel.dataArray.length; i++) { sum += controlsPanel.dataArray[i]; } intensity = sum / controlsPanel.dataArray.length / 255; } } centerHelper.rotation.y = t * 0.2; let jumpOffset = intensity * 0.3; centerHelper.position.set( basePos.x + Math.sin(t * 5) * jumpOffset, basePos.y + Math.abs(Math.cos(t * 7)) * jumpOffset, basePos.z + Math.cos(t * 3) * jumpOffset ); updateSurface(surfaceMesh, intensity); for (let i = 0; i < gridList.length; i++) { updateSurface(gridList[i], intensity); } renderer.render(scene, camera); return "update render externally"; }; const wrapper = html`

${renderer.domElement}

`; wrapper.update = renderer.domElement.update; return wrapper; }31:T57b,function f(x, y, t, intensity) { // Parabolic equation forces vertices higher as they get farther from the center (0,0) let bowlCurvature = (x ** 2 + y ** 2) * 0.5; // Scale the wave amplitudes based on live audio track volume let audioMultiplier = 1.0 + intensity * 1.8; // inward ripple wave (Original formulation) let phase1 = (0.5 + 0.5 * Math.sin(t / 15 + 0 * Math.PI + 0.5 * Math.sqrt(x ** 2 + y ** 2))) ** 2; let rippleWave = Math.cos(2 * t + 25 * Math.sqrt(0.2 + x ** 2 + y ** 2)); // outward spiral wave (Original formulation) let phase2 = (0.5 + 0.5 * Math.sin(t / 15 + 0.75 * Math.PI - 0.5 * Math.sqrt(x ** 2 + y ** 2))) ** 2; let spiralWave = (Math.cos( -2 * t + 18 * Math.sqrt(0.2 + x ** 2 + y ** 2) - 2 * Math.atan((x + 0.001) / y) ) * (x ** 2 + y ** 2)) / (x ** 2 + y ** 2 + 0.03) + 1 - (x ** 2 + y ** 2) / (x ** 2 + y ** 2 + 0.03); // chaotic inverse wave (Original formulation) let phase3 = Math.max(0, 1 - phase1 - phase2); let inverseWave = Math.sin( (20 * (x * y)) / Math.sqrt(1 + x ** 2 + y ** 2) - t ); let waveHeight = 0.13 * phase1 * rippleWave + 0.15 * phase2 * spiralWave + 0.2 * phase3 * inverseWave; // Return the combined baseline bowl structure + audio modulated waves return bowlCurvature + waveHeight * audioMultiplier; }32:[] 2d:{"id":"7d82546e33021d5a","slug":"hyperbolic-paraboloid-audio-visualizer","title":"Hyperbolic Paraboloid Audio Saddle Visualizer","thumbnail":"e5a5e46d31bf1353f411216c0ed527c0ead545ccc19da70df52c5b49e84f2b7f","access_level":"public","create_time":"$D2026-06-12T13:41:35.481Z","update_time":"$D2026-09-13T17:50:10.416Z","view_time":null,"first_public_time":"$D2026-06-12T13:41:35.481Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"1fa0c77b14fd90d0","login":"dduyg","name":"","avatar_url":"https://avatars-next.observableusercontent.com/8922701a2d973be0158565df96ce0b2fe9ffd55df053350d59973a811bac06af","tier":"starter_2024"},"version":112,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"248f116c85e550e3","login":"dduyg","name":"Duygu Dağdelen","avatar_url":"https://avatars-next.observableusercontent.com/ca098eb30fb37c129368c39d70e98a9a8444cfaa7496c72781905ac410af8cad","tier":null}],"members":[{"type":"team","id":"1fa0c77b14fd90d0","login":"dduyg","name":"","avatar_url":"https://avatars-next.observableusercontent.com/8922701a2d973be0158565df96ce0b2fe9ffd55df053350d59973a811bac06af","tier":"starter_2024","role":"editor"},{"type":"individual","id":"248f116c85e550e3","login":"dduyg","name":"Duygu Dağdelen","avatar_url":"https://avatars-next.observableusercontent.com/ca098eb30fb37c129368c39d70e98a9a8444cfaa7496c72781905ac410af8cad","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Hyperbolic Paraboloid Audio Saddle Visualizer","cells":[{"id":0,"value":"# Hyperbolic Paraboloid Audio Saddle Visualizer\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"

\n\n### /dependencies","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"domain = ({ x: [-1, 1], y: [-1, 1], z: [-1, 1], ticks: 5 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"function transform(x, y, z, t) {\n let tx = 1 * x + 0 * y + 0 * z;\n let ty = 0 * x + 1 * y + 0 * z;\n let tz = 0 * x + 0 * y + 1 * z;\n return [tx, ty, tz];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"options = ({\n surface: new THREE.MeshStandardMaterial({\n color: \"lightblue\",\n roughness: 0.5,\n metalness: 0.02,\n side: THREE.DoubleSide,\n wireframe: false\n }),\n\n line: new THREE.LineBasicMaterial({\n color: \"blue\",\n transparent: true,\n opacity: 0.15,\n depthwrite: false\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"{\n do {\n yield graph.update ? graph.update() : \"waiting…\";\n } while (true);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"THREE = {\n const THREE = (window.THREE = await require(\"three@0.96/build/three.min.js\"));\n await require(\"three@0.96/examples/js/controls/OrbitControls.js\").catch(\n () => {}\n );\n return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 2e:"$2d:body"