Last update: 2 July 2019

7.1 Camera Input for Interaction

A simple webcam can be used as an interesting input device by recognizing and tracking objects or faces.

7.1.1 Tangible User Interfaces (TUI)

A tangible user interface (TUI) uses physical objects to interact with digital information. One way to recognize and track physical object is to attach markers on these objects that are easy to recognize. Such markers are also called fiducial markers.

TUIs were introduced by Prof. Hiroshi Ishii who heads the Tangible Media Group at the MIT Media Lab. The milestone paper on this topic is the following (for more current publications see the group's homepage):

Hiroshi Ishii and Brygg Ullmer (1997) Tangible bits: towards seamless interfaces between people, bits and atoms. In Proceedings of the ACM SIGCHI Conference on Human factors in computing systems (CHI '97). ACM, New York, NY, USA, 234-241.

7.1.2 Facial Expressions for Interaction

Facial expression is a relevant interaction modality because it requires little effort to change facial expression and it can be performed in parallel to manual activities like moving the mouse or performing a gesture. On the downside, facial expressions can lead to social awkwardness when done in public. Moreover, one has to be careful to ensure that no unintentional actions are triggered.

7.1.3 Student Projects

Check out various student projects using camera input, and specifically facial expression, for interaction (there are several more):

7.2 OpenCV for Processing

OpenCV is a powerful "computer vision" library developed by Intel. Computer vision is the science of extracting meaningful information from images or video.

Originally developed in C++, there is a port for Processing called OpenCV for Processing

For interaction, the following functionality may be interesting:

7.2.1 FaceDetection

Allows to identify a face in the frame. This becomes more unreliable when the person is not directly facing the camera.

7.2.2 BrightestPoint

Detects the brightest point in the frame. Can be used to interact with a small flashlight.

7.2.3 BackgroundSubtraction

Detects moving objects by comparing the current image frame with the previous one and subtracting pixels. Works with a static camera and constant light conditions.

7.3 Fiducial Marker Tracking with reacTIVision

Martin Kaltenbrunner developed a system called reacTIVision which provides such a recognition and tracking system. See or have a look at this paper (click title to open):

Martin Kaltenbrunner and Ross Bencina (2007) reacTIVision: a computer-vision framework for table-based tangible interaction. In Proceedings of the 1st international conference on Tangible and embedded interaction (TEI '07). ACM, New York, NY, USA, 69-74.

7.3.1 Components

You need the following components to make this work:

  1. printed markers (on paper)
  2. a software for tracking markers with a camera
  3. a software for receiving the positions/orientations of the markers

You find everything here:

7.3.2 Markers and Tracking App

Download the reacTIVision software for

  1. markers as PDF and
  2. the tracking software (an .exe or .app file)

Then, try it out: Print out one page of markers, start the software and hold the markers in front of your notebook camera. You should see green numbers (IDs) on top of the markers.

7.3.3 Client

The reacTIVision application sends the position/orientation of the tracked markers to any TUIO client that is listening on port 3333. You can simply download and install a client, e.g. for Processing, and start it. When your reacTIVision app is running and is tracking some markers you should see something on your TUIO client app. You find the client also under the above sourceforge link.

Note for the Processing client: You install a Processing library by moving the directory from the downloaded ZIP file (called TUIO) to your Processing sketchbook (a folder on your hard drive). If you are not sure where this is located, open your Processing preferences where you can look up the path.

7.4 Facial Expression Recognition with FaceOSC

FaceOSC is a tool that recognizes your face and puts a 3D mesh over it so that mouth shape, eyebrows and other features can be recognized. As the name implies the tool sends recognized key values via OSC to other tools (like Processing). Here's an example of what you can do:

Here's another example: the student project faceTYPE by Alice Strunkmann‐Meister and Rodrigo Blásquez at Augsburg University of Applied Sciences.

7.4.1 Installation

FaceOSC work under Windows and on Macs. You will have to run a separate program (FaceOSC) that performs the recognition and then sends the data to a Processing sketch (FaceOSCReceiver).

For installation, do the following:

  1. Install FaceOSC
    • From the releases, pick the file for your OS (e.g. or
    • Unpack the ZIP file
    • You should find an executable, e.g. bin/FaceOSC.exe for Windows
  2. Install Processing 3
  3. In Processing, install the library oscP5 (under Sketch > import library)
  4. Go to the FaceOSC-Templates project and - in the processing folder - download FaceOSCReceiver

7.4.2 Starting Recognition

To start the recognition process, do the following:

  1. Start FaceOSC (not in processing but by clicking e.g. on the exe file in Windows): you will see a window with your camera screen and - if a face is present - a mesh over the face.
  2. In Processing, open and start FaceOSCReceiver: you will see a stylized face that mimics your facial movements

This is what Processing shows you:

Now you can think up all kinds of actions and features that you control with your eyebrows or mouth.

Here's a list of signals that you receive on the Processing side (from FaceOSCReceiver):

public void found(int i)
public void poseScale(float s)
public void posePosition(float x, float y)
public void poseOrientation(float x, float y, float z)
public void mouthWidthReceived(float w)
public void mouthHeightReceived(float h)
public void eyeLeftReceived(float f)
public void eyeRightReceived(float f)
public void eyebrowLeftReceived(float f)
public void eyebrowRightReceived(float f)
public void jawReceived(float f)
public void nostrilsReceived(float f)