情報処理学会 インタラクション 2020
IPSJ Interaction 2020

2A-11
2020/3/9

Utopia : A Borderless Digital Interactive Narrative
Kaghazchi Negar†1

Kobayashi Yuto†1

Kodama Sachiko†1*“Utopia” is a depiction of an imaginary neighborhood, a place with no borders and boundaries, where all its residents
are living in it happily and peacefully together. In this digital painting, visual indicators such as a character looking
into a distance, etc. are designed to navigate the audience. The visual indicators encourage the audience to explore
the painting. For the realization of the borderless digital painting, we developed an application for PC using Unity,
an eye tracking camera and speakers. The application uses a camera in Unity and a square or rectangular twodimensional image designed for our purpose (such as the mentioned painting of the neighborhood). When a user
watches the painting freely, the image is scrolled without interruption depending on the viewer’s eye direction. Eachcharacter in the painting has short animated moves, along with the sound effects which broadcast as the user's eyeapproaches.

1. Concept and Background

2. System for Utopia

Utopia (/juːˈtəʊpɪə/):“ An imagined place or state of things inFor the realization of the borderless digital interactive

which everything is perfect”.

narrative, we implemented an Eye-tracking technology using

This artwork is a depiction of an imaginary neighborhood, aTobii Eye Tracker 4C camera, attached to a PC monitor. The

place with no borders and boundaries, where all its residents areapplication was developed with Unity.

living in it together happily and peacefully. Here no individual is

The application uses a camera in Unity and two-dimensional

superior to another and the land is free of hunters and hunts. Allimages designed for our purpose. Using the interfaces, when thethe residents depicted in this digital painting which is shown in auser looks to the screen, the image will continue to be shown

thin monitor are living the best moment of their life eternally, andwithout interruption depending on the viewer’s eye direction. The

the place is showing off its most beautiful state to the audience

required operation for the interfaces is moving, zoom-up, zoom-

with faint sounds of everyday life. The idea of a world free ofout.

boundaries and discrimination was one of the main motivations

For the PC with the Tobii eye-tracking camera, thefor the artist of this work as an immigrant.

movement on the screen image is implemented by tracking theAlthough Negar Kaghazchi tries to portray a universal image ofuser's eye movements. Zoom-in operation is implemented bya neighborhood and its residents, the obvious utilization ofgazing at any point in the screen and the zoom-out is by avertingoriental motifs and applying the perspectives similar to what canfrom the gaze point.

be observed in Persian paintings in the composition is prominent.

The navigation on the content is achieved through following

While the old-style buildings with geometric shapes are staying

the natural visual and audial references. To avoid any

strong in multiple parts of the layout, people, animals, and objects

inconvenient edge or borderline while appreciating the content,

are flowing with organic shapes and depicting an apparent

we realized a natural loop that the viewer’s gaze can move to any

contemporary environment.

angles and can return to the point where it was originally seen in

Furthermore, the structure of the system for a borderlessthe painting without facing any borderline. All characters in theexperience is inspired by Japanese handscroll paintings

painting have short animated moves, along with the sound effects(“Emakimono”). Emakimono is a horizontal handscroll painting,which broadcast as the user approaches.

which is read by opening it to arm’s length from right to left. It is

Sound output is controlled according to the distance ofcomposed of a series of scenes in which the artists had used visual

camera and the zoom state. First, the system calculates thecues in illustrating the scenes for storytelling purpose.

distances between the camera origin and the point at which theEmakimono is created by joining together several sheets of paper

volume of each sounds are maximized (sound coordinate).

and varies in size, with an average size of 30 centimeters in width

Considering the looping nature of our content, we calculated

and 9 ~12 meters in length.

distances in 9 directions for each sound coordinate (figure 1). And
set the distances as the parameters to control volume of eachsounds.

*The University of Electro-Communications†1© 2020 Information Processing Society of Japan546

情報処理学会 インタラクション 2020
IPSJ Interaction 2020

2A-11
2020/3/9

The digital painting was created using the Procreate app, Apple
Pencil and Adobe Creative Suites. The technique is a digital
equivalent of colored pencils and the colors selected for the work
are earthy and mostly in warm tones. The ambiance and lights
and shadows are depicting a pleasant afternoon at the beginningof autumn.

Figure 1：Calculating the distances（white circle: camera
origin, black circle: sound source coordinates.）
The volumes of each sound source are controlled by thedistances and zoom state. In addition, using eye tracking as aninterface, the volumes are also controlled by the gaze of theviewer. The fluctuation of volume obeys Gaussian function.
Maximum volumes, minimum volumes, diffusions are set foreach sound. These diffusions are controlled by zoom state too.

Figure 3：Experiment of Utopia using an eye tracking cameraand speakers

We used a low-pass filter for all sounds. The cutoff frequencies
are controlled by the distances and zoom state.
Our method for “borderless” painting was developed using a

References:

single two-dimensional image and a fixed-position camera in[1] Kaghazchi N., Yoshii A., Kodama S., Kaneko M. (2017),

Unity instead of a method of laying out the same images in tiles

Development and Evaluation of an Digital picture book System Usingand moving the camera in parallel to the image surface. This

Multi-Directional Scrolling and Illustrations with Gaze-guidance, HCI

method controls the camera angle using matrixes and realizes aInternational, Posters’ Extended Abstracts Proceedings Part II, pp.561-

natural loop that a user can return to the point where it was568, Springer International Publishing.

originally seen.

3. Utopia : A Borderless Digital Interactive
Narrative
Our

system’s

capabilityofproviding

aborderlessenvironment allows the audience to experience personally theconcept of a borderless digital interactive narrative of Utopia.

Figure 2：Detail of Utopia (Illustration by N.Kaghazchi)© 2020 Information Processing Society of Japan547