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-015a.js ./demo/canvas-016.js ./demo/canvas-017.js ./demo/canvas-018.js ./demo/canvas-019.js ./demo/canvas-019a.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/canvas-048.js ./demo/canvas-049.js ./demo/canvas-050.js ./demo/canvas-051.js ./demo/canvas-052.js ./demo/canvas-053.js ./demo/canvas-054.js ./demo/canvas-055.js ./demo/canvas-056.js ./demo/canvas-057.js ./demo/canvas-058.js ./demo/canvas-059.js ./demo/canvas-060.js ./demo/canvas-061.js ./demo/canvas-062.js ./demo/canvas-063.js ./demo/canvas-064.js ./demo/core-001.js ./demo/delaunator-001.js ./demo/delaunator-002.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-015.js ./demo/dom-016.js ./demo/filters-001.js ./demo/filters-002.js ./demo/filters-002a.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-021.js ./demo/filters-022.js ./demo/filters-023.js ./demo/filters-024.js ./demo/filters-025.js ./demo/filters-026.js ./demo/filters-027.js ./demo/filters-101.js ./demo/filters-102.js ./demo/filters-103.js ./demo/filters-104.js ./demo/filters-105.js ./demo/filters-501.js ./demo/filters-502.js ./demo/filters-503.js ./demo/filters-504.js ./demo/filters-505.js ./demo/mediapipe-001.js ./demo/mediapipe-002.js ./demo/mediapipe-003.js ./demo/modules-001.js ./demo/modules-002.js ./demo/modules-003.js ./demo/modules-004.js ./demo/modules-005.js ./demo/packets-001.js ./demo/packets-002.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/rapier-001.js ./demo/snippets-001.js ./demo/snippets-002.js ./demo/snippets-003.js ./demo/snippets-004.js ./demo/snippets-005.js ./demo/snippets-006.js ./demo/temp-000.js ./demo/temp-001.js ./demo/temp-001a.js ./demo/temp-002.js ./demo/temp-003.js ./demo/temp-004.js ./demo/temp-005.js ./demo/temp-006.js ./demo/temp-007.js ./demo/temp-008.js ./demo/temp-009.js ./demo/temp-010.js ./demo/temp-011.js ./demo/temp-012.js ./demo/temp-013.js ./demo/temp-014.js ./demo/temp-015.js ./demo/temp-016.js ./demo/temp-017.js ./demo/temp-018.js ./demo/temp-018a.js ./demo/temp-019.js ./demo/temp-020.js ./demo/temp-021.js ./demo/temp-022.js ./demo/temp-023.js ./demo/temp-024.js ./demo/temp-025.js ./demo/temp-026.js ./demo/temp-027.js ./demo/temp-028.js ./demo/temp-029.js ./demo/temp-030.js ./demo/temp-031.js ./demo/temp-032.js ./demo/temp-033.js ./demo/temp-034.js ./demo/temp-035.js ./demo/temp-036.js ./demo/temp-037.js ./demo/temp-100.js ./demo/temp-101.js ./demo/temp-102.js ./demo/temp-103.js ./demo/temp-104.js ./demo/temp-200.js ./demo/temp-201.js ./demo/temp-301.js ./demo/temp-inkscapeSvgFilters.js ./demo/temp-lottie.js ./demo/tensorflow-001.js ./demo/tensorflow-002.js ./demo/utilities.js

§

Demo DOM 013

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

import * as scrawl from '../source/scrawl.js';

import { reportSpeed } from './utilities.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'],
    trackHere: 'local',
    offsetZ: 150,
});

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) => {

    if (e.type !== 'touchmove') {


        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 = reportSpeed('#reportmessage', function () {

    const here = canvas.here;
    const basehere = canvas.base.here;

    return `    client: ${clientX}, ${clientY}
    offset: ${offsetX}, ${offsetY}
    page: ${pageX}, ${pageY}
    screen: ${screenX}, ${screenY}
    movement: ${movementX}, ${movementY}

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

Create the Display cycle animation

scrawl.makeRender({

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

    commence: checkCanvasIsActive,
    afterShow: report,
});

User interaction

For this demo we will suppress touchmove functionality over the canvas

scrawl.addNativeListener(['touchmove'], (e) => {

    e.preventDefault();
    e.returnValue = false;

}, [stack.domElement, canvas.domElement]);

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 @ts-expect-error

document.querySelector('#width').value = 400;

@ts-expect-error

document.querySelector('#height').value = 400;

@ts-expect-error

document.querySelector('#start_xAbsolute').value = 300;

@ts-expect-error

document.querySelector('#start_yAbsolute').value = 300;

@ts-expect-error

document.querySelector('#handle_xAbsolute').value = 200;

@ts-expect-error

document.querySelector('#handle_yAbsolute').value = 200;

@ts-expect-error

document.querySelector('#offset_xAbsolute').value = 0;

@ts-expect-error

document.querySelector('#offset_yAbsolute').value = 0;

@ts-expect-error

document.querySelector('#roll').value = 0;

@ts-expect-error

document.querySelector('#pitch').value = 0;

@ts-expect-error

document.querySelector('#yaw').value = 0;

@ts-expect-error

document.querySelector('#scale').value = 1;

console.log(scrawl.library);