diff --git a/index.mjs b/index.mjs index aeb5ff1b..941d6411 100644 --- a/index.mjs +++ b/index.mjs @@ -2,6 +2,7 @@ export * from './packages/core/index.mjs'; export * from './packages/csound/index.mjs'; export * from './packages/embed/index.mjs'; +export * from './packages/desktopbridge/index.mjs'; export * from './packages/midi/index.mjs'; export * from './packages/mini/index.mjs'; export * from './packages/osc/index.mjs'; diff --git a/packages/core/controls.mjs b/packages/core/controls.mjs index 9901f974..8dba27b8 100644 --- a/packages/core/controls.mjs +++ b/packages/core/controls.mjs @@ -153,6 +153,9 @@ const generic_params = [ */ ['bank'], + ['analyze'], // analyser node send amount 0 - 1 (used by scope) + ['fft'], // fftSize of analyser + /** * Amplitude envelope decay time: the time it takes after the attack time to reach the sustain level. * Note that the decay is only audible if the sustain value is lower than 1. @@ -510,6 +513,9 @@ const generic_params = [ * */ ['lsize'], + // label for pianoroll + ['activeLabel'], + [['label', 'activeLabel']], // ['lfo'], // ['lfocutoffint'], // ['lfodelay'], diff --git a/packages/core/draw.mjs b/packages/core/draw.mjs index 5ea0c591..d1cdd7be 100644 --- a/packages/core/draw.mjs +++ b/packages/core/draw.mjs @@ -9,25 +9,26 @@ import { Pattern, getTime, State, TimeSpan } from './index.mjs'; export const getDrawContext = (id = 'test-canvas') => { let canvas = document.querySelector('#' + id); if (!canvas) { + const scale = 2; // 2 = crisp on retina screens canvas = document.createElement('canvas'); canvas.id = id; - canvas.width = window.innerWidth; - canvas.height = window.innerHeight; + canvas.width = window.innerWidth * scale; + canvas.height = window.innerHeight * scale; canvas.style = 'pointer-events:none;width:100%;height:100%;position:fixed;top:0;left:0'; document.body.prepend(canvas); let timeout; window.addEventListener('resize', () => { timeout && clearTimeout(timeout); timeout = setTimeout(() => { - canvas.width = window.innerWidth; - canvas.height = window.innerHeight; + canvas.width = window.innerWidth * scale; + canvas.height = window.innerHeight * scale; }, 200); }); } return canvas.getContext('2d'); }; -Pattern.prototype.draw = function (callback, { from, to, onQuery }) { +Pattern.prototype.draw = function (callback, { from, to, onQuery } = {}) { if (window.strudelAnimation) { cancelAnimationFrame(window.strudelAnimation); } @@ -59,7 +60,7 @@ Pattern.prototype.draw = function (callback, { from, to, onQuery }) { export const cleanupDraw = (clearScreen = true) => { const ctx = getDrawContext(); - clearScreen && ctx.clearRect(0, 0, window.innerWidth, window.innerHeight); + clearScreen && ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.width); if (window.strudelAnimation) { cancelAnimationFrame(window.strudelAnimation); } diff --git a/packages/core/pianoroll.mjs b/packages/core/pianoroll.mjs index ce5020c9..f3d2c38a 100644 --- a/packages/core/pianoroll.mjs +++ b/packages/core/pianoroll.mjs @@ -29,138 +29,26 @@ const getValue = (e) => { return value; }; -Pattern.prototype.pianoroll = function ({ - cycles = 4, - playhead = 0.5, - overscan = 1, - flipTime = 0, - flipValues = 0, - hideNegative = false, - // inactive = '#C9E597', - // inactive = '#FFCA28', - inactive = '#7491D2', - active = '#FFCA28', - // background = '#2A3236', - background = 'transparent', - smear = 0, - playheadColor = 'white', - minMidi = 10, - maxMidi = 90, - autorange = 0, - timeframe: timeframeProp, - fold = 0, - vertical = 0, - labels = 0, -} = {}) { - const ctx = getDrawContext(); - const w = ctx.canvas.width; - const h = ctx.canvas.height; +Pattern.prototype.pianoroll = function (options = {}) { + let { cycles = 4, playhead = 0.5, overscan = 1, hideNegative = false } = options; + let from = -cycles * playhead; let to = cycles * (1 - playhead); - if (timeframeProp) { - console.warn('timeframe is deprecated! use from/to instead'); - from = 0; - to = timeframeProp; - } - const timeAxis = vertical ? h : w; - const valueAxis = vertical ? w : h; - let timeRange = vertical ? [timeAxis, 0] : [0, timeAxis]; // pixel range for time - const timeExtent = to - from; // number of seconds that fit inside the canvas frame - const valueRange = vertical ? [0, valueAxis] : [valueAxis, 0]; // pixel range for values - let valueExtent = maxMidi - minMidi + 1; // number of "slots" for values, overwritten if autorange true - let barThickness = valueAxis / valueExtent; // pixels per value, overwritten if autorange true - let foldValues = []; - flipTime && timeRange.reverse(); - flipValues && valueRange.reverse(); - this.draw( - (ctx, events, t) => { - ctx.fillStyle = background; - ctx.globalAlpha = 1; // reset! - if (!smear) { - ctx.clearRect(0, 0, w, h); - ctx.fillRect(0, 0, w, h); - } + (ctx, haps, t) => { const inFrame = (event) => (!hideNegative || event.whole.begin >= 0) && event.whole.begin <= t + to && event.endClipped >= t + from; - events.filter(inFrame).forEach((event) => { - const isActive = event.whole.begin <= t && event.endClipped > t; - ctx.fillStyle = event.context?.color || inactive; - ctx.strokeStyle = event.context?.color || active; - ctx.globalAlpha = event.context.velocity ?? event.value?.gain ?? 1; - const timePx = scale((event.whole.begin - (flipTime ? to : from)) / timeExtent, ...timeRange); - let durationPx = scale(event.duration / timeExtent, 0, timeAxis); - const value = getValue(event); - const valuePx = scale( - fold ? foldValues.indexOf(value) / foldValues.length : (Number(value) - minMidi) / valueExtent, - ...valueRange, - ); - let margin = 0; - const offset = scale(t / timeExtent, ...timeRange); - let coords; - if (vertical) { - coords = [ - valuePx + 1 - (flipValues ? barThickness : 0), // x - timeAxis - offset + timePx + margin + 1 - (flipTime ? 0 : durationPx), // y - barThickness - 2, // width - durationPx - 2, // height - ]; - } else { - coords = [ - timePx - offset + margin + 1 - (flipTime ? durationPx : 0), // x - valuePx + 1 - (flipValues ? 0 : barThickness), // y - durationPx - 2, // widith - barThickness - 2, // height - ]; - } - isActive ? ctx.strokeRect(...coords) : ctx.fillRect(...coords); - if (labels) { - const label = event.value.note ?? event.value.s + (event.value.n ? `:${event.value.n}` : ''); - ctx.font = `${barThickness * 0.75}px monospace`; - ctx.strokeStyle = 'black'; - ctx.fillStyle = isActive ? 'white' : 'black'; - ctx.textBaseline = 'top'; - ctx.fillText(label, ...coords); - } + pianoroll({ + ...options, + time: t, + ctx, + haps: haps.filter(inFrame), }); - ctx.globalAlpha = 1; // reset! - const playheadPosition = scale(-from / timeExtent, ...timeRange); - // draw playhead - ctx.strokeStyle = playheadColor; - ctx.beginPath(); - if (vertical) { - ctx.moveTo(0, playheadPosition); - ctx.lineTo(valueAxis, playheadPosition); - } else { - ctx.moveTo(playheadPosition, 0); - ctx.lineTo(playheadPosition, valueAxis); - } - ctx.stroke(); }, { from: from - overscan, to: to + overscan, - onQuery: (events) => { - const { min, max, values } = events.reduce( - ({ min, max, values }, e) => { - const v = getValue(e); - return { - min: v < min ? v : min, - max: v > max ? v : max, - values: values.includes(v) ? values : [...values, v], - }; - }, - { min: Infinity, max: -Infinity, values: [] }, - ); - if (autorange) { - minMidi = min; - maxMidi = max; - valueExtent = maxMidi - minMidi + 1; - } - foldValues = values.sort((a, b) => String(a).localeCompare(String(b))); - barThickness = fold ? valueAxis / foldValues.length : valueAxis / valueExtent; - }, }, ); return this; @@ -191,6 +79,13 @@ export function pianoroll({ fold = 0, vertical = 0, labels = false, + fill = 1, + fillActive = false, + strokeActive = true, + stroke, + hideInactive = 0, + colorizeInactive = 1, + fontFamily, ctx, } = {}) { const w = ctx.canvas.width; @@ -234,58 +129,75 @@ export function pianoroll({ // foldValues = values.sort((a, b) => a - b); foldValues = values.sort((a, b) => String(a).localeCompare(String(b))); barThickness = fold ? valueAxis / foldValues.length : valueAxis / valueExtent; - ctx.fillStyle = background; ctx.globalAlpha = 1; // reset! if (!smear) { ctx.clearRect(0, 0, w, h); ctx.fillRect(0, 0, w, h); } - /* const inFrame = (event) => - (!hideNegative || event.whole.begin >= 0) && event.whole.begin <= time + to && event.whole.end >= time + from; */ - haps - // .filter(inFrame) - .forEach((event) => { - const isActive = event.whole.begin <= time && event.endClipped > time; - const color = event.value?.color || event.context?.color; - ctx.fillStyle = color || inactive; - ctx.strokeStyle = color || active; - ctx.globalAlpha = event.context.velocity ?? event.value?.gain ?? 1; - const timePx = scale((event.whole.begin - (flipTime ? to : from)) / timeExtent, ...timeRange); - let durationPx = scale(event.duration / timeExtent, 0, timeAxis); - const value = getValue(event); - const valuePx = scale( - fold ? foldValues.indexOf(value) / foldValues.length : (Number(value) - minMidi) / valueExtent, - ...valueRange, - ); - let margin = 0; - const offset = scale(time / timeExtent, ...timeRange); - let coords; - if (vertical) { - coords = [ - valuePx + 1 - (flipValues ? barThickness : 0), // x - timeAxis - offset + timePx + margin + 1 - (flipTime ? 0 : durationPx), // y - barThickness - 2, // width - durationPx - 2, // height - ]; - } else { - coords = [ - timePx - offset + margin + 1 - (flipTime ? durationPx : 0), // x - valuePx + 1 - (flipValues ? 0 : barThickness), // y - durationPx - 2, // widith - barThickness - 2, // height - ]; - } - isActive ? ctx.strokeRect(...coords) : ctx.fillRect(...coords); - if (labels) { - const label = event.value.note ?? event.value.s + (event.value.n ? `:${event.value.n}` : ''); - ctx.font = `${barThickness * 0.75}px monospace`; - ctx.strokeStyle = 'black'; - ctx.fillStyle = isActive ? 'white' : 'black'; - ctx.textBaseline = 'top'; - ctx.fillText(label, ...coords); - } - }); + haps.forEach((event) => { + const isActive = event.whole.begin <= time && event.endClipped > time; + let strokeCurrent = stroke ?? (strokeActive && isActive); + let fillCurrent = (!isActive && fill) || (isActive && fillActive); + if (hideInactive && !isActive) { + return; + } + let color = event.value?.color || event.context?.color; + active = color || active; + inactive = colorizeInactive ? color || inactive : inactive; + color = isActive ? active : inactive; + ctx.fillStyle = fillCurrent ? color : 'transparent'; + ctx.strokeStyle = color; + ctx.globalAlpha = event.context.velocity ?? event.value?.gain ?? 1; + const timeProgress = (event.whole.begin - (flipTime ? to : from)) / timeExtent; + const timePx = scale(timeProgress, ...timeRange); + let durationPx = scale(event.duration / timeExtent, 0, timeAxis); + const value = getValue(event); + const valueProgress = fold + ? foldValues.indexOf(value) / foldValues.length + : (Number(value) - minMidi) / valueExtent; + const valuePx = scale(valueProgress, ...valueRange); + let margin = 0; + const offset = scale(time / timeExtent, ...timeRange); + let coords; + if (vertical) { + coords = [ + valuePx + 1 - (flipValues ? barThickness : 0), // x + timeAxis - offset + timePx + margin + 1 - (flipTime ? 0 : durationPx), // y + barThickness - 2, // width + durationPx - 2, // height + ]; + } else { + coords = [ + timePx - offset + margin + 1 - (flipTime ? durationPx : 0), // x + valuePx + 1 - (flipValues ? 0 : barThickness), // y + durationPx - 2, // widith + barThickness - 2, // height + ]; + } + /* const xFactor = Math.sin(performance.now() / 500) + 1; + coords[0] *= xFactor; */ + + if (strokeCurrent) { + ctx.strokeRect(...coords); + } + if (fillCurrent) { + ctx.fillRect(...coords); + } + //ctx.ellipse(...ellipseFromRect(...coords)) + if (labels) { + const defaultLabel = event.value.note ?? event.value.s + (event.value.n ? `:${event.value.n}` : ''); + const { label: inactiveLabel, activeLabel } = event.value; + const customLabel = isActive ? activeLabel || inactiveLabel : inactiveLabel; + const label = customLabel ?? defaultLabel; + let measure = vertical ? durationPx : barThickness * 0.75; + ctx.font = `${measure}px ${fontFamily || 'monospace'}`; + // font color + ctx.fillStyle = /* isActive && */ !fillCurrent ? color : 'black'; + ctx.textBaseline = 'top'; + ctx.fillText(label, ...coords); + } + }); ctx.globalAlpha = 1; // reset! const playheadPosition = scale(-from / timeExtent, ...timeRange); // draw playhead @@ -311,11 +223,15 @@ export function getDrawOptions(drawTime, options = {}) { } Pattern.prototype.punchcard = function (options) { - return this.onPaint((ctx, time, haps, drawTime) => - pianoroll({ ctx, time, haps, ...getDrawOptions(drawTime, options) }), + return this.onPaint((ctx, time, haps, drawTime, paintOptions = {}) => + pianoroll({ ctx, time, haps, ...getDrawOptions(drawTime, { ...paintOptions, ...options }) }), ); }; +Pattern.prototype.wordfall = function (options) { + return this.punchcard({ vertical: 1, labels: 1, stroke: 0, fillActive: 1, active: 'white', ...options }); +}; + /* Pattern.prototype.pianoroll = function (options) { return this.onPaint((ctx, time, haps, drawTime) => pianoroll({ ctx, time, haps, ...getDrawOptions(drawTime, { fold: 0, ...options }) }), diff --git a/packages/desktopbridge/README.md b/packages/desktopbridge/README.md new file mode 100644 index 00000000..6cf21bba --- /dev/null +++ b/packages/desktopbridge/README.md @@ -0,0 +1,3 @@ +# @strudel/desktopbridge + +This package contains utilities used to communicate with the Tauri backend \ No newline at end of file diff --git a/packages/desktopbridge/index.mjs b/packages/desktopbridge/index.mjs new file mode 100644 index 00000000..2cc9db3d --- /dev/null +++ b/packages/desktopbridge/index.mjs @@ -0,0 +1,8 @@ +/* +index.mjs - +Copyright (C) 2022 Strudel contributors - see +This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program. If not, see . +*/ + +export * from './midibridge.mjs'; +export * from './utils.mjs'; diff --git a/packages/desktopbridge/midibridge.mjs b/packages/desktopbridge/midibridge.mjs new file mode 100644 index 00000000..7e9528e7 --- /dev/null +++ b/packages/desktopbridge/midibridge.mjs @@ -0,0 +1,56 @@ +import { Invoke } from './utils.mjs'; +import { Pattern, noteToMidi } from '@strudel.cycles/core'; + +const ON_MESSAGE = 0x90; +const OFF_MESSAGE = 0x80; + +Pattern.prototype.midi = function (output) { + return this.onTrigger((time, hap, currentTime) => { + const { note, nrpnn, nrpv, ccn, ccv } = hap.value; + const offset = (time - currentTime) * 1000; + const velocity = Math.floor((hap.context?.velocity ?? 0.9) * 100); // TODO: refactor velocity + const duration = Math.floor(hap.duration.valueOf() * 1000 - 10); + const roundedOffset = Math.round(offset); + const midichan = (hap.value.midichan ?? 1) - 1; + const requestedport = output ?? 'IAC'; + const messagesfromjs = []; + if (note != null) { + const midiNumber = typeof note === 'number' ? note : noteToMidi(note); + messagesfromjs.push({ + requestedport, + message: [ON_MESSAGE + midichan, midiNumber, velocity], + offset: roundedOffset, + }); + messagesfromjs.push({ + requestedport, + message: [OFF_MESSAGE + midichan, midiNumber, velocity], + offset: roundedOffset + duration, + }); + } + if (ccv && ccn) { + if (typeof ccv !== 'number' || ccv < 0 || ccv > 1) { + throw new Error('expected ccv to be a number between 0 and 1'); + } + if (!['string', 'number'].includes(typeof ccn)) { + throw new Error('expected ccn to be a number or a string'); + } + const scaled = Math.round(ccv * 127); + messagesfromjs.push({ + requestedport, + message: [ON_MESSAGE + midichan, ccn, scaled], + offset: roundedOffset, + }); + messagesfromjs.push({ + requestedport, + message: [OFF_MESSAGE + midichan, ccn, scaled], + offset: roundedOffset + duration, + }); + } + // invoke is temporarily blocking, run in an async process + if (messagesfromjs.length) { + setTimeout(() => { + Invoke('sendmidi', { messagesfromjs }); + }); + } + }); +}; diff --git a/packages/desktopbridge/package.json b/packages/desktopbridge/package.json new file mode 100644 index 00000000..bdeda2d9 --- /dev/null +++ b/packages/desktopbridge/package.json @@ -0,0 +1,28 @@ +{ + "name": "@strudel/desktopbridge", + "version": "0.1.0", + "description": "send midi messages between the JS and Tauri (Rust) sides of the Studel desktop app", + "main": "index.mjs", + "type": "module", + "repository": { + "type": "git", + "url": "git+https://github.com/tidalcycles/strudel.git" + }, + "keywords": [ + "tidalcycles", + "strudel", + "pattern", + "livecoding", + "algorave" + ], + "author": "Jade Rowland ", + "license": "AGPL-3.0-or-later", + "bugs": { + "url": "https://github.com/tidalcycles/strudel/issues" + }, + "dependencies": { + "@strudel.cycles/core": "workspace:*", + "@tauri-apps/api": "^1.4.0" + }, + "homepage": "https://github.com/tidalcycles/strudel#readme" + } \ No newline at end of file diff --git a/packages/desktopbridge/utils.mjs b/packages/desktopbridge/utils.mjs new file mode 100644 index 00000000..c4c69af5 --- /dev/null +++ b/packages/desktopbridge/utils.mjs @@ -0,0 +1,4 @@ +import { invoke } from '@tauri-apps/api/tauri'; + +export const Invoke = invoke; +export const isTauri = () => window.__TAURI_IPC__ != null; diff --git a/packages/midi/midi.mjs b/packages/midi/midi.mjs index 29abf21b..98509b46 100644 --- a/packages/midi/midi.mjs +++ b/packages/midi/midi.mjs @@ -6,9 +6,8 @@ This program is free software: you can redistribute it and/or modify it under th import * as _WebMidi from 'webmidi'; import { Pattern, isPattern, logger } from '@strudel.cycles/core'; -import { getAudioContext } from '@strudel.cycles/webaudio'; import { noteToMidi } from '@strudel.cycles/core'; - +import { Note } from 'webmidi'; // if you use WebMidi from outside of this package, make sure to import that instance: export const { WebMidi } = _WebMidi; @@ -16,12 +15,28 @@ function supportsMidi() { return typeof navigator.requestMIDIAccess === 'function'; } -export function enableWebMidi(options = {}) { - const { onReady, onConnected, onDisconnected } = options; +function getMidiDeviceNamesString(outputs) { + return outputs.map((o) => `'${o.name}'`).join(' | '); +} +export function enableWebMidi(options = {}) { + const { onReady, onConnected, onDisconnected, onEnabled } = options; + if (WebMidi.enabled) { + return; + } if (!supportsMidi()) { throw new Error('Your Browser does not support WebMIDI.'); } + WebMidi.addListener('connected', () => { + onConnected?.(WebMidi); + }); + WebMidi.addListener('enabled', () => { + onEnabled?.(WebMidi); + }); + // Reacting when a device becomes unavailable + WebMidi.addListener('disconnected', (e) => { + onDisconnected?.(WebMidi, e); + }); return new Promise((resolve, reject) => { if (WebMidi.enabled) { // if already enabled, just resolve WebMidi @@ -32,13 +47,6 @@ export function enableWebMidi(options = {}) { if (err) { reject(err); } - WebMidi.addListener('connected', (e) => { - onConnected?.(WebMidi); - }); - // Reacting when a device becomes unavailable - WebMidi.addListener('disconnected', (e) => { - onDisconnected?.(WebMidi, e); - }); onReady?.(WebMidi); resolve(WebMidi); }); @@ -47,8 +55,6 @@ export function enableWebMidi(options = {}) { // const outputByName = (name: string) => WebMidi.getOutputByName(name); const outputByName = (name) => WebMidi.getOutputByName(name); -let midiReady; - // output?: string | number, outputs: typeof WebMidi.outputs function getDevice(output, outputs) { if (!outputs.length) { @@ -60,29 +66,19 @@ function getDevice(output, outputs) { if (typeof output === 'string') { return outputByName(output); } - return outputs[0]; + // attempt to default to first IAC device if none is specified + const IACOutput = outputs.find((output) => output.name.includes('IAC')); + const device = IACOutput ?? outputs[0]; + if (!device) { + throw new Error( + `🔌 MIDI device '${output ? output : ''}' not found. Use one of ${getMidiDeviceNamesString(WebMidi.outputs)}`, + ); + } + + return IACOutput ?? outputs[0]; } -// Pattern.prototype.midi = function (output: string | number, channel = 1) { Pattern.prototype.midi = function (output) { - if (!supportsMidi()) { - throw new Error(`🎹 WebMidi is not enabled. Supported Browsers: https://caniuse.com/?search=webmidi`); - } - /* await */ enableWebMidi({ - onConnected: ({ outputs }) => - logger(`Midi device connected! Available: ${outputs.map((o) => `'${o.name}'`).join(', ')}`), - onDisconnected: ({ outputs }) => - logger(`Midi device disconnected! Available: ${outputs.map((o) => `'${o.name}'`).join(', ')}`), - onReady: ({ outputs }) => { - const device = getDevice(output, outputs); - const otherOutputs = outputs - .filter((o) => o.name !== device.name) - .map((o) => `'${o.name}'`) - .join(' | '); - midiReady = true; - logger(`Midi connected! Using "${device.name}". ${otherOutputs ? `Also available: ${otherOutputs}` : ''}`); - }, - }); if (isPattern(output)) { throw new Error( `.midi does not accept Pattern input. Make sure to pass device name with single quotes. Example: .midi('${ @@ -90,35 +86,43 @@ Pattern.prototype.midi = function (output) { }')`, ); } - return this.onTrigger((time, hap) => { - if (!midiReady) { + + enableWebMidi({ + onEnabled: ({ outputs }) => { + const device = getDevice(output, outputs); + const otherOutputs = outputs.filter((o) => o.name !== device.name); + logger( + `Midi enabled! Using "${device.name}". ${ + otherOutputs?.length ? `Also available: ${getMidiDeviceNamesString(otherOutputs)}` : '' + }`, + ); + }, + onDisconnected: ({ outputs }) => + logger(`Midi device disconnected! Available: ${getMidiDeviceNamesString(outputs)}`), + }); + + return this.onTrigger((time, hap, currentTime, cps) => { + if (!WebMidi.enabled) { return; } const device = getDevice(output, WebMidi.outputs); - if (!device) { - throw new Error( - `🔌 MIDI device '${output ? output : ''}' not found. Use one of ${WebMidi.outputs - .map((o) => `'${o.name}'`) - .join(' | ')}`, - ); - } hap.ensureObjectValue(); - // calculate time - const timingOffset = WebMidi.time - getAudioContext().getOutputTimestamp().contextTime * 1000; - time = time * 1000 + timingOffset; + const offset = (time - currentTime) * 1000; + // passing a string with a +num into the webmidi api adds an offset to the current time https://webmidijs.org/api/classes/Output + const timeOffsetString = `+${offset}`; // destructure value const { note, nrpnn, nrpv, ccn, ccv, midichan = 1 } = hap.value; const velocity = hap.context?.velocity ?? 0.9; // TODO: refactor velocity - const duration = hap.duration.valueOf() * 1000 - 5; + // note off messages will often a few ms arrive late, try to prevent glitching by subtracting from the duration length + const duration = Math.floor(hap.duration.valueOf() * 1000 - 10); if (note != null) { const midiNumber = typeof note === 'number' ? note : noteToMidi(note); - device.playNote(midiNumber, midichan, { - time, - duration, - attack: velocity, + const midiNote = new Note(midiNumber, { attack: velocity, duration }); + device.playNote(midiNote, midichan, { + time: timeOffsetString, }); } if (ccv && ccn) { @@ -129,7 +133,7 @@ Pattern.prototype.midi = function (output) { throw new Error('expected ccn to be a number or a string'); } const scaled = Math.round(ccv * 127); - device.sendControlChange(ccn, scaled, midichan, { time }); + device.sendControlChange(ccn, scaled, midichan, { time: timeOffsetString }); } }); }; diff --git a/packages/react/src/hooks/usePatternFrame.mjs b/packages/react/src/hooks/usePatternFrame.mjs index 065c6ba7..725fe0a3 100644 --- a/packages/react/src/hooks/usePatternFrame.mjs +++ b/packages/react/src/hooks/usePatternFrame.mjs @@ -25,10 +25,10 @@ function usePatternFrame({ pattern, started, getTime, onDraw, drawTime = [-2, 2] const haps = pattern.queryArc(Math.max(lastFrame.current, phase - 1 / 10), phase); lastFrame.current = phase; visibleHaps.current = (visibleHaps.current || []) - .filter((h) => h.whole.end >= phase - lookbehind - lookahead) // in frame + .filter((h) => h.endClipped >= phase - lookbehind - lookahead) // in frame .concat(haps.filter((h) => h.hasOnset())); onDraw(pattern, phase - lookahead, visibleHaps.current, drawTime); - }, [pattern]), + }, [pattern, onDraw]), ); useEffect(() => { if (started) { diff --git a/packages/react/src/hooks/useStrudel.mjs b/packages/react/src/hooks/useStrudel.mjs index 223c21ba..a10998e7 100644 --- a/packages/react/src/hooks/useStrudel.mjs +++ b/packages/react/src/hooks/useStrudel.mjs @@ -18,6 +18,7 @@ function useStrudel({ canvasId, drawContext, drawTime = [-2, 2], + paintOptions = {}, }) { const id = useMemo(() => s4(), []); canvasId = canvasId || `canvas-${id}`; @@ -85,9 +86,9 @@ function useStrudel({ (pattern, time, haps, drawTime) => { const { onPaint } = pattern.context || {}; const ctx = typeof drawContext === 'function' ? drawContext(canvasId) : drawContext; - onPaint?.(ctx, time, haps, drawTime); + onPaint?.(ctx, time, haps, drawTime, paintOptions); }, - [drawContext, canvasId], + [drawContext, canvasId, paintOptions], ); const drawFirstFrame = useCallback( diff --git a/packages/react/src/index.js b/packages/react/src/index.js index f5bdbb35..818d9c95 100644 --- a/packages/react/src/index.js +++ b/packages/react/src/index.js @@ -8,4 +8,5 @@ export { default as usePostMessage } from './hooks/usePostMessage'; export { default as useKeydown } from './hooks/useKeydown'; export { default as useEvent } from './hooks/useEvent'; export { default as strudelTheme } from './themes/strudel-theme'; +export { default as teletext } from './themes/teletext'; export { default as cx } from './cx'; diff --git a/packages/react/src/themes/algoboy.js b/packages/react/src/themes/algoboy.js index b4db09de..399370e1 100644 --- a/packages/react/src/themes/algoboy.js +++ b/packages/react/src/themes/algoboy.js @@ -12,6 +12,7 @@ export const settings = { gutterBackground: 'transparent', gutterForeground: '#0f380f', light: true, + customStyle: '.cm-line { line-height: 1 }', }; export default createTheme({ theme: 'light', @@ -35,5 +36,6 @@ export default createTheme({ { tag: t.propertyName, color: '#0f380f' }, { tag: t.className, color: '#0f380f' }, { tag: t.invalid, color: '#0f380f' }, + { tag: [t.unit, t.punctuation], color: '#0f380f' }, ], }); diff --git a/packages/react/src/themes/blackscreen.js b/packages/react/src/themes/blackscreen.js index ac9627c3..135285a3 100644 --- a/packages/react/src/themes/blackscreen.js +++ b/packages/react/src/themes/blackscreen.js @@ -33,5 +33,6 @@ export default createTheme({ { tag: t.propertyName, color: 'white' }, { tag: t.className, color: 'white' }, { tag: t.invalid, color: 'white' }, + { tag: [t.unit, t.punctuation], color: 'white' }, ], }); diff --git a/packages/react/src/themes/bluescreen.js b/packages/react/src/themes/bluescreen.js index 4f72d8c5..aa6489d6 100644 --- a/packages/react/src/themes/bluescreen.js +++ b/packages/react/src/themes/bluescreen.js @@ -36,5 +36,6 @@ export default createTheme({ { tag: t.propertyName, color: 'white' }, { tag: t.className, color: 'white' }, { tag: t.invalid, color: 'white' }, + { tag: [t.unit, t.punctuation], color: 'white' }, ], }); diff --git a/packages/react/src/themes/strudel-theme.js b/packages/react/src/themes/strudel-theme.js index 36987c33..4ae31060 100644 --- a/packages/react/src/themes/strudel-theme.js +++ b/packages/react/src/themes/strudel-theme.js @@ -40,5 +40,6 @@ export default createTheme({ { tag: t.className, color: '#decb6b' }, { tag: t.invalid, color: '#ffffff' }, + { tag: [t.unit, t.punctuation], color: '#82aaff' }, ], }); diff --git a/packages/react/src/themes/teletext.js b/packages/react/src/themes/teletext.js new file mode 100644 index 00000000..5fd9a557 --- /dev/null +++ b/packages/react/src/themes/teletext.js @@ -0,0 +1,50 @@ +import { tags as t } from '@lezer/highlight'; +import { createTheme } from '@uiw/codemirror-themes'; + +let colorA = '#6edee4'; +//let colorB = 'magenta'; +let colorB = 'white'; +let colorC = 'red'; +let colorD = '#f8fc55'; + +export const settings = { + background: '#000000', + foreground: colorA, // whats that? + caret: colorC, + selection: colorD, + selectionMatch: colorA, + lineHighlight: '#6edee440', // panel bg + lineBackground: '#00000040', + gutterBackground: 'transparent', + gutterForeground: '#8a919966', + customStyle: '.cm-line { line-height: 1 }', +}; + +let punctuation = colorD; +let mini = colorB; + +export default createTheme({ + theme: 'dark', + settings, + styles: [ + { tag: t.keyword, color: colorA }, + { tag: t.operator, color: mini }, + { tag: t.special(t.variableName), color: colorA }, + { tag: t.typeName, color: colorA }, + { tag: t.atom, color: colorA }, + { tag: t.number, color: mini }, + { tag: t.definition(t.variableName), color: colorA }, + { tag: t.string, color: mini }, + { tag: t.special(t.string), color: mini }, + { tag: t.comment, color: punctuation }, + { tag: t.variableName, color: colorA }, + { tag: t.tagName, color: colorA }, + { tag: t.bracket, color: punctuation }, + { tag: t.meta, color: colorA }, + { tag: t.attributeName, color: colorA }, + { tag: t.propertyName, color: colorA }, // methods + { tag: t.className, color: colorA }, + { tag: t.invalid, color: colorC }, + { tag: [t.unit, t.punctuation], color: punctuation }, + ], +}); diff --git a/packages/superdough/helpers.mjs b/packages/superdough/helpers.mjs index c97c06dc..07e2b121 100644 --- a/packages/superdough/helpers.mjs +++ b/packages/superdough/helpers.mjs @@ -6,17 +6,6 @@ export function gainNode(value) { return node; } -export const getOscillator = ({ s, freq, t }) => { - // make oscillator - const o = getAudioContext().createOscillator(); - o.type = s || 'triangle'; - o.frequency.value = Number(freq); - o.start(t); - //o.stop(t + duration + release); - const stop = (time) => o.stop(time); - return { node: o, stop }; -}; - // alternative to getADSR returning the gain node and a stop handle to trigger the release anytime in the future export const getEnvelope = (attack, decay, sustain, release, velocity, begin) => { const gainNode = getAudioContext().createGain(); diff --git a/packages/superdough/superdough.mjs b/packages/superdough/superdough.mjs index 1279000c..d5a2ca3f 100644 --- a/packages/superdough/superdough.mjs +++ b/packages/superdough/superdough.mjs @@ -121,6 +121,36 @@ function getReverb(orbit, duration = 2) { return reverbs[orbit]; } +export let analyser, analyserData /* s = {} */; +export function getAnalyser(/* orbit, */ fftSize = 2048) { + if (!analyser /*s [orbit] */) { + const analyserNode = getAudioContext().createAnalyser(); + analyserNode.fftSize = fftSize; + // getDestination().connect(analyserNode); + analyser /* s[orbit] */ = analyserNode; + //analyserData = new Uint8Array(analyser.frequencyBinCount); + analyserData = new Float32Array(analyser.frequencyBinCount); + } + if (analyser /* s[orbit] */.fftSize !== fftSize) { + analyser /* s[orbit] */.fftSize = fftSize; + //analyserData = new Uint8Array(analyser.frequencyBinCount); + analyserData = new Float32Array(analyser.frequencyBinCount); + } + return analyser /* s[orbit] */; +} + +export function getAnalyzerData(type = 'time') { + const getter = { + time: () => analyser?.getFloatTimeDomainData(analyserData), + frequency: () => analyser?.getFloatFrequencyData(analyserData), + }[type]; + if (!getter) { + throw new Error(`getAnalyzerData: ${type} not supported. use one of ${Object.keys(getter).join(', ')}`); + } + getter(); + return analyserData; +} + function effectSend(input, effect, wet) { const send = gainNode(wet); input.connect(send); @@ -167,6 +197,8 @@ export const superdough = async (value, deadline, hapDuration) => { room, size = 2, velocity = 1, + analyze, // analyser wet + fft = 8, // fftSize 0 - 10 } = value; gain *= velocity; // legacy fix for velocity let toDisconnect = []; // audio nodes that will be disconnected when the source has ended @@ -241,12 +273,19 @@ export const superdough = async (value, deadline, hapDuration) => { reverbSend = effectSend(post, reverbNode, room); } + // analyser + let analyserSend; + if (analyze) { + const analyserNode = getAnalyser(/* orbit, */ 2 ** (fft + 5)); + analyserSend = effectSend(post, analyserNode, analyze); + } + // connect chain elements together chain.slice(1).reduce((last, current) => last.connect(current), chain[0]); // toDisconnect = all the node that should be disconnected in onended callback // this is crucial for performance - toDisconnect = chain.concat([delaySend, reverbSend]); + toDisconnect = chain.concat([delaySend, reverbSend, analyserSend]); }; export const superdoughTrigger = (t, hap, ct, cps) => superdough(hap, t - ct, hap.duration / cps, cps); diff --git a/packages/superdough/synth.mjs b/packages/superdough/synth.mjs index c6773350..80909f0b 100644 --- a/packages/superdough/synth.mjs +++ b/packages/superdough/synth.mjs @@ -43,17 +43,17 @@ export function registerSynthSounds() { } = value; let { n, note, freq } = value; // with synths, n and note are the same thing - n = note || n || 36; - if (typeof n === 'string') { - n = noteToMidi(n); // e.g. c3 => 48 + note = note || 36; + if (typeof note === 'string') { + note = noteToMidi(note); // e.g. c3 => 48 } // get frequency - if (!freq && typeof n === 'number') { - freq = midiToFreq(n); // + 48); + if (!freq && typeof note === 'number') { + freq = midiToFreq(note); // + 48); } // maybe pull out the above frequency resolution?? (there is also getFrequency but it has no default) // make oscillator - const { node: o, stop } = getOscillator({ t, s: wave, freq }); + const { node: o, stop } = getOscillator({ t, s: wave, freq, partials: n }); // FM + FM envelope let stopFm, fmEnvelope; @@ -106,3 +106,49 @@ export function registerSynthSounds() { ); }); } + +export function waveformN(partials, type) { + const real = new Float32Array(partials + 1); + const imag = new Float32Array(partials + 1); + const ac = getAudioContext(); + const osc = ac.createOscillator(); + + const amplitudes = { + sawtooth: (n) => 1 / n, + square: (n) => (n % 2 === 0 ? 0 : 1 / n), + triangle: (n) => (n % 2 === 0 ? 0 : 1 / (n * n)), + }; + + if (!amplitudes[type]) { + throw new Error(`unknown wave type ${type}`); + } + + real[0] = 0; // dc offset + imag[0] = 0; + let n = 1; + while (n <= partials) { + real[n] = amplitudes[type](n); + imag[n] = 0; + n++; + } + + const wave = ac.createPeriodicWave(real, imag); + osc.setPeriodicWave(wave); + return osc; +} + +export function getOscillator({ s, freq, t, partials }) { + // make oscillator + let o; + if (!partials || s === 'sine') { + o = getAudioContext().createOscillator(); + o.type = s || 'triangle'; + } else { + o = waveformN(partials, s); + } + o.frequency.value = Number(freq); + o.start(t); + //o.stop(t + duration + release); + const stop = (time) => o.stop(time); + return { node: o, stop }; +} diff --git a/packages/webaudio/index.mjs b/packages/webaudio/index.mjs index 563a367e..a425e683 100644 --- a/packages/webaudio/index.mjs +++ b/packages/webaudio/index.mjs @@ -5,4 +5,5 @@ This program is free software: you can redistribute it and/or modify it under th */ export * from './webaudio.mjs'; +export * from './scope.mjs'; export * from 'superdough'; diff --git a/packages/webaudio/scope.mjs b/packages/webaudio/scope.mjs new file mode 100644 index 00000000..cfde80ce --- /dev/null +++ b/packages/webaudio/scope.mjs @@ -0,0 +1,88 @@ +import { Pattern, getDrawContext, clamp } from '@strudel.cycles/core'; +import { analyser, getAnalyzerData } from 'superdough'; + +export function drawTimeScope( + analyser, + { align = true, color = 'white', thickness = 3, scale = 0.25, pos = 0.75, next = 1, trigger = 0 } = {}, +) { + const ctx = getDrawContext(); + const dataArray = getAnalyzerData('time'); + + ctx.lineWidth = thickness; + ctx.strokeStyle = color; + + ctx.beginPath(); + let canvas = ctx.canvas; + + const bufferSize = analyser.frequencyBinCount; + let triggerIndex = align + ? Array.from(dataArray).findIndex((v, i, arr) => i && arr[i - 1] > -trigger && v <= -trigger) + : 0; + triggerIndex = Math.max(triggerIndex, 0); // fallback to 0 when no trigger is found + + const sliceWidth = (canvas.width * 1.0) / bufferSize; + let x = 0; + + for (let i = triggerIndex; i < bufferSize; i++) { + const v = dataArray[i] + 1; + const y = (scale * (v - 1) + pos) * canvas.height; + + if (i === 0) { + ctx.moveTo(x, y); + } else { + ctx.lineTo(x, y); + } + x += sliceWidth; + } + ctx.stroke(); +} + +export function drawFrequencyScope( + analyser, + { color = 'white', scale = 0.25, pos = 0.75, lean = 0.5, min = -150, max = 0 } = {}, +) { + const dataArray = getAnalyzerData('frequency'); + const ctx = getDrawContext(); + const canvas = ctx.canvas; + + ctx.fillStyle = color; + const bufferSize = analyser.frequencyBinCount; + const sliceWidth = (canvas.width * 1.0) / bufferSize; + + let x = 0; + for (let i = 0; i < bufferSize; i++) { + const normalized = clamp((dataArray[i] - min) / (max - min), 0, 1); + const v = normalized * scale; + const h = v * canvas.height; + const y = (pos - v * lean) * canvas.height; + + ctx.fillRect(x, y, Math.max(sliceWidth, 1), h); + x += sliceWidth; + } +} + +function clearScreen(smear = 0, smearRGB = `0,0,0`) { + const ctx = getDrawContext(); + if (!smear) { + ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); + } else { + ctx.fillStyle = `rgba(${smearRGB},${1 - smear})`; + ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height); + } +} + +Pattern.prototype.fscope = function (config = {}) { + return this.analyze(1).draw(() => { + clearScreen(config.smear); + analyser && drawFrequencyScope(analyser, config); + }); +}; + +Pattern.prototype.tscope = function (config = {}) { + return this.analyze(1).draw(() => { + clearScreen(config.smear); + analyser && drawTimeScope(analyser, config); + }); +}; + +Pattern.prototype.scope = Pattern.prototype.tscope; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 643a4766..8b48a93f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -176,6 +176,15 @@ importers: specifier: ^4.3.3 version: 4.3.3(@types/node@18.16.3) + packages/desktopbridge: + dependencies: + '@strudel.cycles/core': + specifier: workspace:* + version: link:../core + '@tauri-apps/api': + specifier: ^1.4.0 + version: 1.4.0 + packages/embed: {} packages/midi: @@ -579,6 +588,9 @@ importers: '@strudel.cycles/xen': specifier: workspace:* version: link:../packages/xen + '@strudel/desktopbridge': + specifier: workspace:* + version: link:../packages/desktopbridge '@supabase/supabase-js': specifier: ^2.21.0 version: 2.21.0 @@ -588,6 +600,9 @@ importers: '@tailwindcss/typography': specifier: ^0.5.8 version: 0.5.9(tailwindcss@3.3.2) + '@tauri-apps/api': + specifier: ^1.4.0 + version: 1.4.0 '@types/node': specifier: ^18.16.3 version: 18.16.3 @@ -3944,6 +3959,11 @@ packages: tailwindcss: 3.3.2 dev: false + /@tauri-apps/api@1.4.0: + resolution: {integrity: sha512-Jd6HPoTM1PZSFIzq7FB8VmMu3qSSyo/3lSwLpoapW+lQ41CL5Dow2KryLg+gyazA/58DRWI9vu/XpEeHK4uMdw==} + engines: {node: '>= 14.6.0', npm: '>= 6.6.0', yarn: '>= 1.19.1'} + dev: false + /@tauri-apps/cli-darwin-arm64@1.4.0: resolution: {integrity: sha512-nA/ml0SfUt6/CYLVbHmT500Y+ijqsuv5+s9EBnVXYSLVg9kbPUZJJHluEYK+xKuOj6xzyuT/+rZFMRapmJD3jQ==} engines: {node: '>= 10'} @@ -8025,6 +8045,7 @@ packages: /iconv-lite@0.6.3: resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==} engines: {node: '>=0.10.0'} + requiresBuild: true dependencies: safer-buffer: 2.1.2 dev: true diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock index 37c7f0a6..90767fec 100644 --- a/src-tauri/Cargo.lock +++ b/src-tauri/Cargo.lock @@ -2,6 +2,15 @@ # It is not intended for manual editing. version = 3 +[[package]] +name = "addr2line" +version = "0.21.0" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "8a30b2e23b9e17a9f90641c7ab1549cd9b44f296d3ccbf309d2863cfe398a0cb" +dependencies = [ + "gimli", +] + [[package]] name = "adler" version = "1.0.2" @@ -41,6 +50,28 @@ dependencies = [ "alloc-no-stdlib", ] +[[package]] +name = "alsa" +version = "0.7.1" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "e2562ad8dcf0f789f65c6fdaad8a8a9708ed6b488e649da28c01656ad66b8b47" +dependencies = [ + "alsa-sys", + "bitflags", + "libc", + "nix", +] + +[[package]] +name = "alsa-sys" +version = "0.3.1" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "db8fee663d06c4e303404ef5f40488a53e062f89ba8bfed81f42325aafad1527" +dependencies = [ + "libc", + "pkg-config", +] + [[package]] name = "android-tzdata" version = "0.1.1" @@ -66,10 +97,12 @@ checksum = "9c7d0618f0e0b7e8ff11427422b64564d5fb0be1940354bfe2e0529b18a9d9b8" name = "app" version = "0.1.0" dependencies = [ + "midir", "serde", "serde_json", "tauri", "tauri-build", + "tokio", ] [[package]] @@ -102,6 +135,21 @@ version = "1.1.0" source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "d468802bab17cbc0cc575e9b053f41e72aa36bfa6b7f55e3529ffa43161b97fa" +[[package]] +name = "backtrace" +version = "0.3.69" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "2089b7e3f35b9dd2d0ed921ead4f6d318c27680d4a5bd167b3ee120edb105837" +dependencies = [ + "addr2line", + "cc", + "cfg-if", + "libc", + "miniz_oxide", + "object", + "rustc-demangle", +] + [[package]] name = "base64" version = "0.13.1" @@ -378,6 +426,26 @@ dependencies = [ "libc", ] +[[package]] +name = "coremidi" +version = "0.6.0" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "1a7847ca018a67204508b77cb9e6de670125075f7464fff5f673023378fa34f5" +dependencies = [ + "core-foundation", + "core-foundation-sys", + "coremidi-sys", +] + +[[package]] +name = "coremidi-sys" +version = "3.1.0" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "79a6deed0c97b2d40abbab77e4c97f81d71e162600423382c277dd640019116c" +dependencies = [ + "core-foundation-sys", +] + [[package]] name = "cpufeatures" version = "0.2.8" @@ -910,6 +978,12 @@ dependencies = [ "wasi 0.11.0+wasi-snapshot-preview1", ] +[[package]] +name = "gimli" +version = "0.28.0" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "6fb8d784f27acf97159b40fc4db5ecd8aa23b9ad5ef69cdd136d3bc80665f0c0" + [[package]] name = "gio" version = "0.15.12" @@ -1467,6 +1541,22 @@ dependencies = [ "autocfg", ] +[[package]] +name = "midir" +version = "0.9.1" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "a456444d83e7ead06ae6a5c0a215ed70282947ff3897fb45fcb052b757284731" +dependencies = [ + "alsa", + "bitflags", + "coremidi", + "js-sys", + "libc", + "wasm-bindgen", + "web-sys", + "windows 0.43.0", +] + [[package]] name = "miniz_oxide" version = "0.7.1" @@ -1477,6 +1567,17 @@ dependencies = [ "simd-adler32", ] +[[package]] +name = "mio" +version = "0.8.8" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "927a765cd3fc26206e66b296465fa9d3e5ab003e651c1b3c060e7956d96b19d2" +dependencies = [ + "libc", + "wasi 0.11.0+wasi-snapshot-preview1", + "windows-sys", +] + [[package]] name = "ndk" version = "0.6.0" @@ -1511,6 +1612,17 @@ version = "1.0.4" source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "e4a24736216ec316047a1fc4252e27dabb04218aa4a3f37c6e7ddbf1f9782b54" +[[package]] +name = "nix" +version = "0.24.3" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "fa52e972a9a719cecb6864fb88568781eb706bac2cd1d4f04a648542dbf78069" +dependencies = [ + "bitflags", + "cfg-if", + "libc", +] + [[package]] name = "nodrop" version = "0.1.14" @@ -1616,6 +1728,15 @@ dependencies = [ "objc", ] +[[package]] +name = "object" +version = "0.32.0" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "77ac5bbd07aea88c60a577a1ce218075ffd59208b2d7ca97adf9bfc5aeb21ebe" +dependencies = [ + "memchr", +] + [[package]] name = "once_cell" version = "1.18.0" @@ -1782,9 +1903,9 @@ dependencies = [ [[package]] name = "pin-project-lite" -version = "0.2.9" +version = "0.2.13" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "e0a7ae3ac2f1173085d398531c705756c94a4c56843785df85a60c1a0afac116" +checksum = "8afb450f006bf6385ca15ef45d71d2288452bc3683ce2e2cacc0d18e4be60b58" [[package]] name = "pin-utils" @@ -2052,6 +2173,12 @@ version = "0.7.2" source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "436b050e76ed2903236f032a59761c1eb99e1b0aead2c257922771dab1fc8c78" +[[package]] +name = "rustc-demangle" +version = "0.1.23" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "d626bb9dae77e28219937af045c257c28bfd3f69333c512553507f5f9798cb76" + [[package]] name = "rustc_version" version = "0.4.0" @@ -2274,6 +2401,15 @@ dependencies = [ "lazy_static", ] +[[package]] +name = "signal-hook-registry" +version = "1.4.1" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "d8229b473baa5980ac72ef434c4415e70c4b5e71b423043adb4ba059f89c99a1" +dependencies = [ + "libc", +] + [[package]] name = "simd-adler32" version = "0.3.5" @@ -2301,6 +2437,16 @@ version = "1.10.0" source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "a507befe795404456341dfab10cef66ead4c041f62b8b11bbb92bffe5d0953e0" +[[package]] +name = "socket2" +version = "0.5.3" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "2538b18701741680e0322a2302176d3253a35388e2e62f172f64f4f16605f877" +dependencies = [ + "libc", + "windows-sys", +] + [[package]] name = "soup2" version = "0.2.1" @@ -2785,17 +2931,34 @@ checksum = "1f3ccbac311fea05f86f61904b462b55fb3df8837a366dfc601a0161d0532f20" [[package]] name = "tokio" -version = "1.28.2" +version = "1.32.0" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "94d7b1cfd2aa4011f2de74c2c4c63665e27a71006b0a192dcd2710272e73dfa2" +checksum = "17ed6077ed6cd6c74735e21f37eb16dc3935f96878b1fe961074089cc80893f9" dependencies = [ - "autocfg", + "backtrace", "bytes", + "libc", + "mio", "num_cpus", + "parking_lot", "pin-project-lite", + "signal-hook-registry", + "socket2", + "tokio-macros", "windows-sys", ] +[[package]] +name = "tokio-macros" +version = "2.1.0" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "630bdcf245f78637c13ec01ffae6187cca34625e8c63150d424b59e55af2675e" +dependencies = [ + "proc-macro2", + "quote", + "syn 2.0.18", +] + [[package]] name = "toml" version = "0.5.11" @@ -3090,6 +3253,16 @@ version = "0.2.87" source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "ca6ad05a4870b2bf5fe995117d3728437bd27d7cd5f06f13c17443ef369775a1" +[[package]] +name = "web-sys" +version = "0.3.64" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "9b85cbef8c220a6abc02aefd892dfc0fc23afb1c6a426316ec33253a3877249b" +dependencies = [ + "js-sys", + "wasm-bindgen", +] + [[package]] name = "webkit2gtk" version = "0.18.2" @@ -3220,6 +3393,21 @@ dependencies = [ "windows_x86_64_msvc 0.39.0", ] +[[package]] +name = "windows" +version = "0.43.0" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "04662ed0e3e5630dfa9b26e4cb823b817f1a9addda855d973a9458c236556244" +dependencies = [ + "windows_aarch64_gnullvm 0.42.2", + "windows_aarch64_msvc 0.42.2", + "windows_i686_gnu 0.42.2", + "windows_i686_msvc 0.42.2", + "windows_x86_64_gnu 0.42.2", + "windows_x86_64_gnullvm 0.42.2", + "windows_x86_64_msvc 0.42.2", +] + [[package]] name = "windows" version = "0.48.0" @@ -3270,12 +3458,12 @@ version = "0.48.0" source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "7b1eb6f0cd7c80c79759c929114ef071b87354ce476d9d94271031c0497adfd5" dependencies = [ - "windows_aarch64_gnullvm", + "windows_aarch64_gnullvm 0.48.0", "windows_aarch64_msvc 0.48.0", "windows_i686_gnu 0.48.0", "windows_i686_msvc 0.48.0", "windows_x86_64_gnu 0.48.0", - "windows_x86_64_gnullvm", + "windows_x86_64_gnullvm 0.48.0", "windows_x86_64_msvc 0.48.0", ] @@ -3285,6 +3473,12 @@ version = "0.39.0" source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "f838de2fe15fe6bac988e74b798f26499a8b21a9d97edec321e79b28d1d7f597" +[[package]] +name = "windows_aarch64_gnullvm" +version = "0.42.2" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "597a5118570b68bc08d8d59125332c54f1ba9d9adeedeef5b99b02ba2b0698f8" + [[package]] name = "windows_aarch64_gnullvm" version = "0.48.0" @@ -3297,6 +3491,12 @@ version = "0.39.0" source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "ec7711666096bd4096ffa835238905bb33fb87267910e154b18b44eaabb340f2" +[[package]] +name = "windows_aarch64_msvc" +version = "0.42.2" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "e08e8864a60f06ef0d0ff4ba04124db8b0fb3be5776a5cd47641e942e58c4d43" + [[package]] name = "windows_aarch64_msvc" version = "0.48.0" @@ -3309,6 +3509,12 @@ version = "0.39.0" source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "763fc57100a5f7042e3057e7e8d9bdd7860d330070251a73d003563a3bb49e1b" +[[package]] +name = "windows_i686_gnu" +version = "0.42.2" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "c61d927d8da41da96a81f029489353e68739737d3beca43145c8afec9a31a84f" + [[package]] name = "windows_i686_gnu" version = "0.48.0" @@ -3321,6 +3527,12 @@ version = "0.39.0" source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "7bc7cbfe58828921e10a9f446fcaaf649204dcfe6c1ddd712c5eebae6bda1106" +[[package]] +name = "windows_i686_msvc" +version = "0.42.2" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "44d840b6ec649f480a41c8d80f9c65108b92d89345dd94027bfe06ac444d1060" + [[package]] name = "windows_i686_msvc" version = "0.48.0" @@ -3333,12 +3545,24 @@ version = "0.39.0" source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "6868c165637d653ae1e8dc4d82c25d4f97dd6605eaa8d784b5c6e0ab2a252b65" +[[package]] +name = "windows_x86_64_gnu" +version = "0.42.2" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "8de912b8b8feb55c064867cf047dda097f92d51efad5b491dfb98f6bbb70cb36" + [[package]] name = "windows_x86_64_gnu" version = "0.48.0" source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "ca2b8a661f7628cbd23440e50b05d705db3686f894fc9580820623656af974b1" +[[package]] +name = "windows_x86_64_gnullvm" +version = "0.42.2" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "26d41b46a36d453748aedef1486d5c7a85db22e56aff34643984ea85514e94a3" + [[package]] name = "windows_x86_64_gnullvm" version = "0.48.0" @@ -3351,6 +3575,12 @@ version = "0.39.0" source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "5e4d40883ae9cae962787ca76ba76390ffa29214667a111db9e0a1ad8377e809" +[[package]] +name = "windows_x86_64_msvc" +version = "0.42.2" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "9aec5da331524158c6d1a4ac0ab1541149c0b9505fde06423b02f5ef0106b9f0" + [[package]] name = "windows_x86_64_msvc" version = "0.48.0" diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml index b7401f85..22170cac 100644 --- a/src-tauri/Cargo.toml +++ b/src-tauri/Cargo.toml @@ -18,6 +18,8 @@ tauri-build = { version = "1.4.0", features = [] } serde_json = "1.0" serde = { version = "1.0", features = ["derive"] } tauri = { version = "1.4.0", features = ["fs-all"] } +midir = "0.9.1" +tokio = { version = "1.29.0", features = ["full"] } [features] # this feature is used for production builds or when `devPath` points to the filesystem and the built-in dev server is disabled. diff --git a/src-tauri/src/main.rs b/src-tauri/src/main.rs index f5c5be23..0643cefd 100644 --- a/src-tauri/src/main.rs +++ b/src-tauri/src/main.rs @@ -1,8 +1,23 @@ // Prevents additional console window on Windows in release, DO NOT REMOVE!! #![cfg_attr(not(debug_assertions), windows_subsystem = "windows")] +mod midibridge; +use tokio::sync::mpsc; +use tokio::sync::Mutex; + fn main() { - tauri::Builder::default() + let (async_input_transmitter, async_input_receiver) = mpsc::channel(1); + let (async_output_transmitter, async_output_receiver) = mpsc::channel(1); + tauri::Builder + ::default() + .manage(midibridge::AsyncInputTransmit { + inner: Mutex::new(async_input_transmitter), + }) + .invoke_handler(tauri::generate_handler![midibridge::sendmidi]) + .setup(|_app| { + midibridge::init(async_input_receiver, async_output_receiver, async_output_transmitter); + Ok(()) + }) .run(tauri::generate_context!()) .expect("error while running tauri application"); } diff --git a/src-tauri/src/midibridge.rs b/src-tauri/src/midibridge.rs new file mode 100644 index 00000000..5dc7d0c6 --- /dev/null +++ b/src-tauri/src/midibridge.rs @@ -0,0 +1,154 @@ +use std::collections::HashMap; +use std::sync::Arc; +use midir::MidiOutput; +use tokio::sync::mpsc; +use tokio::sync::Mutex; +use tokio::time::Instant; +use serde::Deserialize; + +pub struct MidiMessage { + pub message: Vec, + pub instant: Instant, + pub offset: u64, + pub requestedport: String, +} + +pub struct AsyncInputTransmit { + pub inner: Mutex>>, +} + +pub fn init( + async_input_receiver: mpsc::Receiver>, + mut async_output_receiver: mpsc::Receiver>, + async_output_transmitter: mpsc::Sender> +) { + tauri::async_runtime::spawn(async move { async_process_model(async_input_receiver, async_output_transmitter).await }); + let message_queue: Arc>> = Arc::new(Mutex::new(Vec::new())); + + /* ........................................................... + Listen For incoming messages and add to queue + ............................................................*/ + let message_queue_clone = Arc::clone(&message_queue); + tauri::async_runtime::spawn(async move { + loop { + if let Some(package) = async_output_receiver.recv().await { + let mut message_queue = message_queue_clone.lock().await; + let messages = package; + for message in messages { + (*message_queue).push(message); + } + } + } + }); + + let message_queue_clone = Arc::clone(&message_queue); + tauri::async_runtime::spawn(async move { + /* ........................................................... + Open Midi Ports + ............................................................*/ + let midiout = MidiOutput::new("strudel").unwrap(); + let out_ports = midiout.ports(); + let mut port_names = Vec::new(); + //TODO: Send these print messages to the UI logger instead of the rust console so the user can see them + if out_ports.len() == 0 { + println!(" No MIDI devices found. Connect a device or enable IAC Driver."); + return; + } + println!("Found {} midi devices!", out_ports.len()); + + // the user could reference any port at anytime during runtime, + // so let's go ahead and open them all (same behavior as web app) + let mut output_connections = HashMap::new(); + for i in 0..=out_ports.len().saturating_sub(1) { + let midiout = MidiOutput::new("strudel").unwrap(); + let ports = midiout.ports(); + let port = ports.get(i).unwrap(); + let port_name = midiout.port_name(port).unwrap(); + println!("{}", port_name); + let out_con = midiout.connect(port, &port_name).unwrap(); + port_names.insert(i, port_name.clone()); + output_connections.insert(port_name, out_con); + } + /* ........................................................... + Process queued messages + ............................................................*/ + loop { + let mut message_queue = message_queue_clone.lock().await; + + for i in 0..=message_queue.len().saturating_sub(1) { + let m = message_queue.get(i); + if m.is_none() { + continue; + } + let message = m.unwrap(); + + // dont play the message if its offset time has not elapsed + if message.instant.elapsed().as_millis() < message.offset.into() { + continue; + } + let mut out_con = output_connections.get_mut(&message.requestedport); + + // WebMidi supports getting a connection by part of its name + // ex: 'bus 1' instead of 'IAC Driver bus 1' so let's emulate that behavior + if out_con.is_none() { + let key = port_names.iter().find(|port_name| { + return port_name.contains(&message.requestedport); + }); + if key.is_some() { + out_con = output_connections.get_mut(key.unwrap()); + } + } + + if out_con.is_some() { + // process the message + if let Err(err) = (&mut out_con.unwrap()).send(&message.message) { + println!("Midi message send error: {}", err); + } + } else { + println!("failed to find midi device: {}", message.requestedport); + } + + // the message has been processed, so remove it from the queue + message_queue.remove(i); + } + } + }); +} + +pub async fn async_process_model( + mut input_reciever: mpsc::Receiver>, + output_transmitter: mpsc::Sender> +) -> Result<(), Box> { + while let Some(input) = input_reciever.recv().await { + let output = input; + output_transmitter.send(output).await?; + } + Ok(()) +} +#[derive(Deserialize)] +pub struct MessageFromJS { + message: Vec, + offset: u64, + requestedport: String, +} +// Called from JS +#[tauri::command] +pub async fn sendmidi( + messagesfromjs: Vec, + state: tauri::State<'_, AsyncInputTransmit> +) -> Result<(), String> { + let async_proc_input_tx = state.inner.lock().await; + let mut messages_to_process: Vec = Vec::new(); + + for m in messagesfromjs { + let message_to_process = MidiMessage { + instant: Instant::now(), + message: m.message, + offset: m.offset, + requestedport: m.requestedport, + }; + messages_to_process.push(message_to_process); + } + + async_proc_input_tx.send(messages_to_process).await.map_err(|e| e.to_string()) +} diff --git a/website/package.json b/website/package.json index c595f5a6..6ac799d3 100644 --- a/website/package.json +++ b/website/package.json @@ -34,9 +34,11 @@ "@strudel.cycles/transpiler": "workspace:*", "@strudel.cycles/webaudio": "workspace:*", "@strudel.cycles/xen": "workspace:*", + "@strudel/desktopbridge": "workspace:*", "@supabase/supabase-js": "^2.21.0", "@tailwindcss/forms": "^0.5.3", "@tailwindcss/typography": "^0.5.8", + "@tauri-apps/api": "^1.4.0", "@types/node": "^18.16.3", "@types/react": "^18.2.0", "@types/react-dom": "^18.2.1", diff --git a/website/public/fonts/mode7/MODE7GX3.TTF b/website/public/fonts/mode7/MODE7GX3.TTF new file mode 100644 index 00000000..c9678aed Binary files /dev/null and b/website/public/fonts/mode7/MODE7GX3.TTF differ diff --git a/website/public/fonts/mode7/credit.txt b/website/public/fonts/mode7/credit.txt new file mode 100644 index 00000000..ad79f57d --- /dev/null +++ b/website/public/fonts/mode7/credit.txt @@ -0,0 +1 @@ +This super cool font is by 3d@galax.xyz https://galax.xyz/TELETEXT/ diff --git a/website/public/fonts/teletext/EuropeanTeletext.ttf b/website/public/fonts/teletext/EuropeanTeletext.ttf new file mode 100644 index 00000000..64391841 Binary files /dev/null and b/website/public/fonts/teletext/EuropeanTeletext.ttf differ diff --git a/website/public/fonts/teletext/EuropeanTeletextNuevo.ttf b/website/public/fonts/teletext/EuropeanTeletextNuevo.ttf new file mode 100644 index 00000000..99ea3853 Binary files /dev/null and b/website/public/fonts/teletext/EuropeanTeletextNuevo.ttf differ diff --git a/website/public/fonts/teletext/LICENSE.txt b/website/public/fonts/teletext/LICENSE.txt new file mode 100644 index 00000000..354f1e04 --- /dev/null +++ b/website/public/fonts/teletext/LICENSE.txt @@ -0,0 +1,121 @@ +Creative Commons Legal Code + +CC0 1.0 Universal + + CREATIVE COMMONS CORPORATION IS NOT A LAW FIRM AND DOES NOT PROVIDE + LEGAL SERVICES. DISTRIBUTION OF THIS DOCUMENT DOES NOT CREATE AN + ATTORNEY-CLIENT RELATIONSHIP. CREATIVE COMMONS PROVIDES THIS + INFORMATION ON AN "AS-IS" BASIS. CREATIVE COMMONS MAKES NO WARRANTIES + REGARDING THE USE OF THIS DOCUMENT OR THE INFORMATION OR WORKS + PROVIDED HEREUNDER, AND DISCLAIMS LIABILITY FOR DAMAGES RESULTING FROM + THE USE OF THIS DOCUMENT OR THE INFORMATION OR WORKS PROVIDED + HEREUNDER. + +Statement of Purpose + +The laws of most jurisdictions throughout the world automatically confer +exclusive Copyright and Related Rights (defined below) upon the creator +and subsequent owner(s) (each and all, an "owner") of an original work of +authorship and/or a database (each, a "Work"). + +Certain owners wish to permanently relinquish those rights to a Work for +the purpose of contributing to a commons of creative, cultural and +scientific works ("Commons") that the public can reliably and without fear +of later claims of infringement build upon, modify, incorporate in other +works, reuse and redistribute as freely as possible in any form whatsoever +and for any purposes, including without limitation commercial purposes. +These owners may contribute to the Commons to promote the ideal of a free +culture and the further production of creative, cultural and scientific +works, or to gain reputation or greater distribution for their Work in +part through the use and efforts of others. + +For these and/or other purposes and motivations, and without any +expectation of additional consideration or compensation, the person +associating CC0 with a Work (the "Affirmer"), to the extent that he or she +is an owner of Copyright and Related Rights in the Work, voluntarily +elects to apply CC0 to the Work and publicly distribute the Work under its +terms, with knowledge of his or her Copyright and Related Rights in the +Work and the meaning and intended legal effect of CC0 on those rights. + +1. Copyright and Related Rights. A Work made available under CC0 may be +protected by copyright and related or neighboring rights ("Copyright and +Related Rights"). Copyright and Related Rights include, but are not +limited to, the following: + + i. the right to reproduce, adapt, distribute, perform, display, + communicate, and translate a Work; + ii. moral rights retained by the original author(s) and/or performer(s); +iii. publicity and privacy rights pertaining to a person's image or + likeness depicted in a Work; + iv. rights protecting against unfair competition in regards to a Work, + subject to the limitations in paragraph 4(a), below; + v. rights protecting the extraction, dissemination, use and reuse of data + in a Work; + vi. database rights (such as those arising under Directive 96/9/EC of the + European Parliament and of the Council of 11 March 1996 on the legal + protection of databases, and under any national implementation + thereof, including any amended or successor version of such + directive); and +vii. other similar, equivalent or corresponding rights throughout the + world based on applicable law or treaty, and any national + implementations thereof. + +2. Waiver. To the greatest extent permitted by, but not in contravention +of, applicable law, Affirmer hereby overtly, fully, permanently, +irrevocably and unconditionally waives, abandons, and surrenders all of +Affirmer's Copyright and Related Rights and associated claims and causes +of action, whether now known or unknown (including existing as well as +future claims and causes of action), in the Work (i) in all territories +worldwide, (ii) for the maximum duration provided by applicable law or +treaty (including future time extensions), (iii) in any current or future +medium and for any number of copies, and (iv) for any purpose whatsoever, +including without limitation commercial, advertising or promotional +purposes (the "Waiver"). Affirmer makes the Waiver for the benefit of each +member of the public at large and to the detriment of Affirmer's heirs and +successors, fully intending that such Waiver shall not be subject to +revocation, rescission, cancellation, termination, or any other legal or +equitable action to disrupt the quiet enjoyment of the Work by the public +as contemplated by Affirmer's express Statement of Purpose. + +3. Public License Fallback. Should any part of the Waiver for any reason +be judged legally invalid or ineffective under applicable law, then the +Waiver shall be preserved to the maximum extent permitted taking into +account Affirmer's express Statement of Purpose. In addition, to the +extent the Waiver is so judged Affirmer hereby grants to each affected +person a royalty-free, non transferable, non sublicensable, non exclusive, +irrevocable and unconditional license to exercise Affirmer's Copyright and +Related Rights in the Work (i) in all territories worldwide, (ii) for the +maximum duration provided by applicable law or treaty (including future +time extensions), (iii) in any current or future medium and for any number +of copies, and (iv) for any purpose whatsoever, including without +limitation commercial, advertising or promotional purposes (the +"License"). The License shall be deemed effective as of the date CC0 was +applied by Affirmer to the Work. Should any part of the License for any +reason be judged legally invalid or ineffective under applicable law, such +partial invalidity or ineffectiveness shall not invalidate the remainder +of the License, and in such case Affirmer hereby affirms that he or she +will not (i) exercise any of his or her remaining Copyright and Related +Rights in the Work or (ii) assert any associated claims and causes of +action with respect to the Work, in either case contrary to Affirmer's +express Statement of Purpose. + +4. Limitations and Disclaimers. + + a. No trademark or patent rights held by Affirmer are waived, abandoned, + surrendered, licensed or otherwise affected by this document. + b. Affirmer offers the Work as-is and makes no representations or + warranties of any kind concerning the Work, express, implied, + statutory or otherwise, including without limitation warranties of + title, merchantability, fitness for a particular purpose, non + infringement, or the absence of latent or other defects, accuracy, or + the present or absence of errors, whether or not discoverable, all to + the greatest extent permissible under applicable law. + c. Affirmer disclaims responsibility for clearing rights of other persons + that may apply to the Work or any use thereof, including without + limitation any person's Copyright and Related Rights in the Work. + Further, Affirmer disclaims responsibility for obtaining any necessary + consents, permissions or other rights required for any use of the + Work. + d. Affirmer understands and acknowledges that Creative Commons is not a + party to this document and has no duty or obligation with respect to + this CC0 or use of the Work. diff --git a/website/src/components/HeadCommon.astro b/website/src/components/HeadCommon.astro index 23b39842..2aa6acfe 100644 --- a/website/src/components/HeadCommon.astro +++ b/website/src/components/HeadCommon.astro @@ -46,12 +46,14 @@ const base = BASE_URL; {pwaInfo && }