Demo DOM 013

Jump To … +

./demo/canvas-001.js ./demo/canvas-002.js ./demo/canvas-003.js ./demo/canvas-004.js ./demo/canvas-005.js ./demo/canvas-006.js ./demo/canvas-007.js ./demo/canvas-008.js ./demo/canvas-009.js ./demo/canvas-010.js ./demo/canvas-011.js ./demo/canvas-012.js ./demo/canvas-013.js ./demo/canvas-014.js ./demo/canvas-015.js ./demo/canvas-016.js ./demo/canvas-017.js ./demo/canvas-018.js ./demo/canvas-019.js ./demo/canvas-020.js ./demo/canvas-021.js ./demo/canvas-022.js ./demo/canvas-023.js ./demo/canvas-024.js ./demo/canvas-025.js ./demo/canvas-026.js ./demo/canvas-027.js ./demo/canvas-028.js ./demo/canvas-029.js ./demo/canvas-030.js ./demo/canvas-031.js ./demo/canvas-032.js ./demo/canvas-033.js ./demo/canvas-034.js ./demo/canvas-035.js ./demo/canvas-036.js ./demo/canvas-037.js ./demo/canvas-038.js ./demo/canvas-039.js ./demo/canvas-040.js ./demo/canvas-041.js ./demo/canvas-042.js ./demo/canvas-043.js ./demo/canvas-044.js ./demo/canvas-045.js ./demo/canvas-046.js ./demo/canvas-047.js ./demo/component-001.js ./demo/component-002.js ./demo/component-003.js ./demo/component-004.js ./demo/component-005.js ./demo/component-006.js ./demo/component-007.js ./demo/core-001.js ./demo/dom-001.js ./demo/dom-002.js ./demo/dom-003.js ./demo/dom-004.js ./demo/dom-005.js ./demo/dom-006.js ./demo/dom-007.js ./demo/dom-008.js ./demo/dom-009.js ./demo/dom-010.js ./demo/dom-011.js ./demo/dom-012.js ./demo/dom-013.js ./demo/dom-014a.js ./demo/dom-014b.js ./demo/dom-014c.js ./demo/dom-015.js ./demo/dom-016.js ./demo/filters-001.js ./demo/filters-002.js ./demo/filters-003.js ./demo/filters-004.js ./demo/filters-005.js ./demo/filters-006.js ./demo/filters-007.js ./demo/filters-008.js ./demo/filters-009.js ./demo/filters-010.js ./demo/filters-011.js ./demo/filters-012.js ./demo/filters-013.js ./demo/filters-014.js ./demo/filters-015.js ./demo/filters-016.js ./demo/filters-017.js ./demo/filters-018.js ./demo/filters-019.js ./demo/filters-020.js ./demo/filters-501.js ./demo/filters-502.js ./demo/filters-503.js ./demo/filters-504.js ./demo/filters-505.js ./demo/particles-001.js ./demo/particles-002.js ./demo/particles-003.js ./demo/particles-004.js ./demo/particles-005.js ./demo/particles-006.js ./demo/particles-007.js ./demo/particles-008.js ./demo/particles-009.js ./demo/particles-010.js ./demo/particles-011.js ./demo/particles-012.js ./demo/particles-013.js ./demo/particles-014.js ./demo/particles-015.js ./demo/particles-016.js ./demo/temp-001.js ./demo/temp-inkscapeSvgFilters.js

¶

Demo DOM 013

Track mouse movements over a 3d rotated and scaled canvas element

import scrawl from '../source/scrawl.js'

const stack = scrawl.library.stack.mystack,
    canvas = scrawl.library.canvas.mycanvas;

stack.set({
    perspectiveZ: 1200,
    css: {
        backgroundColor: 'slategray',
    },
});

canvas.set({
    start: ['center', 'center'],
    handle: ['center', 'center'],
    backgroundColor: 'beige',

    trackHere: 'local',
});

const ball = scrawl.makeWheel({

    name: 'red-ball',
    group: canvas.base.name,

    start: ['center', 'center'],
    handle: ['center', 'center'],

    radius: 40,
    lineWidth: 8,
    fillStyle: 'red',
    strokeStyle: 'orange',
    method: 'fillThenDraw',

})

const offset = ball.clone({

    name: 'offset-ball',
    radius: 12,
    lineWidth: 3,
    fillStyle: 'blue',
    strokeStyle: 'green',
});

