import * as scrawl from '../source/scrawl.js'
import { reportSpeed, addImageDragAndDrop } from './utilities.js';import * as scrawl from '../source/scrawl.js'
import { reportSpeed, addImageDragAndDrop } from './utilities.js';let canvas = scrawl.library.artefact.mycanvas;Import image from DOM
scrawl.importDomImage('.flowers');Every Mesh uses a Net entity
const myNet = scrawl.makeNet({
name: 'test-net',
order: 1,
world: scrawl.makeWorld({
name: 'demo-world',
}),
start: [50, 50],
generate: 'weak-net',
postGenerate: function () {@ts-expect-error
this.springs.forEach(s => {
s.particleFromIsStatic = true;
s.particleToIsStatic = true;
});
},
rows: 4,
columns: 6,
rowDistance: 100,
columnDistance: 100,
showSprings: true,
showSpringsColor: 'rgba(255, 255, 255, 0.3)',
forces: [],
engine: 'euler',
artefact: scrawl.makeWheel({
name: 'particle-wheel',
radius: 7,
handle: ['center', 'center'],
method: 'fillThenDraw',
fillStyle: 'rgba(200, 0, 0, 0.7)',
strokeStyle: 'white',
lineWidth: 2,
visibility: false,
noUserInteraction: true,
noPositionDependencies: true,
noFilters: true,
noDeltaUpdates: true,
}),
stampAction: function (artefact, particle, host) {
let [r, z, ...start] = particle.history[0];
artefact.simpleStamp(host, {
start,
fillStyle: particle.fill,
strokeStyle: particle.stroke,
});
},Make all of the Net entity’s Particles draggable
particlesAreDraggable: true,
});Every Mesh also needs a source image
const myPicture = scrawl.makePicture({
name: 'my-flower',
asset: 'iris',
copyStartX: 0,
copyStartY: 0,
copyWidth: '100%',
copyHeight: '100%',
visibility: false,
});The Loom entity definition
let myMesh = scrawl.makeMesh({
name: 'display-mesh',
net: 'test-net',
source: 'my-flower',
lineWidth: 2,
lineJoin: 'round',
strokeStyle: 'orange',
method: 'fillThenDraw',@ts-expect-error
onEnter: function () { this.set({ lineWidth: 6 }) },@ts-expect-error
onLeave: function () { this.set({ lineWidth: 2 }) },
});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: 'demo-animation',
target: canvas,
afterShow: report,
});Mouse movement over and away from the Loom (emulates CSS element hover functionality)
let interactions = function () { canvas.cascadeEventAction('move') };
scrawl.addListener('move', interactions, canvas.domElement);Create drag functionality
scrawl.makeGroup({
name: 'my-draggable-group',
}).addArtefacts('test-net');
scrawl.makeDragZone({
zone: canvas,
collisionGroup: 'my-draggable-group',
endOn: ['up', 'leave'],
preventTouchDefaultWhenDragging: true,
});addImageDragAndDrop(canvas, '#my-image-store', [myPicture]);console.log(scrawl.library);