Presented live at FITC Amsterdam 2014 on Feb 24-25, 2014 More details can be found at www.FITC.ca Interactive experiences that sustain user interest and imagination For the last couple of years, Stefan Wagner has been working in the field of interactive exhibits, including installations and software that give the audience an understanding of specific (often hard to grasp) topics. Ranging between interactive design, information visualization and creative coding, Stefan learned to love the concept of putting the user in a place where he is not merely a consumer of media, but where he gets to actively and willingly explore the content presented to him – applications that sustain user interest and imagination. In the course of his studies as well as in commercial projects, he has tried to adopt this idea. In his talk, Stefan Wagner will give you an insight into the development of some of the interactive projects he has been working or collaborating on and how they managed to catch user attention by deploying realtime visuals and/or new concepts of interaction like augmented reality and gesture-based input. He will also discuss conceptual as well as technical issues, problems and insights of these projects.

1. Let ‘em explore
Stefan Wagner
@andsynchrony
andsynchrony.net
designandsystems.de

2. we! designers, artists, storytellers…
users, the audience, …
…what?
Let ‘em explore

3. How I came to explore…
Level Design, 3d Art
Flash, HTML, …
AE Artist, Motion Design, Animation
The Basic Stuff
Interaction, Creative Coding
*
B.A. Communication Design, FH Würzburg
2007
2009
M.A. Information Design
2011
2013
*
»Wow, interactive media is
totally making a difference!!«

4. connecting information design
to gamic elements.

5. Gamification
Game Layer
Embrace the content you got by
designing it the way it deserves.

6. Digital Media
(in education,
communication
& information
design)
What is the relation?
What meaningful connections
can be created?
Games

7. Won?
know-how /
experience
++
Start
Incentive
REGULATED
COURSE OF
THE GAME
know-how /
experience
++
Frustration
End
Lost?

8. exploration
know-how /
experience
++
curiosity
Start
USING
INTERACTIVE
CONTENT
know-how /
experience
++
exploration
message
End

9. »Generating Utopia«
2013, part of master thesis

10. Can we read and calculate dreams, desire, wishes from data?
Can a utopia be created by a machine?

13. analysing the structure of
social location data
Tr
a
N
ig
ve
l&
Tr
a
np
or
ht
Sh
t
lif
e
op
Sp
ot
O
&
ut
Se
rv
ic
e
do
Co
H
om
lle
or
s&
ge
Re
&
e
Un
tio
n
od
Ar
ts
O
&
er
sit
y
Pr
of
En
th
te
iv
cr
ea
Fo
rta
in
er
es
m
en
t
sio
na
l&
O
th
er
Pl
ac
es

18. vimeo.com/74066023

19. recreation
productivity
transport

20. exploration through
imagination
…by allowing the user room to interpretate

21. The technical side
!
» Processing with intense use of OpenGL features
» No custom 3d-modelling – everything is built with data
» Toxiclibs by Karsten Schmidt for 3d-Model Calculations
» Depth-of-field post-processing shader originally by
Martin Upitis

22. vimeo.com/87175277

23. »the institute«
Steinbeis Forschungszentrum “Design und Systeme”
Würzburg, Germany
Directed by Prof. Erich Schöls and Sebastian Gläser
www.designandsystems.de

24. Digital Spine
Client: spontech AG
2012 by Design and Systems

25. Requirements:
!
» Explain how their software works
!
» Showcase their competence in 3d-scanning
of spines from 2d x-ray images
!
» Show why the use of their software leads
to better results in spine surgery

26. What we could have done

27. vimeo.com/55257216

28. What we did:
!
» Rebuilt a human spine in Processing with full motion
simulation
» Visualization that works as an eye catcher but is fully
interactive as well
» Guide through the steps of the original software in a
simplified way
» Let users do digital spine surgery with different implants
» Show how a treated spine is more movable again after
surgery using the software (before / after)

29. the scanner

32. implant revolver

33. scientific interface mimicri

34. exploration through
self-confidence
…by making it easy for the user to deal with complex topics

35. The technical side
!
» Processing with intense use of OpenGL features
implemented by Andres Colubri
» custom-written x-ray shader for teh visualz
» Custom spine class that rigs and animates a human
spine 3d model by reading medical data
» Thanks to GLmodel implementation, the spine is
being rendered 3 times spanning 2 HD displays without
affecting performance

36. Difflect
2011, bachelor thesis

37. Enhance printed media by adding a digital layer
Create a meaningful connection between digital and print

38. Basic concept: the digital mirror

40. vimeo.com/33834276

41. Extended Paper
Client: coperion GmbH
2013 by Design and Systems

43. vimeo.com/68391099

45. Cover = table of contents

46. Sensitive areas for triggering
additional content

47. Move paper to the left
» product flow
Move paper to the right
» exploded view

48. The technical side
!
» openFrameworks with custom Metaio tracking
implementation for full control over rendering
and animation
» more than 25 markerless tracking targets, each
one with its own 3d visualization
» realtime rendering and animation of CAD
created content

50. exploration through
play
…by taking interaction beyond traditional input devices and techniques

52. Thank you!
Let’s explore #FITC AM 14!
Stefan Wagner
@andsynchrony
andsynchrony.net
designandsystems.de