a port of the Processing Visualization Language

Processing.js v1.3.0 released

24 Aug 2011

Our Biggest Release Ever: Announcing Processing.js 1.3.0

The Processing.js team is pleased to announce the release of Processing.js 1.3.0. This is our biggest release to date, and represents an enourmous amount of work from the team. This release focuses on a number of key issues: significant performance improvements, greatly improved text handling and font metrics, and general bug fixes and compatibility with Processing, including getting ready for Processing 2.0!

1.3.0 is fast. We've put a ton of effort into making Processing.js run your sketches faster. Our performance test suite shows some incredible speed-ups using 1.3.0 over previous releases. All browsers on all platforms run faster. How much faster? Our tests show a 6% - 60% gain across the board:

  • Firefox: 10% - 25% increase
  • Chrome: 35% increase
  • Safari: 30% - 60% increase
  • Opera: 30% - 50% increase
  • Internet Explorer: 41% increase
  • Safari Mobile on iOS: 6% - 8% increase

We're really proud of the gains we've made in this release, and we're not done yet. There are further performance gains to be had in 1.4 and beyond. Couple this with the tremendous improvements in JavaScript engines and browser graphics performance, and the future is looking better and better for doing Processing.js development. If you find something runs slowly in Processing.js, we want to know. Make sure you file a bug or talk to us on IRC. Chances are we can make it faster.

1.3.0 is amazing at working with text and fonts. The release includes a total rewrite of our font and text handling code. We know that typography is important to many Processing and Processing.js users—it is to us as well. In order to get the amazing cross-platform, cross-browser compatibility we did in this release, we had to go to some extreme lengths . It wasn't easy, but the results are beautiful, and should make working with text in processing.js an enjoyable and beautiful experience.

1.3.0 is more compatible with Processing than ever before. As Processing moves toward its 2.0 release, and with it new features and API changes, we're implementing the same things in Processing.js. The 1.3.0 release includes many compatibility fixes, which address differences between sketches written in Processing and Processing.js. "If it works in Processing, it should work in Processing.js." As Shaun McWhinnie (@himseelf) wrote on Twitter:

Sat down to *learn* processing.js last night, then found out it can parse my existing pde sketches #jobdone

Compatibility continues to be our goal, and with 1.3.0, it's more true than ever before. Have you found a Processing sketch that doesn't work in Processing.js? Let us know!

This release also introduces an important change for functions like line(), point(), rect(). In the past we used anit-alised points/lines, due to limitations in HTML5 canvas. In the past we told our users to add the crisp pjs directive to their sketches, as a hint to Processing.js that you wanted points/lines without anti-aliasing. This was confusing to most people, and cumbersome to use. Our team has figured out a way to overcome this limitation, and we are now able to draw crisp points/lines by default, which matches the expected behaviour of the same sketches run in Processing.

We hope you enjoy working with Processing.js 1.3.0, and let us know. Processing.js is a labour of love, and we appreciate your encouragement and hearing how you're using it in your data visualizations, art, teaching, game development, etc. The number of people using Processing.js around the world is humbling to us.

While you're downloading Processing.js 1.3.0, here are some uses of Processing.js we found while we were creating this release:


  • Added a chart to the perf test suite
  • Added an error message to the ref test builder if 'exit()' is not found in the sketch
  • Added blendColor ref tests
  • Added codePointAt to the String object
  • Added documentation to toP5String function
  • Added equalsIgnoresCase to String object
  • Added error messages to beginCamera and endCamera when used in 2D mode
  • Added error messages to Processing file and I/O functions that are unsupported by Processing.js
  • Added printMatrix unit tests
  • Added resetMatrix unit tests
  • Added rounded rect
  • Added screenWidth and screenHeight variables to match Processing v2.0
  • Added script to build process to replace PConstants.* with their numerical values
  • Added startsWith and endsWith to the String object
  • Added support for external javascript code to add images to the imageCache
  • Added tint perf and ref tests
  • Added toArray() to the Array object
  • Added transparency perf test
  • Changed function(){} to the Processing local variable 'nop'
  • Changed obj.constructor type-checking to typeof(obj)
  • Changed perf tests to use exit()
  • Changed Processing.js errors to throw instead of print to tinylog
  • Converted animated test suite tests to ref tests
  • Converted XMLElement unit tests to use XMLElement.parse(string) instead of XMLElement(string)
  • Fixed crisp not working properly when any transformations were applied to the sketch
  • Fixed CSS font declaration when using SVG fonts
  • Fixed default vertical align in textMode(halign, valign) to BASELINE
  • Fixed equalsIgnoreCase to use toLowerCase rather than RegEx(//i)
  • Fixed fake-dom.js returning the same canvas every time createElement is called
  • Fixed font metrics (textAscent, textDescent, etc.)
  • Fixed font preloading not checking whether a @font-face rule already exists
  • Fixed font preloading to use tinyfont
  • Fixed font quoting bug in computeFontMetrics
  • Fixed HashMap.values() so that it returns an ArrayList
  • Fixed hex literal #FFFFFF not being converted to an int properly
  • Fixed HSB functions ignoring colorMode range in grayscale
  • Fixed httpd.py webserver to be multi-threaded and MSIE compatible
  • Fixed image() not working in 3D mode
  • Fixed lerpColor generating incorrect values in HSB color mode
  • Fixed make release-files creating the temporary file in the wrong directory
  • Fixed mandelbrot.pde and histogram.pde ref tests
  • Fixed MSIE crash when loading from a script element
  • Fixed negative color and opacity values returning incorrect results
  • Fixed performance loss when drawing images at fractional co-ordinates
  • Fixed PImage.get not returning valid data
  • Fixed rectMode() regressions caused by @pjs crisp removal
  • Fixed runtests.py to use Unix paths only
  • Fixed screenXYZ.pde unit test
  • Fixed sketch starting before font preloading is done
  • Fixed smooth() and noSmooth() to use new image-rendering modes
  • Fixed SVG loading in Opera
  • Fixed SVG path handling for 'z' and 'Z'
  • Fixed text-width.pde ref test to use the correct font
  • Fixed text$4 and text$6 font alignment
  • Fixed textAlign and textMode not getting saved in pushStyle() and popStyle()
  • Fixed textSize not caching textAscent, textDescent, and textLeading
  • Fixed tint() to work with texture()
  • Fixed vertex() not working with optional parameters
  • Fixed vertical align behaviour
  • Fixed XMLElement.parse when parsing a string with '.svg' or '.xml'
  • Improved the performance of blend modes
  • Improved the performance of blend()
  • Improved the performance of images created with createImage()
  • Improved the performance of PVector
  • Reduced the number of canvas objects the ref test runner creates so that tests pass on Chrome in Windows
  • Refactored forwardTransform and reverseTransform into modelView and modelViewInverse
  • Refactored PFont
  • Refactored point(), line(), and rect() to draw crisp lines
  • Refactored Processing.js to have no else after return or throw
  • Refactored unbinary()
  • Removed @pjs crisp directive
  • Removed color profiles from all images used in our ref test suite
  • Removed comments from the release version of Processing.js
  • Removed reliance on use3DContext variable
  • Removed textMode(SCREEN)
  • Removed unused 'Keys and Keystrokes' variables
  • Removed unused function colorBlendWithAlpha
  • Removed use of .apply(this, arguments)
  • Removed use of parseFloat and parseInt as cast operators
  • Replaced 'new Date().getTime()' with 'Date.now()'
  • Switched back to YUI compressor for this release, as Google Closure was producing buggy code
Fork me on GitHub