Scrawl-canvas v8 - Demo tests index (to 2 Sept 2019)
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.
- Block and Wheel entitys (make, clone, method); drag and drop block and wheel entitys
- Block and wheel entity positioning (start, pivot, mimic, mouse)
- Cell-locked, and Entity-locked, gradients; animating gradients by delta, and by tween
- Apply filters at the entity, group and cell level
- Picture entity position; manipulate copy attributes
- Pattern styles; Entity web link anchors; Dynamic accessibility
- Use video sources and media streams for Picture entitys
- Shape entity (make, clone, method); drag and drop shape entitys
- Shape entity position; shape entity as a path for other artefacts to follow
- Defined Shape entitys: oval, rectangle, line, quadratic, bezier, tetragon, polygon, star, spiral
- Line, quadratic and bezier Shapes - control lock alternatives
- Phrase entity (make, clone, method, multiline)
- Phrase entity position and font attributes; Block mimic functionality
- Phrase entity - test lineHeight, letterSpacing and justify attributes; setGlyphStyles() functionality
- Testing createImageFromXXX functionality
- Loading the scrawl-canvas library using a script tag in the HTML code
- Element mouse, pivot and mimic functionality
- Dynamically create and clone Element artefacts; drag and drop elements (including SVG elements) around a Stack
- Limitless rockets (clone and destroy elements, tweens, tickers)
- Tween actions on a DOM element; tracking tween and ticker activity (analytics)
- Animate a DOM element using the delta attribute object; dynamically change classes on a DOM element
- Stop and restart the main animation loop; add and remove event listener; retrieve all artefacts at a given coordinate
- Add and remove (demolish) Scrawl-canvas stack elements programmatically
- Canvas controller 'fit' attribute; Cell positioning (mouse)
- Add and remove (demolish) Scrawl-canvas canvas elements programmatically
- Artefact collision detection - DOM artefacts
ROADMAP - Summer 2019
... beyond fixing all the TODO statements in the code ...
- Port code over to new git branch; update, restructure and refactor code (MOSTLY DONE)
Tabbing through portions of the canvas display (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.
- 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?
Canvas text manipulation (NOT DOING) and accessibility (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.
Review processes for dismantling/deleting everything (ONGOING)
- 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.
Canvas dynamic generation (adding to page and/or stack), canvas cloning (DONE)
- 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.
Generate Images and/or Picture entitys from other entitys, groups, cells, etc (INITIAL [MVP] WORK DONE)
- Canvas generation and takedown done - demo DOM-012 written to test.
- Decided against implementing canvas cloning - too much of an edge case.
Touch functionality (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.
Animated sprites; loading spritesheets; spritesheet manifests (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.
Save/Restore functionality (TODO)
- 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.
I want to add in some simple-to-use zoom and (parallax) scrolling capability (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.
Develop Frame, Loom and Net artefacts (TODO)
- Because v7 can do this (zoom, parallax) and I don't want to lose it.
Think about developing a Grid artefact (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.
Physics engine (ON HOLD - MAY DEPRECATE)
- 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.
Displacement map filter-like functionality (TODO)
- 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.
SVG as an asset (NOT TAKING FORWARD)
- Just for the challenge of it...
- 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.