Scrawl-canvas v8 - Demo tests index (to 2 Sept 2019)

For summer of 2019 I decided to recode my HTML5 <canvas> element library - Scrawl-canvas - from scratch, bringing it up-to-date with current JavaScript standards such as modules, promises, web workers and the like. It also gave me an opportunity to redesign the library's internal structures and clean up what was becoming quite a messy code base.

I've included the roadmap for this work at the bottom of this page. As can be seen, I have not yet completed the work (the new version 8 remains in alpha) but I've done enough to feel happy about showing the world my progress to date.

The links below are to my working demos - I use demos as my testing environment, rather than use more traditional testing tools, because Scrawl-canvas is primarily an animation library. Note that v8α drops support for Internet Explorer and original versions of Edge; testing in other browsers outside of Chrome (on MacOSX) has been minimal to date.

I would really welcome feedback on this work - the best place to raise issues and suggestions will probably be on GitHub where the latest code resides in the v8-alpha branch.

Canvas-focussed tests

Canvas 001 - Block and Wheel entitys (make, clone, method); drag and drop block and wheel entitys

Canvas 002 - Block and wheel entity positioning (start, pivot, mimic, mouse)

Canvas 003 - Linear gradients

Canvas 004 - Radial gradients

Canvas 005 - Cell-locked, and Entity-locked, gradients; animating gradients by delta, and by tween

Canvas 006 - Canvas tween stress test

Canvas 007 - Apply filters at the entity, group and cell level

Canvas 008 - Picture entity position; manipulate copy attributes

Canvas 009 - Pattern styles; Entity web link anchors; Dynamic accessibility

Canvas 010 - Use video sources and media streams for Picture entitys

Canvas 011 - Shape entity (make, clone, method); drag and drop shape entitys

Canvas 012 - Shape entity position; shape entity as a path for other artefacts to follow

Canvas 013 - Defined Shape entitys: oval, rectangle, line, quadratic, bezier, tetragon, polygon, star, spiral

Canvas 014 - Line, quadratic and bezier Shapes - control lock alternatives

Canvas 015 - Phrase entity (make, clone, method, multiline)

Canvas 016 - Phrase entity position and font attributes; Block mimic functionality

Canvas 017 - Phrase entity - test lineHeight, letterSpacing and justify attributes; setGlyphStyles() functionality

Canvas 018 - Phrase entity - text along a path

Canvas 019 - Artefact collision detection

Canvas 020 - Testing createImageFromXXX functionality

Canvas 021 - Import and use spritesheets

DOM-focussed tests

DOM 001 - Loading the scrawl-canvas library using a script tag in the HTML code

DOM 002 - Element mouse, pivot and mimic functionality

DOM 003 - Dynamically create and clone Element artefacts; drag and drop elements (including SVG elements) around a Stack

DOM 004 - Limitless rockets (clone and destroy elements, tweens, tickers)

DOM 005 - DOM tween stress test

DOM 006 - Tween actions on a DOM element; tracking tween and ticker activity (analytics)

DOM 007 - Animate a DOM element using the delta attribute object; dynamically change classes on a DOM element

DOM 008 - 3d animated cube

DOM 009 - Stop and restart the main animation loop; add and remove event listener; retrieve all artefacts at a given coordinate

DOM 010 - Add and remove (demolish) Scrawl-canvas stack elements programmatically

DOM 011 - Canvas controller 'fit' attribute; Cell positioning (mouse)

DOM 012 - Add and remove (demolish) Scrawl-canvas canvas elements programmatically

DOM-013 - Artefact collision detection - DOM artefacts

ROADMAP - Summer 2019

... beyond fixing all the TODO statements in the code ...

