EXPLORATION OF TWO POPULAR CANVAS LIBRARIES PAPER.JS Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas. It offers a clean Scene Graph / Document Object Model and a lot of powerful functionality to create and work with vector graphics and bezier curves. Distributes with 8 animation, 1 game, 17 JSON, 3 raster, 12 script, 17 SVG exports, 22 SVG imports, 14 tools (small experiments), 1 worker. Docs with 37 Classes with main headings of: Basic Types, Project & Items, Paths, Symbols, Styling, Typography, User Interaction & Events, JavaScript. Has a scene graph - hierarchy like CreateJS and the DOM. COMMENTS: Remade in ZIM the famous front page example that has been there for years: http://zimjs.com/code/paper/ Redid a PaperJS Experiment (602 chars) with ZIM (388 chars) so .64 the size... http://zimjs.com/code/capture/sticks.html Performance was the same, PaperJS code a little cleaner with: var angle = (item.position - event.point).angle; compared to ZIM: rect.rotation = Math.atan2(stage.mouseY-rect.y, stage.mouseX-rect.x)*180/Math.PI; // Should take a look at implementing an angle() method to give angle between items rect.rotation = rect.angle(cirlce); // angle from rect to circle rect.rotation = rect.angle(stage.mouseX, stage.mouseY); // angle from rect to point // Should take a look at other math/bezier features and consider bringing them to ZIM // Also color averaging from a Bitmap CONCLUSION PaperJS has excellent support for bezier, path and math manipulation. So smoothing of points, blob making, etc. ZIM now has a Blob class which handles multiple bezier points that can be user controlled or recorded and code controlled. Can work the same way with Box2D as ZIM does. Can work in conjunction with ZIM much like ThreeJS where we control properties of the PaperJS object with zim components. HitTest, and dragging could be done with proxy shapes in ZIM - see http://zimjs.com/code/bits/view/three.html //////////////////////////////// p5.js - processing for JavaScript Processing https://processing.org/ has been around for a while and became an alternative for Flash for experimental works. It connects well with hardware. It is easier to use than C libraries like openFrameworks http://openframeworks.cc/ and is Java based. p5.js is a related library for JavaScript - with the most bothersome home page that apparently changes. Processing has been used by many for visualization / math / coding algorithm work, etc. http://p5js.org/examples/ There are a series of helper libraries to work with sounds, the DOM, particles, etc. There is a GUI library that is more limited to interfaces for sketches - little things up in corners to control parameters of the experiment. There are about 120 examples in Structure, Form, Data, Arrays, Control, Image, Color, Math, Simulate, Interaction, Objects, Lights, DOM, 3D, Sound and Mobile. There is a play module for creating games in p5js - here is what they say: p5.play is built for accessibility and simplicity, not performance. It is designed to be understood and possibly modified by intermediate programmers. It is not a box2D-based physics engine, it doesn't use events, nor supports 3D. If you are looking for robust (but more complex) game frameworks I suggest phaser.io or easel.js. COMMENTS: Redid a p5js Experiment (727 chars) with ZIM (623 chars) so .86 the size... http://zimjs.com/code/capture/input.html Processing does not use a namespace to work well with other JS libraries so that cuts down on their character count. Brought in the constrain() and dist() methods into ZIM a while back // Interesting push() and pop() being used in their Ticker-like update // seems they help cycle through properties or something... look into it CONCLUSION: p5js has a solid user base for experimental / teaching code It is missing integration with things like tweening engines, customizable components, game elements like Sprites, hitTests, scrollers, parallax help, etc. It is good for code experiments, just not as complete with respect to traditional Interactive Media. It is perhaps more of a mind-set - I have never seen a logo in processing for instance - no configurators, puzzles, etc. very little connection to the marketing world. Once again, it could just be a mindset. There is a connection to the physical computing / installation art field. -------------------- EFFICIENCY LIMITATIONS Neither PaperJS nor p5js have a library of more customizable visual interface components. They rely on the HTML components or put less emphasis on components - they are quick and in the corner for controlling properties for the visual experiments. They tend not to be mobile ready. There are no layout or page control considerations commonly needed for responsive mobile apps - again, this is left to the domain of the DOM and HTML - the libraries focus on visual experiments and art work. This, of course, is a strong-point of the canvas so it makes sense. There are times though when integrating layout and components with the canvas are handy - there is a closer relationship being in one framework. Helper classes for Parallax, Damping, Scrollers and to some degree Animation are missing. There is of course conventional coding for these features - but less support than there might be in the libraries themselves. Nested dragging and hitTests might be tricky in p5js and PaperJS - not sure if it supports nested dragging right out of the box - seems like EaselJS - where you need to calculate localToGlobal, etc. That can be tricky to do and you might not notice a problem until you start dragging something inside a scaled or rotated container. NEXT... PIXI and PHASER