processing
Get flash to fully experience Pearltrees
chrome
Wiki visualisations with JavaScript: Processing.js and Raphaël ·
The specific data I used wasn’t really so important, but in this case I used the last 1000 comments on Atlassian’s Extranet. Surprisingly, one thousand comments on Extranet blogs takes only about 3 weeks to accrue. For the live demos in this public example, I’ve changed the titles and usernames in the dataset from the original Extranet ones to some automatically generated usernames and titles from a news website. Comments — a falling bar-graph visualisation of comments by blogpost. Based very much on a Flash visualisation by Digg, but reimplemented in JS. All three visualisations are done with real data in time-lapse, so you’re seeing real data on the Extranet appear as you watch (albeit with the titles and usernames changed).
The crazy iPod app inspired me to make a instrument that looks like turn tables(not for I phone but on the web). At first I wanted to make this with Flash but I finally decided to use Processing's Minim library because it's easier and more suitable for make the sound immediately react to users. The application has two wheels.
Processing Archives
I recently found an great article about bezier curves by Mike Kamermans. What made it extra amazing was that all the images were open-sourced, interactive files created with Processing JS . You’re able to follow the mathematics of beziers as well understand how they were executed by reading the code. His brief about calculating offset curves sparked off this concept of layering. By taking the initial bezier and rotate it about the y axis you get a simple and easily adjustable lathe. Offset curves around a lathe create a beautiful layering effect which add quite a bit of dimension.
[ uncontrol ]
Data Visualization Examples using Processing.JS
the image needs to be loaded with the page, or at least an img tag must be present on the page as it will be used as a placeholder for the image itself. the image id is the same as the string that is used on the loadImage line. In this example we're using as the image id the filename, but it could be anything else. getters like float getFloat(String rowName, int column) and float getFloat(int rowIndex, int column) were split in two since javascript doesn't support (that i know of) for overloads with the same number of arguments Using an svg file that I got from wikipedia I created a map of Portugal divided by its diferent regions.
TiddlyProcessing - Processing.js in TiddlyWiki
TiddlyProcessing is a TiddlyWiki containing John Ressig 's Processing.js basic examples . Double click an example, e.g. Clock to view and edit the source. Most of the examples work, with the notable exception of those involving images.
I've been working on this project, off-and-on now, for the past 7 months - it's been a fun, and quite rewarding, challenge. The full scope of the project can be broken down into two portions: The Processing Language The first portion of the project was writing a parser to dynamically convert code written in the Processing language, to JavaScript.
John Resig - Blog
