import * as scrawl from '../source/scrawl.js';
import { reportSpeed } from './utilities.js';Gradient and Color factories - transparency - alternative approach using Cells instead of images
import * as scrawl from '../source/scrawl.js';
import { reportSpeed } from './utilities.js';const namespace = 'demo-canvas-019';
const name = (n) => `${namespace}-${n}`;Import the images we defined in the DOM (in <img> elements)
scrawl.importDomImage('.places');
const hackneyCanvas = scrawl.findCanvas('hackney'),
heathrowCanvas = scrawl.findCanvas('heathrow'),
kingstonCanvas = scrawl.findCanvas('kingston'),
burglaryCanvas = scrawl.findCanvas('burglary');For this scene, we’ll build a data structure which we can iterate over, to build the entitys, assets and gradients required by the scene
const data = [
{
canvas: hackneyCanvas,
image: 'hackney-bg',
transparency: 'transparent',
},
{
canvas: heathrowCanvas,
image: 'heathrow-bg',
transparency: 'rgb(0 0 0 / 0)',
},
{
canvas: kingstonCanvas,
image: 'kingston-bg',
transparency: '#00000000',
},
{
canvas: burglaryCanvas,
image: 'burglary-bg',
transparency: '#0000',
},
];This array will hold a set of functions which we will invoke in turn at the start of each Display cycle
const checkFunctions = [];The blur filter is temporary - we use it once on each image to generate a blurred version of that image
scrawl.makeFilter({
name: name('blur'),
method: 'gaussianBlur',
radius: 20,
});Iterate through our data array to create Scrawl-canvas objects
data.forEach(scene => {Firstly, build the blurred image in its own cell
const mycell = scene.canvas.buildCell({
name: name(`${scene.image}-blurred-cell`),
dimensions: ['100%', '100%'],
cleared: false,
compiled: false,
shown: false,
});
scrawl.makePicture({
name: name(`${scene.image}-blurred-image`),
group: name(`${scene.image}-blurred-cell`),
asset: scene.image,
dimensions: ['100%', '100%'],
copyDimensions: ['100%', '100%'],
filters: [name('blur')],
method: 'fill',
});The new Cell’s compile action is blocking, because the blur filter takes a long time to complete. To get something up on the screen we can defer the compile action until after the current RAF completes by putting it in a setTimeout invocation.
setTimeout(() => mycell.compile(), 0);Next, build a gradient using transparency and apply it in a second Block which displays in the original canvas
scrawl.makeRadialGradient({
name: name(`${scene.image}-gradient`),
start: ['50%', '50%'],
end: ['50%', '50%'],
startRadius: '5%',
endRadius: '20%',
colors: [
[0, scene.transparency],
[999, 'lightgray']
],
});
const gradientBlock = scrawl.makeBlock({
name: name(`${scene.image}-gradient-block`),
group: scene.canvas.base.name,
start: ['center', 'center'],
handle: ['center', 'center'],
dimensions: ['200%', '200%'],
fillStyle: name(`${scene.image}-gradient`),
lockFillStyleToEntity: true,
});Now we can draw our blurred image into the scene
scrawl.makePicture({
name: name(`${scene.image}-blurred-block`),
group: scene.canvas.base.name,
asset: name(`${scene.image}-blurred-cell`),
dimensions: ['100%', '100%'],
copyDimensions: ['100%', '100%'],
method: 'fill',
globalCompositeOperation: 'source-atop',
});Lastly, display the original image in the canvas
scrawl.makePicture({
name: name(`${scene.image}-original-image`),
group: scene.canvas.base.name,
asset: scene.image,
dimensions: ['100%', '100%'],
copyDimensions: ['100%', '100%'],
method: 'fill',
globalCompositeOperation: 'destination-over',
});Check whether the mouse cursor is hovering over this canvas, and update the filter Block entity’s positioning accordingly
const f = () => {
const here = scene.canvas.here;
return function () {
gradientBlock.set({
lockTo: (here.active) ? 'mouse' : 'start',
});
}
};
checkFunctions.push(f());
});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: [hackneyCanvas, heathrowCanvas, kingstonCanvas, burglaryCanvas],
observer: true,
commence: () => checkFunctions.forEach(f => f()),
});
scrawl.makeRender({
name: name('speed'),
noTarget: true,
afterShow: report,
});For this demo we will suppress touchmove functionality over the canvas
scrawl.addNativeListener('touchmove', (e) => {
e.preventDefault();
e.returnValue = false;
}, [hackneyCanvas.domElement, heathrowCanvas.domElement, kingstonCanvas.domElement, burglaryCanvas.domElement]);console.log(scrawl.library);