Physical controls for a website

As a quick little proof of concept today I created a web app where the user can turn a physical dial and control the cross fading between two images on the website.

Doing this was mostly just about connecting the dots. All the individual tasks like reading a dial or fading between two images are trivial. Here is the setup:

• The dial is connected to an Adafruit Trinket Pro (basically just a smaller cheaper Arduino) on an analog pin.
• The trinket is connected to a computer via a FTDI cable. Data is passed to the computer using a serial connection
• The computer is running a lightweight NodeJS script that setups a web server with a web socket and monitors the serial connection to the trinket.
• Data received on the serial connection is immediately written to the web socket connection
• When the webpage loads it establishes a web socket connection back to the server. Whenever a message is received it maps the numeric value to the opacity css of the top image

There really isn’t much too it, but the cool thing is that since this is running an actual web server this sort of control could run an actual web site serving content tons of people. Imagine being able to have visitors to your business lobby be able to interact with your public website through tangible controls like this.

If you are interested in the source code you can find it here:

https://www.dropbox.com/sh/wgpw6xr0hltmyi4/AABfWLzt7k9NIvnbVqyrPqtsa?dl=0

Grayscale Anglegraph

I am a big fan of Daniel Rozin’s art, and while looking at his Wooden Mirror (http://www.youtube.com/watch?v=BZysu9QcceM) I though it might be fun to see if I could make static images using a similar visual technique. In the Wooden Mirror, Rozin assembled 835 little wooden tiles onto 835 little servo motors.  Using a video camera a computer translates what it see into rotations for the servos. Each wooden tile essentially becomes a pixel in the larger image. The wooden tile can be tilted up to catch the light and become white or can be tilted down become black by being shadowed. I figured I could make a static image by creating solid geometric model on the computer and 3d printing it.  Here is how I went about it.

Distorting Time with a Mask

I saw a great example of slitscan videos recently and it reminded me of an experimental time masking video filter that I did way back when.

Object tracking with OpenCv’s TemplateMatching

I have recently been playing with around tracking objects using my computers webcam. In this article I am going to talk about how to track object in video streams using OpenCv and cvMatchTemplate.

How to create a new openFrameworks Project with Visual Studio 2010

OpenFrameworks is a cool toolkit for creative coding in c++. Some really cool stuff has been made in it. Getting started with it is pretty easy, but there a couple little things that if missed can make working with it a real head ache. Since I had some hangups with getting it working when I first started, I thought I would share a step by step guide on how I start new openFrameworks projects for use with Visual Studio 2010.

The new and improved bubble display

I redesigned the bubble display to address some of the issues I was having with the previous version. Hit the jump to see what I changed to make it work.

Bubble display proof of concept

A while back I saw the cool water display that Jeep has been showing off at conventions, http://www.youtube.com/watch?v=Z2LUz2WVcek It looked simple enough so I decided to build something similar. Instead of using falling water I decided to use air bubbles rising in water. I thought it would be simpler (though, I now I have my doubts). In this post I will share how the effort is going.

Android and Arduino Bluetooth communication

In this post I will be talking about how to get an Arduino and an Android tablet talking to each other using Bluetooth

We will be using an Arduino Uno ($29.95) with a Silver Bluetooth Mate ($40.95) from SparkFun.com, and my Samsung Galaxy 7.0 running Android 2.3.4.

Gyro sensor as a rotation sensor

I have some augmented reality game ideas and one of them requires that I have the ability to track the rotation of a cannon (you know a cannon ) I thought that a triple axis gyro sensor might do the trick so I setup a little experiment:

Getting set up for augmented reality using XNA and Kinect

The term virtual reality has gotten kind of stale and dusty.  It seemed really cool back when I was a kid, but for whatever reason it has fallen out of vogue. But augmented reality is here to take its place.

Random example from YouTube: http://www.youtube.com/watch?v=ZKw_Mp5YkaE

Wikipedia entry: http://en.wikipedia.org/wiki/Augmented_reality

I want to get started making augmented reality apps, so I figure to get going I need two things: a live video feed (lets call that reality for now), and a way to draw 3d stuff on top of it. I will be using the Kinect for the video feed and using Microsoft’s XNA framework to do the 3d drawing. In this post I will describe how to bring in live Kinect video footage and draw 3d XNA content on top of it