- 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-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/dom-017.js ./demo/dom-018.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-028.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/modules-006.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/tensorflow-001.js ./demo/tensorflow-002.js ./demo/utilities.js

- §

  # Demo DOM 018

  Fullscreen API functionality

- §

  Run code

      import {
          addNativeListener,
          library as L,
          makeBlock,
          makeDragZone,
          makeGradient,
          makeRadialGradient,
          makeRender,
          makeTween,
          makeWheel,
      } from '../source/scrawl.js'

      import { reportSpeed } from './utilities.js';

- §

  #### Scene setup

  Get a handle to the Canvas wrapper

      const canvas1 = L.artefact['canvas-1'];

- §

  Namespacing boilerplate

      const namespace = 'demo';
      const name = (n) => `${namespace}-${n}`;

- §

  #### Manage Fullscreen API functionality

      const container1 = canvas1.domElement.parentNode;

- §

  We need to handle browser prefixing issues

      let requestFS, releaseFS, isFS;

      if (container1.requestFullScreen) {

          requestFS = 'requestFullScreen';
          releaseFS = 'exitFullscreen';
          isFS = 'fullscreenElement';
      }
      else if (container1.webkitRequestFullscreen) {

          requestFS = 'webkitRequestFullscreen';
          releaseFS = 'webkitExitFullscreen';
          isFS = 'webkitFullscreenElement';
      }
      else if (container1.mozRequestFullScreen) {

          requestFS = 'mozRequestFullScreen';
          releaseFS = 'mozCancelFullScreen';
          isFS = 'mozFullScreenElement';
      }

- §

  Function to handle FS toggling for `canvas-1` container

      const toggleFullScreen = () => {

          if (isFS) {

              if (!document[isFS]) container1[requestFS]();

              else if (document[releaseFS]) document[releaseFS]();
          };
      };

- §

  Add an event listener for UI keyboard - use enter/return key to toggle fullscreen

      addNativeListener('keydown', (e) => {

          if (e.keyCode === 13) toggleFullScreen();

      }, document);

- §

  #### Canvas 1 scene

  Build the gradient objects

      const myRadial = makeRadialGradient({
          name: name('circle-waves'),

          startX: '30%',
          startY: '30%',
          endX: '50%',
          endY: '50%',

          endRadius: '50%',

          paletteStart: 200,
          paletteEnd: 800,

          delta: {
              paletteStart: -1,
              paletteEnd: -1
          },

          cyclePalette: true,
          animateByDelta: true,

          colors: [
              [0, 'black'],
              [99, 'red'],
              [199, 'black'],
              [299, 'blue'],
              [399, 'black'],
              [499, 'gold'],
              [599, 'black'],
              [699, 'green'],
              [799, 'black'],
              [899, 'lavender'],
              [999, 'black']
          ],
      });

      makeGradient({
          name: name('colored-pipes'),
          endX: '100%',
          cyclePalette: true,

          easing: 'easeOutInQuad',
          precision: 1,

          colors: [
              [0, 'black'],
              [49, 'yellow'],
              [99, 'black'],
              [149, 'lightyellow'],
              [199, 'black'],
              [249, 'goldenrod'],
              [299, 'black'],
              [349, 'lemonchiffon'],
              [399, 'black'],
              [449, 'gold'],
              [499, 'black'],
              [549, 'tan'],
              [599, 'black'],
              [649, 'wheat'],
              [699, 'black'],
              [749, 'yellowgreen'],
              [799, 'black'],
              [849, 'peachpuff'],
              [899, 'black'],
              [949, 'papayawhip'],
              [999, 'black'],
          ],
      });

      makeGradient({
          name: name('linear'),
          endX: '100%',

          colors: [
              [0, 'blue'],
              [495, 'red'],
              [500, 'yellow'],
              [505, 'red'],
              [999, 'green']
          ],
          colorSpace: 'OKLAB',
          precision: 5,
      });

