Fun with Canvas and Javascript
Caffeine Viewer is a proof-of-concept experiment we made at colmeia connecting our coffee machine to the internet using Arduino and Processing.
Using our office’s coffee consumption data (available through a public API), we made a few data visualizations — mine was made with Canvas and Javascript (with a little help from my favourite JS framework, Mootools).
One of the coolest things about Canvas is its ability to draw cubic bezier curves (Actionscript can only draw quadratic curves natively). To convert the logo outline from Adobe Illustrator to a collection of points in Javascript code I used SVG as transport format.
Every 100 milliseconds the screen is updated — each point of the logo is displaced by a random amount of noise that is proportional to the amount of coffee consumed during the selected period of time. Check its source code.
