Transforming a Processing Sketch to HTML5
More for exercising than for competition reasons, I recently recreated a great Processing visualization by Ben Fry using HTML5. I had the strong feeling that the kind of animation is totally doable without plugins like Java and Flash. This post sums up what I learned. Initially I wanted to use the relatively new PaperJS library for the animation part. I managed to use JQuery along with PaperJS, loaded the CSV file and started to draw all those company lines (500 per year for 55 years = 27500 lines). Since using the Path for just drawing simple 1px lines would be way to much overhead, I grabbed the canvas context directly and used the “native” fillRect().
AddOutputFilterByType DEFLATE text/html text/plain text/csv
After all, remaking an existing visualization was quite a fun thing to do. I learned some new things about working with HTML5 and finally had the chance to use the promising PaperJS library for the first time. Also, in Ben’s initial version the profits view doesn’t show companies with negative profits, which I didn’t realize until I started working with the raw data myself. If you’re interested, here’s the link to my version. Also you’re invited to inspect the source code and data.
Tobias Treppmann (Dec 01, 2011)
great post. It is great to see how powerful HTML5 is. I’m curious to know if you have compared the performance of your HTML5 version with a processing.js one?
Gregor Aisch (Dec 01, 2011)