hacklab/strudel
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

controllable smear + sync flag

Browse source
This commit is contained in:
Felix Roos 2022-12-31 16:41:13 +01:00
parent 0caedeb481
commit 949e15d8c6
1 changed files with 22 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

31
packages/core/animate.mjs
View file

@ -1,20 +1,33 @@
import { controls, Pattern, getDrawContext, silence, scheduler } from './index.mjs'; import { controls, Pattern, getDrawContext, silence, scheduler } from './index.mjs';
const { createParams } = controls; const { createParams } = controls;
let clearColor = '#20001010';
let currentSmear = 0.5;
export let syncAnimationWithScheduler = true;
Pattern.prototype.animate = function (callback) { Pattern.prototype.animate = function (callback) {
window.frame && cancelAnimationFrame(window.frame); window.frame && cancelAnimationFrame(window.frame);
const ctx = getDrawContext(); const ctx = getDrawContext();
const { clientWidth: ww, clientHeight: wh } = ctx.canvas; const { clientWidth: ww, clientHeight: wh } = ctx.canvas;
const render = () => { const render = (t) => {
// const render = (t) => { let frame;
// t = Math.round(t); if (syncAnimationWithScheduler) {
// const frame = this.slow(1000).queryArc(t, t); t = scheduler.now();
const t = scheduler.now(); frame = this.queryArc(t, t);
const frame = this.queryArc(t, t); } else {
ctx.fillStyle = '#20001005'; t = Math.round(t);
frame = this.slow(1000).queryArc(t, t);
}
ctx.fillStyle = clearColor;
ctx.fillRect(0, 0, ww, wh); ctx.fillRect(0, 0, ww, wh);
frame.forEach((f) => { frame.forEach((f) => {
let { x, y, w, h, s, r, a = 0, fill = 'darkseagreen' } = f.value; let { x, y, w, h, s, r, a = 0, fill = 'darkseagreen', smear } = f.value;
if (smear && smear !== currentSmear) {
currentSmear = smear;
let smearPart = Number((1 - smear) * 100).toFixed(0);
smearPart = smearPart.length === 1 ? `0${smearPart}` : smearPart;
clearColor = `#200010${smearPart}`;
}
w *= ww; w *= ww;
h *= wh; h *= wh;
if (r !== undefined && a !== undefined) { if (r !== undefined && a !== undefined) {
@ -43,4 +56,4 @@ Pattern.prototype.animate = function (callback) {
return silence; return silence;
}; };
export const { x, y, w, h, a, r, fill } = createParams('x', 'y', 'w', 'h', 'a', 'r', 'fill'); export const { x, y, w, h, a, r, fill, smear } = createParams('x', 'y', 'w', 'h', 'a', 'r', 'fill', 'smear');