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

fix: animation frame cleanup

Browse Source
This commit is contained in:
Felix Roos 2024-03-16 02:42:26 +01:00
parent ef284e9d13
commit dd78dc9606
2 changed files with 26 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
packages/draw/draw.mjs
View File

@ -30,13 +30,20 @@ export const getDrawContext = (id = 'test-canvas', options) => {
}; };
let animationFrames = {}; let animationFrames = {};
function stopAnimationFrame(id) {
if (animationFrames[id] !== undefined) {
cancelAnimationFrame(animationFrames[id]);
delete animationFrames[id];
}
}
function stopAllAnimations() {
Object.keys(animationFrames).forEach((id) => stopAnimationFrame(id));
}
Pattern.prototype.draw = function (callback, { id = 'std', from, to, onQuery, ctx } = {}) { Pattern.prototype.draw = function (callback, { id = 'std', from, to, onQuery, ctx } = {}) {
if (typeof window === 'undefined') { if (typeof window === 'undefined') {
return this; return this;
} }
if (animationFrames[id]) { stopAnimationFrame(id);
cancelAnimationFrame(animationFrames[id]);
}
ctx = ctx || getDrawContext(); ctx = ctx || getDrawContext();
let cycle, let cycle,
events = []; events = [];
@ -69,9 +76,7 @@ Pattern.prototype.onFrame = function (id, fn, offset = 0) {
if (typeof window === 'undefined') { if (typeof window === 'undefined') {
return this; return this;
} }
if (animationFrames[id]) { stopAnimationFrame(id);
cancelAnimationFrame(animationFrames[id]);
}
const animate = () => { const animate = () => {
const t = getTime() + offset; const t = getTime() + offset;
const haps = this.queryArc(t, t); const haps = this.queryArc(t, t);
@ -85,7 +90,7 @@ Pattern.prototype.onFrame = function (id, fn, offset = 0) {
export const cleanupDraw = (clearScreen = true) => { export const cleanupDraw = (clearScreen = true) => {
const ctx = getDrawContext(); const ctx = getDrawContext();
clearScreen && ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.width); clearScreen && ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.width);
Object.values(animationFrames).forEach((id) => cancelAnimationFrame(id)); stopAllAnimations();
if (window.strudelScheduler) { if (window.strudelScheduler) {
clearInterval(window.strudelScheduler); clearInterval(window.strudelScheduler);
} }

22
packages/webaudio/scope.mjs
View File

@ -91,10 +91,13 @@ function clearScreen(smear = 0, smearRGB = `0,0,0`, ctx = getDrawContext()) {
*/ */
Pattern.prototype.fscope = function (config = {}) { Pattern.prototype.fscope = function (config = {}) {
let id = config.id ?? 1; let id = config.id ?? 1;
return this.analyze(id).draw(() => { return this.analyze(id).draw(
clearScreen(config.smear, '0,0,0', config.ctx); () => {
analysers[id] && drawFrequencyScope(analysers[id], config); clearScreen(config.smear, '0,0,0', config.ctx);
}); analysers[id] && drawFrequencyScope(analysers[id], config);
},
{ id },
);
}; };
/** /**
@ -113,10 +116,13 @@ Pattern.prototype.fscope = function (config = {}) {
*/ */
Pattern.prototype.tscope = function (config = {}) { Pattern.prototype.tscope = function (config = {}) {
let id = config.id ?? 1; let id = config.id ?? 1;
return this.analyze(id).draw(() => { return this.analyze(id).draw(
clearScreen(config.smear, '0,0,0', config.ctx); () => {
analysers[id] && drawTimeScope(analysers[id], config); clearScreen(config.smear, '0,0,0', config.ctx);
}); analysers[id] && drawTimeScope(analysers[id], config);
},
{ id },
);
}; };
Pattern.prototype.scope = Pattern.prototype.tscope; Pattern.prototype.scope = Pattern.prototype.tscope;