The Scrawl-canvas particle physics engine is a simple system designed to allow developers a way to add particle-based effects to their canvas animation scenes. The physics engine is built on top of the following components:
We do not have to handle particle generation and manipulation ourselves. Instead, Scrawl-canvas gives us three dedicated entitys which we use to add particle animation effects to the canvas scene. These entitys are:
import { constructors, tween, artefact, group } from '../core/library.js';
import { pushUnique, mergeOver, λnull, isa_fn, isa_obj, xta } from '../core/utilities.js';
import { currentGroup } from '../core/document.js';
import { makeParticle } from './particle.js';
import { requestVector, releaseVector } from './vector.js';
import baseMix from '../mixin/base.js';
import entityMix from '../mixin/entity.js';const Tracer = function (items = {}) {
this.makeName(items.name);
this.register();
this.initializePositions();
this.set(this.defs);The entity has a hit zone which can be used for drag-and-drop, and other user interactions. Thus the onXYZ UI functions remain relevant.
this.onEnter = λnull;
this.onLeave = λnull;
this.onDown = λnull;
this.onUp = λnull;As part of its stamp functionality the Net entity will invoke the stampAction function. If not supplied, the entity will not display anything on the canvas.
this.stampAction = λnull;Tracer entitys use just one Particle, which gets initialized here and stored in the trace attribute
this.trace = makeParticle(items);
if (!items.group) items.group = currentGroup;
this.set(items);
if (this.purge) this.purgeArtefact(this.purge);
return this;
};let P = Tracer.prototype = Object.create(Object.prototype);
P.type = 'Tracer';
P.lib = 'entity';
P.isArtefact = true;
P.isAsset = false;P = baseMix(P);
P = entityMix(P);let defaultAttributes = {Note that Tracer entitys, unlike Emitters or Nets, do not need or use World objects; they are not affected by Forces or springs. They are - effectively - entitys that record their location coordinate, with the ability to remember a history of its recent locations.
artefact - In theory, any Scrawl-canvas object whose isArtefact flag is set to true can be assigned to this attribute. However this has not been tested on non-entity artefacts. For now, stick to Scrawl-canvas entity objects.
artefact: null,historyLength - positive integer Number - every Particle will keep a record of its recent state, in a set of ParticleHistory arrays stored in the Particle’s history Array. The Emitter entity will set the maximum permitted length of the history array whenever it generates a new Particle.
historyLength: 1,Note that the hitRadius attribute is tied directly to the width and height attributes (which are effectively meaningless for this entity)
hitRadius: 10,We can tell the entity to display its hit zone by setting the showHitRadius flag. The hit zone outline color attribute hitRadiusColor accepts any valid CSS color String value
showHitRadius: false,
hitRadiusColor: '#000000',trace - the entity’s Particle object
stampAction - define all major rendering actions in this function. The function receives the following arguments: (artefact, trace, host) - where artefact is the Tracer entity’s artefact object (if any has been defined/set); trace is the entity’s Particle object whose history needs to be rendered onto the canvas; and host is the Cell wrapper on which we will draw our graphics
};
P.defs = mergeOver(P.defs, defaultAttributes);P.packetExclusions = pushUnique(P.packetExclusions, []);
P.packetExclusionsByRegex = pushUnique(P.packetExclusionsByRegex, []);
P.packetCoordinates = pushUnique(P.packetCoordinates, []);
P.packetObjects = pushUnique(P.packetObjects, ['artefact', 'particle']);
P.packetFunctions = pushUnique(P.packetFunctions, ['stampAction']);
P.finalizePacketOut = function (copy, items) {
return copy;
};P.postCloneAction = function(clone, items) {
clone.trace = makeParticle({
name: clone.name,
historyLength: items.historyLength || this.historyLength || 1,
});
return clone;
};P.factoryKill = function (killArtefact) {
if (killArtefact) this.artefact.kill();
this.trace.kill();
};let G = P.getters,
S = P.setters,
D = P.deltaSetters;
S.stampAction = function (item) {
if (isa_fn(item)) this.stampAction = item;
};
S.artefact = function (item) {
let art;
if (item.substring) art = artefact[item];
else if (isa_obj(item) && item.isArtefact) art = item;
if (art) this.artefact = art;
};regularStampSynchronousActions - overwriters the functionality defined in the entity.js mixin
P.regularStampSynchronousActions = function () {
let {artefact, trace, stampAction, showHitRadius, hitRadius, hitRadiusColor, currentStampPosition} = this;
let host = this.currentHost;
trace.set({
position: currentStampPosition,
});
trace.manageHistory(0, host);
stampAction.call(this, artefact, trace, host);
if (showHitRadius) {
let engine = host.engine;
engine.save();
engine.lineWidth = 1;
engine.strokeStyle = hitRadiusColor;
engine.setTransform(1, 0, 0, 1, 0, 0);
engine.beginPath();
engine.arc(currentStampPosition[0], currentStampPosition[1], hitRadius, 0, Math.PI * 2);
engine.stroke();
engine.restore();
}
};checkHit - overwrites the function defined in mixin/position.js
P.checkHit = function (items = [], mycell) {
if (this.noUserInteraction) return false;
let tests = (!Array.isArray(items)) ? [items] : items;
let currentStampPosition = this.currentStampPosition,
res = false,
tx, ty;
if (tests.some(test => {
if (Array.isArray(test)) {
tx = test[0];
ty = test[1];
}
else if (xta(test, test.x, test.y)) {
tx = test.x;
ty = test.y;
}
else return false;
if (!tx.toFixed || !ty.toFixed || isNaN(tx) || isNaN(ty)) return false;
let v = requestVector(currentStampPosition).vectorSubtract(test);
if (v.getMagnitude() < this.hitRadius) res = true;
releaseVector(v);
return res;
}, this)) {
let r = this.checkHitReturn(tx, ty, mycell);
return r;
}
return false;
};const makeTracer = function (items) {
return new Tracer(items);
};
constructors.Tracer = Tracer;export {
makeTracer,
};