import { constructors } from '../core/library.js';
import { λnull } from '../core/utilities.js';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:
ParticleHistory objects are Arrays in which Scrawl-canvas records history data for a given particle at a specified time. The array holds data in the following format:
[
Number:particle-life-time-remaining,
Number:particle-z-position,
Number:particle-x-position,
Number:particle-y-position
]Because of the number of ParticleHistory arrays that can be generated and discarded in even a simple particle physics animation, Scrawl-canvas includes functionality to pool and reuse ParticleHistory arrays. The exported functions requestParticleHistoryObject and releaseParticleHistoryObject give us access to the pool mechanism.
import { constructors } from '../core/library.js';
import { λnull } from '../core/utilities.js';const ParticleHistory = function (items) {
let history = [];
Object.setPrototypeOf(history, ParticleHistory.prototype);
if (items) history.set(items);
return history;
};let P = ParticleHistory.prototype = Object.create(Array.prototype);
P.constructor = ParticleHistory;
P.type = 'ParticleHistory';ParticleHistory Arrays do not use mixins - they are regular Javascript Arrays. As such, they do not possess packet, clone or kill functionality.
There are no attributes. The constructor returns an Array containing two members, whose prototype object includes functions for manipulating those members in various ways.
An attempt to reuse history arrays rather than constantly creating and deleting them
const particleHistoryPool = [];exported function - retrieve a ParticleHistory from the history pool
const requestParticleHistoryObject = function (items, y) {
if (!particleHistoryPool.length) particleHistoryPool.push(new ParticleHistory());
let c = particleHistoryPool.shift();
return c
};exported function - return a ParticleHistory array to the history pool. Failing to return arrays to the pool may lead to more inefficient code and possible memory leaks.
const releaseParticleHistoryObject = function (h) {
if (h && h.type === 'ParticleHistory') {
h.length = 0;
particleHistoryPool.push(h);Do not keep excessive numbers of under-utilised arrays in the pool
if (particleHistoryPool.length > 100) particleHistoryPool.length = 0;
}
};const makeParticleHistory = function (items) {
return new ParticleHistory(items);
};
constructors.ParticleHistory = ParticleHistory;export {
makeParticleHistory,
requestParticleHistoryObject,
releaseParticleHistoryObject,
};