# Tangible Interactive Art Using Marker Tracking in Front Projection Environment: The Face Cube

Chan-Young Bang, Jin Lee, Hye-Won Jung, Ok-Young Choi, Jong-Il Park

► To cite this version:

Chan-Young Bang, Jin Lee, Hye-Won Jung, Ok-Young Choi, Jong-Il Park. Tangible Interactive Art Using Marker Tracking in Front Projection Environment: The Face Cube. 9th International Conference on Entertainment Computing (ICEC), Sep 2010, Seoul, South Korea. pp.397-404, 10.1007/978-3-642-15399-0_43. hal-01055619

HAL Id: hal-01055619

https://inria.hal.science/hal-01055619

Submitted on 13 Aug 2014

HAL is a multi-disciplinary open access
archive for the deposit and dissemination of sci-
entific research documents, whether they are pub-
lished or not. The documents may come from
teaching and research institutions in France or
abroad, or from public or private research centers.

L'archive ouverte pluridisciplinaire HAL, est
destinée au dépôt et à la diffusion de documents
scientifiques de niveau recherche, publiés ou non,
émanant des établissements d'enseignement et de
recherche français ou étrangers, des laboratoires
publics ou privés.

<figure><img src="image_1.png" /></figure>
# Tangible Interactive Art Using Marker Tracking in Front
Projection Environment: The Face Cube

Chan-young Bang<fnref n="1" />, Jin Lee<fnref n="2" />, Hye-won Jung<fnref n="2" />, Ok-young Choi<fnref n="2" /> and Jong-Il Park<fnref n="1" />

**Abstract.** The Face Cube is a work of interactive art which is targeted to children. To implement this art work, we use a camera-projector system. Instead of rear projection and edge detection method, we choose front projection approach and histogram-based detection method for interaction. This paper describes how to design the Face Cube and marker design for robust interaction, efficient way to remove projection lights from the front projection system for marker recognition, histogram-based marker detection, marker information management.

**Keywords:** the Face Cube, Interactive art, Marker tracking

## 1 Introduction

The Face Cube was planned to exhibit at "Four Faces Exhibition", theme exhibition for children, by artist-technician collaboration. It was focused on intelligent exhibition space and interactive contents for children as a kind of interactive art.

Since 2005, the reacTable [1] has shown us new electronic musical instrument. In 2006, the Tablescape plus [2], Tokyo University, showed us interactive works with upstanding tiny displays on a tabletop display. Both famous interactive art-works use camera-projector system for interaction. They chose rear projection method and edge detection method for stable tracking. The rear projection method is useful in low ambient illumination settings. However, we didn't want gloomy space and hoped children would feel rays from projector delightfully like sunshine. Therefore, the Face Cube chose front projection method. Since we didn't want outlined markers, we chose histogram-based marker detection method for interaction.

This paper describes how to design the Face Cube and marker design for robust interaction, efficient way to remove projection lights from the front projection system for marker recognition, histogram-based marker detection, marker information management and artist-technician collaboration results.

<footnote n="1">¹ Division of Electrical and Computer Engineering, Hanyang University,
17 Haengdang-dong, Seongdong-gu, Seoul, Korea</footnote>

<footnote>peap18@mr.hanyang.ac.kr, jipark@hanyang.ac.kr</footnote>

<footnote n="2">² Division of Digital Media, Ewha Womans University,
11-1 Daehyun-dong, Seodaemun-gu, Seoul, Korea</footnote>

<footnote>mint__@naver.com, wint01@naver.com, okybom@hanmail.net</footnote>
## 2 Face Cube

The face cube was designed for “Four Faces Exhibition”, as an effort for tight collaboration among engineers and artists. The Mixed Reality Laboratory in Hanyang University took the charge of technical parts and the Mobile and Tangible Media Laboratory in Ewha Womans University took the artistic parts.

<figure><img src="image_2.png" /><figcaption>Fig. 1. Basic concept of the Face Cube</figcaption></figure>

The Face Cube is a work of interactive art which is targeted for children. Children may roll a cube on the table. When a marker presented on each side of the cube is recognized by the camera, corresponding animation will appear around the cube. The marker is used not only to measure position or rotation of marker but also as a part of the animation output. Therefore, unlike using a square marker, we can reduce the visual unfamiliarity. Children can interact with and enjoy the artwork by encountering various unexpected characters.

## 3 Method

### 3.1 Artists and Technicians’ Collaboration

The process of producing most works involves collaboration between technicians and artists beforehand. Some ideas from the artists may be modified due to the limits of techniques while some technical challenges could be restricted by the artists' request.

### 3.2 Marker Design and Detection Method

At first, technicians suggested marker detection method by drawing square-outlined markers around the cube. However, artists didn't easily accept the idea of square-outlined markers and they suggested symmetric markers but those were not suitable for finding direction. Through some iterative procedure between art and technology, we redesigned the markers as shown in Fig. 2.
<figure><img src="image_3.png" /><figcaption>Fig. 2. First designed markers (left) and final markers (right).</figcaption></figure>