- §

  Build the block and wheel entitys

      makeBlock({
          name: name('cell-locked-block'),

          width: 150,
          height: 150,

          startX: '30%',
          startY: '20%',

          handleX: 'center',
          handleY: 'center',

          fillStyle: name('linear'),
          strokeStyle: 'coral',
          lineWidth: 6,

          delta: {
              roll: 0.5
          },

          method: 'fillAndDraw',

      }).clone({
          name: name('entity-locked-block'),

          scale: 1.2,
          startY: '80%',

          lockFillStyleToEntity: true,

      }).clone({
          name: name('animated-block'),

          width: '25%',
          height: '15%',

          startY: '50%',

          fillStyle: name('colored-pipes'),
          lineWidth: 2,

          delta: {
              roll: -0.2
          },
      });

      makeWheel({
          name: name('cell-locked-wheel'),

          radius: 75,

          startX: '70%',
          startY: '20%',
          handleX: 'center',
          handleY: 'center',

          fillStyle: name('linear'),
          strokeStyle: 'coral',
          lineWidth: 6,
          lineDash: [4, 4],

          delta: {
              roll: -0.5
          },

          method: 'fillAndDraw',

      }).clone({
          name: name('entity-locked-wheel'),

          scale: 1.2,
          startY: '80%',

          lockFillStyleToEntity: true,

      }).clone({
          name: name('animated-wheel'),

          radius: '8%',
          startY: '50%',

          fillStyle: myRadial,
          lineWidth: 2,
          lineDash: [],

          delta: {
              roll: 0.2
          },
      });

- §

  #### User interaction

  Make an object to hold functions we’ll use for UI

      const setCursorTo = {

          auto: () => {
              canvas1.set({
                  css: {
                      cursor: 'auto',
                  },
              });
          },
          pointer: () => {
              canvas1.set({
                  css: {
                      cursor: 'pointer',
                  },
              });
          },
          grabbing: () => {
              canvas1.set({
                  css: {
                      cursor: 'grabbing',
                  },
              });
          },
      };

- §

  Create the drag-and-drop zone

      const current = makeDragZone({

          zone: canvas1,
          endOn: ['up', 'leave'],
          exposeCurrentArtefact: true,
          preventTouchDefaultWhenDragging: true,
          updateOnStart: setCursorTo.grabbing,
          updateOnEnd: setCursorTo.pointer,
      });

- §

  Implement the hover check on the Canvas wrapper

      canvas1.set({
          checkForEntityHover: true,
          onEntityHover: setCursorTo.pointer,
          onEntityNoHover: setCursorTo.auto,
      });

- §

  #### Scene animation

  Tween, and the engine used by the tween to calculate values

      const tweenEngine = (start, change, position) => {

          const temp = 1 - position;

- §

  This is a fairly basic ease-in-out function: the tween will call the function with start, change and position arguments, and the function is required to return a value calculated from those arguments

          const val = (position < 0.5) ?
              start + ((position * position) * change * 2) :
              (start + change) + ((temp * temp) * -change * 2);

- §

  We’re asking the tween to calculate an ease over 3000 steps, but the palette cursors (paletteStart, paletteEnd) are only permitted to have integer values between 0 and 999. Effectively we’re asking the tween to cycle through the palette 3 times.

          return val % 1000;
      };

      const tweeny = makeTween({
          name: name('mytween'),
          targets: name('colored-pipes'),
          duration: 5000,
          cycles: 1,
          definitions: [{
              attribute: 'paletteStart',
              integer: true,
              start: 0,
              end: 2999,
              engine: tweenEngine
          }, {
              attribute: 'paletteEnd',
              integer: true,
              start: 999,
              end: 3998,
              engine: tweenEngine
          }]
      });

- §

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

      const report = reportSpeed('#reportmessage', function () {
          const dragging = current();

          if (typeof dragging !== 'boolean') {

              if (dragging && dragging.artefact) return `Currently dragging: ${dragging.artefact.name}`
          }
          return 'Currently dragging: nothing';
      });

- §

  Function to animate the gradients

      const animateGradients = function () {

          const dragging = current();

          if (!tweeny.isRunning()) {

              if (typeof dragging !== 'boolean' && dragging) {

                  if (dragging.artefact && dragging.artefact.name === name('animated-block')) tweeny.run();
              }
          }
      };

- §

  Create the Display cycle animation

      makeRender({

          name: name('animation'),
          target: canvas1,

- §

  Gradient animation is not automatically handled by the Display cycle

  - instead we have to trigger it manually

          commence: animateGradients,

- §

  We have to tell the canvas to check UI for hovering states every Display cycle

          afterCompile: () => canvas1.checkHover(),

- §

  Display the current frame rate - calculated at the end of each Display cycle

          afterShow: report,
      });

- §

  #### Development and testing

      console.log(L);