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 shape track along which we can animate a Cell
scrawl.makeOval({
name: name('responsive-oval'),
radiusX: '40%',
radiusY: '40%',
start: ['center', 'center'],
handle: ['center', 'center'],
strokeStyle: 'grey',
lineWidth: 10,
method: 'draw',
}).clone({
name: name('static-oval'),
radiusX: 100,
radiusY: 140,
strokeStyle: 'blue',
});
scrawl.makeTetragon({
name: name('responsive-diamond'),
strokeStyle: 'lightgreen',
lineWidth: 6,
method: 'draw',
start: ['center', 'center'],
handle: ['center', 'center'],
radiusX: '40%',
radiusY: '40%',
}).clone({
name: name('static-diamond'),
strokeStyle: 'darkgreen',
radiusX: 100,
radiusY: 140,
});
scrawl.makeLine({
name: name('responsive-line'),
strokeStyle: 'orange',
lineWidth: 8,
method: 'draw',
start: ['20%', '45%'],
end: ['80%', '45%'],
}).clone({
name: name('static-line'),
strokeStyle: 'brown',
start: [50, 210],
end: [350, 210],
});
scrawl.makeRectangle({
name: name('responsive-rectangle'),
strokeStyle: 'red',
lineWidth: 4,
method: 'draw',
start: ['center', '25%'],
handle: ['center', 'center'],Known issue: the entity will get “jittery” in a responsive environment. Fix, as yet, unknown
rectangleWidth: '60%',
rectangleHeight: '15%',
radiusT: '5%',
radiusB: '15%',
}).clone({
name: name('static-rectangle'),
startY: '75%',
strokeStyle: 'pink',
rectangleWidth: 200,
rectangleHeight: 100,
radius: 15,
})
scrawl.makeStar({
name: name('responsive-star'),
start: ['center', '25%'],
handle: ['center', 'center'],Known issue: the entity will get “jittery” in a responsive environment. The current fix (in a hacky, undesirable way) is to make radius2 larger than radius1
radius1: '20%',
radius2: '10%',
points: 5,
strokeStyle: '#420',
lineWidth: 4,
method: 'draw',
}).clone({
name: name('static-star'),
startY: '75%',
strokeStyle: '#840',
radius1: 120,
radius2: 80,
});
scrawl.makeCog({
name: name('static-cog'),
start: ['center', 'center'],
handle: ['center', 'center'],
outerRadius: 180,
innerRadius: 160,
outerControlsDistance: 10,
innerControlsDistance: 6,
points: 36,
strokeStyle: 'coral',
lineWidth: 8,
method: 'draw',
}).clone({
name: name('responsive-cog'),Known issue: the entity will get “jittery” in a responsive environment. The current fix (in a hacky, undesirable way) is to make the innerRadius larger than the outerRadius
outerRadius: `${(180/400) * 100}%`,
innerRadius: `${(160/400) * 100}%`,
outerControlsDistance: `${(10/400) * 100}%`,
innerControlsDistance: `${(6/400) * 100}%`,
strokeStyle: 'orchid',
lineWidth: 4,
});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,
});console.log(scrawl.library);