• Jump To … +
    ./demo/modules/canvas-minimap.js ./demo/modules/canvas-scene-editor.js ./demo/modules/dom-entity-editor.js ./demo/modules/entity-copy-paste.js ./demo/modules/entity-manipulation-gui.js ./demo/modules/entity-navigation.js ./demo/modules/entity-ring-builder.js ./demo/modules/london-crime-graphic.js ./demo/modules/london-crime-lines.js ./demo/modules/london-crime-stacked-bars.js ./demo/modules/lottie-loader.js ./demo/modules/simple-chart-frame-tests.js ./demo/modules/simple-chart-frame.js ./demo/modules/simple-graph-lines.js ./demo/modules/simple-graph-stacked-bars.js ./demo/modules/wikipedia-views-spiral-chart.js ./demo/snippets/animated-highlight-gradient-text-snippet.js ./demo/snippets/animated-hover-gradient-snippet.js ./demo/snippets/animated-word-gradient-snippet.js ./demo/snippets/before-after-slider-infographic.js ./demo/snippets/bubbles-text-snippet.js ./demo/snippets/green-box-snippet.js ./demo/snippets/jazzy-button-snippet.js ./demo/snippets/page-performance-snippet-test.js ./demo/snippets/page-performance-snippet.js ./demo/snippets/pan-image-snippet.js ./demo/snippets/placeholder-effect-snippet.js ./demo/snippets/ripple-effect-snippet.js ./demo/snippets/risograph-text-gradient-snippet.js ./demo/snippets/spotlight-text-snippet-test.js ./demo/snippets/spotlight-text-snippet.js ./demo/snippets/swirling-stripes-text-snippet.js ./demo/snippets/text-snippet-helper.js ./demo/snippets/word-highlighter-snippet.js ./demo/snippets/worley-text-gradient-snippet.js
  • §

    Demo Modules 003

    Factory functions to create more complex, compound entitys

    Related files:

    • Compound entitys - main module

    Import the Scrawl-canvas object

    • There’s various ways to do this. See Demo DOM-001 for more details
    import * as scrawl from '../../source/scrawl.js';
  • §

    The entity ring factory

    This factory takes a single items Javascript Object argument (to match the functionality of built-in Scrawl-canvas factories). Three of the attributes of this argument object are required, the others will fall back on default values. These attrributes are:

    • canvas (required) - Scrawl-canvas Canvas wrapper object - the canvas which will be hosting the compound entity we are about to create
    • name (required) - String - unique name value
    • entity (required) - Scrawl-canvas entity object - any valid entity that has already been created
    • dimensions - Number - the square dimensions of the compound entity; default: 400
    • buildStartAngle - Number - the angle of the first entity we lay down; default: -45
    • buildEndAngle - Number - the angle of the last entity we lay down - note that this needs to be sufficient to cover at least half of the ring, which we can then copy and stamp to create the final output; default: 225
    • buildStepAngle - Number - the repeat value - higher values lead to fewer entitys making up the final ring; default: 15
    • buildOffset - Number - the entity’s offset from the center of the ring (as measured in px); default: 0
    • reflectOnly - Boolean - when the ring half is copied and pasted back into the final output, it can be set to reflect only, which will give us a bilateral rather than a radial symmetry; default: false
    export default function (items = {}) {
    
        if (!items.canvas || !items.entity || !items.name) return {};
    
        let canvas = items.canvas,
            name = items.name,
            entity = items.entity,
            dimensions = items.dimensions || 400,
            buildStartAngle = items.buildStartAngle || -45,
            buildEndAngle = items.buildEndAngle || 225,
            buildStepAngle = items.buildStepAngle || 15,
            buildOffset = items.buildOffset || 0,
            reflectOnly = items.reflectOnly || false;
    
        const cell = canvas.buildCell({
            name: `${name}-cell`,
            dimensions: [dimensions, dimensions],
            shown: false,
            compileOrder: 0,
        });
    
        const clip = scrawl.makeGroup({
            name: `${name}-clip-group`,
            host: `${name}-cell`,
            order: 0,
        });
    
        const reflect = scrawl.makeGroup({
            name: `${name}-reflect-group`,
            host: `${name}-cell`,
            order: 1,
        });
    
        scrawl.makeBlock({
            name: `${name}-clipper`,
            group: `${name}-clip-group`,
            start: ['left', 'center'],
            dimensions: ['100%', '50%'],
            method: 'clip'
        });
    
        let v = scrawl.requestVector(0, buildOffset);
        v.rotate(buildStartAngle);
    
        for (let i = buildStartAngle; i <= buildEndAngle; i += buildStepAngle) {
    
            entity.clone({
                name: `${name}-ringitem-${i}`,
                group: `${name}-clip-group`,
                roll: i,
                offset: [v.x, v.y],
            });
    
            v.rotate(buildStepAngle);
        }
    
        scrawl.releaseVector(v);
    
        scrawl.makePicture({
            name: `${name}-reflection`,
            group: `${name}-reflect-group`,
            asset: `${name}-cell`,
    
            start: ['center', '25%'],
            handle: ['center', 'center'],
            flipUpend: true,
            flipReverse: !reflectOnly,
    
            dimensions: ['100%', '50%'],
            copyDimensions: ['100%', '50%'],
            copyStartY: '50%',
    
            method: 'fill',
        });
    
        entity.set({
            visibility: false,
        });
    
        return {
            cell,
            kill: () => {
    
                clip.kill(true);
                reflect.kill(true);
                cell.kill();
            },
        }
    };