From f2383fbd2fa24d53b6f4742244dcef0d2fe77111 Mon Sep 17 00:00:00 2001 From: Denis Thiessen Date: Sat, 8 Jun 2024 17:11:25 +0200 Subject: [PATCH] fix: Made MBS work again... --- src/components/ScrollableTab.jsx | 26 ++++-------- src/core/audio/AudioHandler.jsx | 71 ++++++++++++++++++++++++++------ 2 files changed, 66 insertions(+), 31 deletions(-) diff --git a/src/components/ScrollableTab.jsx b/src/components/ScrollableTab.jsx index 0afe691..20ce584 100644 --- a/src/components/ScrollableTab.jsx +++ b/src/components/ScrollableTab.jsx @@ -9,14 +9,15 @@ import { } from "../core/audio/AudioHandler"; import { Divider } from "@geist-ui/core"; -var amountTabs = 0; var reachedEndValue = false; var rightSideEnd = true; -var endElement = amountTabs; +var endElement = 0; var type = ""; function ScrollableTab({ onActiveTabChange, sonificationType, children }) { const [activeTab, setActiveTab] = useState(0); + const [amountTabs, setAmountTabs] = useState(children.length); + endElement = amountTabs; type = sonificationType; const saveMouseLog = function () { @@ -41,17 +42,6 @@ function ScrollableTab({ onActiveTabChange, sonificationType, children }) { onActiveTabChange(index); }; - /* - const onTabClick = (index, type, action) => { - if (type === "button" && action) { - action(); - } else if (type === "modal") { - setModalVisible(true); - } - setActiveTab(index); -}; -*/ - const onHoverElement = () => {}; const onHoverTab = (key) => { @@ -69,13 +59,13 @@ function ScrollableTab({ onActiveTabChange, sonificationType, children }) { } if (type === "model") { - playTabModelSonification(); + playTabModelSonification(panVal, frequencyVal, false); } else if (type === "earcon") { playTabEarconSonification(); } if (reachedEndValue && endValueVisible) { - //this.playChordEndSound(); + playTabModelSonification(panVal, frequencyVal, true); if (rightSideEnd) { endElement = 1; rightSideEnd = false; @@ -107,16 +97,14 @@ function ScrollableTab({ onActiveTabChange, sonificationType, children }) { //var keys = Array.from({ length: amountTabs }, (_, i) => i + 1); // onFocus as an additional thingy? var tabId = 0; - amountTabs = children.length; - endElement = amountTabs; var tabs = children.map((k) => { tabId += 1; return ( onHoverTab(k)} - onMouseOver={() => onHoverTab(k)} + onTouchStart={() => onHoverTab(tabId)} + onMouseOver={() => onHoverTab(tabId)} key={tabId} actionType={k.props.actionType} redirectLoc={k.props.redirectLoc} diff --git a/src/core/audio/AudioHandler.jsx b/src/core/audio/AudioHandler.jsx index 9ca3cb3..c1c1bec 100644 --- a/src/core/audio/AudioHandler.jsx +++ b/src/core/audio/AudioHandler.jsx @@ -20,6 +20,29 @@ const setRotationRamp = (panner, angle, rampTime) => { var offCooldown = true; +const playChordEndSound = function () { + if (offCooldown) { + const synth = drumSynth.toDestination(); + + var loop = new Tone.Loop((time) => { + synth.triggerAttackRelease("C3", "4n", time); + }, "4n").start(); + loop.iterations = 1; + + var loop2 = new Tone.Loop((time) => { + synth.triggerAttackRelease("D3", "12n", time + 0.3); + }, "12n").start(); + loop2.iterations = 2; + synth.context.resume(); + Tone.Transport.start(); + offCooldown = false; + setTimeout(() => { + offCooldown = true; + }, 500); + } +}; + +// Maybe also dat... export function playTabEarconSonification() { if (offCooldown) { var loop = new Tone.Loop((time) => { @@ -27,7 +50,6 @@ export function playTabEarconSonification() { }, "4n"); loop.iterations = 2; loop.start(); - drumSynth.context.resume(); Tone.Transport.start(); pushToSonificationLog("tab_earcon"); offCooldown = false; @@ -37,14 +59,32 @@ export function playTabEarconSonification() { } } -export function playTabModelSonification() { +export function playTabModelSonification(pannerVal, frequencyVal, endReached) { + + if(endReached) { + playChordEndSound(); + return; + } + if (offCooldown) { + const frequencyString = frequencyVal + "n"; + const panner = new Tone.Panner3D({ + panningModel: "HRTF", + positionX: 1000, + positionY: 1000, + positionZ: 0, + }); + const synth = drumSynth.toDestination().connect(panner); + Tone.Listener.positionX.value = pannerVal * 5.0; + Tone.Listener.positionZ.value = 5.0; var loop = new Tone.Loop((time) => { - drumSynth.triggerAttackRelease("C3", "4n", time); - }, "4n"); + synth.triggerAttackRelease("C3", frequencyString, time); + }, frequencyString).start(); loop.iterations = 2; - loop.start(); - drumSynth.context.resume(); + + if (frequencyVal > 12) { + loop.iterations = 3; + } Tone.Transport.start(); pushToSonificationLog("tab_model"); offCooldown = false; @@ -54,6 +94,7 @@ export function playTabModelSonification() { } } +// Menu Sonification Paper. :) export function playDetailEarconSonification(textDensity, linkDensity) { if (offCooldown) { var loop = new Tone.Loop((time) => { @@ -73,12 +114,18 @@ export function playDetailEarconSonification(textDensity, linkDensity) { export function playDetailModelSonification(textDensity, linkDensity) { if (offCooldown) { - var loop = new Tone.Loop((time) => { - drumSynth.triggerAttackRelease("C3", "4n", time); - }, "4n"); - loop.iterations = 2; - loop.start(); - drumSynth.context.resume(); + const synth = drumSynth.toDestination(); + + const textDensityFrequencyString = 2 * textDensity + "n"; + var loop2 = new Tone.Loop((time) => { + synth.triggerAttackRelease("C3", textDensityFrequencyString, time); + synth.triggerAttackRelease( + "C3", + textDensityFrequencyString, + time + (0.1 + 0.8 / textDensity) + ); + }, "4n").start(); + loop2.iterations = (linkDensity - 1) / 2 + 1; Tone.Transport.start(); pushToSonificationLog("detail_model"); offCooldown = false;