elias/strudel-docker
1
0
Fork 0
mirror of https://github.com/eliasstepanik/strudel-docker.git synced 2026-01-11 21:58:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

fscope + scaling options

Browse Source
This commit is contained in:
Felix Roos 2023-08-25 12:39:47 +02:00
parent 68ea086e2a
commit 965794712e
1 changed files with 52 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
packages/core/scope.mjs
View File

@ -2,8 +2,12 @@ import { Pattern } from './pattern.mjs';
import { getDrawContext } from './draw.mjs';
import { analyser } from '@strudel.cycles/webaudio';
export function drawTimeScope(analyser, dataArray, { align = true, color = 'white', thickness = 2 } = {}) {
export function drawTimeScope(
analyser,
{ align = true, color = 'white', thickness = 3, scale = 1, pos = 0.75, next = 1 } = {},
) {
const canvasCtx = getDrawContext();
const dataArray = getAnalyzerData('time');
canvasCtx.lineWidth = thickness;
canvasCtx.strokeStyle = color;
@ -13,16 +17,18 @@ export function drawTimeScope(analyser, dataArray, { align = true, color = 'whit
const bufferSize = analyser.frequencyBinCount;
const triggerValue = 256 / 2;
const triggerIndex = align
let triggerIndex = align
? Array.from(dataArray).findIndex((v, i, arr) => i && arr[i - 1] < triggerValue && v >= triggerValue)
: 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] / 128.0;
const y = (v * (canvas.height / 2)) / 2 + canvas.height / 2;
const y = (scale * (v - 1) + pos) * canvas.height;
if (i === 0) {
canvasCtx.moveTo(x, y);
} else {
@ -33,16 +39,48 @@ export function drawTimeScope(analyser, dataArray, { align = true, color = 'whit
canvasCtx.stroke();
}
Pattern.prototype.scope = function (config = {}) {
return this.analyze(1).draw((ctx) => {
let data = getAnalyzerData('time');
const { smear = 0 } = config;
if (!smear) {
ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
} else {
ctx.fillStyle = `rgba(0,0,0,${1 - smear})`;
ctx.fillRect(0, 0, window.innerWidth, window.innerHeight);
}
data && drawTimeScope(analyser, data, config);
export function drawFrequencyScope(analyser, { color = 'white', scale = 1, pos = 0.75, lean = 0.5 } = {}) {
const dataArray = getAnalyzerData('frequency');
const canvasCtx = getDrawContext();
const canvas = canvasCtx.canvas;
canvasCtx.fillStyle = color;
const bufferSize = analyser.frequencyBinCount;
const sliceWidth = (canvas.width * 1.0) / bufferSize;
let x = 0;
for (let i = 0; i < bufferSize; i++) {
const v = (dataArray[i] / 256.0) * scale;
const h = v * canvas.height;
const y = (pos - v * lean) * canvas.height;
canvasCtx.fillRect(x, y, Math.max(sliceWidth, 1), h);
x += sliceWidth;
}
}
function clearScreen(smear = 0, smearRGB = `0,0,0`) {
const canvasCtx = getDrawContext();
if (!smear) {
canvasCtx.clearRect(0, 0, canvasCtx.canvas.width, canvasCtx.canvas.height);
} else {
canvasCtx.fillStyle = `rgba(${smearRGB},${1 - smear})`;
canvasCtx.fillRect(0, 0, canvasCtx.canvas.width, canvasCtx.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;