#paper.js

DAY 329

Another Udemy course project. Clone functionality from Patatap, using Paper.js, howler.js, and sounds from Neuronal Synchrony.

Pressing any letter key plays a specific sound, and creates a circle of a specific color, which disappears into the distance. 

The colors and sounds are assigned artibrarily for this simple project. This is also the kind of thing that could use a loading bar.

For now though, I’m going to keep moving and resist the temptation to spend a couple more days on this.

Source Code on GitHub

Fast-forward to Now.

I’m checking out paper.js, a vector graphics javascript library for the HTML5 Canvas - and I’m really digging it! 

The awesome part is the team behind it. These guys made the Scriptographer plugin for Adobe Illustrator (with which I’m not accustomed to, just played a bit with ExtendScript), but being fed up with Adobe frequently breaking their API and other hassles, they decided to jumpwagon and produce for the web.

So you’ll find a lot of Illustrator-based workflow in Paper.js. You get to code with concepts like Points, Paths, Strokes, Fills, CompoundPaths, Shapes, Layers, Projects, Blend Modes, the like.

The other cool part is they’ve been using and developing it as a learning tool in the art and dev classes they teach - and it’s been heavily polished over continuous feedback.

Animation capabilities seem to be really flexible and powerful thanks to the baked in Vector Mathematics.

A basic getting started tutorial for Paper.js.

This week for our class project we got to have some fun and choose a library or tool to integrate with JavaScript. I wanted to create something with a small amount of user interaction and a pleasing visual design. Paper.js was recommended as a framework that is easy for beginners to work with. After looking through the examples and showcase pages, I was sold. My favorite examples are ‘Voronoi’ and ‘Hit Testing’. The tutorials also seemed pretty straightforward and I was excited to try them out.

A basic getting started tutorial for Paper.js.

This week for our class project we got to have some fun and choose a library or tool to integrate with JavaScript. I wanted to create something with a small amount of user interaction and a pleasing visual design. Paper.js was recommended as a framework that is easy for beginners to work with. After looking through the examples and showcase pages, I was sold. My favorite examples are ‘Voronoi’ and ‘Hit Testing’. The tutorials also seemed pretty straightforward and I was excited to try them out. 

Paper.js can be thought of as a library or a framework, sort of like jQuery, that you make a reference to before you can use its functions and methods. In order to use it, you need to reference the Paper.js “dictionary” from your HTML file, and then either refer to your external JavaScript file with the <src> property “type=‘text/paperscript’” (instead of “type=’text/javascript’”) in your HTML, or, import the Paper.js information into your external JavaScript file before you call any of the Paper.js functions or methods. 

Paper.js is an open source, vector-based scripting library that has Javascript as its’ framework. Launched in June 2011 by the makers Jürg Lehni and Jonathan Puckey of Scriptographer (a scripting plugin for Adobe Illustrator since 2001), Paper.js is currently embedded in the Canvas manipulation market, as another tool that implements generative design (image, sound, models, and animation is made possible by algorithms). Paper. js is known for integrating with HTML5's Canvas element (an element that allows for integration of animations, drawings, and other dynamic properties onto the webpage). In a sense, Paper.js’s expansive library makes it possible to script high-level, high-performance animations with less coding.

This Javascript-based web technology has anchored itself the most into the graphical side of the web, especially vector scripting. As described on their website, Paper.js is just Javascript with mathematical implementations for their basic types such as point, size, rectangle and matrix. This is typical for manipulation of vector mathematics, however what makes Paper.js stand out is the well-thought out, simplified, high-leveled functionality. Some of these are simplified syntax with user interface, and styling properties such as blending modes; seen in Adobe Photoshop and Illustrator, emulated in Javascript.

Paper.js prides itself as an easy to learn skill for beginners, but also wields mastery for those who seek it. To do this, the creators of Scriptographer had it in mind to keep the current workflow of programs such as Adobe Illustrator and implement it onto Paper.js. Some of the many abilities include manipulation of constructed paths to yield segments and curves, including simplifying paths through points. Authors can also have complicated stroke styles that are supported but have simple editability along with precise bounding box manipulation. With the similar characteristics Paper.js has with Adobe Illustrator and Photoshop, authors have a higher and faster rate of transitioning and acquiring Paper.js mastery because of the functional familiarity.

One of its specialties of Paper.js is not only user-friendly for the users and readers, but for the authors themselves too. Paper.js provides flexibility and editability in code. Originally from the Adobe programs, blend modes (color dodge, soft-light, hard light, multiply, overlay, screen, darken, lighten, difference, exclusion, hue and saturation) can now be requested and implemented right onto the HTML document. Not only will the graphic have the ability to animate seamlessly, but it will also change in presentation without the hassle of file-alterations.

With the power to fuel multiple animating possibilities, Paper.js also has its limitations-- some of which are notable, such as support and performances issues. Paper.js cannot support browsers under Internet Explorer 9, Firefox 4 and Safari 5. It will however have full support on Chrome. With these in mind, all other browsers such as Opera, even if not as big of a contender, will not support Paper.js. The fact of the matter is that while Paper.js becomes more and more of an essential to a web developer’s toolbox, the narrow support it has can be damaging and unusable to the number one audience web developers cater for--the users. Paper.js knows this as they claim to aim modern browsers that support HTML 5 and EcmaScript 5 (the client-side scripting language on the web and the organization that standardized Javascript).

Performance can critically hit for Paper.js, even if it stems from HTML5's canvas elements. HTML5 elements are rendered through CPU (Central Processing Unit), and this includes the canvas element. This is problematic because Paper.js’s stronghold is vector graphics. Rendering graphics, animations, drawings, sounds, etc would not be efficient when run under CPU. On the other hand, GPU (Graphics Processing Unit), where video games allocate rendering, is a better fit for graphics optimizing. Until the HTML5 canvas element can uniquely process under GPU, Paper.js will not only be set back by inheriting any constraints from HTML5, but will also not be able to be used at its full potential. Some current solutions to reduce these problems include carefully grouping your code to minimize calculations and running tests such as animations running on slower hardware.