The template matching method is usually used as a simple method to track objects or patterns. In our case, template matching is not suitable for detecting direction of markers, since we use symmetric markers of six different shapes. Markers are too simple to have feature points and thus feature point-based tracking methods, such as openSURF, are not adequate for this kind of tracking. Our choice was to use color histogram-based searching method which uses two colors to represent direction.

### 3.3 Dealing with Projected Images

The underlying equations of projected images can be represented as follows:

$$I_L = I_C + I_E + I_P(r, g, b). \qquad (1)$$

$$I_C + I_E < I_C + I_E + I_P(0, 0, 0) \le I_C + I_E + I_P(r, g, b). \qquad (2)$$

where $I_L$ is the camera image, $I_C$ is the color of an equivalent flat frontal surface viewed under the same light, $I_E$ is the influences of the environment lighting, and $I_P$ is the influences of projector light (r, g, b means each values in RGB color space).

We need $I_C$ to recognize the color of the cube, but it is difficult to fix one because of the environment lighting and projector light. Furthermore, the projector always displays black color, we call $I_P(0, 0, 0)$, on the cube. So the color on the cube during the detection includes $I_P(0, 0, 0)$. But images from the camera include $I_P(r, g, b)$. If the color of the cube, $I_C + I_E + I_P(0, 0, 0)$, has similar information to the color of the projected image, $I_P(r, g, b)$, it is difficult to see the difference between them. Thus if we know the color of the white table including $I_P(0, 0, 0)$, we may remove the color influences from the projector light by thresholding.

$$I_P'(r, g, b) = I_P(r, g, b) - I_P(0, 0, 0),$$

$$I_L = I_C + I_E + I_P(r, g, b) = I_C + I_E + I_P(0, 0, 0) + I_P(r, g, b),$$

$$T = I_C + I_E + I_P(0, 0, 0),$$

$$I_P'(r, g, b) = I_L - T. \qquad (3)$$

where T is threshold value and $I_P'(r, g, b)$ is the color influences of the projector light.

Threshold value T can be obtained by referencing the color of the white table which is projected on black color, (0,0,0) in RGB color space.
## 3.4 Rotation Estimation

The combination of two colors in the markers can efficiently represent the marker's direction. We used center of weight of each color because of its rotational invariability. Initial point A is center of weight of large area. Terminal point B is center of weight of small area. If we know the coordinates of two points, direction vector can be generated from A to B. The program saves the rotation vector as a normalized unit vector form.

## 3.5 Marker Information Management

The marker information manager watches the detected positional data of color clusters and determines the marker ID. If the ID is equal, the manager calculates non-weighted average of positional data and sends the normalized rotation vector to the extended Kalman filter since we want visually smooth tracking data. Although the data doesn't come in time due to a slight occlusion problem, the Kalman filter can produce the smooth natural linear motion.

<figure><img src="image_4.png" /><figcaption>Fig. 3. Marker reliability management</figcaption></figure>

The information of the marker might be occluded by the people who interact with it and by sudden changes in lighting environment. If new data comes, we generate the variable on reliability and add the marker on the marker list. We never print out the animation with new data because we don't trust the new data. If a known marker is detected, reliability of the marker will increase. The reliability of undetected marker will be decreasing periodically. When the reliability exceeds the criteria of display, the animation will be displayed, but the oldest marker does not last longer than the other markers, because of reliability of marker limits on the maximum reliability constant. Once the reliability exceeds the criteria of display, the program keeps displaying, although the reliability has fallen below the criteria of display. If the reliability has been decreased continually and become lower than the minimum reliability, the marker will be removed from the marker list. In short, if the marker satisfies the fixed criteria, the program never gives up the marker information until the marker is eliminated.
# 4 Implementation

<table><caption>**Table 1. Implementation environment**</caption><tr><td>O/S</td><td>Windows 7 Ultimate K(32bit)</td></tr><tr><td>CPU</td><td>Intel(R) Core(TM)2 Quad CPU @2.83GHz</td></tr><tr><td>Main memory</td><td>DDR3 3.25GB(32bit OS)</td></tr><tr><td>Camera</td><td>Dragonfly Flea2G</td></tr><tr><td>Beam projector</td><td>Optoma DLP EP-776</td></tr></table>

<figure><img src="image_5.png" /><figcaption>**Fig. 4. Overall hardware settings**</figcaption></figure>

<figure><img src="image_6.png" /><figcaption>**Fig. 5. First and final drafts of cube design**</figcaption></figure>

The first draft of the cube was an embossed cube. The embossed cube shows the colors around the cube. We can detect the marker using relationship of the surrounded color without considering the shape of the marker and the color of the top. It is the best way for the technicians and the algorithm robustness. Artists redesigned the cube and the final draft of the cube is shown in Fig. 5. The white table was made of wood (120 x 90 x 70 cm). To soften the impact of cube throwing and to reduce influences from the specular light, we set a sheet of paper attached with rubber on the table projected by projector.

