Paper.js: Just Like Real Paper

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.

 

paperjsfront.png

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.

Paper.js is one web technology that expands possibilities for rendering a web page. With the familiarity of workspace and functionality with Adobe Illustrator and Photoshop, Paper.js is a code-based, creativity-enabling tool. Even with its’ current performance and support problems, Paper.js’s worth and value outweighs everything else, as it is an enhancing skill addition to any web developer.