Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5,916 changes: 5,916 additions & 0 deletions design/img_src/deptht-touch_construction.ai

Large diffs are not rendered by default.

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/assets/img/kb/case-studies/deep_delviz.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/assets/img/kb/case-studies/deep_tags.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 13 additions & 3 deletions docs/knowledge/case-studies/deep.md
Original file line number Diff line number Diff line change
Expand Up @@ -80,17 +80,19 @@ Technical limitations prevented transferring this calibration to the existing la

The example dataset contained **more than 700 visualization projects** from the DelViz prototype. Its classification scheme had three levels: categories (*Data*, *Visualization*, and *Interaction*), dimensions such as data structure or data type, and individual tags describing a project's characteristics. Projects could carry multiple tags across these dimensions.

![DelViz scheme with categories and associated Tags]({{ site.baseurl }}/assets/img/kb/case-studies/deep_delviz.png)

The scenario assumed a researcher looking for a suitable visualization for a dataset. Instead of selecting projects directly at the outset, the researcher explored and weighted tags describing desired data characteristics, representations, or interaction capabilities. Negative weights allowed exclusion criteria.

Exclusion was meaningful because tags were not mutually exclusive. For example, selecting *Static* while excluding *3D* differed from selecting *Static* and *2D*: the latter could also retrieve projects combining 2D and 3D representations.

### Attraction, Repulsion, and Weighting
### Interaction Concept: Attraction, Repulsion, and Weighting

Tags appeared as floating elements on the surface. Pushing on a tag attracted associated projects; pulling the surface outward at that tag repelled them, filtering them out of the result set. Projects without that tag were unaffected by its direct selection force.

Selecting several tags combined their forces. A project associated with two equally weighted tags moved towards the midpoint between them; unequal deformation shifted the equilibrium towards the stronger attraction. Other tags also responded, more weakly, according to the relative overlap of their associated project sets. Movement speed reflected deformation strength and the relationships to the active tags.

![DEEP interaction concept: attraction, combined selection, repulsion, and semantic zoom]({{ site.baseurl }}/assets/img/kb/scientific/concept_deep.png){:.full-width-scheme .transparent-background}
![DEEP interaction concept: attraction, combined selection, repulsion, and semantic zoom]({{ site.baseurl }}/assets/img/kb/case-studies/deep_interactions-concept.png){:.full-width-scheme .transparent-background}

This dynamic arrangement let users explore relationships by adjusting the surface and observing the response. Deformation provided continuous control over weighting, while releasing the surface removed the applied influence and provided a natural reset.

Expand All @@ -109,8 +111,12 @@ This temporary pause supported detail inspection; it did not provide a general m

The visualization limited each category to three dimensions to keep their colours distinguishable. *Data* used green, *Visualization* red, and *Interaction* blue, with shades distinguishing dimensions. Circular tags combined coloured labels and ring segments; unused segments remained grey to preserve the circular outline. Project symbols combined a preview image with coloured dimension segments and a highlight suggesting a rounded physical object.

![DEEP color scheme]({{ site.baseurl }}/assets/img/kb/case-studies/deep_categories.png){:.full-width-scheme .transparent-background}

An earlier idea to make inactive dimension segments transparent was discarded: movement, proximity, and connecting lines already communicated influence, while transparency made category colours harder to distinguish.

![DEEP Tag Design Evolution]({{ site.baseurl }}/assets/img/kb/case-studies/deep_tags.png){:.full-width-scheme .transparent-background}

Initially, only tags were visible. Pressing a tag progressively revealed associated projects:

| Selection strength | Project representation |
Expand All @@ -119,13 +125,17 @@ Initially, only tags were visible. Pressing a tag progressively revealed associa
| Increasing deformation | Larger symbols with preview images |
| Stronger deformation | Preview images with associated dimension segments |

![DEEP Entities Design Evolution]({{ site.baseurl }}/assets/img/kb/case-studies/deep_entities.png){:.full-width-scheme .transparent-background}

Symbol size and opacity reflected selection strength. Connecting lines identified the influencing tags, with thicker lines indicating stronger influence. Tags themselves had no separate detail levels.

![DEEP Visualization of Relationships]({{ site.baseurl }}/assets/img/kb/case-studies/deep_relations.png){:.full-width-scheme .transparent-background}

### Semantic Zoom on Individual Projects

Pressing a project revealed an annotation in three successive stages: its title, an image of the visualization, and finally a description with metadata, including the recorded date and web address. Deformation depth therefore controlled the amount of information displayed rather than simply magnifying the existing image.

![DEEP: Inspecting a visualization project through semantic zoom]({{ site.baseurl }}/assets/img/kb/scientific/hybrid_deep.jpg)
![DEEP: Inspecting a visualization project through semantic zoom]({{ site.baseurl }}/assets/img/kb/case-studies/deep_semantic-zoom.png)

