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}`;For this Demo, we are creating some Shape entitys and using them as a template for generating Net entity Particles.
scrawl.makeShape({
name: name('my-first-template-arrow'),
pathDefinition: 'M266.2,703.1 h-178 L375.1,990 l287-286.9 H481.9 C507.4,365,683.4,91.9,911.8,25.5 877,15.4,840.9,10,803.9,10 525.1,10,295.5,313.4,266.2,703.1 z',
start: ['25%', '25%'],
handle: ['center', 'center'],
scale: 0.3,
roll: -90,
flipUpend: true,
useAsPath: true,
fillStyle: 'gray',
}).clone({
name: name('my-second-template-arrow'),
start: ['50%', '50%'],
}).clone({
name: name('my-third-template-arrow'),
start: ['75%', '75%'],
});Create a World object which we can then assign to the Net entity
const myWorld = scrawl.makeWorld({
name: name('my-world'),
tickMultiplier: 2,
});Create a Net entity
scrawl.makeNet({
name: name('weak-arrow'),
world: myWorld,The Net entity comes with four pre-defined generate functions - we will be testing ‘weak-shape’ and ‘strong-shape’ in this demo.
generate: 'weak-shape',
shapeTemplate: name('my-first-template-arrow'),
precision: 40,
joinTemplateEnds: true,
postGenerate: function () {
const regex = RegExp('-0$');
/** @ts-expect-error */
this.particleStore.forEach(p => {
if (regex.test(p.name)) {
p.set({
fill: 'red',
stroke: 'black',
forces: [],
});
/** @ts-expect-error */
this.springs.forEach(s => {
if (s && s.particleFrom && s.particleFrom.name === p.name) {
s.particleFromIsStatic = true;
}
if (s && s.particleTo && s.particleTo.name === p.name) {
s.particleToIsStatic = true;
}
})
}
});
},
showSprings: true,
showSpringsColor: 'azure',
springConstant: 100,
damperConstant: 1,
engine: 'runge-kutta',
artefact: scrawl.makeWheel({
name: name('particle-wheel-1'),
radius: 7,
handle: ['center', 'center'],
method: 'fillThenDraw',
fillStyle: 'yellow',
strokeStyle: 'gold',
visibility: false,
noUserInteraction: true,
noPositionDependencies: true,
noFilters: true,
noDeltaUpdates: true,
}),
stampAction: function (artefact, particle, host) {
const [ , , ...start] = particle.history[0];
artefact.simpleStamp(host, {
start,
fillStyle: particle.fill,
strokeStyle: particle.stroke,
});
},
particlesAreDraggable: true,Clone the Net entity
}).clone({
name: name('strong-arrow'),
generate: 'strong-shape',
shapeTemplate: name('my-second-template-arrow'),
artefact: scrawl.findEntity(name('particle-wheel-1')).clone({
name: name('particle-wheel-2'),
}),Clone again
}).clone({
name: name('hub-spoke-arrow'),
generate: 'hub-spoke',
shapeTemplate: name('my-third-template-arrow'),
artefact: scrawl.findEntity(name('particle-wheel-1')).clone({
name: name('particle-wheel-3'),
}),
});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,
});Make the Net entity’s Particles draggable
scrawl.makeGroup({
name: name('my-draggable-group'),
}).addArtefacts(name('weak-arrow'), name('strong-arrow'), name('hub-spoke-arrow'));
scrawl.makeDragZone({
zone: canvas,
collisionGroup: name('my-draggable-group'),
endOn: ['up', 'leave'],
preventTouchDefaultWhenDragging: true,
});console.log(scrawl.library);