Sanjeet Chatterjee built this nice demo where your smartphone can act as a virtual pointer for a webpage.
With a fundamental shift to the web, we are able to do really cool things right from our browser. In this tutorial, we will be utilising the Generic Sensor API to turn your smartphone into a pointer with real-time tracking.
Just like you use a Wiimote (Wii Controller), you can tilt/move your phone to move the dot on the page:
💵 This linked article is stuck behind Medium's metered paywall, which may prevent you from reading it. Open the link in an incognito window to bypass Medium's ridiculous reading limit.
☝️ If you lack an Android Smartphone with a modern Chrome on it, you can test it all out using Chrome on Desktop: Open the controller page in Chrome and use the DevTools’ Sensors panel to emulate/override the position of the device.
What if all your mobile devices were a single screen? This probably isn’t the most common question to ask yourself.
But, just for a second, actually think about it. Think about all the possibilities of being able to combine any kind of mobile device, independent of its operating system. That’s what Swip.js does.
Place two or more devices next to each other, pinch ‘m together and – *BOOM* – they’re connected. Once connected you – thanks to websockets – can throw/move stuff over ‘m, as if they were one big screen.
One of the examples included is the golf game shown above.
Each year for April Fools’, rather than a prank, we like to create a project that explores the way that humans interact at large scales. This year we came up with Place, a collaborative canvas on which a single user could only place a single tile every five minutes. This limitation de-emphasized the importance of the individual and necessitated the collaboration of many users in order to achieve complex creations. Each tile placed was relayed to observers in real-time.
This post details how we approached building Place from a technical perspective.
Next to detailing how the data is stored, synced, and drawn on the canvas; the article also covers some realtime problem solving after the RabbitMQ CPU load avg shot up from 6 to 60 (!) …
The 72h timelapse – condensed to 4’30 – is embedded above. The source code of r/Place is also available.
Unnumbered Sparks is a monumental interactive sculpture in the sky. Choreographed by visitors in real time through their mobile devices, at night the sculpture became a crowd-controlled visual artwork on a giant, floating canvas.
Built using Chrome; Powered by Go, WebGL, WebSockets, Web Audio, and Polymer:
Simulator for the Open Charge Point Protocol — the protocol by which a Charge Point of an electric vehicle communicates with a Central System — supporting both OCPP-S (standard OCPP, using SOAP over HTTP) and the new OCPP-J (“new” OCPP, using a Wamp inspired protocol over WebSockets). Version 1.2 and 1.5 of OCPP are supported.
Once you have your Central System Service running, use it as follows:
Bells are additions, strings are subtractions. There’s something reassuring about knowing that every user makes a noise, every edit has a voice in the roar. (Green circles are anonymous edits and purple circles are bots. White circles are brought to you by Registered Users Like You.)
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.
This library shows how to achieve realtime text communication using GIF images as transport.
The idea is pretty simple. We use Animated Gif images to stream data in real time to the browser. Since a gif image doesn’t specify how many frames it has, once the browser opens it, it will keep waiting for new frames until you send the bits indicating that there’s no more image to fetch.
Great guide to WebSockets. Not only talks about the JS implementation in browsers, but also takes a look at the raw data, lists Websocket servers, and points towards pub/sub systems which you’ll need to keep your sanity when creating complex WS-apps.