**[⬆ back to top](#table-of-contents)**

Expand Down
79 changes: 79 additions & 0 deletions docs/knowledge/case-studies/depthtouch.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
---
title: "Analysis: DepthTouch Prototype"
---

# {{ page.title }}

<!-- omit in toc -->
## Table of Contents

1. [Research Questions](#research-questions)
2. [Features and Limitations](#features-and-limitations)
3. [Scenario](#scenario)
4. [Findings and Discussion](#findings-and-discussion)

![DepthTouch: Title Image]({{ site.baseurl }}/assets/img/kb/case-studies/depth-touch_title.png){:.content__title-image}

| Profile field | Description |
| ------------- | ----------- |
| Title | DepthTouch |
| Year | 2012 |
| Focus | Concept, Implementation |
| Format | Elastic Display tabletop |
| Framework | - |
| Sensor | Microsoft Kinect |
| Architecture | Processing, OpenNI |
| Scenario | Playful exploration of physical interaction metaphors for manipulating groups of virtual objects |
| Features | - physics-based interaction through surface deformation<br> - gathering and separating virtual objects<br> - simultaneous interaction without individual finger tracking |
| Publication | *Peschke, J., Göbel, F., Gründer, T., Keck, M., Kammer, D. & Groh, R.* (2012): **DepthTouch: An Elastic Surface for Tangible Computing**. AVI '12, pp. 770–771. DOI: [10.1145/2254556.2254706](https://doi.org/10.1145/2254556.2254706).<br><br>*Peschke, J., Göbel, F. & Groh, R.* (2012): **DepthTouch: Elastische Membran zwischen virtuellem und realem Raum**. Mensch & Computer 2012 – Workshopband, pp. 493–496. |

DepthTouch was developed at the Chair of Media Design at Technische Universität Dresden and forms the starting point for the subsequent Elastic Display case studies.

## Research Questions

DepthTouch explored how the behaviour of natural materials could inform interaction with digital content. Its concept grew from experiments with thread, nets, and fabric: a thread suggested interaction with one-dimensional data, while nets and fabric membranes offered a basis for spatial interaction.

The central question was how deforming a physical surface could support the manipulation of virtual object groups. Pressing into fabric creates a depression in which objects can gather; lifting it creates a raised region that separates them. The prototype investigated how these familiar physical behaviours could become interaction metaphors, combining projected content with the tactile experience of deforming an elastic surface.

**[⬆ back to top](#table-of-contents)**

## Features and Limitations

### Physical Construction and Calibration

The tabletop used commercially available translucent Lycra stretched into an elastic surface. Lycra was selected for its elasticity, durability, affordability, ready availability, and suitability for rear projection. The fabric contained no sensors: a Microsoft Kinect depth camera captured its deformation, while a projector and mirror projected content onto it from below.

![DepthTouch CXonstruction]({{ site.baseurl }}/assets/img/kb/case-studies/depth-touch_construction.png)

Calibration aligned the coordinate systems of the depth camera and projector. Three points defining two linearly independent vectors were mapped to adjust scaling, translation, and rotation within the surface plane. This procedure corrected alignment within that plane, so the camera still had to be oriented perpendicular to the fabric and the projector's image plane parallel to it.

The [DepthTouch hardware documentation](../../hardware/depthtouch-overview.md) describes the tabletop construction and its later refinements.

### From Deformation to Simulated Motion

The implementation used Processing and OpenNI, with the Processing library fisica providing the physics simulation. Differences between neighbouring spatial points in the depth image produced a vector field that drove the movement of virtual spheres. The resulting motion made the spheres respond to the shape of the deformed surface.

The software did not reconstruct individual finger positions. Consequently, interaction was not limited by a fixed number of tracked contacts: simultaneous deformations could contribute to the simulation. However, the system could not identify the actions that produced those deformations. Application logic could respond to their results, such as spheres gathering at a location, rather than to explicitly recognized user actions.

**[⬆ back to top](#table-of-contents)**

## Scenario

DepthTouch provided a playful environment for manipulating groups of virtual spheres projected onto the fabric. Users changed the shape of the surface to influence the spheres through the simulated physical behaviour:

- **Gathering:** Pressing into the fabric created a depression, causing spheres to collect at its lowest point.
- **Separating:** Pulling the fabric upward created a raised region that dispersed spheres away from it.

The physical surface served as both the input medium and a source of haptic feedback. Users could feel the fabric while observing the virtual objects respond to its deformation. The scenario therefore connected the manipulation of real material with the behaviour of digital content through familiar physical patterns.

**[⬆ back to top](#table-of-contents)**

## Findings and Discussion

The source account reports that users consistently highlighted the playful, exploratory character of the interaction and the fabric's natural invitation to deform it. They also emphasized that familiar physical behaviour made the interaction intuitively understandable, relating the concept to reality-based interaction.

The prototype exposed a distinction relevant to subsequent framework development: capturing surface deformation can support simultaneous interaction without identifying individual contacts, but it does not by itself reveal which actions users perform. DepthTouch demonstrated the opportunities of this approach for physical simulation while making its limits for interpreting user input apparent.

These observations raised the broader question of how an elastic surface could extend conventional multi-touch systems with an additional interaction dimension. DepthTouch established the conceptual and technical starting point for the later case studies, including [FlexiWall](flexiwall.md), which explored further uses of surface deformation.

**[⬆ back to top](#table-of-contents)**
Loading