## 4.1 Animation

We designed 36 images for 24 frame/s animation for 1.5 seconds for each character. As shown in Fig. 6, we prepared 36 animations (6 animations for each side). The five themes of the animation are birds, fish, animals, boys and girls.
<figure><img src="image_7.png" /><figcaption>Fig. 6. 36 characters</figcaption></figure>

## 4.2 Image Pre-processing

<figure><img src="image_8.png" /><figcaption>Fig. 7. Thresholding and contrast stretching result</figcaption></figure>

The program extracts regions of interest, saves a new image plane, references the color of the table to remove the color influences from projector light and shadows. After thresholding, the program applies contrast stretching to thresholded image using threshold value T as a maximum intensity.

## 4.3 Marker Detection

In the block-based image searching, efficiency and execution time depend on the size of the block. The distance between projection plane and camera is fixed, so we can estimate the proper size of the block and we fixed it as 26x26.

The program already knew about color distribution in each marker. It was measured by the camera beforehand. There are many errors in the cube made by manual industry, so we couldn't measure accurate area of each marker with manual measuring
tools. The area of the marker is used to detect markers in camera image. If we perform the histogram matching method with 26x26 size block in 640x480 resolution image, about five billion operations will occur per 24 frames, which is prohibitive. Thus, we need algorithms to reduce the number of operations.

(1) Lowering the detecting resolution

(2) Skip counting unrelated colors during marker detection

(3) Skip detecting the block colored with achromatic at the center area of the block

<table><caption>**Table 2.** Average execution time for marker detection</caption><thead><tr><td>Detecting resolution</td><td>Achromatic block skip</td><td>Average execution time</td></tr></thead><tbody><tr><td>640x480</td><td>X</td><td>1123 ms</td></tr><tr><td>320x240</td><td>X</td><td>289 ms</td></tr><tr><td>160x120</td><td>X</td><td>66 ms</td></tr><tr><td>640x480</td><td>O</td><td>variable(1~1150 ms)</td></tr></tbody></table>

Supposing there are six cubes on the table, the image area of six cubes is 26\*26\*6 pixel, not considering noise margin. Estimating with measured data, it will take 15 ms. But, we need more to implement, because if children put their hands on the camera image to interact with cubes. The execution time will increase rapidly over 100 ms. Therefore, to guarantee maximum execution time (40 ms), we decreased detecting resolution to 160x120.

The program detects the marker on the table, and sends position and rotation data to marker information manager. The marker information manager disentangles the information from the data.

## 4.4 Exhibition at the Hanbit Media Gallery

<figure><img src="image_9.png" /><figcaption>**Fig. 8.** Exhibition at the Hanbit media gallery (2010.2.10-3.20)</figcaption></figure>
The well animated characters attract visitors visually. For visitors' convenience, we posted how to interact with exhibits on the notice board.

## 5 Discussion

The basic color of a person's skin is mixed with red and yellow. The markers with red or yellow therefore sometimes cause misrecognition. To fix this problem, we needed to change base colors again or do a template matching method on the detected marker. However, in the template matching method, marker detection criteria and detection time will increase. They may disturb the real-time interaction with visitors. We may solve them all by GPU programming method or multi-core-based programming method, not single core solution.

The Face Cube requires a story to become a more interactive media art. We just show the projected animations to children. There is no relationship between animated characters and there is no interactivity between them too. To expand children's imagination further, we must develop much more relevant stories.

## Acknowledgement

This research is supported by the Ministry of Culture, Sports and Tourism (MICST) and the Korea Creative Content Agency (KOCCA) in the Culture Technology (CT) Research & Development Program 2009 (2010).

## References

1. Music Technology Group University at Pompeu Fabra. The reacTable: A Collaborative Musical Instrument. WETICE 2006

2. Yasuaki Kakehi, Makoto Iida, Takeshi Naemura, and Mitsunori Matsushita. Tablescape Plus: Upstanding Tiny Displays on Tabletop Display. SIGGRAPH 2006

3. Rafael Lozano-Hemmer. http://www.lozano-hemmer.com/english/projects.htm

4. Daniel Guse. Tangible table. http://www.danielguse.de/tangibleTable.php

5. C. Ganser Schwab, A. Steinemann, and A. Kunz. InfrActables: Multi-User Tracking System for Interactive Surfaces. IEEE VR 2006

6. Jochen Rick, Amanda Harris, Paul Marshall, Rowanne Fleck, Nicola Yuill, and Yvonne Rogers. Children designing together on a multi-touch tabletop: an analysis of spatial orientation and user interactions. Proceedings of the 8th International Conference on Interaction Design and Children 2009

7. Esben Warming Pedersen, Kasper Hornbæk. mixiTUI: a tangible sequencer for electronic live performances. Proceedings of the 3rd International Conference on Tangible and Embedded Interaction 2009

8. Hyo-jeong Seo. Snow White on the Table. Seoul International Media Art Biennale 2008