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

Tagged , ,

Grayscale Anglegraph

2013-10-05 20.40.43
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.

Continue reading

Tagged , ,

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.
Continue reading

Tagged , , ,

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.

Continue reading

Tagged , , ,

How to create a new openFrameworks Project with Visual Studio 2010

openFrameworks

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.

Continue reading

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.

Continue reading

Tagged , , , ,

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.

Continue reading

Tagged , , , ,
Follow

Get every new post delivered to your Inbox.

Join 28 other followers