import * as scrawl from '../source/scrawl.js';Block and Wheel entitys (make, clone, method); drag and drop block and wheel entitys
Import Scrawl-canvas
import * as scrawl from '../source/scrawl.js';Get a handle to the Canvas wrapper
const canvas = scrawl.findCanvas('my-canvas');Namespacing boilerplate
const namespace = canvas.name;
const name = (n) => `${namespace}-${n}`;OVAL 1
scrawl.makeOval({
name: name('oval-1'),
start: [50, 50],
radiusX: 50,
radiusY: 60,
scale: 0,
delta: {
scale: 0.005,
},
deltaConstraints: {
scale: [0, 2, 'reverse'],
},
checkDeltaConstraints: true,
strokeStyle: 'green',
method: 'draw',
scaleOutline: false,
showBoundingBox: true,
});
scrawl.makeWheel({
name: name('oval-1-pin'),
handle: ['center', 'center'],
pivot: name('oval-1'),
lockTo: 'pivot',
});
scrawl.makeBlock({
name: name('oval-1-block'),
pivot: name('oval-1'),
lockTo: 'pivot',
width: 50 * 2,
height: 60 * 2,
scale: 0,
delta: {
scale: 0.005,
},
deltaConstraints: {
scale: [0, 2, 'reverse'],
},
checkDeltaConstraints: true,
strokeStyle: 'blue',
method: 'draw',
scaleOutline: false,
});// OVAL 2 scrawl.makeOval({ name: name(‘oval-2’), start: [450, 150], handle: [‘center’, ‘center’], radiusX: 50, radiusY: 60, scale: 0, delta: { scale: 0.01, }, deltaConstraints: { scale: [0, 2, ‘reverse’], }, checkDeltaConstraints: true, strokeStyle: ‘green’, method: ‘draw’, scaleOutline: false, showBoundingBox: true, });
scrawl.makeWheel({ name: name(‘oval-2-pin’), handle: [‘center’, ‘center’], pivot: name(‘oval-2’), lockTo: ‘pivot’, });
scrawl.makeBlock({ name: name(‘oval-2-block’), handle: [‘center’, ‘center’], pivot: name(‘oval-2’), lockTo: ‘pivot’, width: 50 * 2, height: 60 * 2, scale: 0, delta: { scale: 0.01, }, deltaConstraints: { scale: [0, 2, ‘reverse’], }, checkDeltaConstraints: true, strokeStyle: ‘blue’, method: ‘draw’, scaleOutline: false, });
OVAL 3
scrawl.makeOval({
name: name('oval-3'),
start: [350, 50],
radiusX: 30,
radiusY: 40,
intersectY: -0.2,
scale: 0,
delta: {
scale: 0.005,
},
deltaConstraints: {
scale: [0, 2, 'reverse'],
},
checkDeltaConstraints: true,
strokeStyle: 'green',
method: 'draw',
scaleOutline: false,
showBoundingBox: true,
});
scrawl.makeWheel({
name: name('oval-3-pin'),
handle: ['center', 'center'],
pivot: name('oval-3'),
lockTo: 'pivot',
});
scrawl.makeBlock({
name: name('oval-3-block'),
mimic: name('oval-3'),
lockTo: 'mimic',
useMimicDimensions: true,
useMimicScale: true,
useMimicStart: true,
useMimicHandle: true,
useMimicOffset: true,
useMimicRotation: true,
useMimicFlip: true,
strokeStyle: 'blue',
method: 'draw',
scaleOutline: false,
});// OVAL 4 scrawl.makeOval({ name: name(‘oval-4’), start: [450, 450], handle: [50, 60], radiusX: 50, radiusY: 60, scale: 0, delta: { scale: 0.01, }, deltaConstraints: { scale: [0, 2, ‘reverse’], }, checkDeltaConstraints: true, strokeStyle: ‘green’, method: ‘draw’, scaleOutline: false, showBoundingBox: true, });
scrawl.makeWheel({ name: name(‘oval-4-pin’), handle: [‘center’, ‘center’], pivot: name(‘oval-4’), lockTo: ‘pivot’, });
scrawl.makeBlock({ name: name(‘oval-4-block’), handle: [50, 60], pivot: name(‘oval-4’), lockTo: ‘pivot’, width: 50 * 2, height: 60 * 2, scale: 0, delta: { scale: 0.01, }, deltaConstraints: { scale: [0, 2, ‘reverse’], }, checkDeltaConstraints: true, strokeStyle: ‘blue’, method: ‘draw’, scaleOutline: false, });
// COG scrawl.makeCog({ name: name(‘cog’), start: [350, 50], innerRadius: 60, outerRadius: 30, points: 6, scale: 0, delta: { scale: 0.01, }, deltaConstraints: { scale: [0, 2, ‘reverse’], }, checkDeltaConstraints: true, strokeStyle: ‘green’, method: ‘draw’, scaleOutline: false, showBoundingBox: true, });
scrawl.makeWheel({ name: name(‘cog-pin’), handle: [‘center’, ‘center’], pivot: name(‘cog’), lockTo: ‘pivot’, });
scrawl.makeBlock({ name: name(‘cog-block’), pivot: name(‘cog’), lockTo: ‘pivot’, width: 50 * 2, height: 60 * 2, scale: 0, delta: { scale: 0.01, }, deltaConstraints: { scale: [0, 2, ‘reverse’], }, checkDeltaConstraints: true, strokeStyle: ‘blue’, method: ‘draw’, scaleOutline: false, })
// TETRAGON scrawl.makeTetragon({ name: name(‘tetragon’), start: [50, 350], radiusX: 50, radiusY: 60, scale: 0, delta: { scale: 0.01, }, deltaConstraints: { scale: [0, 2, ‘reverse’], }, checkDeltaConstraints: true, strokeStyle: ‘green’, method: ‘draw’, scaleOutline: false, showBoundingBox: true, });
scrawl.makeWheel({ name: name(‘tetragon-pin’), handle: [‘center’, ‘center’], pivot: name(‘tetragon’), lockTo: ‘pivot’, });
scrawl.makeBlock({ name: name(‘tetragon-block’), pivot: name(‘tetragon’), lockTo: ‘pivot’, width: 50 * 2, height: 60 * 2, scale: 0, delta: { scale: 0.01, }, deltaConstraints: { scale: [0, 2, ‘reverse’], }, checkDeltaConstraints: true, strokeStyle: ‘blue’, method: ‘draw’, scaleOutline: false, })
// POLYGON scrawl.makePolygon({ name: name(‘polygon’), start: [350, 350], sides: 6, sideLength: 50, scale: 0, delta: { scale: 0.01, }, deltaConstraints: { scale: [0, 2, ‘reverse’], }, checkDeltaConstraints: true, strokeStyle: ‘green’, method: ‘draw’, scaleOutline: false, showBoundingBox: true, });
scrawl.makeWheel({ name: name(‘polygon-pin’), handle: [‘center’, ‘center’], pivot: name(‘polygon’), lockTo: ‘pivot’, });
scrawl.makeBlock({ name: name(‘polygon-block’), pivot: name(‘polygon’), lockTo: ‘pivot’, width: 50 * 2, height: 60 * 2, scale: 0, delta: { scale: 0.01, }, deltaConstraints: { scale: [0, 2, ‘reverse’], }, checkDeltaConstraints: true, strokeStyle: ‘blue’, method: ‘draw’, scaleOutline: false, })
Render the scene
scrawl.makeRender({
name: name('animation'),
target: canvas,
});console.log(scrawl.library);