1. Port code over to new git branch; update, restructure and refactor code (MOSTLY DONE)
• Much of this work was done (when time permitted) duing the first half of 2019. The work that remained outstanding at the start of May is detailed below in this roadmap.
2. Tabbing through portions of the canvas display (DONE)
• Using the tab key on demo Canvas-009 - the anchor links show up (in Chrome on MacOS) and, when then pressing the return button, the relevant link opens in a new browser tab/window.
• I don't think I need to do more than this at the moment. Tabbing should be restricted to things users can do like filling in a form or clicking a button.
• Creating canvas-based forms - we don't need to do this because we can use regular HTML form elements in a Scrawl-canvas stack which, as part of the DOM, should be tabbable in the normal way. We should be able to add canvas-based decoration to form elements by creating entitys and telling them to mimic the form elements ... may be worth creating a form-based demo for testing some subtle canvas animation effects? For example tying onfocus/onblur event listeners to the form elements, which will in turn trigger Scrawl-canvas tweens eg moving an arrow to point to the currently focussed element?
3. Analytics (DONE)
• Adapted demo Canvas-009 to use (development version of) Google Analytics; created a named tracker (to see if I could); and sent GA hits as part of the existing onAction hook functions to measure when mouse cursor starts/ends hovering over a block entity, and when user clicks on the block to open a Wikipedia web page.
• Also added functionality so we can capture canvas-related link clicks performed via assistive technology eg tab/return keystrokes.
• Adapted demo DOM-006 to use (development version of) Google Analytics - extended reporting functionality to tweens and tickers, both directly and via tween actions.
4. Canvas text manipulation (NOT DOING) and accessibility (DONE)
• Adapted demo Canvas-016 to expose the text held in a Phrase entity to the wider DOM, to make it easier to access for people not able to view the canvas element (for whatever reason).
• I don't think there is a need for users to be able to directly copy/paste text from/to Phrase entitys, or to edit text in-place - so I won't consider such interactive text manipulation any further, unless someone can come up with a compelling use case for such functionality to be added to the library.
5. Review processes for dismantling/deleting everything (ONGOING)
• Stack, Canvas, Cell, Group, Element, Tween, Ticker - all seem to dismantle themselves without damaging the Scrawl-canvas environment.
• TODO: Still need to check entity, asset, styling and various other objects.
• TODO: Need to review objects (such as Tickers/Tweens) to make sure they don't choke when their target gets removed from Scrawl-canvas.
6. Canvas dynamic generation (adding to page and/or stack), canvas cloning (DONE)
• Canvas generation and takedown done - demo DOM-012 written to test.
• Decided against implementing canvas cloning - too much of an edge case.
7. Generate Images and/or Picture entitys from other entitys, groups, cells, etc (INITIAL [MVP] WORK DONE)
• Added a scrawl.importMediaStream() function to make adding mediastream input - for example from a webcam or device camera - (relatively) simple. The mediaStream gets routed to a (non-DOM) video element that can then be used as a Picture entity's 'asset' attribute. Includes rudimentary functionality to request various mediastream resolutions, whether to use front or back camera on a device, and whether to include audio in the mediastream output. Demo canvas-010 updated to test the new functionality.
• Added functionality to 'stash' entity, group and cell visual output (on a once-per-request basis) on the affected Scrawl-canvas object. Demo canvas-020 created to test functionality.
• At the same time (and optionally), the code will generate an <img> element and add it to the DOM, alongside an imageAsset object which can then be used by Picture entitys and Pattern styles.
• TODO: the current code is not perfect: entitys require a slight delay (eg setTimeout) between making a change - such as adding/removing filters and generating the stash capture; also cell behaviour is erratic and needs to be properly debugged.
8. Touch functionality (INITIAL [MVP] WORK DONE)
• Scrawl-canvas will now track (single finger) touch events, for instance as part of a drag-and-drop action across a stack or canvas element. Tested (Chrome inspector emulator) on all demos with drag-and-drop, or mouse tracking, functionality.
• TODO: consider if we need to go further, for example identifying and acting on multiple touch and/or gestures. My current view is that Scrawl-canvas does not need to worry about these, and that they would be much better handled by other JS libraries dedicated to touch functionality - but that does leave the question of how to integrate a 'pinch' gesture into an action to zoom in on a canvas element's contents.
9. Animated sprites; loading spritesheets; spritesheet manifests (DONE)
• Demo canvas-021 created to test this functionality.
• Not progressing the idea to add functionality to import 3rd party spritesheets + manifests - there's no standardized format for them.
10. Save/Restore functionality (TODO)
• In a way that will allow 3rd parties to develop and share stuff easily.
• The current v7 save/restore functionality is too complex and difficult to use, thus not fit for purpose.
• CRITICAL to get this right - can become a USP for the library.
• Also start thinking about how best to export stuff in a way that makes importing it into React/Vue/etc dead easy.
11. I want to add in some simple-to-use zoom and (parallax) scrolling capability (TODO)
• Because v7 can do this (zoom, parallax) and I don't want to lose it.
12. Develop Frame, Loom and Net artefacts (TODO)
• Frame - this is the four-corners approach used in v7 Frame entitys, but this time make it even better!
• Loom - using 2 Shape objects as left/right or top/bottom paths to allow for more interesting/malleable Frame-like visual fx.
• Net - effectively grouping a bunch of Frames together, sharing a single asset, batch-processing the output.
13. Think about developing a Grid artefact (TODO)
• Because the current solution (eg for demos DOM-013, Canvas-019) is painfully slow once we get a lot of entity tiles onto the canvas.
14. Physics engine (ON HOLD - MAY DEPRECATE)
• Particle, Spring and Force code transferred over from v7 and adapted to v8 environment.
• Took the decision to use (2D) coordinate objects rather than (3D) vectors in code.
• New experimental demo Physics-001 coded up, for testing (not included on this page - see below).
• NOT HAPPY WITH THIS CODE - I don't think we need it, and already have too much else going on. If we can replicate some sort of gravity effect in tweens, then why bother with a physics engine? Plus, I've wasted too much time on this already.
• For the moment, keeping the physics engine code in the code base (so I don't lose it) - but have commented the relevant import/export statements out of scrawl.js file, and similarly commented out the relevant objects/arrays in core/library.js.
• If adding a physics library to Scrawl-canvas is a good idea, then probably need someone who has a clue about physics to take the work forward.
15. Displacement map filter-like functionality (TODO)
• Just for the challenge of it...
16. SVG as an asset (NOT TAKING FORWARD)
• Coded up functionality to transform DOM SVG markup into an SvgAsset, which could then be used by Picture entity. While we can do this ok for static SVG, any mistakes in the SVG markup breaks the system. Also, no way to show SVG animations in the canvas in real time.
• This is too much of an edge case to be worth any more effort. SVG elements can already be used in Scrawl-canvas stacks, and we should be able to position and manipulate them in the same ways as any other Element artefact. Demo DOM-003 updated to test importing SVG elements into stacks.