From 268533a5c6b343771b6119442af53071c1fd9322 Mon Sep 17 00:00:00 2001 From: Raphael Forment Date: Sun, 19 Nov 2023 21:36:46 +0100 Subject: [PATCH 1/2] minor optimisations --- src/EditorSetup.ts | 3 --- src/KeyActions.ts | 2 -- src/TransportNode.js | 12 +++++++----- 3 files changed, 7 insertions(+), 10 deletions(-) diff --git a/src/EditorSetup.ts b/src/EditorSetup.ts index 7cb5c6b..18c0282 100644 --- a/src/EditorSetup.ts +++ b/src/EditorSetup.ts @@ -100,9 +100,6 @@ export const installEditor = (app: Editor) => { editorSetup, toposTheme, app.chosenLanguage.of(javascript()), - EditorView.updateListener.of((v: ViewUpdate) => { - v; - }), ]; app.dynamicPlugins = new Compartment(); app.state = EditorState.create({ diff --git a/src/KeyActions.ts b/src/KeyActions.ts index 893d403..bec746b 100644 --- a/src/KeyActions.ts +++ b/src/KeyActions.ts @@ -135,10 +135,8 @@ export const registerOnKeyDown = (app: Editor) => { if (event.keyCode === keycode) { event.preventDefault(); if (event.ctrlKey) { - event.preventDefault(); app.api.script(keycode - 111); } else { - event.preventDefault(); app.changeModeFromInterface("local"); app.changeToLocalBuffer(index); hideDocumentation(); diff --git a/src/TransportNode.js b/src/TransportNode.js index 220072f..987df5c 100644 --- a/src/TransportNode.js +++ b/src/TransportNode.js @@ -12,9 +12,9 @@ export class TransportNode extends AudioWorkletNode { /** @type {(this: MessagePort, ev: MessageEvent) => any} */ handleMessage = (message) => { - if(message.data) { + if (message.data) { if (message.data.type === "bang") { - if(this.app.clock.running) { + if (this.app.clock.running) { if (this.app.settings.send_clock) { this.app.api.MidiConnection.sendMidiClock(); } @@ -22,8 +22,10 @@ export class TransportNode extends AudioWorkletNode { this.app.clock.tick ); this.app.clock.time_position = futureTimeStamp; - this.timeviewer.innerHTML = `${zeroPad(futureTimeStamp.bar, 2)}:${futureTimeStamp.beat + 1 - }:${zeroPad(futureTimeStamp.pulse, 2)} / ${this.app.clock.bpm}`; + if (futureTimeStamp.pulse % this.app.clock.ppqn == 0) { + this.timeviewer.innerHTML = `${zeroPad(futureTimeStamp.bar, 2)}:${futureTimeStamp.beat + 1 + } / ${this.app.clock.bpm}`; + } if (this.app.exampleIsPlaying) { tryEvaluate(this.app, this.app.example_buffer); } else { @@ -60,6 +62,6 @@ export class TransportNode extends AudioWorkletNode { } stop() { - this.port.postMessage({type: "stop" }); + this.port.postMessage({ type: "stop" }); } } From 74144ed3e8e19ac2675e0cec4995e0e1c474f134 Mon Sep 17 00:00:00 2001 From: Raphael Forment Date: Sun, 19 Nov 2023 21:51:00 +0100 Subject: [PATCH 2/2] continue with small optimizations --- src/AudioVisualisation.ts | 43 +++++++++++++++++++++------------------ src/EditorSetup.ts | 1 - src/main.ts | 5 ++--- vite.config.js | 2 +- 4 files changed, 26 insertions(+), 25 deletions(-) diff --git a/src/AudioVisualisation.ts b/src/AudioVisualisation.ts index 8b74a5a..eee9228 100644 --- a/src/AudioVisualisation.ts +++ b/src/AudioVisualisation.ts @@ -93,26 +93,29 @@ export const blinkScript = ( (app.interface.feedback as HTMLCanvasElement).width, (app.interface.feedback as HTMLCanvasElement).height ); - drawEmptyBlinkers(app); }, blinkDuration); } }; /** - * Draws a series of 9 white circles. + * Manages animation updates using requestAnimationFrame. * @param app - The Editor application context. */ -export const drawEmptyBlinkers = (app: Editor) => { - for (let no = 1; no <= 9; no++) { - const shiftAmount = no * 25; - drawCircle( - app, - 50 + shiftAmount, - app.interface.feedback.clientHeight - 15, - 8, - "white" - ); - } +export const scriptBlinkers = () => { + let lastFrameTime = Date.now(); + const frameRate = 10; + const minFrameDelay = 1000 / frameRate; + + const update = () => { + const now = Date.now(); + const timeSinceLastFrame = now - lastFrameTime; + + if (timeSinceLastFrame >= minFrameDelay) { + lastFrameTime = now; + } + requestAnimationFrame(update); + }; + requestAnimationFrame(update); }; export interface OscilloscopeConfig { @@ -157,14 +160,14 @@ export const runOscilloscope = ( const maxFPS = 30; const now = performance.now(); const elapsed = now - (lastRenderTime || 0); - + if (elapsed < 1000 / maxFPS) return; lastRenderTime = now; - + analyzer.fftSize = app.osc.fftSize * 4; analyzer.getByteFrequencyData(freqDataArray); canvasCtx.clearRect(0, 0, width, height); - + const performanceFactor = 1; const reducedDataSize = Math.floor(freqDataArray.length * performanceFactor); const numBars = Math.min( @@ -175,15 +178,15 @@ export const runOscilloscope = ( app.osc.orientation === "horizontal" ? width / numBars : height / numBars; let barHeight; let x = 0, - y = 0; - + y = 0; + canvasCtx.fillStyle = app.osc.color || `rgb(255, 255, 255)`; - + for (let i = 0; i < numBars; i++) { barHeight = Math.floor( freqDataArray[Math.floor(i * freqDataArray.length / numBars)] * ((height / 256) * app.osc.size) ); - + if (app.osc.orientation === "horizontal") { canvasCtx.fillRect( x + offset_width, diff --git a/src/EditorSetup.ts b/src/EditorSetup.ts index 18c0282..c9c7b23 100644 --- a/src/EditorSetup.ts +++ b/src/EditorSetup.ts @@ -2,7 +2,6 @@ import { Prec } from "@codemirror/state"; import { indentWithTab } from "@codemirror/commands"; import { keymap, - ViewUpdate, lineNumbers, highlightSpecialChars, drawSelection, diff --git a/src/main.ts b/src/main.ts index 1f2eed3..7c0e824 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,4 +1,4 @@ -import { OscilloscopeConfig, runOscilloscope } from "./AudioVisualisation"; +import { OscilloscopeConfig, runOscilloscope, scriptBlinkers } from "./AudioVisualisation"; import { EditorState, Compartment } from "@codemirror/state"; import { javascript } from "@codemirror/lang-javascript"; import { markdown } from "@codemirror/lang-markdown"; @@ -27,7 +27,6 @@ import showdown from "showdown"; import { makeStringExtensions } from "./extensions/StringExtensions"; import { installInterfaceLogic } from "./InterfaceLogic"; import { installWindowBehaviors } from "./WindowBehavior"; -import { drawEmptyBlinkers } from "./AudioVisualisation"; import { makeNumberExtensions } from "./extensions/NumberExtensions"; // @ts-ignore import { registerSW } from "virtual:pwa-register"; @@ -170,7 +169,7 @@ export class Editor { registerFillKeys(this); registerOnKeyDown(this); installInterfaceLogic(this); - drawEmptyBlinkers(this); + scriptBlinkers(); // ================================================================================ // Building CodeMirror Editor diff --git a/vite.config.js b/vite.config.js index 57c9d47..7cfd1d4 100644 --- a/vite.config.js +++ b/vite.config.js @@ -12,7 +12,7 @@ const vitePWAconfiguration = { sourcemap: false, cleanupOutdatedCaches: true, globPatterns: [ - "**/*.{js,css,html,gif,png,json,woff,json,ogg,wav,mp3,ico,png,svg}", + "**/*.{js,css,html,gif,png,json,woff,woff2,json,ogg,wav,mp3,ico,png,svg}", ], // Thanks Froos :) runtimeCaching: [