Chrome Experiment – Google “Roll It”

Roll It links your devices through Chrome: roll a ball from your phone to your laptop. Since the whole thing runs on Chrome, no apps, installs, or special configurations are needed – and any smartphone that runs Chrome can play.

Use your phone as a remote controller, thanks to websockets.

Roll It →

Two.js

two.js

Two.js is a two-dimensional drawing api geared towards modern web browsers. It is renderer agnostic enabling the same api to draw in multiple contexts: svg, canvas, and webgl.

Two.js is deeply inspired by flat motion graphics. As a result, two.js aims to make the creation and animation of flat shapes easier and more concise. At the time of this writing two.js unfortunately does not support text or images.

// Make an instance of two and place it on the page.
var elem = document.getElementById('draw-shapes').children[0];
var params = { width: 285, height: 200 };
var two = new Two(params).appendTo(elem);

// two has convenience methods to create shapes.
var circle = two.makeCircle(72, 100, 50);
var rect = two.makeRectangle(213, 100, 100, 100);

// The object returned has many stylable properties:
circle.fill = '#FF8000';
circle.stroke = 'orangered'; // Accepts all valid css color
circle.linewidth = 5;

rect.fill = 'rgb(0, 200, 255)';
rect.opacity = 0.75;
rect.noStroke()

// Don't forget to tell two to render everything
// to the screen
two.update();

Looks promising!

Two.js →

Deleting Borders

Amatorski, one of Belgiums finest bands, has been fascinated by the way the internet is deleting borders. They collaborated with We Work We Play to create an art project bringing together music and visuals, in a mix of online and offline interaction.

Implemented using a custom JavaScript Metronome and Howler.js;
Rendered on <canvas> with Delaunay triangulation on top;
Powered by node.js

Deleting Borders →
Accompanying Deleting Borders Blogpost →

Fun with face detection, canvas and webcam video

With the getUser­Me­dia API, a video ele­ment, a can­vas ele­ment and LiuLiu’s excel­lent face detec­tion algo­rithm, we can eas­ily play around with web­cam video data in the browser, plug-in free.

Mask over­lay experiment:

Scaling content experiment:

Cool!

Fun with face detection, canvas and webcam video →

(via Webappers.com)

Animated GIFs the Hard Way

The Sublime Text Website has some nifty animations to show of a few features. Turns out they’re not animated gifs.

One of the criteria was that the animations should work everywhere, from IE6 to an iPad. This ruled out two common video options, Flash and the <video> element. Animated GIF files would have been a candidate, except for two issues: the 256 color limitation, which would have made the animations ugly, and the encoders I tried spat out huge files, at almost 1MB per-animation.

Instead, I wrote a small Python script that takes a collection of PNG frames as input, and emits a single packed PNG file as output, which contains all the differences between the frames, and some JSON meta-data specifying which bits of the packed PNG file correspond to each frame. JavaScript turns the PNG and JSON into an animation, using either the canvas element, or emulating it using overlaid div elements for older browsers.

Deliciously hacky!

Animated GIFs the Hard Way →

Suncalc 3D

SunCalc 3D is an HTML5 application with a 3D panoramic view of the sky that shows how the Sun moves during a particular day for a given location, along with important sunlight times such as sunrise, sunset, dawn and dusk. SunCalc 3D calculates sun data on the fly, uses Canvas for rendering, and Geolocation, Google Geocoding and FreeGeoIP.net for handling location

Suncalc 3D →