meoware.exe/TidaLuna-Plugins
1
0
Fork 0
mirror of https://github.com/meowarex/TidaLuna-Plugins.git synced 2026-06-18 03:43:10 +10:00
Code Issues Packages Projects Releases Wiki Activity

Grouped Slots & Visual fixes

Browse Source
This commit is contained in:
meowarex
2026-04-04 15:28:26 +11:00
parent be61b0bbb5
commit 1dc77fc9d8
6 changed files with 143 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugins/audio-visualizer-luna/src/visualizers/vectorscope.ts
+20 -39
View File
@@ -5,8 +5,6 @@ import { settings } from "../Settings";
export const createVectorscope = (): Visualizer => {
let ctx: CanvasRenderingContext2D | null = null;
let canvas: HTMLCanvasElement | null = null;
let trailCanvas: HTMLCanvasElement | null = null;
let trailCtx: CanvasRenderingContext2D | null = null;
let w = 0, h = 0;
let lastX = 0, lastY = 0;
let hasLast = false;
@@ -18,22 +16,19 @@ export const createVectorscope = (): Visualizer => {
init(cvs, _color) {
canvas = cvs;
ctx = cvs.getContext("2d")!;
const c = cvs.getContext("2d");
if (!c) return;
ctx = c;
w = cvs.width;
h = cvs.height;
hasLast = false;
trailCanvas = document.createElement("canvas");
trailCanvas.width = w;
trailCanvas.height = h;
trailCtx = trailCanvas.getContext("2d")!;
lastLissajous = !!settings.lissajous;
cvs.style.transform = lastLissajous ? "rotate(45deg) scale(0.707)" : "";
},
render(data: AudioData, color: string) {
if (!ctx || !trailCtx || !trailCanvas || !canvas) return;
if (!ctx || !canvas) return;
const wantLissajous = !!settings.lissajous;
if (wantLissajous !== lastLissajous) {
@@ -41,64 +36,50 @@ export const createVectorscope = (): Visualizer => {
canvas.style.transform = wantLissajous ? "rotate(45deg) scale(0.707)" : "";
}
// Fade the trail buffer by drawing it at reduced opacity onto itself
trailCtx.save();
trailCtx.globalCompositeOperation = "destination-in";
trailCtx.fillStyle = "rgba(0, 0, 0, 0.82)";
trailCtx.fillRect(0, 0, w, h);
trailCtx.restore();
ctx.clearRect(0, 0, w, h);
const left = data.leftTimeDomain;
const right = data.rightTimeDomain;
const len = Math.min(left.length, right.length);
const lineWidth = Math.max(0.5, (settings.lineThickness ?? 1.0) * 0.5);
const scale = 2.25;
const inset = lineWidth;
const halfW = Math.max(1, w / 2 - inset);
const halfH = Math.max(1, h / 2 - inset);
trailCtx.strokeStyle = color;
trailCtx.lineWidth = lineWidth;
trailCtx.lineJoin = "round";
trailCtx.lineCap = "round";
trailCtx.globalAlpha = 0.9;
ctx.strokeStyle = color;
ctx.lineWidth = lineWidth;
ctx.lineJoin = "round";
ctx.lineCap = "round";
trailCtx.beginPath();
hasLast = false;
ctx.beginPath();
for (let i = 0; i < len; i++) {
const x = left[i] * (w / scale) + w / 2;
const y = right[i] * (h / scale) + h / 2;
const x = left[i] * halfW + w / 2;
const y = right[i] * halfH + h / 2;
if (!hasLast) {
trailCtx.moveTo(x, y);
ctx.moveTo(x, y);
hasLast = true;
} else {
trailCtx.moveTo(lastX, lastY);
trailCtx.lineTo(x, y);
ctx.moveTo(lastX, lastY);
ctx.lineTo(x, y);
}
lastX = x;
lastY = y;
}
trailCtx.stroke();
trailCtx.globalAlpha = 1.0;
// Composite trail onto visible canvas (fully transparent background)
ctx.clearRect(0, 0, w, h);
ctx.drawImage(trailCanvas, 0, 0);
ctx.stroke();
},
resize(width, height) {
w = width;
h = height;
hasLast = false;
if (trailCanvas && trailCtx) {
trailCanvas.width = w;
trailCanvas.height = h;
}
},
dispose() {
if (canvas) canvas.style.transform = "";
ctx = null;
canvas = null;
trailCtx = null;
trailCanvas = null;
hasLast = false;
},
};