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('canvas-1');
Namespacing boilerplate
const namespace = canvas.name;
const name = (n) => `${namespace}-${n}`;
const container = canvas.domElement.parentNode;
We need to handle browser prefixing issues
let requestFS, releaseFS, isFS;
if (container.requestFullScreen) {
requestFS = 'requestFullScreen';
releaseFS = 'exitFullscreen';
isFS = 'fullscreenElement';
}
else if (container.webkitRequestFullscreen) {
requestFS = 'webkitRequestFullscreen';
releaseFS = 'webkitExitFullscreen';
isFS = 'webkitFullscreenElement';
}
else if (container.mozRequestFullScreen) {
requestFS = 'mozRequestFullScreen';
releaseFS = 'mozCancelFullScreen';
isFS = 'mozFullScreenElement';
}
Function to handle FS toggling for canvas-1
container
const toggleFullScreen = () => {
if (isFS) {
if (!document[isFS]) container[requestFS]();
else if (document[releaseFS]) document[releaseFS]();
}
};
Add an event listener for UI keyboard - use enter/return key to toggle fullscreen
scrawl.addNativeListener('keydown', (e) => {
if (e.keyCode === 13) toggleFullScreen();
}, document);
const myRadial = scrawl.makeRadialGradient({
name: name('circle-waves'),
startX: '30%',
startY: '30%',
endX: '50%',
endY: '50%',
endRadius: '50%',
paletteStart: 200,
paletteEnd: 800,
delta: {
paletteStart: -1,
paletteEnd: -1
},
cyclePalette: true,
animateByDelta: true,
colors: [
[0, 'black'],
[99, 'red'],
[199, 'black'],
[299, 'blue'],
[399, 'black'],
[499, 'gold'],
[599, 'black'],
[699, 'green'],
[799, 'black'],
[899, 'lavender'],
[999, 'black']
],
});
scrawl.makeGradient({
name: name('colored-pipes'),
endX: '100%',
cyclePalette: true,
easing: 'easeOutInQuad',
precision: 1,
colors: [
[0, 'black'],
[49, 'yellow'],
[99, 'black'],
[149, 'lightyellow'],
[199, 'black'],
[249, 'goldenrod'],
[299, 'black'],
[349, 'lemonchiffon'],
[399, 'black'],
[449, 'gold'],
[499, 'black'],
[549, 'tan'],
[599, 'black'],
[649, 'wheat'],
[699, 'black'],
[749, 'yellowgreen'],
[799, 'black'],
[849, 'peachpuff'],
[899, 'black'],
[949, 'papayawhip'],
[999, 'black'],
],
});
scrawl.makeGradient({
name: name('linear'),
endX: '100%',
colors: [
[0, 'blue'],
[495, 'red'],
[500, 'yellow'],
[505, 'red'],
[999, 'green']
],
colorSpace: 'OKLAB',
precision: 5,
});
Build the block and wheel entitys
scrawl.makeBlock({
name: name('cell-locked-block'),
width: 150,
height: 150,
startX: '30%',
startY: '20%',
handleX: 'center',
handleY: 'center',
fillStyle: name('linear'),
strokeStyle: 'coral',
lineWidth: 6,
delta: {
roll: 0.5
},
method: 'fillAndDraw',
}).clone({
name: name('entity-locked-block'),
scale: 1.2,
startY: '80%',
lockFillStyleToEntity: true,
}).clone({
name: name('animated-block'),
width: '25%',
height: '15%',
startY: '50%',
fillStyle: name('colored-pipes'),
lineWidth: 2,
delta: {
roll: -0.2
},
});
scrawl.makeWheel({
name: name('cell-locked-wheel'),
radius: 75,
startX: '70%',
startY: '20%',
handleX: 'center',
handleY: 'center',
fillStyle: name('linear'),
strokeStyle: 'coral',
lineWidth: 6,
lineDash: [4, 4],
delta: {
roll: -0.5
},
method: 'fillAndDraw',
}).clone({
name: name('entity-locked-wheel'),
scale: 1.2,
startY: '80%',
lockFillStyleToEntity: true,
}).clone({
name: name('animated-wheel'),
radius: '8%',
startY: '50%',
fillStyle: myRadial,
lineWidth: 2,
lineDash: [],
delta: {
roll: 0.2
},
});
const setCursorTo = {
auto: () => {
canvas.set({
css: {
cursor: 'auto',
},
});
},
pointer: () => {
canvas.set({
css: {
cursor: 'pointer',
},
});
},
grabbing: () => {
canvas.set({
css: {
cursor: 'grabbing',
},
});
},
};
Create the drag-and-drop zone
const current = scrawl.makeDragZone({
zone: canvas,
endOn: ['up', 'leave'],
exposeCurrentArtefact: true,
preventTouchDefaultWhenDragging: true,
updateOnStart: setCursorTo.grabbing,
updateOnEnd: setCursorTo.pointer,
});
Implement the hover check on the Canvas wrapper
canvas.set({
checkForEntityHover: true,
onEntityHover: setCursorTo.pointer,
onEntityNoHover: setCursorTo.auto,
});
const tweenEngine = (start, change, position) => {
const temp = 1 - position;
This is a fairly basic ease-in-out function: the tween will call the function with start, change and position arguments, and the function is required to return a value calculated from those arguments
const val = (position < 0.5) ?
start + ((position * position) * change * 2) :
(start + change) + ((temp * temp) * -change * 2);
We’re asking the tween to calculate an ease over 3000 steps, but the palette cursors (paletteStart, paletteEnd) are only permitted to have integer values between 0 and 999. Effectively we’re asking the tween to cycle through the palette 3 times.
return val % 1000;
};
const tweeny = scrawl.makeTween({
name: name('mytween'),
targets: name('colored-pipes'),
duration: 5000,
cycles: 1,
definitions: [{
attribute: 'paletteStart',
integer: true,
start: 0,
end: 2999,
engine: tweenEngine
}, {
attribute: 'paletteEnd',
integer: true,
start: 999,
end: 3998,
engine: tweenEngine
}]
});
Function to display frames-per-second data, and other information relevant to the demo
const report = reportSpeed('#reportmessage', function () {
const dragging = current();
if (typeof dragging !== 'boolean') {
if (dragging && dragging.artefact) return `Currently dragging: ${dragging.artefact.name}`
}
return 'Currently dragging: nothing';
});
Function to animate the gradients
const animateGradients = function () {
const dragging = current();
if (!tweeny.isRunning()) {
if (typeof dragging !== 'boolean' && dragging) {
if (dragging.artefact && dragging.artefact.name === name('animated-block')) tweeny.run();
}
}
};
Create the Display cycle animation
scrawl.makeRender({
name: name('animation'),
target: canvas,
Gradient animation is not automatically handled by the Display cycle
commence: animateGradients,
We have to tell the canvas to check UI for hovering states every Display cycle
afterCompile: () => canvas.checkHover(),
Display the current frame rate - calculated at the end of each Display cycle
afterShow: report,
});
console.log(scrawl.library);