diff --git a/src/AudioVisualisation.ts b/src/AudioVisualisation.ts index 5ce3192..c5dddc0 100644 --- a/src/AudioVisualisation.ts +++ b/src/AudioVisualisation.ts @@ -116,6 +116,7 @@ export const drawEmptyBlinkers = (app: Editor) => { export interface OscilloscopeConfig { enabled: boolean; + refresh: number; color: string; thickness: number; fftSize: number; // multiples of 256 @@ -139,9 +140,18 @@ export const runOscilloscope = ( const canvasCtx = canvas.getContext("2d")!; const WIDTH = canvas.width; const HEIGHT = canvas.height; + let lastDrawTime = 0; + let frameInterval = 1000 / 30; + function draw() { + const currentTime = Date.now(); requestAnimationFrame(draw); + if (currentTime - lastDrawTime < frameInterval) { + return; + } + lastDrawTime = currentTime; + if (!app.osc.enabled) { canvasCtx.clearRect(0, 0, WIDTH, HEIGHT); return; @@ -156,7 +166,9 @@ export const runOscilloscope = ( canvasCtx.fillStyle = "rgba(0, 0, 0, 0)"; canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); - canvasCtx.clearRect(0, 0, WIDTH, HEIGHT); + if (app.clock.time_position.pulse % app.osc.refresh == 0) { + canvasCtx.clearRect(0, 0, WIDTH, HEIGHT); + } canvasCtx.lineWidth = app.osc.thickness; @@ -202,6 +214,5 @@ export const runOscilloscope = ( canvasCtx.stroke(); } - draw(); }; diff --git a/src/documentation/oscilloscope.ts b/src/documentation/oscilloscope.ts index 4d1f371..2d5ea5a 100644 --- a/src/documentation/oscilloscope.ts +++ b/src/documentation/oscilloscope.ts @@ -8,8 +8,8 @@ export const oscilloscope = (application: Editor): string => { You can turn on the oscilloscope to generate interesting visuals or to inspect audio. Use the scope() function to turn it on and off. The oscilloscope is off by default. ${makeExample( - "Oscilloscope configuration", - ` + "Oscilloscope configuration", + ` scope({ enabled: true, // off by default color: "#fdba74", // any valid CSS color or "random" @@ -18,10 +18,11 @@ scope({ orientation: "horizontal", // "vertical" or "horizontal" is3D: false, // 3D oscilloscope size: 1, // size of the oscilloscope + refresh: 1 // refresh rate (in pulses) }) `, - true -)} + true + )} Note that these values can be patterned as well! You can transform the oscilloscope into its own light show if you want. The picture is not stable anyway so you won't have much use of it for precision work :) diff --git a/src/main.ts b/src/main.ts index c7a9ac8..d1c8203 100644 --- a/src/main.ts +++ b/src/main.ts @@ -63,6 +63,7 @@ export class Editor { enabled: false, color: "#fdba74", thickness: 4, + refresh: 1, fftSize: 256, orientation: "horizontal", is3D: false,