const checkCanvasIsActive = function () {

    const here = canvas.here;

    let isActive = false;

    return function () {

We only want this function to run in the canvas render animation, though it will be called by both the canvas and stack renders

        if (this.target.name == 'mycanvas') {

            if (here.active != isActive) {

                isActive = here.active;

                ball.set({
                    lockTo: (isActive) ? 'mouse' : 'start',
                });
            }
        }
    }
}();

Scene animation

let clientX = 0,
    clientY = 0,
    movementX = 0,
    movementY = 0,
    offsetX = 0,
    offsetY = 0,
    pageX = 0,
    pageY = 0,
    screenX= 0,
    screenY = 0;

scrawl.addListener('move', (e) => {
    clientX = e.clientX.toFixed(0);
    clientY = e.clientY.toFixed(0);
    movementX = e.movementX.toFixed(0);
    movementY = e.movementY.toFixed(0);
    offsetX = e.offsetX.toFixed(0);
    offsetY = e.offsetY.toFixed(0);
    pageX = e.pageX.toFixed(0);
    pageY = e.pageY.toFixed(0);
    screenX= e.screenX.toFixed(0);
    screenY = e.screenY.toFixed(0);

    offset.set({
        startX: parseFloat(offsetX),
        startY: parseFloat(offsetY),
    });
}, canvas.domElement);

Function to display frames-per-second data, and other information relevant to the demo

const report = function () {

    let testTicker = Date.now(),
        testTime, testNow,
        testMessage = document.querySelector('#reportmessage');

    return function () {

We only want this function to run in the stack render animation, not the canvas render. If it runs in both then the second run will register a testTime of just over 0 milliseconds (and a framerate of infinity)

        if (this.target.name == 'mystack') {

            testNow = Date.now();

            testTime = testNow - testTicker;
            testTicker = testNow;

            testMessage.textContent = `Screen refresh: ${Math.ceil(testTime)}ms; fps: ${Math.floor(1000 / testTime)}
    client: ${clientX}, ${clientY}
    offset: ${offsetX}, ${offsetY}
    page: ${pageX}, ${pageY}
    screen: ${screenX}, ${screenY}
    movement: ${movementX}, ${movementY}

    canvas here x/y: ${canvas.here.x}, ${canvas.here.y}; dims: ${canvas.here.w}, ${canvas.here.h}; original dims: ${canvas.here.originalWidth}, ${canvas.here.originalHeight}; active: ${canvas.here.active}
    base here x/y: ${canvas.base.here.x}, ${canvas.base.here.y}; dims: ${canvas.base.here.w}, ${canvas.base.here.h}; active: ${canvas.base.here.active}`;
        }
    };
}();

Create the Display cycle animation

scrawl.makeRender({

    name: 'demo-animation',
    target: [stack, canvas],

    commence: checkCanvasIsActive,
    afterShow: report,
});

User interaction

Setup form observer functionality

scrawl.observeAndUpdate({

    event: ['input', 'change'],
    origin: '.controlItem',

    target: canvas,

    useNativeListener: true,
    preventDefault: true,

    updates: {
        width: ['width', 'round'],
        height: ['height', 'round'],

        start_xAbsolute: ['startX', 'round'],
        start_yAbsolute: ['startY', 'round'],

        handle_xAbsolute: ['handleX', 'round'],
        handle_yAbsolute: ['handleY', 'round'],

        offset_xAbsolute: ['offsetX', 'round'],
        offset_yAbsolute: ['offsetY', 'round'],

        roll: ['roll', 'float'],
        pitch: ['pitch', 'float'],
        yaw: ['yaw', 'float'],
        scale: ['scale', 'float'],
    },
});

Setup form

document.querySelector('#width').value = 400;
document.querySelector('#height').value = 400;
document.querySelector('#start_xAbsolute').value = 300;
document.querySelector('#start_yAbsolute').value = 300;
document.querySelector('#handle_xAbsolute').value = 200;
document.querySelector('#handle_yAbsolute').value = 200;
document.querySelector('#offset_xAbsolute').value = 0;
document.querySelector('#offset_yAbsolute').value = 0;
document.querySelector('#roll').value = 0;
document.querySelector('#pitch').value = 0;
document.querySelector('#yaw').value = 0;
document.querySelector('#scale').value = 1;

console.log(scrawl.library);