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 } from '../core/library.js';
import { mergeOver, isa_fn, xt } from '../core/utilities.js';
import { makeQuaternion } from './quaternion.js';
import { makeVector } from './vector.js';
import { makeCoordinate } from './coordinate.js';
import baseMix from '../mixin/base.js';const World = function (items = {}) {
this.makeName(items.name);
this.register();
this.set(this.defs);
let keytypes = items.keytypes || {};
if (!keytypes.gravity) keytypes.gravity = 'Vector';
if (!items.gravity) items.gravity = [0, 9.81, 0];
if (items.userAttributes) {
items.userAttributes.forEach(att => {
this.addAttribute(att);
if (att.type) keytypes[att.key] = att.type;
});
}
this.initializeAttributes(keytypes);
this.set(items);
return this;
};let P = World.prototype = Object.create(Object.prototype);
P.type = 'World';
P.lib = 'world';
P.isArtefact = false;
P.isAsset = false;P = baseMix(P);let defaultAttributes = {x, y and z components of gravity, measured in meters/secondSquared (used in gravity force calculations)
gravity: null,tickMultiplier - a positive float Number value. Larger values increase the physics effect - equivalent to speeding up the animation
tickMultiplier: 1,keytypes - a Javascript object made up of key:String attributes. Used as part of the factory when generating worlds which use user-defined attributes that need to be Scrawl-canvas Quaternions, Vectors (like gravity) or Coordinates.
key should be the attribute’s namevalue should be a String - either 'Quaternion', 'Vector' or 'Coordinate'. keytypes: null,
};
P.defs = mergeOver(P.defs, defaultAttributes);P.kill = function () {
this.deregister();
return true;
};let G = P.getters,
S = P.setters,
D = P.deltaSetters;gravity, with pseudo-attributes gravityX, gravityY, gravityZ
S.gravityX = function (item) { if (this.gravity && xt(item)) this.gravity.setX(item); };
S.gravityY = function (item) { if (this.gravity && xt(item)) this.gravity.setY(item); };
S.gravityZ = function (item) { if (this.gravity && xt(item)) this.gravity.setZ(item); };
S.gravity = function (item) { if (this.gravity && xt(item)) this.gravity.set(item); };addAttribute, removeAttribute - we can use these functions to add and remove other attributes to the World object. See the following Demos for examples of constructing a World object and adding attributes to it:
P.addAttribute = function (items = {}) {
let {key, defaultValue, setter, deltaSetter, getter} = items;
if (key && key.substring) {
this.defs[key] = xt(defaultValue) ? defaultValue : null;
this[key] = xt(defaultValue) ? defaultValue : null;
if (isa_fn(setter)) S[key] = setter;
if (isa_fn(deltaSetter)) D[key] = deltaSetter;
if (isa_fn(getter)) G[key] = getter;
}
return this;
};
P.removeAttribute = function (key) {
if (key && key.substring) {
delete this.defs[key];
delete this[key];
delete G[key];
delete S[key];
delete D[key];
}
return this;
};initializeAttributes - internal function called by the constructor.
P.initializeAttributes = function (types) {
for (let [key, value] of Object.entries(types)) {
switch (value) {
case 'Quaternion' :
this[key] = makeQuaternion();
break;
case 'Vector' :
this[key] = makeVector();
break;
case 'Coordinate' :
this[key] = makeCoordinate();
break;
}
}};scrawl.makeWorld({
name: 'demo-world',
tickMultiplier: 2,
userAttributes: [
{
key: 'testCoordinate',
type: 'Coordinate',
getter: function () { return [].concat(this.testCoordinate) },
setter: function (item) { this.testCoordinate.set(item) },
},
{
key: 'particleColor',
defaultValue: '#F0F8FF',
},
],
testCoordinate: [100, 100],
});const makeWorld = function (items) {
return new World(items);
};
constructors.World = World;export {
makeWorld,
};