import * as scrawl from '../source/scrawl.js';
import { reportSpeed } from './utilities.js';
import * as scrawl from '../source/scrawl.js';
import { reportSpeed } from './utilities.js';
const canvas = scrawl.findCanvas('mycanvas');
Namespacing boilerplate
const namespace = canvas.name;
const name = (n) => `${namespace}-${n}`;
canvas.buildCell({
name: name('trace-chamber'),
dimensions: ['100%', '100%'],
clearAlpha: 0.998,
});
const lowAdjuster = scrawl.makeColor({
name: name('low-adjuster'),
minimumColor: 'black',
maximumColor: 'green',
});
const highAdjuster = scrawl.makeColor({
name: name('high-adjuster'),
minimumColor: 'red',
maximumColor: 'lightgreen',
});
const myWorld = scrawl.makeWorld({
name: name('my-world'),
tickMultiplier: 2,
userAttributes: [
{
key: 'rangeColorValue',
defaultValue: 0,
setter: function (item) {
/** @ts-expect-error */
this.rangeColorValue = item;
emitter.set({
fillMinimumColor: lowAdjuster.getRangeColor(item),
fillMaximumColor: highAdjuster.getRangeColor(item),
});
},
},
],
});
const emitter = scrawl.makeEmitter({
name: name('emitter-1'),
group: name('trace-chamber'),
start: ['center', 'center'],
roll: 10,
world: myWorld,
generationRate: 100,
killAfterTime: 5,
historyLength: 40,
killBeyondCanvas: true,
particleCount: 40,
…
generateFromExistingParticleHistories: true,
fillMinimumColor: 'black',
fillMaximumColor: 'red',
rangeX: 40,
rangeFromX: -20,
minimumVelocityX: 10,
limitDirectionToAngleMultiples: 60,
artefact: scrawl.makeWheel({
name: name('trace'),
radius: 2,
handle: ['center', 'center'],
}),
stampAction: function (artefact, particle, host) {
const history = particle.history,
len = history.length;
let start;
history.forEach((p, index) => {
[ , , ...start] = p;
artefact.simpleStamp(host, {
start,
fillStyle: particle.fill,
radius: (index / len) * 4,
});
});
},
});
scrawl.makeTween({
name: name('color-adjuster'),
duration: '100s',
cycles: 0,
reverseOnCycleEnd: true,
targets: myWorld,
definitions: [
{
attribute: 'rangeColorValue',
start: 0,
end: 1,
},
],
}).run();
Function to display frames-per-second data, and other information relevant to the demo
const report = reportSpeed('#reportmessage');
Create the Display cycle animation
scrawl.makeRender({
name: name('animation'),
target: canvas,
afterShow: report,
});
console.log(scrawl.library);