Virtual prototyping using miniature model and visualization for interactive public displays, ACM...

Preview:

DESCRIPTION

My presentation at ACM DIS2012. The paper can be downloaded via http://unitedfield.net/publications/.

Citation preview

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

Thanks for you attention.

yasuto.nakanishi@acm.org

Recommended