Virtual Prototyping using Miniature Model and Visualization
for Interactive Public Displays
Yasuto NakanishiKeio University / JST Presto
Public DisplaysInteraction Design<--->Space Design• Large displays in public spaces
• Shopping mall / Bending machine / Station, Airport / Exterior of Building
• Embodied / Spatial Interactions
http://ameblo.jp/kankouspot/
Public DisplaysInteraction Design<--->Space Design• Shinagawa station : one of very large stations in Japan
• 44 plasma displays, however, most people doesn’t see them...
• InformationDesign <----> Space DesignX
CityCompiler : Overview
Google Sketch Up
Processing
Java Monkey Engine
Simulation
PAppletTwenty-two virtual displays
to show PApplets
3D model(Shinagawa station, Tokyo)
SoftwareDesign
SpaceDesign
Compile
• Iterative Prototyping within Virtual Space
• checking size of the idle, shooting angle, walking speed etc.
• adding virtual sensors in order to let the girl walk with the same speed as the crowd
Public Displays (my works)Interaction Design<--->Space Design
Gallery in Roppongi 2001 Art Event in Kanda 2005
Street in Sendai NTT Inter Communication Center 2004
Museum Of Contemporary Art Tokyo 2010
Tokyo Metropolitan Museum of Photography 2007
Without CityCompiler (2007) Miniature Prototyping• Exhibition at Tokyo Metropolitan Museum of Photography (2007)
• Measuring of the wall at the museum + Making a paper doll with the ratio that considered a 13 inch display as the wall
• Trial-and-error for tuning the parameters of the motion graphics : size, alpha value and movement speed of the words
• Only simulating a screen; without neighboring space
CityCompilerVirtual Prototyping• Re-tuning the size and the moving speed of the words +
Changing the layout and size of the screen in runtime
• The circulation plan was also simulated and determined.
•
virtual simulation real space installation
• Unexpected features : the lustrous screen and floor...
Google Sketch Up
Processing
Java Monkey Engine
Simulation
SoftwareDesign
SpaceDesign
Compile
Installation
Limitations in Virtual Simulation
•Unexpected situations often arise in real
space installation.
•Appearance of the information presented might be
different from expectations.
Limitations in Virtual Simulation
•Unexpected situations often arise in real
space installation.
•Appearance of the information presented might be
different from expectations.
Simulation of Interactive Public Displays
Miniature
Virtual Virtual
Miniature
+Virtual
+
θ
Hybrid of Virtual Simulation and Miniature Simulation
Virtual Simulationwith Cognitive Visualization
DeploymentVirtual Simulation Miniature Simulation
• Hybrid of Virtual Simulation and Miniature Simulation
• Switching virtual and physical sensors within the same codes.
• Operating a system within both a virtual space and a miniature space would help to handle the parameters and revise codes.
Virtual Simulation<--->Miniature simulation
∽ (similar to)
Virtual Simulation<--->Deployment into Real Space
(?)
Limitations in Virtual Simulation
•Unexpected situations often arise in real
space installation.
•Appearance of the information presented might be
different from expectations.
• Cognitive Visualization within Virtual Space
• Point lights showing the angle of human vision
• Display of Landolt rings
• Visualization of the eyesight required to see them
Landolt rings
Color eyesightpink 0.2 - 0.4blue 0.4 - 0.6cyan 0.6 - 0.8green 0.8 - 1.0yellow 1.0 - 1.2orange 1.2 - 1.4red 1.4 - 1.6
Limitations in Virtual Simulation
•Unexpected situations often arise in real
space installation.
•Appearance of the information presented might be
different from expectations.
Limitations in Virtual Simulation
•Unexpected situations often arise in real
space installation.
•Appearance of the information presented might be
different from expectations.
Simulation of Interactive Public Displays
Miniature
Virtual Virtual
Miniature
+Virtual
+
θ
What is the pros and cons of the methods ?
Hybrid of Virtual Simulation and Miniature Simulation
Virtual Simulationwith Cognitive Visualization
Case studies of prototyping methods
Public Display1 : A system in which a number of photos were captured using a smartphone and displayed on a map
Public Display2 : An interactive video display system in which the size and location of human shadows are captured by a camera and used to trigger the display of a video
Feature1 Impression and visibility depend on the size or layout of text and images
Feature2 Parameter adjustments or source code corrections are made in line with the spatial layout of the devices that comprise the system
What is the pros and cons of the methods ?
Hybrid of Virtual Simulation and Miniature Simulation
Virtual Simulationwith Cognitive Visualization
Public Display1 Public Display2
Developer H Developer VPublic Display1 Public Display2 Public Display1 Public Display2
テキスト
Virtual Space Model Space Real Space
Measurement
Creating a virtual model
Investigation for display position
A window facing street was selected.
Checking visibility with a camera figure
A window frame overlapped with
screen, and displayed photo
size was too small.
Adding function of changing the size of photo and the application size
Creating a miniature model
Adding a LED to the miniature model
The brightness of the inside and the
outside of the miniature space were the same
unlike the real space.
Adding a function to change the brightness of application
Deployment and installation
Public Display1 : Developer H
Virtual Space Model Space Real Space
Measurement
Creating a virtual model
Investigation for display position
A window facing street was selected.
Checking visibility with a camera figure
A window frame overlapped with
screen, and displayed photo
size was too small.
Adding function of changing the size of photo and the application size
Creating a miniature model
Adding a LED to the miniature model
The brightness of the inside and the
outside of the miniature space were the same
unlike the real space.
Adding a function to change the brightness of application
Deployment and installation
Public Display1 : Developer H
Virtual Space Model Space Real Space
Measurement
Creating a virtual model
Investigation for display position
A window facing street was selected.
Checking visibility with a camera figure
A window frame overlapped with
screen, and displayed photo
size was too small.
Adding function of changing the size of photo and the application size
Creating a miniature model
Adding a LED to the miniature model
The brightness of the inside and the
outside of the miniature space were the same
unlike the real space.
Adding a function to change the brightness of application
Deployment and installation
Public Display1 : Developer H
Virtual Space Model Space Real Space
Measurement
Creating a virtual model
Investigation for display position
A window facing street was selected.
Checking visibility with a camera figure
A window frame overlapped with
screen, and displayed photo
size was too small.
Adding function of changing the size of photo and the application size
Creating a miniature model
Adding a LED to the miniature model
The brightness of the inside and the
outside of the miniature space were the same
unlike the real space.
Adding a function to change the brightness of application
Deployment and installation
Public Display1 : Developer H
Virtual Space Model Space Real Space
Measurement
Creating a virtual model
Investigation for display position
A window facing street was selected.
Checking visibility with a camera figure
A window frame overlapped with
screen, and displayed photo
size was too small.
Adding function of changing the size of photo and the application size
Creating a miniature model
Adding a LED to the miniature model
The brightness of the inside and the
outside of the miniature space were the same
unlike the real space.
Adding a function to change the brightness of application
Deployment and installation
Public Display1 : Developer H
Virtual Space Model Space Real Space
Measurement
Creating a virtual model
Investigation for display position
A window facing street was selected.
Checking visibility with a camera figure
A window frame overlapped with
screen, and displayed photo
size was too small.
Adding function of changing the size of photo and the application size
Creating a miniature model
Adding a LED to the miniature model
The brightness of the inside and the
outside of the miniature space were the same
unlike the real space.
Adding a function to change the brightness of application
Deployment and installation
Public Display1 : Developer H
Virtual Space Model Space Real Space
Measurement
Creating a virtual model
Investigation for display position
A window facing street was selected.
Checking visibility with a camera figure
A window frame overlapped with
screen, and displayed photo
size was too small.
Adding function of changing the size of photo and the application size
Creating a miniature model
Adding a LED to the miniature model
The brightness of the inside and the
outside of the miniature space were the same
unlike the real space.
Adding a function to change the brightness of application
Deployment and installation
Public Display1 : Developer H
Virtual Space Real Space
Measurement
Creating a virtual model
Investigation for display position
Interior wall 1
Interior wall 2
Window facing the street
Landolt ring seen from 100cm
Landolt ring seen from 200cm
Landolt ring seen from 600cm
Verifiying from the entrance.
Verifying with moving in the room.
Verifying from road
600cm apart
Deployment and installation
The window facing the street was selected as a deployment place.
Comparing the size of shown photo
Verifying visibility of photos with Landolt ring
Checking how the display enters into a field of view of a virtual human
A function of changing the size of photo was added, and the size was decided.
Public Display1 : Developer V
Virtual Space Real Space
Measurement
Creating a virtual model
Investigation for display position
Interior wall 1
Interior wall 2
Window facing the street
Landolt ring seen from 100cm
Landolt ring seen from 200cm
Landolt ring seen from 600cm
Verifiying from the entrance.
Verifying with moving in the room.
Verifying from road
600cm apart
Deployment and installation
The window facing the street was selected as a deployment place.
Comparing the size of shown photo
Verifying visibility of photos with Landolt ring
Checking how the display enters into a field of view of a virtual human
A function of changing the size of photo was added, and the size was decided.
Public Display1 : Developer V
Virtual Space Real Space
Measurement
Creating a virtual model
Investigation for display position
Interior wall 1
Interior wall 2
Window facing the street
Landolt ring seen from 100cm
Landolt ring seen from 200cm
Landolt ring seen from 600cm
Verifiying from the entrance.
Verifying with moving in the room.
Verifying from road
600cm apart
Deployment and installation
The window facing the street was selected as a deployment place.
Comparing the size of shown photo
Verifying visibility of photos with Landolt ring
Checking how the display enters into a field of view of a virtual human
A function of changing the size of photo was added, and the size was decided.
Public Display1 : Developer VVisual Coneの図画欲しいな…
Virtual Space Real Space
Measurement
Creating a virtual model
Investigation for display position
Interior wall 1
Interior wall 2
Window facing the street
Landolt ring seen from 100cm
Landolt ring seen from 200cm
Landolt ring seen from 600cm
Verifiying from the entrance.
Verifying with moving in the room.
Verifying from road
600cm apart
Deployment and installation
The window facing the street was selected as a deployment place.
Comparing the size of shown photo
Verifying visibility of photos with Landolt ring
Checking how the display enters into a field of view of a virtual human
A function of changing the size of photo was added, and the size was decided.
Public Display1 : Developer V
Virtual Space Model Space Real Space
Investigating location relations of a projector, a
camera and figurines
Location hunting
Measurement of the chosen space
Creating a miniature model
Deciding the screen size and the video
composition
Taking a video
Checking the shadow size and the movie size with using a
figurine.
it was strange that the video suddenly started and stopped when a shadow was
detected.
Retaking a video
Checking the shadow size and the movie
size using a figurine.
Checking the shadow size and the video size with a virtual
projector.
A problem of the mini projector.
The video size was larger than expected.
Adding a function to change the size and the position of
the movie.
Adding a function to binarize the camera image.
Deployment and installation
The brightness of the installation
space was brighter than
expected.
Running the system with changing the room brightness.
Deployment and installation
Public Display2 : Developer H
Virtual Space Model Space Real Space
Investigating location relations of a projector, a
camera and figurines
Location hunting
Measurement of the chosen space
Creating a miniature model
Deciding the screen size and the video
composition
Taking a video
Checking the shadow size and the movie size with using a
figurine.
it was strange that the video suddenly started and stopped when a shadow was
detected.
Retaking a video
Checking the shadow size and the movie
size using a figurine.
Checking the shadow size and the video size with a virtual
projector.
A problem of the mini projector.
The video size was larger than expected.
Adding a function to change the size and the position of
the movie.
Adding a function to binarize the camera image.
Deployment and installation
The brightness of the installation
space was brighter than
expected.
Running the system with changing the room brightness.
Deployment and installation
Public Display2 : Developer H
Virtual Space Model Space Real Space
Investigating location relations of a projector, a
camera and figurines
Location hunting
Measurement of the chosen space
Creating a miniature model
Deciding the screen size and the video
composition
Taking a video
Checking the shadow size and the movie size with using a
figurine.
it was strange that the video suddenly started and stopped when a shadow was
detected.
Retaking a video
Checking the shadow size and the movie
size using a figurine.
Checking the shadow size and the video size with a virtual
projector.
A problem of the mini projector.
The video size was larger than expected.
Adding a function to change the size and the position of
the movie.
Adding a function to binarize the camera image.
Deployment and installation
The brightness of the installation
space was brighter than
expected.
Running the system with changing the room brightness.
Deployment and installation
Public Display2 : Developer H
Virtual Space Model Space Real Space
Investigating location relations of a projector, a
camera and figurines
Location hunting
Measurement of the chosen space
Creating a miniature model
Deciding the screen size and the video
composition
Taking a video
Checking the shadow size and the movie size with using a
figurine.
it was strange that the video suddenly started and stopped when a shadow was
detected.
Retaking a video
Checking the shadow size and the movie
size using a figurine.
Checking the shadow size and the video size with a virtual
projector.
A problem of the mini projector.
The video size was larger than expected.
Adding a function to change the size and the position of
the movie.
Adding a function to binarize the camera image.
Deployment and installation
The brightness of the installation
space was brighter than
expected.
Running the system with changing the room brightness.
Deployment and installation
Public Display2 : Developer H
Virtual Space Model Space Real Space
Investigating location relations of a projector, a
camera and figurines
Location hunting
Measurement of the chosen space
Creating a miniature model
Deciding the screen size and the video
composition
Taking a video
Checking the shadow size and the movie size with using a
figurine.
it was strange that the video suddenly started and stopped when a shadow was
detected.
Retaking a video
Checking the shadow size and the movie
size using a figurine.
Checking the shadow size and the video size with a virtual
projector.
A problem of the mini projector.
The video size was larger than expected.
Adding a function to change the size and the position of
the movie.
Adding a function to binarize the camera image.
Deployment and installation
The brightness of the installation
space was brighter than
expected.
Running the system with changing the room brightness.
Deployment and installation
Public Display2 : Developer H
Virtual Space Model Space Real Space
Investigating location relations of a projector, a
camera and figurines
Location hunting
Measurement of the chosen space
Creating a miniature model
Deciding the screen size and the video
composition
Taking a video
Checking the shadow size and the movie size with using a
figurine.
it was strange that the video suddenly started and stopped when a shadow was
detected.
Retaking a video
Checking the shadow size and the movie
size using a figurine.
Checking the shadow size and the video size with a virtual
projector.
A problem of the mini projector.
The video size was larger than expected.
Adding a function to change the size and the position of
the movie.
Adding a function to binarize the camera image.
Deployment and installation
The brightness of the installation
space was brighter than
expected.
Running the system with changing the room brightness.
Deployment and installation
Public Display2 : Developer H
Virtual Space Model Space Real Space
Investigating location relations of a projector, a
camera and figurines
Location hunting
Measurement of the chosen space
Creating a miniature model
Deciding the screen size and the video
composition
Taking a video
Checking the shadow size and the movie size with using a
figurine.
it was strange that the video suddenly started and stopped when a shadow was
detected.
Retaking a video
Checking the shadow size and the movie
size using a figurine.
Checking the shadow size and the video size with a virtual
projector.
A problem of the mini projector.
The video size was larger than expected.
Adding a function to change the size and the position of
the movie.
Adding a function to binarize the camera image.
Deployment and installation
The brightness of the installation
space was brighter than
expected.
Running the system with changing the room brightness.
Deployment and installation
Public Display2 : Developer H
Virtual Space Model Space Real Space
Investigating location relations of a projector, a
camera and figurines
Location hunting
Measurement of the chosen space
Creating a miniature model
Deciding the screen size and the video
composition
Taking a video
Checking the shadow size and the movie size with using a
figurine.
it was strange that the video suddenly started and stopped when a shadow was
detected.
Retaking a video
Checking the shadow size and the movie
size using a figurine.
Checking the shadow size and the video size with a virtual
projector.
A problem of the mini projector.
The video size was larger than expected.
Adding a function to change the size and the position of
the movie.
Adding a function to binarize the camera image.
Deployment and installation
The brightness of the installation
space was brighter than
expected.
Running the system with changing the room brightness.
Deployment and installation
Public Display2 : Developer H
Virtual Space Model Space Real Space
Investigating location relations of a projector, a
camera and figurines
Location hunting
Measurement of the chosen space
Creating a miniature model
Deciding the screen size and the video
composition
Taking a video
Checking the shadow size and the movie size with using a
figurine.
it was strange that the video suddenly started and stopped when a shadow was
detected.
Retaking a video
Checking the shadow size and the movie
size using a figurine.
Checking the shadow size and the video size with a virtual
projector.
A problem of the mini projector.
The video size was larger than expected.
Adding a function to change the size and the position of
the movie.
Adding a function to binarize the camera image.
Deployment and installation
The brightness of the installation
space was brighter than
expected.
Running the system with changing the room brightness.
Deployment and installation
Public Display2 : Developer H
Virtual Space Model Space Real Space
Investigating location relations of a projector, a
camera and figurines
Location hunting
Measurement of the chosen space
Creating a miniature model
Deciding the screen size and the video
composition
Taking a video
Checking the shadow size and the movie size with using a
figurine.
it was strange that the video suddenly started and stopped when a shadow was
detected.
Retaking a video
Checking the shadow size and the movie
size using a figurine.
Checking the shadow size and the video size with a virtual
projector.
A problem of the mini projector.
The video size was larger than expected.
Adding a function to change the size and the position of
the movie.
Adding a function to binarize the camera image.
Deployment and installation
The brightness of the installation
space was brighter than
expected.
Running the system with changing the room brightness.
Deployment and installation
Public Display2 : Developer H
Public Display2 : Developer V
Virtual Space Real Space
Location hunting
Creating a virtual model
Deployment and installation
Measurement of the chosen space
Locating a virtual camera and a virtual projector
Verifying visibility of the application with Landolt ring
Verifying display position with a virtual human
Shooting a video
A projector installed between the road and the space entered
the field of vision.
Public Display2 : Developer V
Virtual Space Real Space
Location hunting
Creating a virtual model
Deployment and installation
Measurement of the chosen space
Locating a virtual camera and a virtual projector
Verifying visibility of the application with Landolt ring
Verifying display position with a virtual human
Shooting a video
A projector installed between the road and the space entered
the field of vision.
Public Display2 : Developer V
Virtual Space Real Space
Location hunting
Creating a virtual model
Deployment and installation
Measurement of the chosen space
Locating a virtual camera and a virtual projector
Verifying visibility of the application with Landolt ring
Verifying display position with a virtual human
Shooting a video
A projector installed between the road and the space entered
the field of vision.
Public Display2 : Developer V
Virtual Space Real Space
Location hunting
Creating a virtual model
Deployment and installation
Measurement of the chosen space
Locating a virtual camera and a virtual projector
Verifying visibility of the application with Landolt ring
Verifying display position with a virtual human
Shooting a video
A projector installed between the road and the space entered
the field of vision.
What is the pros and cons of the methods ?
Hybrid of Virtual Simulation and Miniature Simulation
Virtual Simulationwith Cognitive Visualization
Public Display1 Public Display2
Developer H Developer VPublic Display1 Public Display2 Public Display1 Public Display2
makingmodels
movingobjects
tuningparameters
findingparameters
switchingmodels/scales
Methods Hybrid of Virtual Simulation and Miniature Simulation
Virtual Simulationwith Visualization
Making Models
•Preparing miniature materials and tools•A model only for one screen is easy, but it costs to make a model having several display or projectors.•Difficult to know how detailed model should be made beforehand.
•Only PC
•Easy to copy virtual model.•Easy to locate many displays or projectors.
•Difficult to know how detailed model should be made beforehand.
Moving Objects
•Direct and Intuitive Manipulation (TUI)•Moving plural objects is easy.•Physical Limitation in deployment positions or angles
•Indirect Manipulation (GUI, slider)•Moving plural objects takes time.•No limitation in deployment positions or angles
Methods Hybrid of Virtual Simulation and Miniature Simulation
Virtual Simulationwith Visualization
Tuning Parameters
•Measurement to know parameter values•Flexible system, but trial-and-error for on-site tuning
•Changing Parameters Numerically•Visualization as Guideline in Tuning parameters
Finding Parameters
•Switching simulation spaces (different devices, different materials) provided opportunities to find parameters.
•Comparing different device locations or viewpoints provided opportunities.•Simple CG might not show delicate difference; Visualization should be designed to make up for this demerit.
Methods Hybrid of Virtual Simulation and Miniature Simulation
Virtual Simulationwith Visualization
Switching Models / Scales
•It costs to change simulation spaces•it has value; sometimes true, sometimes not true.•a timing of changing model spaces would depends on the experience.
•The scale of the model should affects thinking viewpoints.•Changing scales of miniature model needs different miniature models.
•Possible to simulate on various scales in one virtual model. •it is easy to copy a virtual model, and it might obstruct to switch to a space of different properties on the contrary.•Switch to a model with different characters intentionally is good?
Sketches and prototypes are both instantiations of the design concept. However they serve different purposes, and therefore are concentrated at different stages of the design process. Sketches dominate the early ideation stages, whereas prototypes are more concentrated at the later stages where things are converging within the design funnel.–Bill Buxton, Sketching User Experiences
DiscussionVirtual Simulationwith Visualization
Hybrid of Virtual Simulation and Miniature Simulation
Virtual Simulationwith Visualization
Basic software operations and ideal positioning of devices are investigated in virtual space.
Virtual
θ
Hybrid of Virtual Simulation and Miniature Simulation
Problems arising from differences between virtual and real space are clarified within a miniature model space. + Feature addition/code adjustment are iterated within both spaces.
Miniature
Virtual Virtual
Miniature
A strategy for prototyping interactive public displays