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}`;Create a wheel entity which we can then bounce around the canvas
const myWheel = scrawl.makeWheel({
name: name('ball'),
start: [300, '50%'],
handle: ['center', 'center'],
radius: 60,
startAngle: 35,
endAngle: -35,
fillStyle: '#f2aafe',
strokeStyle: 'gold',
lineWidth: 6,
lineJoin: 'round',
method: 'fillAndDraw',
globalAlpha: 0.8,
delta: {
startX: 4,
startY: '0.25%',
roll: -0.5,
globalAlpha: 0.006,
},We will check for bounds violations using Scrawl-canvas delta checking functionality
[minimum-value, maximum-value, action-to-take] deltaConstraints: {
startX: [50, 550, 'reverse'],
startY: ['10%', '90%', 'reverse'],
scale: [0.5, 2, 'reverse'],
globalAlpha: [0.2, 1, 'reverse'],
},
checkDeltaConstraints: true,
});
scrawl.makeOval({
name: name('base-oval'),
start: ['center', 'center'],
handle: ['center', 'center'],
radiusX: 150,
radiusY: 150,
method: 'draw',
lineWidth: 2,
strokeStyle: 'red',
lineDash: [4, 3],
useAsPath: true,
shadowColor: 'black',
shadowOffsetX: 4,
shadowOffsetY: 4,
shadowBlur: 4,
delta: {
roll: 0.1,
},
});
const pins = scrawl.makeGroup({
name: name('pins'),
host: canvas.get('baseName'),
});
const angle = 3 / 7;
scrawl.makeBlock({
name: name('pin-1'),
group: pins,
dimensions: [7, 7],
handle: ['center', 'center'],
path: name('base-oval'),
pathPosition: (angle * 1) % 1,
lockTo: 'path',
fillStyle: 'blue',
shadowColor: 'black',
shadowOffsetX: 4,
shadowOffsetY: 4,
shadowBlur: 4,
}).clone({
name: name('pin-2'),
pathPosition: (angle * 2) % 1,
}).clone({
name: name('pin-3'),
pathPosition: (angle * 3) % 1,
}).clone({
name: name('pin-4'),
pathPosition: (angle * 4) % 1,
}).clone({
name: name('pin-5'),
pathPosition: (angle * 5) % 1,
}).clone({
name: name('pin-6'),
pathPosition: (angle * 6) % 1,
}).clone({
name: name('pin-7'),
pathPosition: (angle * 7) % 1,
});
scrawl.makePolyline({
name: name('polly'),
pins: pins.get('artefacts'),
tension: 0,
closed: true,
mapToPins: true,
strokeStyle: 'orange',
lineWidth: 2,
lineCap: 'round',
lineJoin: 'round',
shadowColor: 'black',
shadowOffsetX: 4,
shadowOffsetY: 4,
shadowBlur: 4,
method: 'draw',
delta: {
tension: 0.005,
},
deltaConstraints: {
tension: [-3.5, 3, 'reverse'],
},
checkDeltaConstraints: true,
});Function to display frames-per-second data, and other information relevant to the demo
const report = reportSpeed('#reportmessage');Create the Display cycle animation
const animation = scrawl.makeRender({
name: name('animation'),
maxFrameRate: 120,
target: canvas,
afterShow: report,
});scrawl.addNativeListener(['input', 'change'], (e) => {
e.preventDefault();
e.returnValue = false;
switch (e.target.value) {
case 'reverse' :
myWheel.set({
deltaConstraints: {
startX: [50, 550, 'reverse'],
startY: ['10%', '90%', 'reverse'],
scale: [0.5, 2, 'reverse'],
globalAlpha: [0.2, 1, 'reverse'],
},
});
break;
case 'loop' :
myWheel.set({
deltaConstraints: {
startX: [50, 550, 'loop'],
startY: ['10%', '90%', 'loop'],
scale: [0.5, 2, 'loop'],
globalAlpha: [0.2, 1, 'loop'],
},
});
break;
}
}, '#constraintAction');
scrawl.addNativeListener('click', (e) => {
e.preventDefault();
e.returnValue = false;
const target = e.target;
if (target) {
if (parseInt(target.value, 10)) {
target.value = '0';
target.innerHTML = 'Add scaling';
myWheel.setDeltaValues({
scale: 'remove',
});
}
else {
target.value = '1';
target.innerHTML = 'Remove scaling';
myWheel.setDeltaValues({
scale: 'newNumber:0.01',
});
}
}
}, '#scaling');Setup form observer functionality
scrawl.makeUpdater({
event: ['input', 'change'],
origin: '.controlItem',
target: animation,
useNativeListener: true,
preventDefault: true,
updates: {
maxFrameRate: ['maxFrameRate', 'int'],
},
});Set the DOM input values
scrawl.initializeDomInputs([
['button', 'scaling', 'Add scaling'],
['select', 'constraintAction', 0],
['select', 'maxFrameRate', 0]
]);console.log(scrawl.library);