Latest
Robert O’Rourke has developed HasCanvas, an interesting community-based tool which allows users to create, experiment and share their own scripts based on John Resig’s processing.js.
Robert comments:
HasCanvas is a simple tool for creating, experimenting with, and sharing processing.js scripts. It’s part browser-based IDE and part paste-bin. Once you login you choose any url as the name for your script and you’re away!
Has patchwork, has frequency, has canvas!
To use HasCanvas, simply log in, type the URL your require in the address bar, click the left hand side arrows to open the editor and start creating your own script.
It’s an interesting idea, and one we’re keen to follow in the months to come. The danger of creating such a site is the possibility of users joining only to create blank or broken scripts through loss of interest whilst coding, which will mean the valued scripts will get lost in the junk.
For the moment though, there are at least 12 scripts created by Sanchothefat (which we presume is Robert) ready for your viewing!
View the HasCanvas tool
Paul Rouget has been pushing Canvas video in new and exciting ways with his dynamic content injection demo. Using the drawImage method provided by the canvas element, he has injected the content of a DOM element in to the canvas. This injection works with three kinds of elements: images, canvas and video.
Paul explains how the demo works:
First, the content of the video is injected in the main canvas. That’s why the canvas element looks like a video element. Second, the position of the 2 brighter areas of the canvas are computed (you have access to all pixels values). Third, the required transformation is computed (rotation, scale, translation). Fourth, the content of the selected pattern is injected in the main canvas following the transformation.
Currently, the demo only works on Firefox 3.1 beta or higher.
Check out the dynamic content injection demo, or read more about the demo
ANDO Yasushi has created this fantastic demo using the Box2DJS library. PhysicSketch allows to draw items on the canvas and then hit a button to watch gravity take control.
Click and drag your mouse on the canvas to draw. If the starting and the ending points are far enough, the track becomes connected lines. If the starting and the ending points are near each other, the track becomes a filled body. Then click the `Stop/Start Timer’ button to watch your sketch fall under Newton’s law. For added complexity, click the `Show Physical Body’ button and then click the body of the sketch you want to select. The selected body is inspected and its information is shown on the lower sidebox for manipulation.
Works in Firefox 3 and Chrome.
Check out the PhysicSketch demo!
Jeffrey Warren wrote in to tell us about his Cartagen website which uses GSS – a specification for designing maps.
Jeffrey writes:
Adapted for dynamic data sources, GSS can define changing geographic elements, display multiple datasets, and even respond to contextual tags like “condition:poor”.
Instead of sending pre-rendered tiles for every zoom level, Cartagen draws maps dynamically on the client side. This means maps can move, adapt, and redraw, and can include as many layers of data as needed. Vector mapping is done in native HTML 5, which runs on the iPhone and the Android platforms, and uses less bandwidth overall.
Cartagen
Cartagen is a work in progress. The search button doesn’t seem to triggering an event, but entering in urls of place names seemed to do the trick. Here’s Manhatten and here’s London.
Works best in Firefox.
View Cartagen
Gauge.js allows you to add Apple-esque gauges (with shading and reflection) to your webpages. If you use a Mac or an iPod, these gauges will look familiar to you as they are similiar to the disk space allowance gauges.
Pretty gauges...
Including it in your pages is simple. Just add a script include at the top of your site and then call it on a block level element using gauge.add(element).
View more information about the Gauge.js tool
Jacob Seidelin has furthered his music visualisation idea with the release of JuicyDrop, which adds the MilkDrop plugin for Winamp to the previous canvas/JavaScript/Sound Manager 2 mix.
Check out those visuals!
Simply select your song from the right hand menu to see the visualisation in action.
A few keyboard shortcuts may enhance your experience:
- Z : switch to smaller (128×128) visualization view (in case of low framerate)
- X : switch back to normal (256×256) view
- D : Toggle rendering of deformation mesh points
- 1 : Toggle basic waveform
- 2 : Toggle custom waves
- 3 : Toggle custom shapes
- 4 : Toggle borders
- 5 : Toggle per-pixel effects
- 6 : Toggle video echo
Works on Chrome or Firefox 3, but Chrome works better.
View the JuicyDrop demo
