From 5ca9afa9e804d3189fd524a61d42299e4df9f2fe Mon Sep 17 00:00:00 2001 From: "Jade (Rose) Rowland" Date: Mon, 15 Apr 2024 19:53:12 -0400 Subject: [PATCH 01/17] restored --- website/src/components/Udels/UdelFrame.jsx | 33 ++++++ website/src/components/Udels/Udels.jsx | 115 +++++++++++++++++++++ website/src/layouts/MainLayout.astro | 2 +- website/src/pages/index.astro | 4 +- website/src/pages/udels/index.astro | 12 +++ website/src/repl/Repl.jsx | 7 +- website/src/repl/panel/PatternsTab.jsx | 4 +- website/src/repl/panel/SettingsTab.jsx | 8 +- website/src/repl/util.mjs | 4 + website/src/settings.mjs | 9 +- 10 files changed, 185 insertions(+), 13 deletions(-) create mode 100644 website/src/components/Udels/UdelFrame.jsx create mode 100644 website/src/components/Udels/Udels.jsx create mode 100644 website/src/pages/udels/index.astro diff --git a/website/src/components/Udels/UdelFrame.jsx b/website/src/components/Udels/UdelFrame.jsx new file mode 100644 index 00000000..78d28944 --- /dev/null +++ b/website/src/components/Udels/UdelFrame.jsx @@ -0,0 +1,33 @@ +import { useRef } from 'react'; + +export function UdelFrame({ onEvaluate, hash, instance }) { + const ref = useRef(); + + window.addEventListener('message', (message) => { + const childWindow = ref?.current?.contentWindow; + if (message == null || message.source !== childWindow) { + return; // Skip message in this event listener + } + onEvaluate(message.data); + }); + + const url = new URL(window.location.origin); + url.hash = hash; + url.searchParams.append('instance', instance); + const source = url.toString(); + + return ( + + ); +} diff --git a/website/src/components/Udels/Udels.jsx b/website/src/components/Udels/Udels.jsx new file mode 100644 index 00000000..b2d81ea9 --- /dev/null +++ b/website/src/components/Udels/Udels.jsx @@ -0,0 +1,115 @@ +import { code2hash } from '@strudel/core'; + +import { UdelFrame } from './UdelFrame'; +import { useState } from 'react'; + +function NumberInput({ value, onChange, label = '', min, max }) { + const [localState, setLocalState] = useState(value); + const [isFocused, setIsFocused] = useState(false); + + return ( + + ); +} +const defaultHash = 'c3RhY2soCiAgCik%3D'; + +const getHashesFromUrl = () => { + return window.location.hash?.slice(1).split(','); +}; +const updateURLHashes = (hashes) => { + const newHash = '#' + hashes.join(','); + window.location.hash = newHash; +}; +export function Udels() { + const hashes = getHashesFromUrl(); + + const [numWindows, setNumWindows] = useState(hashes?.length ?? 1); + const numWindowsOnChange = (num) => { + setNumWindows(num); + const hashes = getHashesFromUrl(); + const newHashes = []; + for (let i = 0; i < num; i++) { + newHashes[i] = hashes[i] ?? defaultHash; + } + updateURLHashes(newHashes); + }; + + const onEvaluate = (key, code) => { + const hashes = getHashesFromUrl(); + hashes[key] = code2hash(code); + updateURLHashes(hashes); + }; + // useEffect(() => { + // prebake(); + // }, []); + + return ( +
+
+ +
+
+ {hashes.map((hash, key) => { + return ( + { + onEvaluate(key, code); + }} + hash={hash} + key={key} + /> + ); + })} +
+ {/* */} +
+ ); +} diff --git a/website/src/layouts/MainLayout.astro b/website/src/layouts/MainLayout.astro index 49952a7e..c6f6653c 100644 --- a/website/src/layouts/MainLayout.astro +++ b/website/src/layouts/MainLayout.astro @@ -30,7 +30,7 @@ const githubEditUrl = `${CONFIG.GITHUB_EDIT_URL}/${currentFile}`; - +
diff --git a/website/src/pages/index.astro b/website/src/pages/index.astro index 760cf448..29cf2fad 100644 --- a/website/src/pages/index.astro +++ b/website/src/pages/index.astro @@ -3,12 +3,12 @@ import HeadCommon from '../components/HeadCommon.astro'; import { Repl } from '../repl/Repl'; --- - + Strudel REPL - + diff --git a/website/src/pages/udels/index.astro b/website/src/pages/udels/index.astro new file mode 100644 index 00000000..4ab699e7 --- /dev/null +++ b/website/src/pages/udels/index.astro @@ -0,0 +1,12 @@ +--- +import { Udels } from '../../components/Udels/Udels.jsx'; + + +const { BASE_URL } = import.meta.env; +const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL; +--- + + + + + \ No newline at end of file diff --git a/website/src/repl/Repl.jsx b/website/src/repl/Repl.jsx index 9c472eb4..0c1ad91d 100644 --- a/website/src/repl/Repl.jsx +++ b/website/src/repl/Repl.jsx @@ -34,7 +34,7 @@ import Loader from './Loader'; import { Panel } from './panel/Panel'; import { useStore } from '@nanostores/react'; import { prebake } from './prebake.mjs'; -import { getRandomTune, initCode, loadModules, shareCode, ReplContext } from './util.mjs'; +import { getRandomTune, initCode, loadModules, shareCode, ReplContext, isUdels } from './util.mjs'; import PlayCircleIcon from '@heroicons/react/20/solid/PlayCircleIcon'; import './Repl.css'; import { setInterval, clearInterval } from 'worker-timers'; @@ -221,6 +221,7 @@ export function Repl({ embedded = false }) { handleEvaluate, }; + const showPanel = !isEmbedded || isUdels(); return (
@@ -246,12 +247,12 @@ export function Repl({ embedded = false }) { } }} > - {panelPosition === 'right' && !isEmbedded && } + {panelPosition === 'right' && showPanel && }
{error && (
{error.message || 'Unknown Error :-/'}
)} - {panelPosition === 'bottom' && !isEmbedded && } + {panelPosition === 'bottom' && showPanel && }
); diff --git a/website/src/repl/panel/PatternsTab.jsx b/website/src/repl/panel/PatternsTab.jsx index f6499d79..cacbe897 100644 --- a/website/src/repl/panel/PatternsTab.jsx +++ b/website/src/repl/panel/PatternsTab.jsx @@ -9,7 +9,7 @@ import { import { useMemo } from 'react'; import { getMetadata } from '../../metadata_parser'; import { useExamplePatterns } from '../useExamplePatterns'; -import { parseJSON } from '../util.mjs'; +import { parseJSON, isUdels } from '../util.mjs'; import { ButtonGroup } from './Forms.jsx'; import { settingsMap, useSettings } from '../../settings.mjs'; @@ -99,7 +99,7 @@ export function PatternsTab({ context }) { }; const viewingPatternID = viewingPatternData?.id; - const autoResetPatternOnChange = !window.parent?.location.pathname.includes('oodles'); + const autoResetPatternOnChange = !isUdels(); return (
diff --git a/website/src/repl/panel/SettingsTab.jsx b/website/src/repl/panel/SettingsTab.jsx index ae290189..36ec12bd 100644 --- a/website/src/repl/panel/SettingsTab.jsx +++ b/website/src/repl/panel/SettingsTab.jsx @@ -1,12 +1,13 @@ import { defaultSettings, settingsMap, useSettings } from '../../settings.mjs'; import { themes } from '@strudel/codemirror'; +import { isUdels } from '../util.mjs'; import { ButtonGroup } from './Forms.jsx'; import { AudioDeviceSelector } from './AudioDeviceSelector.jsx'; -function Checkbox({ label, value, onChange }) { +function Checkbox({ label, value, onChange, disabled = false }) { return ( ); @@ -96,7 +97,7 @@ export function SettingsTab({ started }) { panelPosition, audioDeviceName, } = useSettings(); - + const shouldAlwaysSync = isUdels(); return (
{AudioContext.prototype.setSinkId != null && ( @@ -197,6 +198,7 @@ export function SettingsTab({ started }) { window.location.reload(); } }} + disabled={shouldAlwaysSync} value={isSyncEnabled} /> diff --git a/website/src/repl/util.mjs b/website/src/repl/util.mjs index 6dba7dab..67584760 100644 --- a/website/src/repl/util.mjs +++ b/website/src/repl/util.mjs @@ -132,6 +132,10 @@ export async function shareCode(codeToShare) { export const ReplContext = createContext(null); +export const isUdels = () => { + return window.parent?.location.pathname.includes('udels'); +}; + export const getAudioDevices = async () => { await navigator.mediaDevices.getUserMedia({ audio: true }); let mediaDevices = await navigator.mediaDevices.enumerateDevices(); diff --git a/website/src/settings.mjs b/website/src/settings.mjs index a70c4202..3f1ca051 100644 --- a/website/src/settings.mjs +++ b/website/src/settings.mjs @@ -1,6 +1,7 @@ import { persistentMap } from '@nanostores/persistent'; import { useStore } from '@nanostores/react'; import { register } from '@strudel/core'; +import { isUdels } from './repl/util.mjs'; export const defaultAudioDeviceName = 'System Standard'; @@ -28,8 +29,12 @@ export const defaultSettings = { userPatterns: '{}', audioDeviceName: defaultAudioDeviceName, }; +const search = new URLSearchParams(window.location.search); +// if running multiple instance in one window, it will use the settings for that instance. else default to normal +const instance = parseInt(search.get('instance') ?? '0'); +const settings_key = `strudel-settings${instance > 0 ? instance : ''}`; -export const settingsMap = persistentMap('strudel-settings', defaultSettings); +export const settingsMap = persistentMap(settings_key, defaultSettings); const parseBoolean = (booleanlike) => ([true, 'true'].includes(booleanlike) ? true : false); @@ -54,7 +59,7 @@ export function useSettings() { isTooltipEnabled: parseBoolean(state.isTooltipEnabled), isLineWrappingEnabled: parseBoolean(state.isLineWrappingEnabled), isFlashEnabled: parseBoolean(state.isFlashEnabled), - isSyncEnabled: parseBoolean(state.isSyncEnabled), + isSyncEnabled: isUdels() ? true : parseBoolean(state.isSyncEnabled), fontSize: Number(state.fontSize), panelPosition: state.activeFooter !== '' ? state.panelPosition : 'bottom', // <-- keep this 'bottom' where it is! userPatterns: userPatterns, From e62d5759e74a544a1d9e56e89b630a08fb825829 Mon Sep 17 00:00:00 2001 From: "Jade (Rose) Rowland" Date: Mon, 10 Jun 2024 00:00:43 -0400 Subject: [PATCH 02/17] revert --- packages/superdough/worklets.mjs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/superdough/worklets.mjs b/packages/superdough/worklets.mjs index b06513e7..62697ef9 100644 --- a/packages/superdough/worklets.mjs +++ b/packages/superdough/worklets.mjs @@ -463,4 +463,4 @@ class SuperSawOscillatorProcessor extends AudioWorkletProcessor { } } -registerProcessor('supersaw-oscillator', SuperSawOscillatorProcessor); +registerProcessor('supersaw-oscillator', SuperSawOscillatorProcessor); \ No newline at end of file From e6f3b1f1efca40727230bc1bec88f091094550af Mon Sep 17 00:00:00 2001 From: "Jade (Rose) Rowland" Date: Mon, 10 Jun 2024 00:06:35 -0400 Subject: [PATCH 03/17] copied files --- packages/superdough/ola-processor.js | 178 ++++++++++++++++++++++++++ packages/superdough/worklets.mjs | 180 ++++++++++++++++++++++++++- 2 files changed, 357 insertions(+), 1 deletion(-) create mode 100644 packages/superdough/ola-processor.js diff --git a/packages/superdough/ola-processor.js b/packages/superdough/ola-processor.js new file mode 100644 index 00000000..36ed95bd --- /dev/null +++ b/packages/superdough/ola-processor.js @@ -0,0 +1,178 @@ +"use strict"; + +const WEBAUDIO_BLOCK_SIZE = 128; + +/** Overlap-Add Node */ +class OLAProcessor extends AudioWorkletProcessor { + constructor(options) { + super(options); + + this.nbInputs = options.numberOfInputs; + this.nbOutputs = options.numberOfOutputs; + + this.blockSize = options.processorOptions.blockSize; + // TODO for now, the only support hop size is the size of a web audio block + this.hopSize = WEBAUDIO_BLOCK_SIZE; + + this.nbOverlaps = this.blockSize / this.hopSize; + + // pre-allocate input buffers (will be reallocated if needed) + this.inputBuffers = new Array(this.nbInputs); + this.inputBuffersHead = new Array(this.nbInputs); + this.inputBuffersToSend = new Array(this.nbInputs); + // default to 1 channel per input until we know more + for (let i = 0; i < this.nbInputs; i++) { + this.allocateInputChannels(i, 1); + } + // pre-allocate input buffers (will be reallocated if needed) + this.outputBuffers = new Array(this.nbOutputs); + this.outputBuffersToRetrieve = new Array(this.nbOutputs); + // default to 1 channel per output until we know more + for (let i = 0; i < this.nbOutputs; i++) { + this.allocateOutputChannels(i, 1); + } + } + + /** Handles dynamic reallocation of input/output channels buffer + (channel numbers may lety during lifecycle) **/ + reallocateChannelsIfNeeded(inputs, outputs) { + for (let i = 0; i < this.nbInputs; i++) { + let nbChannels = inputs[i].length; + if (nbChannels != this.inputBuffers[i].length) { + this.allocateInputChannels(i, nbChannels); + } + } + + for (let i = 0; i < this.nbOutputs; i++) { + let nbChannels = outputs[i].length; + if (nbChannels != this.outputBuffers[i].length) { + this.allocateOutputChannels(i, nbChannels); + } + } + } + + allocateInputChannels(inputIndex, nbChannels) { + // allocate input buffers + + this.inputBuffers[inputIndex] = new Array(nbChannels); + for (let i = 0; i < nbChannels; i++) { + this.inputBuffers[inputIndex][i] = new Float32Array(this.blockSize + WEBAUDIO_BLOCK_SIZE); + this.inputBuffers[inputIndex][i].fill(0); + } + + // allocate input buffers to send and head pointers to copy from + // (cannot directly send a pointer/subarray because input may be modified) + this.inputBuffersHead[inputIndex] = new Array(nbChannels); + this.inputBuffersToSend[inputIndex] = new Array(nbChannels); + for (let i = 0; i < nbChannels; i++) { + this.inputBuffersHead[inputIndex][i] = this.inputBuffers[inputIndex][i] .subarray(0, this.blockSize); + this.inputBuffersToSend[inputIndex][i] = new Float32Array(this.blockSize); + } + } + + allocateOutputChannels(outputIndex, nbChannels) { + // allocate output buffers + this.outputBuffers[outputIndex] = new Array(nbChannels); + for (let i = 0; i < nbChannels; i++) { + this.outputBuffers[outputIndex][i] = new Float32Array(this.blockSize); + this.outputBuffers[outputIndex][i].fill(0); + } + + // allocate output buffers to retrieve + // (cannot send a pointer/subarray because new output has to be add to exising output) + this.outputBuffersToRetrieve[outputIndex] = new Array(nbChannels); + for (let i = 0; i < nbChannels; i++) { + this.outputBuffersToRetrieve[outputIndex][i] = new Float32Array(this.blockSize); + this.outputBuffersToRetrieve[outputIndex][i].fill(0); + } + } + + /** Read next web audio block to input buffers **/ + readInputs(inputs) { + // when playback is paused, we may stop receiving new samples + if (inputs[0].length && inputs[0][0].length == 0) { + for (let i = 0; i < this.nbInputs; i++) { + for (let j = 0; j < this.inputBuffers[i].length; j++) { + this.inputBuffers[i][j].fill(0, this.blockSize); + } + } + return; + } + + for (let i = 0; i < this.nbInputs; i++) { + for (let j = 0; j < this.inputBuffers[i].length; j++) { + let webAudioBlock = inputs[i][j]; + this.inputBuffers[i][j].set(webAudioBlock, this.blockSize); + } + } + } + + /** Write next web audio block from output buffers **/ + writeOutputs(outputs) { + for (let i = 0; i < this.nbInputs; i++) { + for (let j = 0; j < this.inputBuffers[i].length; j++) { + let webAudioBlock = this.outputBuffers[i][j].subarray(0, WEBAUDIO_BLOCK_SIZE); + outputs[i][j].set(webAudioBlock); + } + } + } + + /** Shift left content of input buffers to receive new web audio block **/ + shiftInputBuffers() { + for (let i = 0; i < this.nbInputs; i++) { + for (let j = 0; j < this.inputBuffers[i].length; j++) { + this.inputBuffers[i][j].copyWithin(0, WEBAUDIO_BLOCK_SIZE); + } + } + } + + /** Shift left content of output buffers to receive new web audio block **/ + shiftOutputBuffers() { + for (let i = 0; i < this.nbOutputs; i++) { + for (let j = 0; j < this.outputBuffers[i].length; j++) { + this.outputBuffers[i][j].copyWithin(0, WEBAUDIO_BLOCK_SIZE); + this.outputBuffers[i][j].subarray(this.blockSize - WEBAUDIO_BLOCK_SIZE).fill(0); + } + } + } + + /** Copy contents of input buffers to buffer actually sent to process **/ + prepareInputBuffersToSend() { + for (let i = 0; i < this.nbInputs; i++) { + for (let j = 0; j < this.inputBuffers[i].length; j++) { + this.inputBuffersToSend[i][j].set(this.inputBuffersHead[i][j]); + } + } + } + + /** Add contents of output buffers just processed to output buffers **/ + handleOutputBuffersToRetrieve() { + for (let i = 0; i < this.nbOutputs; i++) { + for (let j = 0; j < this.outputBuffers[i].length; j++) { + for (let k = 0; k < this.blockSize; k++) { + this.outputBuffers[i][j][k] += this.outputBuffersToRetrieve[i][j][k] / this.nbOverlaps; + } + } + } + } + + process(inputs, outputs, params) { + this.reallocateChannelsIfNeeded(inputs, outputs); + + this.readInputs(inputs); + this.shiftInputBuffers(); + this.prepareInputBuffersToSend() + this.processOLA(this.inputBuffersToSend, this.outputBuffersToRetrieve, params); + this.handleOutputBuffersToRetrieve(); + this.writeOutputs(outputs); + this.shiftOutputBuffers(); + + return true; + } + + processOLA(inputs, outputs, params) { + console.assert(false, "Not overriden"); + } +} + +export default OLAProcessor; \ No newline at end of file diff --git a/packages/superdough/worklets.mjs b/packages/superdough/worklets.mjs index 62697ef9..3ecc987c 100644 --- a/packages/superdough/worklets.mjs +++ b/packages/superdough/worklets.mjs @@ -1,6 +1,10 @@ // coarse, crush, and shape processors adapted from dktr0's webdirt: https://github.com/dktr0/WebDirt/blob/5ce3d698362c54d6e1b68acc47eb2955ac62c793/dist/AudioWorklets.js // LICENSE GNU General Public License v3.0 see https://github.com/dktr0/WebDirt/blob/main/LICENSE // TOFIX: THIS FILE DOES NOT SUPPORT IMPORTS ON DEPOLYMENT + +import OLAProcessor from './ola-processor.js'; +import FFT from 'fft.js'; + const clamp = (num, min, max) => Math.min(Math.max(num, min), max); const _mod = (n, m) => ((n % m) + m) % m; @@ -463,4 +467,178 @@ class SuperSawOscillatorProcessor extends AudioWorkletProcessor { } } -registerProcessor('supersaw-oscillator', SuperSawOscillatorProcessor); \ No newline at end of file +registerProcessor('supersaw-oscillator', SuperSawOscillatorProcessor); + + + +const BUFFERED_BLOCK_SIZE = 2048; + +function genHannWindow(length) { + let win = new Float32Array(length); + for (var i = 0; i < length; i++) { + win[i] = 0.5 * (1 - Math.cos(2 * Math.PI * i / length)); + } + return win; +} + +class PhaseVocoderProcessor extends OLAProcessor { + static get parameterDescriptors() { + return [{ + name: 'pitchFactor', + defaultValue: 1.0 + }]; + } + + constructor(options) { + options.processorOptions = { + blockSize: BUFFERED_BLOCK_SIZE, + }; + super(options); + + this.fftSize = this.blockSize; + this.timeCursor = 0; + + this.hannWindow = genHannWindow(this.blockSize); + + // prepare FFT and pre-allocate buffers + this.fft = new FFT(this.fftSize); + this.freqComplexBuffer = this.fft.createComplexArray(); + this.freqComplexBufferShifted = this.fft.createComplexArray(); + this.timeComplexBuffer = this.fft.createComplexArray(); + this.magnitudes = new Float32Array(this.fftSize / 2 + 1); + this.peakIndexes = new Int32Array(this.magnitudes.length); + this.nbPeaks = 0; + } + + processOLA(inputs, outputs, parameters) { + // no automation, take last value + const pitchFactor = parameters.pitchFactor[parameters.pitchFactor.length - 1]; + + for (var i = 0; i < this.nbInputs; i++) { + for (var j = 0; j < inputs[i].length; j++) { + // big assumption here: output is symetric to input + var input = inputs[i][j]; + var output = outputs[i][j]; + + this.applyHannWindow(input); + + this.fft.realTransform(this.freqComplexBuffer, input); + + this.computeMagnitudes(); + this.findPeaks(); + this.shiftPeaks(pitchFactor); + + this.fft.completeSpectrum(this.freqComplexBufferShifted); + this.fft.inverseTransform(this.timeComplexBuffer, this.freqComplexBufferShifted); + this.fft.fromComplexArray(this.timeComplexBuffer, output); + + this.applyHannWindow(output); + } + } + + this.timeCursor += this.hopSize; + } + + /** Apply Hann window in-place */ + applyHannWindow(input) { + for (var i = 0; i < this.blockSize; i++) { + input[i] = input[i] * this.hannWindow[i]; + } + } + + /** Compute squared magnitudes for peak finding **/ + computeMagnitudes() { + var i = 0, j = 0; + while (i < this.magnitudes.length) { + let real = this.freqComplexBuffer[j]; + let imag = this.freqComplexBuffer[j + 1]; + // no need to sqrt for peak finding + this.magnitudes[i] = real ** 2 + imag ** 2; + i+=1; + j+=2; + } + } + + /** Find peaks in spectrum magnitudes **/ + findPeaks() { + this.nbPeaks = 0; + var i = 2; + let end = this.magnitudes.length - 2; + + while (i < end) { + let mag = this.magnitudes[i]; + + if (this.magnitudes[i - 1] >= mag || this.magnitudes[i - 2] >= mag) { + i++; + continue; + } + if (this.magnitudes[i + 1] >= mag || this.magnitudes[i + 2] >= mag) { + i++; + continue; + } + + this.peakIndexes[this.nbPeaks] = i; + this.nbPeaks++; + i += 2; + } + } + + /** Shift peaks and regions of influence by pitchFactor into new specturm */ + shiftPeaks(pitchFactor) { + // zero-fill new spectrum + this.freqComplexBufferShifted.fill(0); + + for (var i = 0; i < this.nbPeaks; i++) { + let peakIndex = this.peakIndexes[i]; + let peakIndexShifted = Math.round(peakIndex * pitchFactor); + + if (peakIndexShifted > this.magnitudes.length) { + break; + } + + // find region of influence + var startIndex = 0; + var endIndex = this.fftSize; + if (i > 0) { + let peakIndexBefore = this.peakIndexes[i - 1]; + startIndex = peakIndex - Math.floor((peakIndex - peakIndexBefore) / 2); + } + if (i < this.nbPeaks - 1) { + let peakIndexAfter = this.peakIndexes[i + 1]; + endIndex = peakIndex + Math.ceil((peakIndexAfter - peakIndex) / 2); + } + + // shift whole region of influence around peak to shifted peak + let startOffset = startIndex - peakIndex; + let endOffset = endIndex - peakIndex; + for (var j = startOffset; j < endOffset; j++) { + let binIndex = peakIndex + j; + let binIndexShifted = peakIndexShifted + j; + + if (binIndexShifted >= this.magnitudes.length) { + break; + } + + // apply phase correction + let omegaDelta = 2 * Math.PI * (binIndexShifted - binIndex) / this.fftSize; + let phaseShiftReal = Math.cos(omegaDelta * this.timeCursor); + let phaseShiftImag = Math.sin(omegaDelta * this.timeCursor); + + let indexReal = binIndex * 2; + let indexImag = indexReal + 1; + let valueReal = this.freqComplexBuffer[indexReal]; + let valueImag = this.freqComplexBuffer[indexImag]; + + let valueShiftedReal = valueReal * phaseShiftReal - valueImag * phaseShiftImag; + let valueShiftedImag = valueReal * phaseShiftImag + valueImag * phaseShiftReal; + + let indexShiftedReal = binIndexShifted * 2; + let indexShiftedImag = indexShiftedReal + 1; + this.freqComplexBufferShifted[indexShiftedReal] += valueShiftedReal; + this.freqComplexBufferShifted[indexShiftedImag] += valueShiftedImag; + } + } + } +} + +registerProcessor("phase-vocoder-processor", PhaseVocoderProcessor); \ No newline at end of file From 065b24a2ee8c9441678a74679406ccc7714b838f Mon Sep 17 00:00:00 2001 From: "Jade (Rose) Rowland" Date: Mon, 10 Jun 2024 23:51:38 -0400 Subject: [PATCH 04/17] working --- package.json | 1 + packages/core/controls.mjs | 15 + packages/superdough/fft.js | 516 +++++++++++++++++++++++++++ packages/superdough/ola-processor.js | 9 +- packages/superdough/package.json | 1 + packages/superdough/superdough.mjs | 3 + packages/superdough/worklets.mjs | 13 +- pnpm-lock.yaml | 33 ++ 8 files changed, 586 insertions(+), 5 deletions(-) create mode 100644 packages/superdough/fft.js diff --git a/package.json b/package.json index 8aefa102..e8bf591a 100644 --- a/package.json +++ b/package.json @@ -62,6 +62,7 @@ "eslint": "^8.56.0", "eslint-plugin-import": "^2.29.1", "events": "^3.3.0", + "fft-js": "^0.0.12", "jsdoc": "^4.0.2", "jsdoc-json": "^2.0.2", "jsdoc-to-markdown": "^8.0.0", diff --git a/packages/core/controls.mjs b/packages/core/controls.mjs index 94f46f44..e0f29eaf 100644 --- a/packages/core/controls.mjs +++ b/packages/core/controls.mjs @@ -1383,6 +1383,19 @@ export const { compressorRelease } = registerControl('compressorRelease'); * */ export const { speed } = registerControl('speed'); + +/** + * Changes the speed of sample playback, i.e. a cheap way of changing pitch. + * + * @name stretch + * @param {number | Pattern} factor -inf to inf, negative numbers play the sample backwards. + * @example + * s("bd*6").speed("1 2 4 1 -2 -4") + * @example + * speed("1 1.5*2 [2 1.1]").s("piano").clip(1) + * + */ +export const { stretch } = registerControl('stretch'); /** * Used in conjunction with `speed`, accepts values of "r" (rate, default behavior), "c" (cycles), or "s" (seconds). Using `unit "c"` means `speed` will be interpreted in units of cycles, e.g. `speed "1"` means samples will be stretched to fill a cycle. Using `unit "s"` means the playback speed will be adjusted so that the duration is the number of seconds specified by `speed`. * @@ -1393,6 +1406,8 @@ export const { speed } = registerControl('speed'); * @superdirtOnly * */ + + export const { unit } = registerControl('unit'); /** * Made by Calum Gunn. Reminiscent of some weird mixture of filter, ring-modulator and pitch-shifter. The SuperCollider manual defines Squiz as: diff --git a/packages/superdough/fft.js b/packages/superdough/fft.js new file mode 100644 index 00000000..0c478693 --- /dev/null +++ b/packages/superdough/fft.js @@ -0,0 +1,516 @@ +'use strict'; +// sourced from https://github.com/indutny/fft.js/ +// LICENSE +// This software is licensed under the MIT License. +// Copyright Fedor Indutny, 2017. +// Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: +// The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software +// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. + +export default class FFT { + constructor(size) { + this.size = size | 0; + if (this.size <= 1 || (this.size & (this.size - 1)) !== 0) + throw new Error('FFT size must be a power of two and bigger than 1'); + + this._csize = size << 1; + + // NOTE: Use of `var` is intentional for old V8 versions + var table = new Array(this.size * 2); + for (var i = 0; i < table.length; i += 2) { + const angle = Math.PI * i / this.size; + table[i] = Math.cos(angle); + table[i + 1] = -Math.sin(angle); + } + this.table = table; + + // Find size's power of two + var power = 0; + for (var t = 1; this.size > t; t <<= 1) + power++; + + // Calculate initial step's width: + // * If we are full radix-4 - it is 2x smaller to give inital len=8 + // * Otherwise it is the same as `power` to give len=4 + this._width = power % 2 === 0 ? power - 1 : power; + + // Pre-compute bit-reversal patterns + this._bitrev = new Array(1 << this._width); + for (var j = 0; j < this._bitrev.length; j++) { + this._bitrev[j] = 0; + for (var shift = 0; shift < this._width; shift += 2) { + var revShift = this._width - shift - 2; + this._bitrev[j] |= ((j >>> shift) & 3) << revShift; + } + } + + this._out = null; + this._data = null; + this._inv = 0; + } + fromComplexArray(complex, storage) { + var res = storage || new Array(complex.length >>> 1); + for (var i = 0; i < complex.length; i += 2) + res[i >>> 1] = complex[i]; + return res; + } + createComplexArray() { + const res = new Array(this._csize); + for (var i = 0; i < res.length; i++) + res[i] = 0; + return res; + } + toComplexArray(input, storage) { + var res = storage || this.createComplexArray(); + for (var i = 0; i < res.length; i += 2) { + res[i] = input[i >>> 1]; + res[i + 1] = 0; + } + return res; + } + completeSpectrum(spectrum) { + var size = this._csize; + var half = size >>> 1; + for (var i = 2; i < half; i += 2) { + spectrum[size - i] = spectrum[i]; + spectrum[size - i + 1] = -spectrum[i + 1]; + } + } + transform(out, data) { + if (out === data) + throw new Error('Input and output buffers must be different'); + + this._out = out; + this._data = data; + this._inv = 0; + this._transform4(); + this._out = null; + this._data = null; + } + realTransform(out, data) { + if (out === data) + throw new Error('Input and output buffers must be different'); + + this._out = out; + this._data = data; + this._inv = 0; + this._realTransform4(); + this._out = null; + this._data = null; + } + inverseTransform(out, data) { + if (out === data) + throw new Error('Input and output buffers must be different'); + + this._out = out; + this._data = data; + this._inv = 1; + this._transform4(); + for (var i = 0; i < out.length; i++) + out[i] /= this.size; + this._out = null; + this._data = null; + } + // radix-4 implementation + // + // NOTE: Uses of `var` are intentional for older V8 version that do not + // support both `let compound assignments` and `const phi` + _transform4() { + var out = this._out; + var size = this._csize; + + // Initial step (permute and transform) + var width = this._width; + var step = 1 << width; + var len = (size / step) << 1; + + var outOff; + var t; + var bitrev = this._bitrev; + if (len === 4) { + for (outOff = 0, t = 0; outOff < size; outOff += len, t++) { + const off = bitrev[t]; + this._singleTransform2(outOff, off, step); + } + } else { + // len === 8 + for (outOff = 0, t = 0; outOff < size; outOff += len, t++) { + const off = bitrev[t]; + this._singleTransform4(outOff, off, step); + } + } + + // Loop through steps in decreasing order + var inv = this._inv ? -1 : 1; + var table = this.table; + for (step >>= 2; step >= 2; step >>= 2) { + len = (size / step) << 1; + var quarterLen = len >>> 2; + + // Loop through offsets in the data + for (outOff = 0; outOff < size; outOff += len) { + // Full case + var limit = outOff + quarterLen; + for (var i = outOff, k = 0; i < limit; i += 2, k += step) { + const A = i; + const B = A + quarterLen; + const C = B + quarterLen; + const D = C + quarterLen; + + // Original values + const Ar = out[A]; + const Ai = out[A + 1]; + const Br = out[B]; + const Bi = out[B + 1]; + const Cr = out[C]; + const Ci = out[C + 1]; + const Dr = out[D]; + const Di = out[D + 1]; + + // Middle values + const MAr = Ar; + const MAi = Ai; + + const tableBr = table[k]; + const tableBi = inv * table[k + 1]; + const MBr = Br * tableBr - Bi * tableBi; + const MBi = Br * tableBi + Bi * tableBr; + + const tableCr = table[2 * k]; + const tableCi = inv * table[2 * k + 1]; + const MCr = Cr * tableCr - Ci * tableCi; + const MCi = Cr * tableCi + Ci * tableCr; + + const tableDr = table[3 * k]; + const tableDi = inv * table[3 * k + 1]; + const MDr = Dr * tableDr - Di * tableDi; + const MDi = Dr * tableDi + Di * tableDr; + + // Pre-Final values + const T0r = MAr + MCr; + const T0i = MAi + MCi; + const T1r = MAr - MCr; + const T1i = MAi - MCi; + const T2r = MBr + MDr; + const T2i = MBi + MDi; + const T3r = inv * (MBr - MDr); + const T3i = inv * (MBi - MDi); + + // Final values + const FAr = T0r + T2r; + const FAi = T0i + T2i; + + const FCr = T0r - T2r; + const FCi = T0i - T2i; + + const FBr = T1r + T3i; + const FBi = T1i - T3r; + + const FDr = T1r - T3i; + const FDi = T1i + T3r; + + out[A] = FAr; + out[A + 1] = FAi; + out[B] = FBr; + out[B + 1] = FBi; + out[C] = FCr; + out[C + 1] = FCi; + out[D] = FDr; + out[D + 1] = FDi; + } + } + } + } + // radix-2 implementation + // + // NOTE: Only called for len=4 + _singleTransform2(outOff, off, + step) { + const out = this._out; + const data = this._data; + + const evenR = data[off]; + const evenI = data[off + 1]; + const oddR = data[off + step]; + const oddI = data[off + step + 1]; + + const leftR = evenR + oddR; + const leftI = evenI + oddI; + const rightR = evenR - oddR; + const rightI = evenI - oddI; + + out[outOff] = leftR; + out[outOff + 1] = leftI; + out[outOff + 2] = rightR; + out[outOff + 3] = rightI; + } + // radix-4 + // + // NOTE: Only called for len=8 + _singleTransform4(outOff, off, + step) { + const out = this._out; + const data = this._data; + const inv = this._inv ? -1 : 1; + const step2 = step * 2; + const step3 = step * 3; + + // Original values + const Ar = data[off]; + const Ai = data[off + 1]; + const Br = data[off + step]; + const Bi = data[off + step + 1]; + const Cr = data[off + step2]; + const Ci = data[off + step2 + 1]; + const Dr = data[off + step3]; + const Di = data[off + step3 + 1]; + + // Pre-Final values + const T0r = Ar + Cr; + const T0i = Ai + Ci; + const T1r = Ar - Cr; + const T1i = Ai - Ci; + const T2r = Br + Dr; + const T2i = Bi + Di; + const T3r = inv * (Br - Dr); + const T3i = inv * (Bi - Di); + + // Final values + const FAr = T0r + T2r; + const FAi = T0i + T2i; + + const FBr = T1r + T3i; + const FBi = T1i - T3r; + + const FCr = T0r - T2r; + const FCi = T0i - T2i; + + const FDr = T1r - T3i; + const FDi = T1i + T3r; + + out[outOff] = FAr; + out[outOff + 1] = FAi; + out[outOff + 2] = FBr; + out[outOff + 3] = FBi; + out[outOff + 4] = FCr; + out[outOff + 5] = FCi; + out[outOff + 6] = FDr; + out[outOff + 7] = FDi; + } + // Real input radix-4 implementation + _realTransform4() { + var out = this._out; + var size = this._csize; + + // Initial step (permute and transform) + var width = this._width; + var step = 1 << width; + var len = (size / step) << 1; + + var outOff; + var t; + var bitrev = this._bitrev; + if (len === 4) { + for (outOff = 0, t = 0; outOff < size; outOff += len, t++) { + const off = bitrev[t]; + this._singleRealTransform2(outOff, off >>> 1, step >>> 1); + } + } else { + // len === 8 + for (outOff = 0, t = 0; outOff < size; outOff += len, t++) { + const off = bitrev[t]; + this._singleRealTransform4(outOff, off >>> 1, step >>> 1); + } + } + + // Loop through steps in decreasing order + var inv = this._inv ? -1 : 1; + var table = this.table; + for (step >>= 2; step >= 2; step >>= 2) { + len = (size / step) << 1; + var halfLen = len >>> 1; + var quarterLen = halfLen >>> 1; + var hquarterLen = quarterLen >>> 1; + + // Loop through offsets in the data + for (outOff = 0; outOff < size; outOff += len) { + for (var i = 0, k = 0; i <= hquarterLen; i += 2, k += step) { + var A = outOff + i; + var B = A + quarterLen; + var C = B + quarterLen; + var D = C + quarterLen; + + // Original values + var Ar = out[A]; + var Ai = out[A + 1]; + var Br = out[B]; + var Bi = out[B + 1]; + var Cr = out[C]; + var Ci = out[C + 1]; + var Dr = out[D]; + var Di = out[D + 1]; + + // Middle values + var MAr = Ar; + var MAi = Ai; + + var tableBr = table[k]; + var tableBi = inv * table[k + 1]; + var MBr = Br * tableBr - Bi * tableBi; + var MBi = Br * tableBi + Bi * tableBr; + + var tableCr = table[2 * k]; + var tableCi = inv * table[2 * k + 1]; + var MCr = Cr * tableCr - Ci * tableCi; + var MCi = Cr * tableCi + Ci * tableCr; + + var tableDr = table[3 * k]; + var tableDi = inv * table[3 * k + 1]; + var MDr = Dr * tableDr - Di * tableDi; + var MDi = Dr * tableDi + Di * tableDr; + + // Pre-Final values + var T0r = MAr + MCr; + var T0i = MAi + MCi; + var T1r = MAr - MCr; + var T1i = MAi - MCi; + var T2r = MBr + MDr; + var T2i = MBi + MDi; + var T3r = inv * (MBr - MDr); + var T3i = inv * (MBi - MDi); + + // Final values + var FAr = T0r + T2r; + var FAi = T0i + T2i; + + var FBr = T1r + T3i; + var FBi = T1i - T3r; + + out[A] = FAr; + out[A + 1] = FAi; + out[B] = FBr; + out[B + 1] = FBi; + + // Output final middle point + if (i === 0) { + var FCr = T0r - T2r; + var FCi = T0i - T2i; + out[C] = FCr; + out[C + 1] = FCi; + continue; + } + + // Do not overwrite ourselves + if (i === hquarterLen) + continue; + + // In the flipped case: + // MAi = -MAi + // MBr=-MBi, MBi=-MBr + // MCr=-MCr + // MDr=MDi, MDi=MDr + var ST0r = T1r; + var ST0i = -T1i; + var ST1r = T0r; + var ST1i = -T0i; + var ST2r = -inv * T3i; + var ST2i = -inv * T3r; + var ST3r = -inv * T2i; + var ST3i = -inv * T2r; + + var SFAr = ST0r + ST2r; + var SFAi = ST0i + ST2i; + + var SFBr = ST1r + ST3i; + var SFBi = ST1i - ST3r; + + var SA = outOff + quarterLen - i; + var SB = outOff + halfLen - i; + + out[SA] = SFAr; + out[SA + 1] = SFAi; + out[SB] = SFBr; + out[SB + 1] = SFBi; + } + } + } + } + // radix-2 implementation + // + // NOTE: Only called for len=4 + _singleRealTransform2(outOff, + off, + step) { + const out = this._out; + const data = this._data; + + const evenR = data[off]; + const oddR = data[off + step]; + + const leftR = evenR + oddR; + const rightR = evenR - oddR; + + out[outOff] = leftR; + out[outOff + 1] = 0; + out[outOff + 2] = rightR; + out[outOff + 3] = 0; + } + // radix-4 + // + // NOTE: Only called for len=8 + _singleRealTransform4(outOff, + off, + step) { + const out = this._out; + const data = this._data; + const inv = this._inv ? -1 : 1; + const step2 = step * 2; + const step3 = step * 3; + + // Original values + const Ar = data[off]; + const Br = data[off + step]; + const Cr = data[off + step2]; + const Dr = data[off + step3]; + + // Pre-Final values + const T0r = Ar + Cr; + const T1r = Ar - Cr; + const T2r = Br + Dr; + const T3r = inv * (Br - Dr); + + // Final values + const FAr = T0r + T2r; + + const FBr = T1r; + const FBi = -T3r; + + const FCr = T0r - T2r; + + const FDr = T1r; + const FDi = T3r; + + out[outOff] = FAr; + out[outOff + 1] = 0; + out[outOff + 2] = FBr; + out[outOff + 3] = FBi; + out[outOff + 4] = FCr; + out[outOff + 5] = 0; + out[outOff + 6] = FDr; + out[outOff + 7] = FDi; + } +} + + + + + + + + + + + + + + diff --git a/packages/superdough/ola-processor.js b/packages/superdough/ola-processor.js index 36ed95bd..ae7deca2 100644 --- a/packages/superdough/ola-processor.js +++ b/packages/superdough/ola-processor.js @@ -1,12 +1,13 @@ "use strict"; +// sourced from https://github.com/olvb/phaze/tree/master?tab=readme-ov-file const WEBAUDIO_BLOCK_SIZE = 128; /** Overlap-Add Node */ class OLAProcessor extends AudioWorkletProcessor { constructor(options) { super(options); - + this.started = false; this.nbInputs = options.numberOfInputs; this.nbOutputs = options.numberOfOutputs; @@ -157,6 +158,12 @@ class OLAProcessor extends AudioWorkletProcessor { } process(inputs, outputs, params) { + const input = inputs[0]; + const hasInput = !(input[0] === undefined); + if (this.started && !hasInput) { + return false; + } + this.started = hasInput; this.reallocateChannelsIfNeeded(inputs, outputs); this.readInputs(inputs); diff --git a/packages/superdough/package.json b/packages/superdough/package.json index 685ab9c5..11cd562b 100644 --- a/packages/superdough/package.json +++ b/packages/superdough/package.json @@ -35,6 +35,7 @@ "vite": "^5.0.10" }, "dependencies": { + "fft.js": "^4.0.4", "nanostores": "^0.9.5" } } diff --git a/packages/superdough/superdough.mjs b/packages/superdough/superdough.mjs index f0475d77..46c56e56 100644 --- a/packages/superdough/superdough.mjs +++ b/packages/superdough/superdough.mjs @@ -371,6 +371,7 @@ export const superdough = async (value, t, hapDuration) => { // coarse, crush, + stretch, shape, shapevol = getDefaultValue('shapevol'), distort, @@ -438,6 +439,8 @@ export const superdough = async (value, t, hapDuration) => { } const chain = []; // audio nodes that will be connected to each other sequentially chain.push(sourceNode); + stretch !== undefined && chain.push(getWorklet(ac, 'phase-vocoder-processor', { pitchFactor: stretch })); + // gain stage chain.push(gainNode(gain)); diff --git a/packages/superdough/worklets.mjs b/packages/superdough/worklets.mjs index 3ecc987c..61078634 100644 --- a/packages/superdough/worklets.mjs +++ b/packages/superdough/worklets.mjs @@ -2,8 +2,8 @@ // LICENSE GNU General Public License v3.0 see https://github.com/dktr0/WebDirt/blob/main/LICENSE // TOFIX: THIS FILE DOES NOT SUPPORT IMPORTS ON DEPOLYMENT -import OLAProcessor from './ola-processor.js'; -import FFT from 'fft.js'; +import OLAProcessor from "./ola-processor" +import FFT from './fft.js'; const clamp = (num, min, max) => Math.min(Math.max(num, min), max); const _mod = (n, m) => ((n % m) + m) % m; @@ -471,6 +471,8 @@ registerProcessor('supersaw-oscillator', SuperSawOscillatorProcessor); + + const BUFFERED_BLOCK_SIZE = 2048; function genHannWindow(length) { @@ -499,7 +501,6 @@ class PhaseVocoderProcessor extends OLAProcessor { this.timeCursor = 0; this.hannWindow = genHannWindow(this.blockSize); - // prepare FFT and pre-allocate buffers this.fft = new FFT(this.fftSize); this.freqComplexBuffer = this.fft.createComplexArray(); @@ -641,4 +642,8 @@ class PhaseVocoderProcessor extends OLAProcessor { } } -registerProcessor("phase-vocoder-processor", PhaseVocoderProcessor); \ No newline at end of file +registerProcessor("phase-vocoder-processor", PhaseVocoderProcessor); + + + + diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a07618b8..9f06a6a9 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -48,6 +48,9 @@ importers: events: specifier: ^3.3.0 version: 3.3.0 + fft-js: + specifier: ^0.0.12 + version: 0.0.12 jsdoc: specifier: ^4.0.2 version: 4.0.2 @@ -430,6 +433,9 @@ importers: packages/superdough: dependencies: + fft.js: + specifier: ^4.0.4 + version: 4.0.4 nanostores: specifier: ^0.9.5 version: 0.9.5 @@ -5879,6 +5885,10 @@ packages: resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==} engines: {node: '>=8'} + /bit-twiddle@1.0.2: + resolution: {integrity: sha512-B9UhK0DKFZhoTFcfvAzhqsjStvGJp9vYWf3+6SNTtdSQnvIgfkHbgHrg/e4+TH71N2GDu8tpmCVoyfrL1d7ntA==} + dev: true + /bl@4.1.0: resolution: {integrity: sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==} dependencies: @@ -6436,6 +6446,13 @@ packages: resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==} dev: true + /commander@2.7.1: + resolution: {integrity: sha512-5qK/Wsc2fnRCiizV1JlHavWrSGAXQI7AusK423F8zJLwIGq8lmtO5GmO8PVMrtDUJMwTXOFBzSN6OCRD8CEMWw==} + engines: {node: '>= 0.6.x'} + dependencies: + graceful-readlink: 1.0.1 + dev: true + /commander@4.1.1: resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==} engines: {node: '>= 6'} @@ -7683,6 +7700,18 @@ packages: resolution: {integrity: sha512-/exOvEuc+/iaUm105QIiOt4LpBdMTWsXxqR0HDF35vx3fmaKzw7354gTilCh5rkzEt8WYyG//ku3h3nRmd7CHQ==} dev: true + /fft-js@0.0.12: + resolution: {integrity: sha512-nLOa0/SYYnN2NPcLrI81UNSPxyg3q0sGiltfe9G1okg0nxs5CqAwtmaqPQdGcOryeGURaCoQx8Y4AUkhGTh7IQ==} + engines: {node: '>=0.12.0'} + dependencies: + bit-twiddle: 1.0.2 + commander: 2.7.1 + dev: true + + /fft.js@4.0.4: + resolution: {integrity: sha512-f9c00hphOgeQTlDyavwTtu6RiK8AIFjD6+jvXkNkpeQ7rirK3uFWVpalkoS4LAwbdX7mfZ8aoBfFVQX1Re/8aw==} + dev: false + /fftjs@0.0.4: resolution: {integrity: sha512-nIWxQyth1LVD6NH8a+YZUv+McjzbOY6dMe4wv6Pq5cGfP+c8Rd1T8Dsd50DCWlNgzSqA3y9lOkpD6dZD3qHa1A==} dependencies: @@ -8251,6 +8280,10 @@ packages: resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==} dev: true + /graceful-readlink@1.0.1: + resolution: {integrity: sha512-8tLu60LgxF6XpdbK8OW3FA+IfTNBn1ZHGHKF4KQbEeSkajYw5PlYJcKluntgegDPTg8UkHjpet1T82vk6TQ68w==} + dev: true + /graphemer@1.4.0: resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==} From 9f958abb085afe2195de2968e55cacdcccbc6514 Mon Sep 17 00:00:00 2001 From: "Jade (Rose) Rowland" Date: Wed, 12 Jun 2024 01:11:58 -0400 Subject: [PATCH 05/17] fixed offset time --- package.json | 1 - packages/core/controls.mjs | 5 +- packages/core/pattern.mjs | 2 + packages/superdough/fft.js | 946 +++++++++++++-------------- packages/superdough/ola-processor.js | 302 ++++----- packages/superdough/package.json | 1 - packages/superdough/superdough.mjs | 17 +- packages/superdough/worklets.mjs | 317 ++++----- pnpm-lock.yaml | 18 - 9 files changed, 784 insertions(+), 825 deletions(-) diff --git a/package.json b/package.json index e8bf591a..8aefa102 100644 --- a/package.json +++ b/package.json @@ -62,7 +62,6 @@ "eslint": "^8.56.0", "eslint-plugin-import": "^2.29.1", "events": "^3.3.0", - "fft-js": "^0.0.12", "jsdoc": "^4.0.2", "jsdoc-json": "^2.0.2", "jsdoc-to-markdown": "^8.0.0", diff --git a/packages/core/controls.mjs b/packages/core/controls.mjs index e0f29eaf..9f3b1520 100644 --- a/packages/core/controls.mjs +++ b/packages/core/controls.mjs @@ -1390,9 +1390,7 @@ export const { speed } = registerControl('speed'); * @name stretch * @param {number | Pattern} factor -inf to inf, negative numbers play the sample backwards. * @example - * s("bd*6").speed("1 2 4 1 -2 -4") - * @example - * speed("1 1.5*2 [2 1.1]").s("piano").clip(1) + * s("gm_flute").stretch("1 2 .5") * */ export const { stretch } = registerControl('stretch'); @@ -1407,7 +1405,6 @@ export const { stretch } = registerControl('stretch'); * */ - export const { unit } = registerControl('unit'); /** * Made by Calum Gunn. Reminiscent of some weird mixture of filter, ring-modulator and pitch-shifter. The SuperCollider manual defines Squiz as: diff --git a/packages/core/pattern.mjs b/packages/core/pattern.mjs index a8a4f7da..516c5815 100644 --- a/packages/core/pattern.mjs +++ b/packages/core/pattern.mjs @@ -21,6 +21,7 @@ import { numeralArgs, parseNumeral, pairs, + clamp, } from './util.mjs'; import drawLine from './drawLine.mjs'; import { logger } from './logger.mjs'; @@ -1970,6 +1971,7 @@ export const late = register( true, ); + /** * Plays a portion of a pattern, specified by the beginning and end of a time span. The new resulting pattern is played over the time period of the original pattern: * diff --git a/packages/superdough/fft.js b/packages/superdough/fft.js index 0c478693..38294952 100644 --- a/packages/superdough/fft.js +++ b/packages/superdough/fft.js @@ -8,509 +8,481 @@ // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. export default class FFT { - constructor(size) { - this.size = size | 0; - if (this.size <= 1 || (this.size & (this.size - 1)) !== 0) - throw new Error('FFT size must be a power of two and bigger than 1'); + constructor(size) { + this.size = size | 0; + if (this.size <= 1 || (this.size & (this.size - 1)) !== 0) + throw new Error('FFT size must be a power of two and bigger than 1'); - this._csize = size << 1; + this._csize = size << 1; - // NOTE: Use of `var` is intentional for old V8 versions - var table = new Array(this.size * 2); - for (var i = 0; i < table.length; i += 2) { - const angle = Math.PI * i / this.size; - table[i] = Math.cos(angle); - table[i + 1] = -Math.sin(angle); + // NOTE: Use of `var` is intentional for old V8 versions + var table = new Array(this.size * 2); + for (var i = 0; i < table.length; i += 2) { + const angle = (Math.PI * i) / this.size; + table[i] = Math.cos(angle); + table[i + 1] = -Math.sin(angle); + } + this.table = table; + + // Find size's power of two + var power = 0; + for (var t = 1; this.size > t; t <<= 1) power++; + + // Calculate initial step's width: + // * If we are full radix-4 - it is 2x smaller to give inital len=8 + // * Otherwise it is the same as `power` to give len=4 + this._width = power % 2 === 0 ? power - 1 : power; + + // Pre-compute bit-reversal patterns + this._bitrev = new Array(1 << this._width); + for (var j = 0; j < this._bitrev.length; j++) { + this._bitrev[j] = 0; + for (var shift = 0; shift < this._width; shift += 2) { + var revShift = this._width - shift - 2; + this._bitrev[j] |= ((j >>> shift) & 3) << revShift; + } + } + + this._out = null; + this._data = null; + this._inv = 0; + } + fromComplexArray(complex, storage) { + var res = storage || new Array(complex.length >>> 1); + for (var i = 0; i < complex.length; i += 2) res[i >>> 1] = complex[i]; + return res; + } + createComplexArray() { + const res = new Array(this._csize); + for (var i = 0; i < res.length; i++) res[i] = 0; + return res; + } + toComplexArray(input, storage) { + var res = storage || this.createComplexArray(); + for (var i = 0; i < res.length; i += 2) { + res[i] = input[i >>> 1]; + res[i + 1] = 0; + } + return res; + } + completeSpectrum(spectrum) { + var size = this._csize; + var half = size >>> 1; + for (var i = 2; i < half; i += 2) { + spectrum[size - i] = spectrum[i]; + spectrum[size - i + 1] = -spectrum[i + 1]; + } + } + transform(out, data) { + if (out === data) throw new Error('Input and output buffers must be different'); + + this._out = out; + this._data = data; + this._inv = 0; + this._transform4(); + this._out = null; + this._data = null; + } + realTransform(out, data) { + if (out === data) throw new Error('Input and output buffers must be different'); + + this._out = out; + this._data = data; + this._inv = 0; + this._realTransform4(); + this._out = null; + this._data = null; + } + inverseTransform(out, data) { + if (out === data) throw new Error('Input and output buffers must be different'); + + this._out = out; + this._data = data; + this._inv = 1; + this._transform4(); + for (var i = 0; i < out.length; i++) out[i] /= this.size; + this._out = null; + this._data = null; + } + // radix-4 implementation + // + // NOTE: Uses of `var` are intentional for older V8 version that do not + // support both `let compound assignments` and `const phi` + _transform4() { + var out = this._out; + var size = this._csize; + + // Initial step (permute and transform) + var width = this._width; + var step = 1 << width; + var len = (size / step) << 1; + + var outOff; + var t; + var bitrev = this._bitrev; + if (len === 4) { + for (outOff = 0, t = 0; outOff < size; outOff += len, t++) { + const off = bitrev[t]; + this._singleTransform2(outOff, off, step); + } + } else { + // len === 8 + for (outOff = 0, t = 0; outOff < size; outOff += len, t++) { + const off = bitrev[t]; + this._singleTransform4(outOff, off, step); + } + } + + // Loop through steps in decreasing order + var inv = this._inv ? -1 : 1; + var table = this.table; + for (step >>= 2; step >= 2; step >>= 2) { + len = (size / step) << 1; + var quarterLen = len >>> 2; + + // Loop through offsets in the data + for (outOff = 0; outOff < size; outOff += len) { + // Full case + var limit = outOff + quarterLen; + for (var i = outOff, k = 0; i < limit; i += 2, k += step) { + const A = i; + const B = A + quarterLen; + const C = B + quarterLen; + const D = C + quarterLen; + + // Original values + const Ar = out[A]; + const Ai = out[A + 1]; + const Br = out[B]; + const Bi = out[B + 1]; + const Cr = out[C]; + const Ci = out[C + 1]; + const Dr = out[D]; + const Di = out[D + 1]; + + // Middle values + const MAr = Ar; + const MAi = Ai; + + const tableBr = table[k]; + const tableBi = inv * table[k + 1]; + const MBr = Br * tableBr - Bi * tableBi; + const MBi = Br * tableBi + Bi * tableBr; + + const tableCr = table[2 * k]; + const tableCi = inv * table[2 * k + 1]; + const MCr = Cr * tableCr - Ci * tableCi; + const MCi = Cr * tableCi + Ci * tableCr; + + const tableDr = table[3 * k]; + const tableDi = inv * table[3 * k + 1]; + const MDr = Dr * tableDr - Di * tableDi; + const MDi = Dr * tableDi + Di * tableDr; + + // Pre-Final values + const T0r = MAr + MCr; + const T0i = MAi + MCi; + const T1r = MAr - MCr; + const T1i = MAi - MCi; + const T2r = MBr + MDr; + const T2i = MBi + MDi; + const T3r = inv * (MBr - MDr); + const T3i = inv * (MBi - MDi); + + // Final values + const FAr = T0r + T2r; + const FAi = T0i + T2i; + + const FCr = T0r - T2r; + const FCi = T0i - T2i; + + const FBr = T1r + T3i; + const FBi = T1i - T3r; + + const FDr = T1r - T3i; + const FDi = T1i + T3r; + + out[A] = FAr; + out[A + 1] = FAi; + out[B] = FBr; + out[B + 1] = FBi; + out[C] = FCr; + out[C + 1] = FCi; + out[D] = FDr; + out[D + 1] = FDi; } - this.table = table; + } + } + } + // radix-2 implementation + // + // NOTE: Only called for len=4 + _singleTransform2(outOff, off, step) { + const out = this._out; + const data = this._data; - // Find size's power of two - var power = 0; - for (var t = 1; this.size > t; t <<= 1) - power++; + const evenR = data[off]; + const evenI = data[off + 1]; + const oddR = data[off + step]; + const oddI = data[off + step + 1]; - // Calculate initial step's width: - // * If we are full radix-4 - it is 2x smaller to give inital len=8 - // * Otherwise it is the same as `power` to give len=4 - this._width = power % 2 === 0 ? power - 1 : power; + const leftR = evenR + oddR; + const leftI = evenI + oddI; + const rightR = evenR - oddR; + const rightI = evenI - oddI; - // Pre-compute bit-reversal patterns - this._bitrev = new Array(1 << this._width); - for (var j = 0; j < this._bitrev.length; j++) { - this._bitrev[j] = 0; - for (var shift = 0; shift < this._width; shift += 2) { - var revShift = this._width - shift - 2; - this._bitrev[j] |= ((j >>> shift) & 3) << revShift; - } + out[outOff] = leftR; + out[outOff + 1] = leftI; + out[outOff + 2] = rightR; + out[outOff + 3] = rightI; + } + // radix-4 + // + // NOTE: Only called for len=8 + _singleTransform4(outOff, off, step) { + const out = this._out; + const data = this._data; + const inv = this._inv ? -1 : 1; + const step2 = step * 2; + const step3 = step * 3; + + // Original values + const Ar = data[off]; + const Ai = data[off + 1]; + const Br = data[off + step]; + const Bi = data[off + step + 1]; + const Cr = data[off + step2]; + const Ci = data[off + step2 + 1]; + const Dr = data[off + step3]; + const Di = data[off + step3 + 1]; + + // Pre-Final values + const T0r = Ar + Cr; + const T0i = Ai + Ci; + const T1r = Ar - Cr; + const T1i = Ai - Ci; + const T2r = Br + Dr; + const T2i = Bi + Di; + const T3r = inv * (Br - Dr); + const T3i = inv * (Bi - Di); + + // Final values + const FAr = T0r + T2r; + const FAi = T0i + T2i; + + const FBr = T1r + T3i; + const FBi = T1i - T3r; + + const FCr = T0r - T2r; + const FCi = T0i - T2i; + + const FDr = T1r - T3i; + const FDi = T1i + T3r; + + out[outOff] = FAr; + out[outOff + 1] = FAi; + out[outOff + 2] = FBr; + out[outOff + 3] = FBi; + out[outOff + 4] = FCr; + out[outOff + 5] = FCi; + out[outOff + 6] = FDr; + out[outOff + 7] = FDi; + } + // Real input radix-4 implementation + _realTransform4() { + var out = this._out; + var size = this._csize; + + // Initial step (permute and transform) + var width = this._width; + var step = 1 << width; + var len = (size / step) << 1; + + var outOff; + var t; + var bitrev = this._bitrev; + if (len === 4) { + for (outOff = 0, t = 0; outOff < size; outOff += len, t++) { + const off = bitrev[t]; + this._singleRealTransform2(outOff, off >>> 1, step >>> 1); + } + } else { + // len === 8 + for (outOff = 0, t = 0; outOff < size; outOff += len, t++) { + const off = bitrev[t]; + this._singleRealTransform4(outOff, off >>> 1, step >>> 1); + } + } + + // Loop through steps in decreasing order + var inv = this._inv ? -1 : 1; + var table = this.table; + for (step >>= 2; step >= 2; step >>= 2) { + len = (size / step) << 1; + var halfLen = len >>> 1; + var quarterLen = halfLen >>> 1; + var hquarterLen = quarterLen >>> 1; + + // Loop through offsets in the data + for (outOff = 0; outOff < size; outOff += len) { + for (var i = 0, k = 0; i <= hquarterLen; i += 2, k += step) { + var A = outOff + i; + var B = A + quarterLen; + var C = B + quarterLen; + var D = C + quarterLen; + + // Original values + var Ar = out[A]; + var Ai = out[A + 1]; + var Br = out[B]; + var Bi = out[B + 1]; + var Cr = out[C]; + var Ci = out[C + 1]; + var Dr = out[D]; + var Di = out[D + 1]; + + // Middle values + var MAr = Ar; + var MAi = Ai; + + var tableBr = table[k]; + var tableBi = inv * table[k + 1]; + var MBr = Br * tableBr - Bi * tableBi; + var MBi = Br * tableBi + Bi * tableBr; + + var tableCr = table[2 * k]; + var tableCi = inv * table[2 * k + 1]; + var MCr = Cr * tableCr - Ci * tableCi; + var MCi = Cr * tableCi + Ci * tableCr; + + var tableDr = table[3 * k]; + var tableDi = inv * table[3 * k + 1]; + var MDr = Dr * tableDr - Di * tableDi; + var MDi = Dr * tableDi + Di * tableDr; + + // Pre-Final values + var T0r = MAr + MCr; + var T0i = MAi + MCi; + var T1r = MAr - MCr; + var T1i = MAi - MCi; + var T2r = MBr + MDr; + var T2i = MBi + MDi; + var T3r = inv * (MBr - MDr); + var T3i = inv * (MBi - MDi); + + // Final values + var FAr = T0r + T2r; + var FAi = T0i + T2i; + + var FBr = T1r + T3i; + var FBi = T1i - T3r; + + out[A] = FAr; + out[A + 1] = FAi; + out[B] = FBr; + out[B + 1] = FBi; + + // Output final middle point + if (i === 0) { + var FCr = T0r - T2r; + var FCi = T0i - T2i; + out[C] = FCr; + out[C + 1] = FCi; + continue; + } + + // Do not overwrite ourselves + if (i === hquarterLen) continue; + + // In the flipped case: + // MAi = -MAi + // MBr=-MBi, MBi=-MBr + // MCr=-MCr + // MDr=MDi, MDi=MDr + var ST0r = T1r; + var ST0i = -T1i; + var ST1r = T0r; + var ST1i = -T0i; + var ST2r = -inv * T3i; + var ST2i = -inv * T3r; + var ST3r = -inv * T2i; + var ST3i = -inv * T2r; + + var SFAr = ST0r + ST2r; + var SFAi = ST0i + ST2i; + + var SFBr = ST1r + ST3i; + var SFBi = ST1i - ST3r; + + var SA = outOff + quarterLen - i; + var SB = outOff + halfLen - i; + + out[SA] = SFAr; + out[SA + 1] = SFAi; + out[SB] = SFBr; + out[SB + 1] = SFBi; } - - this._out = null; - this._data = null; - this._inv = 0; + } } - fromComplexArray(complex, storage) { - var res = storage || new Array(complex.length >>> 1); - for (var i = 0; i < complex.length; i += 2) - res[i >>> 1] = complex[i]; - return res; - } - createComplexArray() { - const res = new Array(this._csize); - for (var i = 0; i < res.length; i++) - res[i] = 0; - return res; - } - toComplexArray(input, storage) { - var res = storage || this.createComplexArray(); - for (var i = 0; i < res.length; i += 2) { - res[i] = input[i >>> 1]; - res[i + 1] = 0; - } - return res; - } - completeSpectrum(spectrum) { - var size = this._csize; - var half = size >>> 1; - for (var i = 2; i < half; i += 2) { - spectrum[size - i] = spectrum[i]; - spectrum[size - i + 1] = -spectrum[i + 1]; - } - } - transform(out, data) { - if (out === data) - throw new Error('Input and output buffers must be different'); + } + // radix-2 implementation + // + // NOTE: Only called for len=4 + _singleRealTransform2(outOff, off, step) { + const out = this._out; + const data = this._data; - this._out = out; - this._data = data; - this._inv = 0; - this._transform4(); - this._out = null; - this._data = null; - } - realTransform(out, data) { - if (out === data) - throw new Error('Input and output buffers must be different'); + const evenR = data[off]; + const oddR = data[off + step]; - this._out = out; - this._data = data; - this._inv = 0; - this._realTransform4(); - this._out = null; - this._data = null; - } - inverseTransform(out, data) { - if (out === data) - throw new Error('Input and output buffers must be different'); + const leftR = evenR + oddR; + const rightR = evenR - oddR; - this._out = out; - this._data = data; - this._inv = 1; - this._transform4(); - for (var i = 0; i < out.length; i++) - out[i] /= this.size; - this._out = null; - this._data = null; - } - // radix-4 implementation - // - // NOTE: Uses of `var` are intentional for older V8 version that do not - // support both `let compound assignments` and `const phi` - _transform4() { - var out = this._out; - var size = this._csize; + out[outOff] = leftR; + out[outOff + 1] = 0; + out[outOff + 2] = rightR; + out[outOff + 3] = 0; + } + // radix-4 + // + // NOTE: Only called for len=8 + _singleRealTransform4(outOff, off, step) { + const out = this._out; + const data = this._data; + const inv = this._inv ? -1 : 1; + const step2 = step * 2; + const step3 = step * 3; - // Initial step (permute and transform) - var width = this._width; - var step = 1 << width; - var len = (size / step) << 1; + // Original values + const Ar = data[off]; + const Br = data[off + step]; + const Cr = data[off + step2]; + const Dr = data[off + step3]; - var outOff; - var t; - var bitrev = this._bitrev; - if (len === 4) { - for (outOff = 0, t = 0; outOff < size; outOff += len, t++) { - const off = bitrev[t]; - this._singleTransform2(outOff, off, step); - } - } else { - // len === 8 - for (outOff = 0, t = 0; outOff < size; outOff += len, t++) { - const off = bitrev[t]; - this._singleTransform4(outOff, off, step); - } - } + // Pre-Final values + const T0r = Ar + Cr; + const T1r = Ar - Cr; + const T2r = Br + Dr; + const T3r = inv * (Br - Dr); - // Loop through steps in decreasing order - var inv = this._inv ? -1 : 1; - var table = this.table; - for (step >>= 2; step >= 2; step >>= 2) { - len = (size / step) << 1; - var quarterLen = len >>> 2; + // Final values + const FAr = T0r + T2r; - // Loop through offsets in the data - for (outOff = 0; outOff < size; outOff += len) { - // Full case - var limit = outOff + quarterLen; - for (var i = outOff, k = 0; i < limit; i += 2, k += step) { - const A = i; - const B = A + quarterLen; - const C = B + quarterLen; - const D = C + quarterLen; + const FBr = T1r; + const FBi = -T3r; - // Original values - const Ar = out[A]; - const Ai = out[A + 1]; - const Br = out[B]; - const Bi = out[B + 1]; - const Cr = out[C]; - const Ci = out[C + 1]; - const Dr = out[D]; - const Di = out[D + 1]; + const FCr = T0r - T2r; - // Middle values - const MAr = Ar; - const MAi = Ai; + const FDr = T1r; + const FDi = T3r; - const tableBr = table[k]; - const tableBi = inv * table[k + 1]; - const MBr = Br * tableBr - Bi * tableBi; - const MBi = Br * tableBi + Bi * tableBr; - - const tableCr = table[2 * k]; - const tableCi = inv * table[2 * k + 1]; - const MCr = Cr * tableCr - Ci * tableCi; - const MCi = Cr * tableCi + Ci * tableCr; - - const tableDr = table[3 * k]; - const tableDi = inv * table[3 * k + 1]; - const MDr = Dr * tableDr - Di * tableDi; - const MDi = Dr * tableDi + Di * tableDr; - - // Pre-Final values - const T0r = MAr + MCr; - const T0i = MAi + MCi; - const T1r = MAr - MCr; - const T1i = MAi - MCi; - const T2r = MBr + MDr; - const T2i = MBi + MDi; - const T3r = inv * (MBr - MDr); - const T3i = inv * (MBi - MDi); - - // Final values - const FAr = T0r + T2r; - const FAi = T0i + T2i; - - const FCr = T0r - T2r; - const FCi = T0i - T2i; - - const FBr = T1r + T3i; - const FBi = T1i - T3r; - - const FDr = T1r - T3i; - const FDi = T1i + T3r; - - out[A] = FAr; - out[A + 1] = FAi; - out[B] = FBr; - out[B + 1] = FBi; - out[C] = FCr; - out[C + 1] = FCi; - out[D] = FDr; - out[D + 1] = FDi; - } - } - } - } - // radix-2 implementation - // - // NOTE: Only called for len=4 - _singleTransform2(outOff, off, - step) { - const out = this._out; - const data = this._data; - - const evenR = data[off]; - const evenI = data[off + 1]; - const oddR = data[off + step]; - const oddI = data[off + step + 1]; - - const leftR = evenR + oddR; - const leftI = evenI + oddI; - const rightR = evenR - oddR; - const rightI = evenI - oddI; - - out[outOff] = leftR; - out[outOff + 1] = leftI; - out[outOff + 2] = rightR; - out[outOff + 3] = rightI; - } - // radix-4 - // - // NOTE: Only called for len=8 - _singleTransform4(outOff, off, - step) { - const out = this._out; - const data = this._data; - const inv = this._inv ? -1 : 1; - const step2 = step * 2; - const step3 = step * 3; - - // Original values - const Ar = data[off]; - const Ai = data[off + 1]; - const Br = data[off + step]; - const Bi = data[off + step + 1]; - const Cr = data[off + step2]; - const Ci = data[off + step2 + 1]; - const Dr = data[off + step3]; - const Di = data[off + step3 + 1]; - - // Pre-Final values - const T0r = Ar + Cr; - const T0i = Ai + Ci; - const T1r = Ar - Cr; - const T1i = Ai - Ci; - const T2r = Br + Dr; - const T2i = Bi + Di; - const T3r = inv * (Br - Dr); - const T3i = inv * (Bi - Di); - - // Final values - const FAr = T0r + T2r; - const FAi = T0i + T2i; - - const FBr = T1r + T3i; - const FBi = T1i - T3r; - - const FCr = T0r - T2r; - const FCi = T0i - T2i; - - const FDr = T1r - T3i; - const FDi = T1i + T3r; - - out[outOff] = FAr; - out[outOff + 1] = FAi; - out[outOff + 2] = FBr; - out[outOff + 3] = FBi; - out[outOff + 4] = FCr; - out[outOff + 5] = FCi; - out[outOff + 6] = FDr; - out[outOff + 7] = FDi; - } - // Real input radix-4 implementation - _realTransform4() { - var out = this._out; - var size = this._csize; - - // Initial step (permute and transform) - var width = this._width; - var step = 1 << width; - var len = (size / step) << 1; - - var outOff; - var t; - var bitrev = this._bitrev; - if (len === 4) { - for (outOff = 0, t = 0; outOff < size; outOff += len, t++) { - const off = bitrev[t]; - this._singleRealTransform2(outOff, off >>> 1, step >>> 1); - } - } else { - // len === 8 - for (outOff = 0, t = 0; outOff < size; outOff += len, t++) { - const off = bitrev[t]; - this._singleRealTransform4(outOff, off >>> 1, step >>> 1); - } - } - - // Loop through steps in decreasing order - var inv = this._inv ? -1 : 1; - var table = this.table; - for (step >>= 2; step >= 2; step >>= 2) { - len = (size / step) << 1; - var halfLen = len >>> 1; - var quarterLen = halfLen >>> 1; - var hquarterLen = quarterLen >>> 1; - - // Loop through offsets in the data - for (outOff = 0; outOff < size; outOff += len) { - for (var i = 0, k = 0; i <= hquarterLen; i += 2, k += step) { - var A = outOff + i; - var B = A + quarterLen; - var C = B + quarterLen; - var D = C + quarterLen; - - // Original values - var Ar = out[A]; - var Ai = out[A + 1]; - var Br = out[B]; - var Bi = out[B + 1]; - var Cr = out[C]; - var Ci = out[C + 1]; - var Dr = out[D]; - var Di = out[D + 1]; - - // Middle values - var MAr = Ar; - var MAi = Ai; - - var tableBr = table[k]; - var tableBi = inv * table[k + 1]; - var MBr = Br * tableBr - Bi * tableBi; - var MBi = Br * tableBi + Bi * tableBr; - - var tableCr = table[2 * k]; - var tableCi = inv * table[2 * k + 1]; - var MCr = Cr * tableCr - Ci * tableCi; - var MCi = Cr * tableCi + Ci * tableCr; - - var tableDr = table[3 * k]; - var tableDi = inv * table[3 * k + 1]; - var MDr = Dr * tableDr - Di * tableDi; - var MDi = Dr * tableDi + Di * tableDr; - - // Pre-Final values - var T0r = MAr + MCr; - var T0i = MAi + MCi; - var T1r = MAr - MCr; - var T1i = MAi - MCi; - var T2r = MBr + MDr; - var T2i = MBi + MDi; - var T3r = inv * (MBr - MDr); - var T3i = inv * (MBi - MDi); - - // Final values - var FAr = T0r + T2r; - var FAi = T0i + T2i; - - var FBr = T1r + T3i; - var FBi = T1i - T3r; - - out[A] = FAr; - out[A + 1] = FAi; - out[B] = FBr; - out[B + 1] = FBi; - - // Output final middle point - if (i === 0) { - var FCr = T0r - T2r; - var FCi = T0i - T2i; - out[C] = FCr; - out[C + 1] = FCi; - continue; - } - - // Do not overwrite ourselves - if (i === hquarterLen) - continue; - - // In the flipped case: - // MAi = -MAi - // MBr=-MBi, MBi=-MBr - // MCr=-MCr - // MDr=MDi, MDi=MDr - var ST0r = T1r; - var ST0i = -T1i; - var ST1r = T0r; - var ST1i = -T0i; - var ST2r = -inv * T3i; - var ST2i = -inv * T3r; - var ST3r = -inv * T2i; - var ST3i = -inv * T2r; - - var SFAr = ST0r + ST2r; - var SFAi = ST0i + ST2i; - - var SFBr = ST1r + ST3i; - var SFBi = ST1i - ST3r; - - var SA = outOff + quarterLen - i; - var SB = outOff + halfLen - i; - - out[SA] = SFAr; - out[SA + 1] = SFAi; - out[SB] = SFBr; - out[SB + 1] = SFBi; - } - } - } - } - // radix-2 implementation - // - // NOTE: Only called for len=4 - _singleRealTransform2(outOff, - off, - step) { - const out = this._out; - const data = this._data; - - const evenR = data[off]; - const oddR = data[off + step]; - - const leftR = evenR + oddR; - const rightR = evenR - oddR; - - out[outOff] = leftR; - out[outOff + 1] = 0; - out[outOff + 2] = rightR; - out[outOff + 3] = 0; - } - // radix-4 - // - // NOTE: Only called for len=8 - _singleRealTransform4(outOff, - off, - step) { - const out = this._out; - const data = this._data; - const inv = this._inv ? -1 : 1; - const step2 = step * 2; - const step3 = step * 3; - - // Original values - const Ar = data[off]; - const Br = data[off + step]; - const Cr = data[off + step2]; - const Dr = data[off + step3]; - - // Pre-Final values - const T0r = Ar + Cr; - const T1r = Ar - Cr; - const T2r = Br + Dr; - const T3r = inv * (Br - Dr); - - // Final values - const FAr = T0r + T2r; - - const FBr = T1r; - const FBi = -T3r; - - const FCr = T0r - T2r; - - const FDr = T1r; - const FDi = T3r; - - out[outOff] = FAr; - out[outOff + 1] = 0; - out[outOff + 2] = FBr; - out[outOff + 3] = FBi; - out[outOff + 4] = FCr; - out[outOff + 5] = 0; - out[outOff + 6] = FDr; - out[outOff + 7] = FDi; - } + out[outOff] = FAr; + out[outOff + 1] = 0; + out[outOff + 2] = FBr; + out[outOff + 3] = FBi; + out[outOff + 4] = FCr; + out[outOff + 5] = 0; + out[outOff + 6] = FDr; + out[outOff + 7] = FDi; + } } - - - - - - - - - - - - - - diff --git a/packages/superdough/ola-processor.js b/packages/superdough/ola-processor.js index ae7deca2..38d45a25 100644 --- a/packages/superdough/ola-processor.js +++ b/packages/superdough/ola-processor.js @@ -1,185 +1,185 @@ -"use strict"; +'use strict'; // sourced from https://github.com/olvb/phaze/tree/master?tab=readme-ov-file const WEBAUDIO_BLOCK_SIZE = 128; /** Overlap-Add Node */ class OLAProcessor extends AudioWorkletProcessor { - constructor(options) { - super(options); - this.started = false; - this.nbInputs = options.numberOfInputs; - this.nbOutputs = options.numberOfOutputs; + constructor(options) { + super(options); + this.started = false; + this.nbInputs = options.numberOfInputs; + this.nbOutputs = options.numberOfOutputs; - this.blockSize = options.processorOptions.blockSize; - // TODO for now, the only support hop size is the size of a web audio block - this.hopSize = WEBAUDIO_BLOCK_SIZE; + this.blockSize = options.processorOptions.blockSize; + // TODO for now, the only support hop size is the size of a web audio block + this.hopSize = WEBAUDIO_BLOCK_SIZE; - this.nbOverlaps = this.blockSize / this.hopSize; + this.nbOverlaps = this.blockSize / this.hopSize; - // pre-allocate input buffers (will be reallocated if needed) - this.inputBuffers = new Array(this.nbInputs); - this.inputBuffersHead = new Array(this.nbInputs); - this.inputBuffersToSend = new Array(this.nbInputs); - // default to 1 channel per input until we know more - for (let i = 0; i < this.nbInputs; i++) { - this.allocateInputChannels(i, 1); - } - // pre-allocate input buffers (will be reallocated if needed) - this.outputBuffers = new Array(this.nbOutputs); - this.outputBuffersToRetrieve = new Array(this.nbOutputs); - // default to 1 channel per output until we know more - for (let i = 0; i < this.nbOutputs; i++) { - this.allocateOutputChannels(i, 1); - } + // pre-allocate input buffers (will be reallocated if needed) + this.inputBuffers = new Array(this.nbInputs); + this.inputBuffersHead = new Array(this.nbInputs); + this.inputBuffersToSend = new Array(this.nbInputs); + // default to 1 channel per input until we know more + for (let i = 0; i < this.nbInputs; i++) { + this.allocateInputChannels(i, 1); } + // pre-allocate input buffers (will be reallocated if needed) + this.outputBuffers = new Array(this.nbOutputs); + this.outputBuffersToRetrieve = new Array(this.nbOutputs); + // default to 1 channel per output until we know more + for (let i = 0; i < this.nbOutputs; i++) { + this.allocateOutputChannels(i, 1); + } + } - /** Handles dynamic reallocation of input/output channels buffer + /** Handles dynamic reallocation of input/output channels buffer (channel numbers may lety during lifecycle) **/ - reallocateChannelsIfNeeded(inputs, outputs) { - for (let i = 0; i < this.nbInputs; i++) { - let nbChannels = inputs[i].length; - if (nbChannels != this.inputBuffers[i].length) { - this.allocateInputChannels(i, nbChannels); - } - } - - for (let i = 0; i < this.nbOutputs; i++) { - let nbChannels = outputs[i].length; - if (nbChannels != this.outputBuffers[i].length) { - this.allocateOutputChannels(i, nbChannels); - } - } + reallocateChannelsIfNeeded(inputs, outputs) { + for (let i = 0; i < this.nbInputs; i++) { + let nbChannels = inputs[i].length; + if (nbChannels != this.inputBuffers[i].length) { + this.allocateInputChannels(i, nbChannels); + } } - allocateInputChannels(inputIndex, nbChannels) { - // allocate input buffers + for (let i = 0; i < this.nbOutputs; i++) { + let nbChannels = outputs[i].length; + if (nbChannels != this.outputBuffers[i].length) { + this.allocateOutputChannels(i, nbChannels); + } + } + } - this.inputBuffers[inputIndex] = new Array(nbChannels); - for (let i = 0; i < nbChannels; i++) { - this.inputBuffers[inputIndex][i] = new Float32Array(this.blockSize + WEBAUDIO_BLOCK_SIZE); - this.inputBuffers[inputIndex][i].fill(0); - } + allocateInputChannels(inputIndex, nbChannels) { + // allocate input buffers - // allocate input buffers to send and head pointers to copy from - // (cannot directly send a pointer/subarray because input may be modified) - this.inputBuffersHead[inputIndex] = new Array(nbChannels); - this.inputBuffersToSend[inputIndex] = new Array(nbChannels); - for (let i = 0; i < nbChannels; i++) { - this.inputBuffersHead[inputIndex][i] = this.inputBuffers[inputIndex][i] .subarray(0, this.blockSize); - this.inputBuffersToSend[inputIndex][i] = new Float32Array(this.blockSize); - } + this.inputBuffers[inputIndex] = new Array(nbChannels); + for (let i = 0; i < nbChannels; i++) { + this.inputBuffers[inputIndex][i] = new Float32Array(this.blockSize + WEBAUDIO_BLOCK_SIZE); + this.inputBuffers[inputIndex][i].fill(0); } - allocateOutputChannels(outputIndex, nbChannels) { - // allocate output buffers - this.outputBuffers[outputIndex] = new Array(nbChannels); - for (let i = 0; i < nbChannels; i++) { - this.outputBuffers[outputIndex][i] = new Float32Array(this.blockSize); - this.outputBuffers[outputIndex][i].fill(0); - } + // allocate input buffers to send and head pointers to copy from + // (cannot directly send a pointer/subarray because input may be modified) + this.inputBuffersHead[inputIndex] = new Array(nbChannels); + this.inputBuffersToSend[inputIndex] = new Array(nbChannels); + for (let i = 0; i < nbChannels; i++) { + this.inputBuffersHead[inputIndex][i] = this.inputBuffers[inputIndex][i].subarray(0, this.blockSize); + this.inputBuffersToSend[inputIndex][i] = new Float32Array(this.blockSize); + } + } - // allocate output buffers to retrieve - // (cannot send a pointer/subarray because new output has to be add to exising output) - this.outputBuffersToRetrieve[outputIndex] = new Array(nbChannels); - for (let i = 0; i < nbChannels; i++) { - this.outputBuffersToRetrieve[outputIndex][i] = new Float32Array(this.blockSize); - this.outputBuffersToRetrieve[outputIndex][i].fill(0); - } + allocateOutputChannels(outputIndex, nbChannels) { + // allocate output buffers + this.outputBuffers[outputIndex] = new Array(nbChannels); + for (let i = 0; i < nbChannels; i++) { + this.outputBuffers[outputIndex][i] = new Float32Array(this.blockSize); + this.outputBuffers[outputIndex][i].fill(0); } - /** Read next web audio block to input buffers **/ - readInputs(inputs) { - // when playback is paused, we may stop receiving new samples - if (inputs[0].length && inputs[0][0].length == 0) { - for (let i = 0; i < this.nbInputs; i++) { - for (let j = 0; j < this.inputBuffers[i].length; j++) { - this.inputBuffers[i][j].fill(0, this.blockSize); - } - } - return; - } + // allocate output buffers to retrieve + // (cannot send a pointer/subarray because new output has to be add to exising output) + this.outputBuffersToRetrieve[outputIndex] = new Array(nbChannels); + for (let i = 0; i < nbChannels; i++) { + this.outputBuffersToRetrieve[outputIndex][i] = new Float32Array(this.blockSize); + this.outputBuffersToRetrieve[outputIndex][i].fill(0); + } + } - for (let i = 0; i < this.nbInputs; i++) { - for (let j = 0; j < this.inputBuffers[i].length; j++) { - let webAudioBlock = inputs[i][j]; - this.inputBuffers[i][j].set(webAudioBlock, this.blockSize); - } + /** Read next web audio block to input buffers **/ + readInputs(inputs) { + // when playback is paused, we may stop receiving new samples + if (inputs[0].length && inputs[0][0].length == 0) { + for (let i = 0; i < this.nbInputs; i++) { + for (let j = 0; j < this.inputBuffers[i].length; j++) { + this.inputBuffers[i][j].fill(0, this.blockSize); } + } + return; } - /** Write next web audio block from output buffers **/ - writeOutputs(outputs) { - for (let i = 0; i < this.nbInputs; i++) { - for (let j = 0; j < this.inputBuffers[i].length; j++) { - let webAudioBlock = this.outputBuffers[i][j].subarray(0, WEBAUDIO_BLOCK_SIZE); - outputs[i][j].set(webAudioBlock); - } + for (let i = 0; i < this.nbInputs; i++) { + for (let j = 0; j < this.inputBuffers[i].length; j++) { + let webAudioBlock = inputs[i][j]; + this.inputBuffers[i][j].set(webAudioBlock, this.blockSize); + } + } + } + + /** Write next web audio block from output buffers **/ + writeOutputs(outputs) { + for (let i = 0; i < this.nbInputs; i++) { + for (let j = 0; j < this.inputBuffers[i].length; j++) { + let webAudioBlock = this.outputBuffers[i][j].subarray(0, WEBAUDIO_BLOCK_SIZE); + outputs[i][j].set(webAudioBlock); + } + } + } + + /** Shift left content of input buffers to receive new web audio block **/ + shiftInputBuffers() { + for (let i = 0; i < this.nbInputs; i++) { + for (let j = 0; j < this.inputBuffers[i].length; j++) { + this.inputBuffers[i][j].copyWithin(0, WEBAUDIO_BLOCK_SIZE); + } + } + } + + /** Shift left content of output buffers to receive new web audio block **/ + shiftOutputBuffers() { + for (let i = 0; i < this.nbOutputs; i++) { + for (let j = 0; j < this.outputBuffers[i].length; j++) { + this.outputBuffers[i][j].copyWithin(0, WEBAUDIO_BLOCK_SIZE); + this.outputBuffers[i][j].subarray(this.blockSize - WEBAUDIO_BLOCK_SIZE).fill(0); + } + } + } + + /** Copy contents of input buffers to buffer actually sent to process **/ + prepareInputBuffersToSend() { + for (let i = 0; i < this.nbInputs; i++) { + for (let j = 0; j < this.inputBuffers[i].length; j++) { + this.inputBuffersToSend[i][j].set(this.inputBuffersHead[i][j]); + } + } + } + + /** Add contents of output buffers just processed to output buffers **/ + handleOutputBuffersToRetrieve() { + for (let i = 0; i < this.nbOutputs; i++) { + for (let j = 0; j < this.outputBuffers[i].length; j++) { + for (let k = 0; k < this.blockSize; k++) { + this.outputBuffers[i][j][k] += this.outputBuffersToRetrieve[i][j][k] / this.nbOverlaps; } + } } + } - /** Shift left content of input buffers to receive new web audio block **/ - shiftInputBuffers() { - for (let i = 0; i < this.nbInputs; i++) { - for (let j = 0; j < this.inputBuffers[i].length; j++) { - this.inputBuffers[i][j].copyWithin(0, WEBAUDIO_BLOCK_SIZE); - } - } + process(inputs, outputs, params) { + const input = inputs[0]; + const hasInput = !(input[0] === undefined); + if (this.started && !hasInput) { + return false; } + this.started = hasInput; + this.reallocateChannelsIfNeeded(inputs, outputs); - /** Shift left content of output buffers to receive new web audio block **/ - shiftOutputBuffers() { - for (let i = 0; i < this.nbOutputs; i++) { - for (let j = 0; j < this.outputBuffers[i].length; j++) { - this.outputBuffers[i][j].copyWithin(0, WEBAUDIO_BLOCK_SIZE); - this.outputBuffers[i][j].subarray(this.blockSize - WEBAUDIO_BLOCK_SIZE).fill(0); - } - } - } + this.readInputs(inputs); + this.shiftInputBuffers(); + this.prepareInputBuffersToSend(); + this.processOLA(this.inputBuffersToSend, this.outputBuffersToRetrieve, params); + this.handleOutputBuffersToRetrieve(); + this.writeOutputs(outputs); + this.shiftOutputBuffers(); - /** Copy contents of input buffers to buffer actually sent to process **/ - prepareInputBuffersToSend() { - for (let i = 0; i < this.nbInputs; i++) { - for (let j = 0; j < this.inputBuffers[i].length; j++) { - this.inputBuffersToSend[i][j].set(this.inputBuffersHead[i][j]); - } - } - } + return true; + } - /** Add contents of output buffers just processed to output buffers **/ - handleOutputBuffersToRetrieve() { - for (let i = 0; i < this.nbOutputs; i++) { - for (let j = 0; j < this.outputBuffers[i].length; j++) { - for (let k = 0; k < this.blockSize; k++) { - this.outputBuffers[i][j][k] += this.outputBuffersToRetrieve[i][j][k] / this.nbOverlaps; - } - } - } - } - - process(inputs, outputs, params) { - const input = inputs[0]; - const hasInput = !(input[0] === undefined); - if (this.started && !hasInput) { - return false; - } - this.started = hasInput; - this.reallocateChannelsIfNeeded(inputs, outputs); - - this.readInputs(inputs); - this.shiftInputBuffers(); - this.prepareInputBuffersToSend() - this.processOLA(this.inputBuffersToSend, this.outputBuffersToRetrieve, params); - this.handleOutputBuffersToRetrieve(); - this.writeOutputs(outputs); - this.shiftOutputBuffers(); - - return true; - } - - processOLA(inputs, outputs, params) { - console.assert(false, "Not overriden"); - } + processOLA(inputs, outputs, params) { + console.assert(false, 'Not overriden'); + } } -export default OLAProcessor; \ No newline at end of file +export default OLAProcessor; diff --git a/packages/superdough/package.json b/packages/superdough/package.json index 11cd562b..685ab9c5 100644 --- a/packages/superdough/package.json +++ b/packages/superdough/package.json @@ -35,7 +35,6 @@ "vite": "^5.0.10" }, "dependencies": { - "fft.js": "^4.0.4", "nanostores": "^0.9.5" } } diff --git a/packages/superdough/superdough.mjs b/packages/superdough/superdough.mjs index 46c56e56..01569788 100644 --- a/packages/superdough/superdough.mjs +++ b/packages/superdough/superdough.mjs @@ -8,7 +8,7 @@ import './feedbackdelay.mjs'; import './reverb.mjs'; import './vowel.mjs'; import { clamp, nanFallback, _mod } from './util.mjs'; -import workletsUrl from './worklets.mjs?url'; +import workletsUrl from './worklets.mjs?worker&url'; import { createFilter, gainNode, getCompressor, getWorklet } from './helpers.mjs'; import { map } from 'nanostores'; import { logger } from './logger.mjs'; @@ -309,6 +309,13 @@ export function resetGlobalEffects() { } export const superdough = async (value, t, hapDuration) => { + t = typeof t === 'string' && t.startsWith('=') ? Number(t.slice(1)) : ac.currentTime + t; + let { stretch } = value; + if (stretch != null) { + //account for phase vocoder latency + const latency = 0.04; + t = t - latency; + } const ac = getAudioContext(); if (typeof value !== 'object') { throw new Error( @@ -320,7 +327,7 @@ export const superdough = async (value, t, hapDuration) => { // duration is passed as value too.. value.duration = hapDuration; // calculate absolute time - t = typeof t === 'string' && t.startsWith('=') ? Number(t.slice(1)) : ac.currentTime + t; + if (t < ac.currentTime) { console.warn( `[superdough]: cannot schedule sounds in the past (target: ${t.toFixed(2)}, now: ${ac.currentTime.toFixed(2)})`, @@ -371,7 +378,6 @@ export const superdough = async (value, t, hapDuration) => { // coarse, crush, - stretch, shape, shapevol = getDefaultValue('shapevol'), distort, @@ -441,7 +447,6 @@ export const superdough = async (value, t, hapDuration) => { chain.push(sourceNode); stretch !== undefined && chain.push(getWorklet(ac, 'phase-vocoder-processor', { pitchFactor: stretch })); - // gain stage chain.push(gainNode(gain)); @@ -587,4 +592,6 @@ export const superdough = async (value, t, hapDuration) => { toDisconnect = chain.concat([delaySend, reverbSend, analyserSend]); }; -export const superdoughTrigger = (t, hap, ct, cps) => superdough(hap, t - ct, hap.duration / cps, cps); +export const superdoughTrigger = (t, hap, ct, cps) => { + superdough(hap, t - ct, hap.duration / cps, cps); +}; diff --git a/packages/superdough/worklets.mjs b/packages/superdough/worklets.mjs index 61078634..a2b7828c 100644 --- a/packages/superdough/worklets.mjs +++ b/packages/superdough/worklets.mjs @@ -2,8 +2,8 @@ // LICENSE GNU General Public License v3.0 see https://github.com/dktr0/WebDirt/blob/main/LICENSE // TOFIX: THIS FILE DOES NOT SUPPORT IMPORTS ON DEPOLYMENT -import OLAProcessor from "./ola-processor" -import FFT from './fft.js'; +import OLAProcessor from './ola-processor'; +import FFT from './fft.js'; const clamp = (num, min, max) => Math.min(Math.max(num, min), max); const _mod = (n, m) => ((n % m) + m) % m; @@ -469,181 +469,182 @@ class SuperSawOscillatorProcessor extends AudioWorkletProcessor { registerProcessor('supersaw-oscillator', SuperSawOscillatorProcessor); - - - - +// Phase Vocoder sourced from // sourced from https://github.com/olvb/phaze/tree/master?tab=readme-ov-file const BUFFERED_BLOCK_SIZE = 2048; function genHannWindow(length) { - let win = new Float32Array(length); - for (var i = 0; i < length; i++) { - win[i] = 0.5 * (1 - Math.cos(2 * Math.PI * i / length)); - } - return win; + let win = new Float32Array(length); + for (var i = 0; i < length; i++) { + win[i] = 0.5 * (1 - Math.cos((2 * Math.PI * i) / length)); + } + return win; } class PhaseVocoderProcessor extends OLAProcessor { - static get parameterDescriptors() { - return [{ - name: 'pitchFactor', - defaultValue: 1.0 - }]; + static get parameterDescriptors() { + return [ + { + name: 'pitchFactor', + defaultValue: 1.0, + }, + ]; + } + + constructor(options) { + options.processorOptions = { + blockSize: BUFFERED_BLOCK_SIZE, + }; + super(options); + + this.fftSize = this.blockSize; + this.timeCursor = 0; + + this.hannWindow = genHannWindow(this.blockSize); + // prepare FFT and pre-allocate buffers + this.fft = new FFT(this.fftSize); + this.freqComplexBuffer = this.fft.createComplexArray(); + this.freqComplexBufferShifted = this.fft.createComplexArray(); + this.timeComplexBuffer = this.fft.createComplexArray(); + this.magnitudes = new Float32Array(this.fftSize / 2 + 1); + this.peakIndexes = new Int32Array(this.magnitudes.length); + this.nbPeaks = 0; + } + + processOLA(inputs, outputs, parameters) { + // no automation, take last value + + let pitchFactor = parameters.pitchFactor[parameters.pitchFactor.length - 1]; + + if (pitchFactor < 0) { + pitchFactor = pitchFactor * 0.25; + } + pitchFactor = Math.max(0, pitchFactor + 1); + + for (var i = 0; i < this.nbInputs; i++) { + for (var j = 0; j < inputs[i].length; j++) { + // big assumption here: output is symetric to input + var input = inputs[i][j]; + var output = outputs[i][j]; + + this.applyHannWindow(input); + + this.fft.realTransform(this.freqComplexBuffer, input); + + this.computeMagnitudes(); + this.findPeaks(); + this.shiftPeaks(pitchFactor); + + this.fft.completeSpectrum(this.freqComplexBufferShifted); + this.fft.inverseTransform(this.timeComplexBuffer, this.freqComplexBufferShifted); + this.fft.fromComplexArray(this.timeComplexBuffer, output); + this.applyHannWindow(output); + } } - constructor(options) { - options.processorOptions = { - blockSize: BUFFERED_BLOCK_SIZE, - }; - super(options); + this.timeCursor += this.hopSize; + } - this.fftSize = this.blockSize; - this.timeCursor = 0; - - this.hannWindow = genHannWindow(this.blockSize); - // prepare FFT and pre-allocate buffers - this.fft = new FFT(this.fftSize); - this.freqComplexBuffer = this.fft.createComplexArray(); - this.freqComplexBufferShifted = this.fft.createComplexArray(); - this.timeComplexBuffer = this.fft.createComplexArray(); - this.magnitudes = new Float32Array(this.fftSize / 2 + 1); - this.peakIndexes = new Int32Array(this.magnitudes.length); - this.nbPeaks = 0; + /** Apply Hann window in-place */ + applyHannWindow(input) { + for (var i = 0; i < this.blockSize; i++) { + input[i] = input[i] * this.hannWindow[i] * 1.62; } + } - processOLA(inputs, outputs, parameters) { - // no automation, take last value - const pitchFactor = parameters.pitchFactor[parameters.pitchFactor.length - 1]; + /** Compute squared magnitudes for peak finding **/ + computeMagnitudes() { + var i = 0, + j = 0; + while (i < this.magnitudes.length) { + let real = this.freqComplexBuffer[j]; + let imag = this.freqComplexBuffer[j + 1]; + // no need to sqrt for peak finding + this.magnitudes[i] = real ** 2 + imag ** 2; + i += 1; + j += 2; + } + } - for (var i = 0; i < this.nbInputs; i++) { - for (var j = 0; j < inputs[i].length; j++) { - // big assumption here: output is symetric to input - var input = inputs[i][j]; - var output = outputs[i][j]; + /** Find peaks in spectrum magnitudes **/ + findPeaks() { + this.nbPeaks = 0; + var i = 2; + let end = this.magnitudes.length - 2; - this.applyHannWindow(input); + while (i < end) { + let mag = this.magnitudes[i]; - this.fft.realTransform(this.freqComplexBuffer, input); + if (this.magnitudes[i - 1] >= mag || this.magnitudes[i - 2] >= mag) { + i++; + continue; + } + if (this.magnitudes[i + 1] >= mag || this.magnitudes[i + 2] >= mag) { + i++; + continue; + } - this.computeMagnitudes(); - this.findPeaks(); - this.shiftPeaks(pitchFactor); + this.peakIndexes[this.nbPeaks] = i; + this.nbPeaks++; + i += 2; + } + } - this.fft.completeSpectrum(this.freqComplexBufferShifted); - this.fft.inverseTransform(this.timeComplexBuffer, this.freqComplexBufferShifted); - this.fft.fromComplexArray(this.timeComplexBuffer, output); + /** Shift peaks and regions of influence by pitchFactor into new specturm */ + shiftPeaks(pitchFactor) { + // zero-fill new spectrum + this.freqComplexBufferShifted.fill(0); - this.applyHannWindow(output); - } + for (var i = 0; i < this.nbPeaks; i++) { + let peakIndex = this.peakIndexes[i]; + let peakIndexShifted = Math.round(peakIndex * pitchFactor); + + if (peakIndexShifted > this.magnitudes.length) { + break; + } + + // find region of influence + var startIndex = 0; + var endIndex = this.fftSize; + if (i > 0) { + let peakIndexBefore = this.peakIndexes[i - 1]; + startIndex = peakIndex - Math.floor((peakIndex - peakIndexBefore) / 2); + } + if (i < this.nbPeaks - 1) { + let peakIndexAfter = this.peakIndexes[i + 1]; + endIndex = peakIndex + Math.ceil((peakIndexAfter - peakIndex) / 2); + } + + // shift whole region of influence around peak to shifted peak + let startOffset = startIndex - peakIndex; + let endOffset = endIndex - peakIndex; + for (var j = startOffset; j < endOffset; j++) { + let binIndex = peakIndex + j; + let binIndexShifted = peakIndexShifted + j; + + if (binIndexShifted >= this.magnitudes.length) { + break; } - this.timeCursor += this.hopSize; - } - - /** Apply Hann window in-place */ - applyHannWindow(input) { - for (var i = 0; i < this.blockSize; i++) { - input[i] = input[i] * this.hannWindow[i]; - } - } - - /** Compute squared magnitudes for peak finding **/ - computeMagnitudes() { - var i = 0, j = 0; - while (i < this.magnitudes.length) { - let real = this.freqComplexBuffer[j]; - let imag = this.freqComplexBuffer[j + 1]; - // no need to sqrt for peak finding - this.magnitudes[i] = real ** 2 + imag ** 2; - i+=1; - j+=2; - } - } - - /** Find peaks in spectrum magnitudes **/ - findPeaks() { - this.nbPeaks = 0; - var i = 2; - let end = this.magnitudes.length - 2; - - while (i < end) { - let mag = this.magnitudes[i]; - - if (this.magnitudes[i - 1] >= mag || this.magnitudes[i - 2] >= mag) { - i++; - continue; - } - if (this.magnitudes[i + 1] >= mag || this.magnitudes[i + 2] >= mag) { - i++; - continue; - } - - this.peakIndexes[this.nbPeaks] = i; - this.nbPeaks++; - i += 2; - } - } - - /** Shift peaks and regions of influence by pitchFactor into new specturm */ - shiftPeaks(pitchFactor) { - // zero-fill new spectrum - this.freqComplexBufferShifted.fill(0); - - for (var i = 0; i < this.nbPeaks; i++) { - let peakIndex = this.peakIndexes[i]; - let peakIndexShifted = Math.round(peakIndex * pitchFactor); - - if (peakIndexShifted > this.magnitudes.length) { - break; - } - - // find region of influence - var startIndex = 0; - var endIndex = this.fftSize; - if (i > 0) { - let peakIndexBefore = this.peakIndexes[i - 1]; - startIndex = peakIndex - Math.floor((peakIndex - peakIndexBefore) / 2); - } - if (i < this.nbPeaks - 1) { - let peakIndexAfter = this.peakIndexes[i + 1]; - endIndex = peakIndex + Math.ceil((peakIndexAfter - peakIndex) / 2); - } - - // shift whole region of influence around peak to shifted peak - let startOffset = startIndex - peakIndex; - let endOffset = endIndex - peakIndex; - for (var j = startOffset; j < endOffset; j++) { - let binIndex = peakIndex + j; - let binIndexShifted = peakIndexShifted + j; - - if (binIndexShifted >= this.magnitudes.length) { - break; - } - - // apply phase correction - let omegaDelta = 2 * Math.PI * (binIndexShifted - binIndex) / this.fftSize; - let phaseShiftReal = Math.cos(omegaDelta * this.timeCursor); - let phaseShiftImag = Math.sin(omegaDelta * this.timeCursor); - - let indexReal = binIndex * 2; - let indexImag = indexReal + 1; - let valueReal = this.freqComplexBuffer[indexReal]; - let valueImag = this.freqComplexBuffer[indexImag]; - - let valueShiftedReal = valueReal * phaseShiftReal - valueImag * phaseShiftImag; - let valueShiftedImag = valueReal * phaseShiftImag + valueImag * phaseShiftReal; - - let indexShiftedReal = binIndexShifted * 2; - let indexShiftedImag = indexShiftedReal + 1; - this.freqComplexBufferShifted[indexShiftedReal] += valueShiftedReal; - this.freqComplexBufferShifted[indexShiftedImag] += valueShiftedImag; - } - } + // apply phase correction + let omegaDelta = (2 * Math.PI * (binIndexShifted - binIndex)) / this.fftSize; + let phaseShiftReal = Math.cos(omegaDelta * this.timeCursor); + let phaseShiftImag = Math.sin(omegaDelta * this.timeCursor); + + let indexReal = binIndex * 2; + let indexImag = indexReal + 1; + let valueReal = this.freqComplexBuffer[indexReal]; + let valueImag = this.freqComplexBuffer[indexImag]; + + let valueShiftedReal = valueReal * phaseShiftReal - valueImag * phaseShiftImag; + let valueShiftedImag = valueReal * phaseShiftImag + valueImag * phaseShiftReal; + + let indexShiftedReal = binIndexShifted * 2; + let indexShiftedImag = indexShiftedReal + 1; + this.freqComplexBufferShifted[indexShiftedReal] += valueShiftedReal; + this.freqComplexBufferShifted[indexShiftedImag] += valueShiftedImag; + } } + } } -registerProcessor("phase-vocoder-processor", PhaseVocoderProcessor); - - - - +registerProcessor('phase-vocoder-processor', PhaseVocoderProcessor); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9f06a6a9..0082b522 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -48,9 +48,6 @@ importers: events: specifier: ^3.3.0 version: 3.3.0 - fft-js: - specifier: ^0.0.12 - version: 0.0.12 jsdoc: specifier: ^4.0.2 version: 4.0.2 @@ -433,9 +430,6 @@ importers: packages/superdough: dependencies: - fft.js: - specifier: ^4.0.4 - version: 4.0.4 nanostores: specifier: ^0.9.5 version: 0.9.5 @@ -7700,18 +7694,6 @@ packages: resolution: {integrity: sha512-/exOvEuc+/iaUm105QIiOt4LpBdMTWsXxqR0HDF35vx3fmaKzw7354gTilCh5rkzEt8WYyG//ku3h3nRmd7CHQ==} dev: true - /fft-js@0.0.12: - resolution: {integrity: sha512-nLOa0/SYYnN2NPcLrI81UNSPxyg3q0sGiltfe9G1okg0nxs5CqAwtmaqPQdGcOryeGURaCoQx8Y4AUkhGTh7IQ==} - engines: {node: '>=0.12.0'} - dependencies: - bit-twiddle: 1.0.2 - commander: 2.7.1 - dev: true - - /fft.js@4.0.4: - resolution: {integrity: sha512-f9c00hphOgeQTlDyavwTtu6RiK8AIFjD6+jvXkNkpeQ7rirK3uFWVpalkoS4LAwbdX7mfZ8aoBfFVQX1Re/8aw==} - dev: false - /fftjs@0.0.4: resolution: {integrity: sha512-nIWxQyth1LVD6NH8a+YZUv+McjzbOY6dMe4wv6Pq5cGfP+c8Rd1T8Dsd50DCWlNgzSqA3y9lOkpD6dZD3qHa1A==} dependencies: From 11102adb75404f75b6126dc8ccd5b71ffe165131 Mon Sep 17 00:00:00 2001 From: "Jade (Rose) Rowland" Date: Wed, 12 Jun 2024 01:14:20 -0400 Subject: [PATCH 06/17] unessecary import --- packages/core/pattern.mjs | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/core/pattern.mjs b/packages/core/pattern.mjs index 516c5815..cf726eed 100644 --- a/packages/core/pattern.mjs +++ b/packages/core/pattern.mjs @@ -21,7 +21,6 @@ import { numeralArgs, parseNumeral, pairs, - clamp, } from './util.mjs'; import drawLine from './drawLine.mjs'; import { logger } from './logger.mjs'; From f3fa1483d748e170c2424b2980b4f05bc9c34d94 Mon Sep 17 00:00:00 2001 From: "Jade (Rose) Rowland" Date: Wed, 12 Jun 2024 01:14:59 -0400 Subject: [PATCH 07/17] fix pnpm lock --- pnpm-lock.yaml | 15 --------------- 1 file changed, 15 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0082b522..a07618b8 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -5879,10 +5879,6 @@ packages: resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==} engines: {node: '>=8'} - /bit-twiddle@1.0.2: - resolution: {integrity: sha512-B9UhK0DKFZhoTFcfvAzhqsjStvGJp9vYWf3+6SNTtdSQnvIgfkHbgHrg/e4+TH71N2GDu8tpmCVoyfrL1d7ntA==} - dev: true - /bl@4.1.0: resolution: {integrity: sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==} dependencies: @@ -6440,13 +6436,6 @@ packages: resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==} dev: true - /commander@2.7.1: - resolution: {integrity: sha512-5qK/Wsc2fnRCiizV1JlHavWrSGAXQI7AusK423F8zJLwIGq8lmtO5GmO8PVMrtDUJMwTXOFBzSN6OCRD8CEMWw==} - engines: {node: '>= 0.6.x'} - dependencies: - graceful-readlink: 1.0.1 - dev: true - /commander@4.1.1: resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==} engines: {node: '>= 6'} @@ -8262,10 +8251,6 @@ packages: resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==} dev: true - /graceful-readlink@1.0.1: - resolution: {integrity: sha512-8tLu60LgxF6XpdbK8OW3FA+IfTNBn1ZHGHKF4KQbEeSkajYw5PlYJcKluntgegDPTg8UkHjpet1T82vk6TQ68w==} - dev: true - /graphemer@1.4.0: resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==} From 248f67d1abd5f42076d74e7e0520e5cbbeeacc71 Mon Sep 17 00:00:00 2001 From: "Jade (Rose) Rowland" Date: Wed, 12 Jun 2024 10:28:12 -0400 Subject: [PATCH 08/17] prettier --- packages/core/pattern.mjs | 1 - test/__snapshots__/examples.test.mjs.snap | 17 +++++++++++++++++ 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/packages/core/pattern.mjs b/packages/core/pattern.mjs index cf726eed..a8a4f7da 100644 --- a/packages/core/pattern.mjs +++ b/packages/core/pattern.mjs @@ -1970,7 +1970,6 @@ export const late = register( true, ); - /** * Plays a portion of a pattern, specified by the beginning and end of a time span. The new resulting pattern is played over the time period of the original pattern: * diff --git a/test/__snapshots__/examples.test.mjs.snap b/test/__snapshots__/examples.test.mjs.snap index 3c1e39f8..41aa8d84 100644 --- a/test/__snapshots__/examples.test.mjs.snap +++ b/test/__snapshots__/examples.test.mjs.snap @@ -7486,6 +7486,23 @@ exports[`runs examples > example "steps" example index 0 1`] = ` ] `; +exports[`runs examples > example "stretch" example index 0 1`] = ` +[ + "[ (0/1 → 1/3) ⇝ 1/1 | s:gm_flute stretch:1 ]", + "[ 0/1 ⇜ (1/3 → 2/3) ⇝ 1/1 | s:gm_flute stretch:2 ]", + "[ 0/1 ⇜ (2/3 → 1/1) | s:gm_flute stretch:0.5 ]", + "[ (1/1 → 4/3) ⇝ 2/1 | s:gm_flute stretch:1 ]", + "[ 1/1 ⇜ (4/3 → 5/3) ⇝ 2/1 | s:gm_flute stretch:2 ]", + "[ 1/1 ⇜ (5/3 → 2/1) | s:gm_flute stretch:0.5 ]", + "[ (2/1 → 7/3) ⇝ 3/1 | s:gm_flute stretch:1 ]", + "[ 2/1 ⇜ (7/3 → 8/3) ⇝ 3/1 | s:gm_flute stretch:2 ]", + "[ 2/1 ⇜ (8/3 → 3/1) | s:gm_flute stretch:0.5 ]", + "[ (3/1 → 10/3) ⇝ 4/1 | s:gm_flute stretch:1 ]", + "[ 3/1 ⇜ (10/3 → 11/3) ⇝ 4/1 | s:gm_flute stretch:2 ]", + "[ 3/1 ⇜ (11/3 → 4/1) | s:gm_flute stretch:0.5 ]", +] +`; + exports[`runs examples > example "striate" example index 0 1`] = ` [ "[ 0/1 → 1/6 | s:numbers n:0 begin:0 end:0.16666666666666666 ]", From 6c9e0aaa1aa9bacc2793cc0cdfd2669350465e46 Mon Sep 17 00:00:00 2001 From: "Jade (Rose) Rowland" Date: Fri, 14 Jun 2024 01:24:08 -0400 Subject: [PATCH 09/17] added udels editor and header --- website/src/components/Udels/Udels.jsx | 7 ++- website/src/components/Udels/UdelsEditor.jsx | 34 ++++++++++ website/src/components/Udels/UdelsHeader.tsx | 25 ++++++++ website/src/repl/Repl.jsx | 10 ++- website/src/repl/components/BigPlayButton.jsx | 22 +++++++ website/src/repl/components/Code.jsx | 23 +++++++ .../components/UserFacingErrorMessage.jsx | 8 +++ website/src/repl/panel/NumberInput.jsx | 62 +++++++++++++++++++ website/src/settings.mjs | 6 +- 9 files changed, 190 insertions(+), 7 deletions(-) create mode 100644 website/src/components/Udels/UdelsEditor.jsx create mode 100644 website/src/components/Udels/UdelsHeader.tsx create mode 100644 website/src/repl/components/BigPlayButton.jsx create mode 100644 website/src/repl/components/Code.jsx create mode 100644 website/src/repl/components/UserFacingErrorMessage.jsx create mode 100644 website/src/repl/panel/NumberInput.jsx diff --git a/website/src/components/Udels/Udels.jsx b/website/src/components/Udels/Udels.jsx index b2d81ea9..72d983e0 100644 --- a/website/src/components/Udels/Udels.jsx +++ b/website/src/components/Udels/Udels.jsx @@ -2,6 +2,7 @@ import { code2hash } from '@strudel/core'; import { UdelFrame } from './UdelFrame'; import { useState } from 'react'; +import UdelsHeader from './UdelsHeader'; function NumberInput({ value, onChange, label = '', min, max }) { const [localState, setLocalState] = useState(value); @@ -68,7 +69,6 @@ export function Udels() { return (
-
+ {/*
-
+
*/}
, +// editorRef: React.MutableRefObject, +// error: Error +// init: () => void +// } + +export default function UdelsEditor(Props) { + const { context, containerRef, editorRef, error, init } = Props; + const { pending, started, handleTogglePlay } = context; + return ( + +
+ + {/*
*/} + +
+ +
+ + +
+ + ); +} diff --git a/website/src/components/Udels/UdelsHeader.tsx b/website/src/components/Udels/UdelsHeader.tsx new file mode 100644 index 00000000..7555e182 --- /dev/null +++ b/website/src/components/Udels/UdelsHeader.tsx @@ -0,0 +1,25 @@ +import NumberInput from '@src/repl/panel/NumberInput'; + +export default function UdelsHeader(Props) { + const { numWindows, setNumWindows } = Props; + + return ( + + ); +} diff --git a/website/src/repl/Repl.jsx b/website/src/repl/Repl.jsx index a4b7ba73..87ff653c 100644 --- a/website/src/repl/Repl.jsx +++ b/website/src/repl/Repl.jsx @@ -39,6 +39,7 @@ import PlayCircleIcon from '@heroicons/react/20/solid/PlayCircleIcon'; import './Repl.css'; import { setInterval, clearInterval } from 'worker-timers'; import { getMetadata } from '../metadata_parser'; +import UdelsEditor from '@components/Udels/UdelsEditor'; const { latestCode } = settingsMap.get(); @@ -234,7 +235,14 @@ export function Repl({ embedded = false }) { handleEvaluate, }; - const showPanel = !isEmbedded || isUdels(); + if (isUdels()) { + return ( + + ); + } + + const showPanel = !isEmbedded; + return (
diff --git a/website/src/repl/components/BigPlayButton.jsx b/website/src/repl/components/BigPlayButton.jsx new file mode 100644 index 00000000..80a4d345 --- /dev/null +++ b/website/src/repl/components/BigPlayButton.jsx @@ -0,0 +1,22 @@ +import PlayCircleIcon from '@heroicons/react/20/solid/PlayCircleIcon'; + +// type Props = { +// started: boolean; +// handleTogglePlay: () => void; +// }; +export default function BigPlayButton(Props) { + const { started, handleTogglePlay } = Props; + if (started) { + return; + } + + return ( + + ); +} diff --git a/website/src/repl/components/Code.jsx b/website/src/repl/components/Code.jsx new file mode 100644 index 00000000..5afc53eb --- /dev/null +++ b/website/src/repl/components/Code.jsx @@ -0,0 +1,23 @@ + + +// type Props = { +// containerRef: React.MutableRefObject, +// editorRef: React.MutableRefObject, +// init: () => void +// } +export function Code(Props) { +const {editorRef, containerRef, init} = Props; + + return ( +
{ + containerRef.current = el; + if (!editorRef.current) { + init(); + } + }} + >
+ ); +} diff --git a/website/src/repl/components/UserFacingErrorMessage.jsx b/website/src/repl/components/UserFacingErrorMessage.jsx new file mode 100644 index 00000000..ec8d8be3 --- /dev/null +++ b/website/src/repl/components/UserFacingErrorMessage.jsx @@ -0,0 +1,8 @@ +// type Props = { error: Error | null }; +export default function UserFacingErrorMessage(Props) { + const { error } = Props; + if (error == null) { + return; + } + return
{error.message || 'Unknown Error :-/'}
; +} diff --git a/website/src/repl/panel/NumberInput.jsx b/website/src/repl/panel/NumberInput.jsx new file mode 100644 index 00000000..d6683587 --- /dev/null +++ b/website/src/repl/panel/NumberInput.jsx @@ -0,0 +1,62 @@ +function Button(Props) { + const { children, onClick } = Props; + + return ( + + ); +} +export default function NumberInput(Props) { + const { value = 0, setValue, max, min} = Props; + + return ( +
+ + setValue(e.target.value)} + /> + +
+ ); + + +} diff --git a/website/src/settings.mjs b/website/src/settings.mjs index 3f1ca051..c7958912 100644 --- a/website/src/settings.mjs +++ b/website/src/settings.mjs @@ -1,7 +1,7 @@ import { persistentMap } from '@nanostores/persistent'; import { useStore } from '@nanostores/react'; import { register } from '@strudel/core'; -import { isUdels } from './repl/util.mjs'; +import { isUdels, } from './repl/util.mjs'; export const defaultAudioDeviceName = 'System Standard'; @@ -25,7 +25,7 @@ export const defaultSettings = { isZen: false, soundsFilter: 'all', patternFilter: 'community', - panelPosition: 'right', + panelPosition: 'right', userPatterns: '{}', audioDeviceName: defaultAudioDeviceName, }; @@ -61,7 +61,7 @@ export function useSettings() { isFlashEnabled: parseBoolean(state.isFlashEnabled), isSyncEnabled: isUdels() ? true : parseBoolean(state.isSyncEnabled), fontSize: Number(state.fontSize), - panelPosition: state.activeFooter !== '' ? state.panelPosition : 'bottom', // <-- keep this 'bottom' where it is! + panelPosition: state.activeFooter !== '' && !isUdels() ? state.panelPosition : 'bottom', // <-- keep this 'bottom' where it is! userPatterns: userPatterns, }; } From 2a2ddf205abf51c8d4a0edc450ee63474c585980 Mon Sep 17 00:00:00 2001 From: "Jade (Rose) Rowland" Date: Fri, 14 Jun 2024 14:26:23 -0400 Subject: [PATCH 10/17] need to fix window message --- website/src/components/Oven/Oven.jsx | 2 +- website/src/components/Udels/UdelFrame.jsx | 3 +- website/src/components/Udels/Udels.jsx | 41 +----------- website/src/components/Udels/UdelsEditor.jsx | 4 +- website/src/components/Udels/UdelsHeader.tsx | 2 +- website/src/repl/Repl.jsx | 50 ++++----------- website/src/repl/{ => components}/Header.jsx | 4 +- website/src/repl/{ => components}/Loader.jsx | 0 website/src/repl/components/NumberInput.jsx | 54 ++++++++++++++++ website/src/repl/components/ReplEditor.jsx | 39 ++++++++++++ .../panel/AudioDeviceSelector.jsx | 2 +- .../{ => components}/panel/ConsoleTab.jsx | 0 .../repl/{ => components}/panel/FilesTab.jsx | 2 +- .../src/repl/{ => components}/panel/Forms.jsx | 0 .../panel/ImportSoundsButton.jsx | 2 +- .../src/repl/{ => components}/panel/Panel.jsx | 2 +- .../{ => components}/panel/PatternsTab.jsx | 10 +-- .../repl/{ => components}/panel/Reference.jsx | 2 +- .../{ => components}/panel/SelectInput.jsx | 0 .../{ => components}/panel/SettingsTab.jsx | 4 +- .../repl/{ => components}/panel/SoundsTab.jsx | 2 +- .../{ => components}/panel/WelcomeTab.jsx | 0 website/src/repl/panel/NumberInput.jsx | 62 ------------------- 23 files changed, 126 insertions(+), 161 deletions(-) rename website/src/repl/{ => components}/Header.jsx (98%) rename website/src/repl/{ => components}/Loader.jsx (100%) create mode 100644 website/src/repl/components/NumberInput.jsx create mode 100644 website/src/repl/components/ReplEditor.jsx rename website/src/repl/{ => components}/panel/AudioDeviceSelector.jsx (94%) rename website/src/repl/{ => components}/panel/ConsoleTab.jsx (100%) rename website/src/repl/{ => components}/panel/FilesTab.jsx (97%) rename website/src/repl/{ => components}/panel/Forms.jsx (100%) rename website/src/repl/{ => components}/panel/ImportSoundsButton.jsx (97%) rename website/src/repl/{ => components}/panel/Panel.jsx (98%) rename website/src/repl/{ => components}/panel/PatternsTab.jsx (95%) rename website/src/repl/{ => components}/panel/Reference.jsx (98%) rename website/src/repl/{ => components}/panel/SelectInput.jsx (100%) rename website/src/repl/{ => components}/panel/SettingsTab.jsx (99%) rename website/src/repl/{ => components}/panel/SoundsTab.jsx (98%) rename website/src/repl/{ => components}/panel/WelcomeTab.jsx (100%) delete mode 100644 website/src/repl/panel/NumberInput.jsx diff --git a/website/src/components/Oven/Oven.jsx b/website/src/components/Oven/Oven.jsx index a4199b5e..eb3c8692 100644 --- a/website/src/components/Oven/Oven.jsx +++ b/website/src/components/Oven/Oven.jsx @@ -1,7 +1,7 @@ import { useState, useEffect } from 'react'; import { loadFeaturedPatterns, loadPublicPatterns } from '@src/user_pattern_utils.mjs'; import { MiniRepl } from '@src/docs/MiniRepl'; -import { PatternLabel } from '@src/repl/panel/PatternsTab'; +import { PatternLabel } from '@src/repl/components/panel/PatternsTab'; function PatternList({ patterns }) { return ( diff --git a/website/src/components/Udels/UdelFrame.jsx b/website/src/components/Udels/UdelFrame.jsx index 78d28944..856aa831 100644 --- a/website/src/components/Udels/UdelFrame.jsx +++ b/website/src/components/Udels/UdelFrame.jsx @@ -2,8 +2,9 @@ import { useRef } from 'react'; export function UdelFrame({ onEvaluate, hash, instance }) { const ref = useRef(); - + console.info('frame') window.addEventListener('message', (message) => { + console.info(message, 'message') const childWindow = ref?.current?.contentWindow; if (message == null || message.source !== childWindow) { return; // Skip message in this event listener diff --git a/website/src/components/Udels/Udels.jsx b/website/src/components/Udels/Udels.jsx index 72d983e0..c3062419 100644 --- a/website/src/components/Udels/Udels.jsx +++ b/website/src/components/Udels/Udels.jsx @@ -4,36 +4,7 @@ import { UdelFrame } from './UdelFrame'; import { useState } from 'react'; import UdelsHeader from './UdelsHeader'; -function NumberInput({ value, onChange, label = '', min, max }) { - const [localState, setLocalState] = useState(value); - const [isFocused, setIsFocused] = useState(false); - return ( - - ); -} const defaultHash = 'c3RhY2soCiAgCik%3D'; const getHashesFromUrl = () => { @@ -60,6 +31,7 @@ export function Udels() { const onEvaluate = (key, code) => { const hashes = getHashesFromUrl(); hashes[key] = code2hash(code); + updateURLHashes(hashes); }; // useEffect(() => { @@ -78,17 +50,6 @@ export function Udels() { }} > - {/*
- -
*/}
-
- -
- {isEmbedded && !started && ( - - )} -
-
{ - containerRef.current = el; - if (!editorRef.current) { - init(); - } - }} - >
- {panelPosition === 'right' && showPanel && } -
- {error && ( -
{error.message || 'Unknown Error :-/'}
- )} - {panelPosition === 'bottom' && showPanel && } -
- + ); } diff --git a/website/src/repl/Header.jsx b/website/src/repl/components/Header.jsx similarity index 98% rename from website/src/repl/Header.jsx rename to website/src/repl/components/Header.jsx index 748b84e4..288822dd 100644 --- a/website/src/repl/Header.jsx +++ b/website/src/repl/components/Header.jsx @@ -5,9 +5,9 @@ import PlayCircleIcon from '@heroicons/react/20/solid/PlayCircleIcon'; import SparklesIcon from '@heroicons/react/20/solid/SparklesIcon'; import StopCircleIcon from '@heroicons/react/20/solid/StopCircleIcon'; import cx from '@src/cx.mjs'; -import { useSettings, setIsZen } from '../settings.mjs'; +import { useSettings, setIsZen } from '../../settings.mjs'; // import { ReplContext } from './Repl'; -import './Repl.css'; +import '../Repl.css'; const { BASE_URL } = import.meta.env; const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL; diff --git a/website/src/repl/Loader.jsx b/website/src/repl/components/Loader.jsx similarity index 100% rename from website/src/repl/Loader.jsx rename to website/src/repl/components/Loader.jsx diff --git a/website/src/repl/components/NumberInput.jsx b/website/src/repl/components/NumberInput.jsx new file mode 100644 index 00000000..0c3e7e53 --- /dev/null +++ b/website/src/repl/components/NumberInput.jsx @@ -0,0 +1,54 @@ +function Button(Props) { + const { children, onClick } = Props; + + return ( + + ); +} +export default function NumberInput(Props) { + const { value = 0, setValue, max, min } = Props; + + return ( +
+ + setValue(e.target.value)} + /> + +
+ ); +} diff --git a/website/src/repl/components/ReplEditor.jsx b/website/src/repl/components/ReplEditor.jsx new file mode 100644 index 00000000..57eabb71 --- /dev/null +++ b/website/src/repl/components/ReplEditor.jsx @@ -0,0 +1,39 @@ +import { ReplContext } from '@src/repl/util.mjs'; + +import Loader from '@src/repl/components/Loader'; +import { Panel } from '@src/repl/components/panel/Panel'; +import { Code } from '@src/repl/components/Code'; +import BigPlayButton from '@src/repl/components/BigPlayButton'; +import UserFacingErrorMessage from '@src/repl/components/UserFacingErrorMessage'; +import { Header } from './Header'; + + +// type Props = { +// context: replcontext, +// containerRef: React.MutableRefObject, +// editorRef: React.MutableRefObject, +// error: Error +// init: () => void +// isEmbedded: boolean +// } + +export default function ReplEditor(Props) { + const { context, containerRef, editorRef, error, init, panelPosition } = Props; + const { pending, started, handleTogglePlay, isEmbedded } = context; + const showPanel = !isEmbedded; + return ( + +
+ +
+ {isEmbedded && } +
+ + {panelPosition === 'right' && showPanel && } +
+ + {panelPosition === 'bottom' && showPanel && } +
+ + ); +} diff --git a/website/src/repl/panel/AudioDeviceSelector.jsx b/website/src/repl/components/panel/AudioDeviceSelector.jsx similarity index 94% rename from website/src/repl/panel/AudioDeviceSelector.jsx rename to website/src/repl/components/panel/AudioDeviceSelector.jsx index 969bf387..d1f13c22 100644 --- a/website/src/repl/panel/AudioDeviceSelector.jsx +++ b/website/src/repl/components/panel/AudioDeviceSelector.jsx @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import { getAudioDevices, setAudioDevice } from '../util.mjs'; +import { getAudioDevices, setAudioDevice } from '../../util.mjs'; import { SelectInput } from './SelectInput'; const initdevices = new Map(); diff --git a/website/src/repl/panel/ConsoleTab.jsx b/website/src/repl/components/panel/ConsoleTab.jsx similarity index 100% rename from website/src/repl/panel/ConsoleTab.jsx rename to website/src/repl/components/panel/ConsoleTab.jsx diff --git a/website/src/repl/panel/FilesTab.jsx b/website/src/repl/components/panel/FilesTab.jsx similarity index 97% rename from website/src/repl/panel/FilesTab.jsx rename to website/src/repl/components/panel/FilesTab.jsx index d78ec1ec..2e121fb5 100644 --- a/website/src/repl/panel/FilesTab.jsx +++ b/website/src/repl/components/panel/FilesTab.jsx @@ -1,6 +1,6 @@ import { Fragment, useEffect } from 'react'; import React, { useMemo, useState } from 'react'; -import { isAudioFile, readDir, dir, playFile } from '../files.mjs'; +import { isAudioFile, readDir, dir, playFile } from '../../files.mjs'; export function FilesTab() { const [path, setPath] = useState([]); diff --git a/website/src/repl/panel/Forms.jsx b/website/src/repl/components/panel/Forms.jsx similarity index 100% rename from website/src/repl/panel/Forms.jsx rename to website/src/repl/components/panel/Forms.jsx diff --git a/website/src/repl/panel/ImportSoundsButton.jsx b/website/src/repl/components/panel/ImportSoundsButton.jsx similarity index 97% rename from website/src/repl/panel/ImportSoundsButton.jsx rename to website/src/repl/components/panel/ImportSoundsButton.jsx index da45705f..7862b766 100644 --- a/website/src/repl/panel/ImportSoundsButton.jsx +++ b/website/src/repl/components/panel/ImportSoundsButton.jsx @@ -1,5 +1,5 @@ import React, { useCallback, useState } from 'react'; -import { registerSamplesFromDB, uploadSamplesToDB, userSamplesDBConfig } from '../idbutils.mjs'; +import { registerSamplesFromDB, uploadSamplesToDB, userSamplesDBConfig } from '../../idbutils.mjs'; //choose a directory to locally import samples export default function ImportSoundsButton({ onComplete }) { diff --git a/website/src/repl/panel/Panel.jsx b/website/src/repl/components/panel/Panel.jsx similarity index 98% rename from website/src/repl/panel/Panel.jsx rename to website/src/repl/components/panel/Panel.jsx index 7d35f0e4..a7bb6a83 100644 --- a/website/src/repl/panel/Panel.jsx +++ b/website/src/repl/components/panel/Panel.jsx @@ -4,7 +4,7 @@ import useEvent from '@src/useEvent.mjs'; import cx from '@src/cx.mjs'; import { nanoid } from 'nanoid'; import { useCallback, useLayoutEffect, useEffect, useRef, useState } from 'react'; -import { setActiveFooter, useSettings } from '../../settings.mjs'; +import { setActiveFooter, useSettings } from '../../../settings.mjs'; import { ConsoleTab } from './ConsoleTab'; import { FilesTab } from './FilesTab'; import { Reference } from './Reference'; diff --git a/website/src/repl/panel/PatternsTab.jsx b/website/src/repl/components/panel/PatternsTab.jsx similarity index 95% rename from website/src/repl/panel/PatternsTab.jsx rename to website/src/repl/components/panel/PatternsTab.jsx index cacbe897..5e9119b1 100644 --- a/website/src/repl/panel/PatternsTab.jsx +++ b/website/src/repl/components/panel/PatternsTab.jsx @@ -5,13 +5,13 @@ import { useActivePattern, useViewingPatternData, userPattern, -} from '../../user_pattern_utils.mjs'; +} from '../../../user_pattern_utils.mjs'; import { useMemo } from 'react'; -import { getMetadata } from '../../metadata_parser'; -import { useExamplePatterns } from '../useExamplePatterns'; -import { parseJSON, isUdels } from '../util.mjs'; +import { getMetadata } from '../../../metadata_parser.js'; +import { useExamplePatterns } from '../../useExamplePatterns.jsx'; +import { parseJSON, isUdels } from '../../util.mjs'; import { ButtonGroup } from './Forms.jsx'; -import { settingsMap, useSettings } from '../../settings.mjs'; +import { settingsMap, useSettings } from '../../../settings.mjs'; function classNames(...classes) { return classes.filter(Boolean).join(' '); diff --git a/website/src/repl/panel/Reference.jsx b/website/src/repl/components/panel/Reference.jsx similarity index 98% rename from website/src/repl/panel/Reference.jsx rename to website/src/repl/components/panel/Reference.jsx index 9483e9c5..04297c0b 100644 --- a/website/src/repl/panel/Reference.jsx +++ b/website/src/repl/components/panel/Reference.jsx @@ -1,4 +1,4 @@ -import jsdocJson from '../../../../doc.json'; +import jsdocJson from '../../../../../doc.json'; const visibleFunctions = jsdocJson.docs .filter(({ name, description }) => name && !name.startsWith('_') && !!description) .sort((a, b) => /* a.meta.filename.localeCompare(b.meta.filename) + */ a.name.localeCompare(b.name)); diff --git a/website/src/repl/panel/SelectInput.jsx b/website/src/repl/components/panel/SelectInput.jsx similarity index 100% rename from website/src/repl/panel/SelectInput.jsx rename to website/src/repl/components/panel/SelectInput.jsx diff --git a/website/src/repl/panel/SettingsTab.jsx b/website/src/repl/components/panel/SettingsTab.jsx similarity index 99% rename from website/src/repl/panel/SettingsTab.jsx rename to website/src/repl/components/panel/SettingsTab.jsx index 36ec12bd..e1d047ea 100644 --- a/website/src/repl/panel/SettingsTab.jsx +++ b/website/src/repl/components/panel/SettingsTab.jsx @@ -1,6 +1,6 @@ -import { defaultSettings, settingsMap, useSettings } from '../../settings.mjs'; +import { defaultSettings, settingsMap, useSettings } from '../../../settings.mjs'; import { themes } from '@strudel/codemirror'; -import { isUdels } from '../util.mjs'; +import { isUdels } from '../../util.mjs'; import { ButtonGroup } from './Forms.jsx'; import { AudioDeviceSelector } from './AudioDeviceSelector.jsx'; diff --git a/website/src/repl/panel/SoundsTab.jsx b/website/src/repl/components/panel/SoundsTab.jsx similarity index 98% rename from website/src/repl/panel/SoundsTab.jsx rename to website/src/repl/components/panel/SoundsTab.jsx index 9b35d04b..8b7b36a8 100644 --- a/website/src/repl/panel/SoundsTab.jsx +++ b/website/src/repl/components/panel/SoundsTab.jsx @@ -2,7 +2,7 @@ import useEvent from '@src/useEvent.mjs'; import { useStore } from '@nanostores/react'; import { getAudioContext, soundMap, connectToDestination } from '@strudel/webaudio'; import React, { useMemo, useRef } from 'react'; -import { settingsMap, useSettings } from '../../settings.mjs'; +import { settingsMap, useSettings } from '../../../settings.mjs'; import { ButtonGroup } from './Forms.jsx'; import ImportSoundsButton from './ImportSoundsButton.jsx'; diff --git a/website/src/repl/panel/WelcomeTab.jsx b/website/src/repl/components/panel/WelcomeTab.jsx similarity index 100% rename from website/src/repl/panel/WelcomeTab.jsx rename to website/src/repl/components/panel/WelcomeTab.jsx diff --git a/website/src/repl/panel/NumberInput.jsx b/website/src/repl/panel/NumberInput.jsx deleted file mode 100644 index d6683587..00000000 --- a/website/src/repl/panel/NumberInput.jsx +++ /dev/null @@ -1,62 +0,0 @@ -function Button(Props) { - const { children, onClick } = Props; - - return ( - - ); -} -export default function NumberInput(Props) { - const { value = 0, setValue, max, min} = Props; - - return ( -
- - setValue(e.target.value)} - /> - -
- ); - - -} From 1d95da7a3a0aa62ec9168311fdb718e6bd7cc7c1 Mon Sep 17 00:00:00 2001 From: "Jade (Rose) Rowland" Date: Fri, 14 Jun 2024 15:28:24 -0400 Subject: [PATCH 11/17] fixed build window issue: --- packages/core/evaluate.mjs | 2 ++ website/src/components/Udels/UdelFrame.jsx | 2 -- website/src/settings.mjs | 8 ++++++-- 3 files changed, 8 insertions(+), 4 deletions(-) diff --git a/packages/core/evaluate.mjs b/packages/core/evaluate.mjs index 23cd44c1..af02a9a9 100644 --- a/packages/core/evaluate.mjs +++ b/packages/core/evaluate.mjs @@ -39,6 +39,8 @@ function safeEval(str, options = {}) { export const evaluate = async (code, transpiler, transpilerOptions) => { let meta = {}; + //post to iframe parent (like Udels) if it exists... + window.parent?.postMessage(code); if (transpiler) { // transform syntactically correct js code to semantically usable code const transpiled = transpiler(code, transpilerOptions); diff --git a/website/src/components/Udels/UdelFrame.jsx b/website/src/components/Udels/UdelFrame.jsx index 856aa831..8bbbe14e 100644 --- a/website/src/components/Udels/UdelFrame.jsx +++ b/website/src/components/Udels/UdelFrame.jsx @@ -2,9 +2,7 @@ import { useRef } from 'react'; export function UdelFrame({ onEvaluate, hash, instance }) { const ref = useRef(); - console.info('frame') window.addEventListener('message', (message) => { - console.info(message, 'message') const childWindow = ref?.current?.contentWindow; if (message == null || message.source !== childWindow) { return; // Skip message in this event listener diff --git a/website/src/settings.mjs b/website/src/settings.mjs index c7958912..1405fbf1 100644 --- a/website/src/settings.mjs +++ b/website/src/settings.mjs @@ -29,9 +29,13 @@ export const defaultSettings = { userPatterns: '{}', audioDeviceName: defaultAudioDeviceName, }; -const search = new URLSearchParams(window.location.search); + +let search = null; +if (typeof window !== 'undefined') { + search = new URLSearchParams(window.location.search); +} // if running multiple instance in one window, it will use the settings for that instance. else default to normal -const instance = parseInt(search.get('instance') ?? '0'); +const instance = parseInt(search?.get('instance') ?? '0'); const settings_key = `strudel-settings${instance > 0 ? instance : ''}`; export const settingsMap = persistentMap(settings_key, defaultSettings); From f3b83b41f5da6f1562d8ed43865ec8816b55bae3 Mon Sep 17 00:00:00 2001 From: "Jade (Rose) Rowland" Date: Fri, 14 Jun 2024 15:40:37 -0400 Subject: [PATCH 12/17] prettier --- website/src/components/Udels/Udels.jsx | 3 +-- website/src/components/Udels/UdelsHeader.tsx | 13 ++++--------- website/src/repl/components/Code.jsx | 4 +--- website/src/repl/components/ReplEditor.jsx | 3 +-- website/src/settings.mjs | 6 +++--- 5 files changed, 10 insertions(+), 19 deletions(-) diff --git a/website/src/components/Udels/Udels.jsx b/website/src/components/Udels/Udels.jsx index c3062419..0de70050 100644 --- a/website/src/components/Udels/Udels.jsx +++ b/website/src/components/Udels/Udels.jsx @@ -4,7 +4,6 @@ import { UdelFrame } from './UdelFrame'; import { useState } from 'react'; import UdelsHeader from './UdelsHeader'; - const defaultHash = 'c3RhY2soCiAgCik%3D'; const getHashesFromUrl = () => { @@ -31,7 +30,7 @@ export function Udels() { const onEvaluate = (key, code) => { const hashes = getHashesFromUrl(); hashes[key] = code2hash(code); - + updateURLHashes(hashes); }; // useEffect(() => { diff --git a/website/src/components/Udels/UdelsHeader.tsx b/website/src/components/Udels/UdelsHeader.tsx index 7049e781..d56f3a1d 100644 --- a/website/src/components/Udels/UdelsHeader.tsx +++ b/website/src/components/Udels/UdelsHeader.tsx @@ -7,16 +7,11 @@ export default function UdelsHeader(Props) {