NEW OPTICAL ILLUSION BY ANIMATING JUDD ILLUSION
USING SCALABLE VECTOR GRAPHICS
Teluhiko Hilano and Kazuhisa Yanaka
Department of Information Media, Kanagawa Institute of Technology, 1030 Shimoogino, Atsugi, Japan
Keywords:
Optical illusion, Judd illusion, Fick illusion, SVG, Animation.
Abstract:
We present a method of creating a new illusion with motion accomplished by gradually changing the parame-
ters of an existing still-image illusion . We applied this method to the well-known Judd Illusion and the angle
of the tail of the arrow was gradually changed with SVG. We therefore found a new animated optical illusion
in which volunteers perceived that the main segment was moving horizontally, although it actually remained
stationary.
1 INTRODUCTION
We describe a new optical illusion which is produced
by animating the Judd illusion. Optical illusions have
long attracted the attention of scientists because they
are considered phenomena deeply related to a per-
son’s cognition. However, it was too time consum-
ing to accurately draw images manually in early days
of such experiments. Although the time and labor re-
quired have been considerably reduced by the emer-
gence of PCs and drawingsoftware, considerabletime
and labor are still necessary, especially to create ani-
mated illusions.
Scalable vector graphics (SVG) (W3C, 2010b) has
changed this: SVG makes us to draw considerably
complex figures efficiently if the figures have regular
shapes. Moreover, it is easy to animate some proper-
ties of figures using SVG’s function. Therefore, SVG
is an ideal tool for illusion experiments.
We added animation to Judd’s well known illusion
in which the angle of the tail of an arrow gradually
changes by using SVG’s function. As a result, we
found a new animated method of optical illusion to
create a new illusion with motion attained by gradu-
ally changing the the parameters of an existing still-
image illusion. We therefore found a new animated
optical illusion in which volunteers perceived that the
main segment was moving horizontally, although it
actually remained stationary.
2 ABOUT SVG AND OTHER
TOOLS MAKING FIGURES
WITH ANIMATION
2.1 About SVG
According to W3C web site(W3C, 2010b), SVG has
following characteristics:
SVG is a language for describing two-
dimensional graphics in XML [XML10].
SVG allows for three types of graphic ob-
jects: vector graphic shapes (e.g., paths con-
sisting of straight lines and curves), images
and text. Graphical objects can be grouped,
styled, transformed and composited into pre-
viously rendered objects. The feature set in-
cludes nested transformations, clipping paths,
alpha masks, filter effects and template ob-
jects.
SVG drawings can be interactive and dy-
namic. Animations can be defined and trig-
gered either declaratively (i.e., by embedding
SVG animation elements in SVG content) or
via scripting.
Sophisticated applications of SVG are possi-
ble by use of a supplemental scripting lan-
guage which accesses SVG Document Ob-
ject Model (DOM), which provides complete
access to all elements, attributes and proper-
ties. A rich set of event handlers such as
eonmouseoverf and eonclickf can be assigned
401
Hilano T. and Yanaka K..
NEW OPTICAL ILLUSION BY ANIMATING JUDD ILLUSION USING SCALABLE VECTOR GRAPHICS.
DOI: 10.5220/0003320704010404
In Proceedings of the International Conference on Computer Vision Theory and Applications (VISAPP-2011), pages 401-404
ISBN: 978-989-8425-47-8
Copyright
c
2011 SCITEPRESS (Science and Technology Publications, Lda.)
to any SVG graphical object. Because of
its compatibility and leveraging of other Web
standards, features like scripting can be done
on XHTML and SVG elements simultane-
ously within the same Web page.
Thus, there are several advantages of using SVG:
it can be used to draw an accurate figure and to
animate it smoothly.
We can add to change the properties of the figures
interactively.
Anyone can reproduce our experiment because
we used widely available equipment and software
that the data are described in open format.
2.2 Other Tools Making Figures with
Animation
One of tools making figures with animation is Pro-
cessing language(Processing.org, 2010).
Processing is an open source programming
language and environment for people who
want to create images, animations, and inter-
actions. ...
Processing gives the method to draw figures. When
one wants to animate the figures, one must draw the
figures on each frames. Moreover, the figures in Pro-
cessing is not the object, so one try to add the interac-
tivity to the figures, one needs more effors then SVG.
For these reasons, we do not use Processing.
3 ORIGINAL AND ANIMATED
JUDD ILLUSION
The thick arrow with a black dot in Figure 1 is the
original Judd illusion(Robinson, 1972, Fig. 2.21).
Figure 1: Judd illusion.
Although the dot is in the center of the main seg-
ment, it seems to shift left of center because of the
arrowhead and the back tail of the arrow. Most opti-
cal illusions, including the Judd illusion, can be per-
ceived in still pictures. However, movingillusions can
be derived from a still geometrical optical illusion by
gradually changing parameters like the angle between
the segments of the original still illusion.
For example, the length of the main segment in
the famous M¨uller-Lyer optical illusion is perceived
to expand and contract when the directions of the
arrow’s tail and arrowhead are alternately reversed
(Goto and Tanaka, 2005, p. 271). However no other
similar examples are known. Moreover, its move-
ment is not continuous but discrete. Therefore, we
investigated a new animated optical illusion created
by changing parameters of an optical illusion.
To demonstrate animation in the Judd illusion in
Figure 2, we prepared the code for SVG as follows:
BackwardForward
BackwardForward
BackwardForward
BackwardForward
Main Segment
Figure 2: Judd illusion with animation.
Program 1: Code of Animated Judd Illusion
1
<?xml version="1.0" encoding="UTF-8" ?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
height="100%" width="100%">
5
<defs>
<g transform="rotate(45)" id="Line">
<line x1="0" y1="0" x2="30"
line-cap="round" stroke-width="10"
stroke="black" >
10
<animateTransform
attributeName="transform"
type="rotate"
values="30;150;150;30;30"
keyTimes="0;0.4;0.5;0.9;1"
15
repeatCount="indefinite"
dur="25s" fill="freeze" />
</line>
</g>
<g id="edge" >
20
<use xlink:href="#Line" />
<g transform="scale(1,-1)" >
<use xlink:href="#Line" />
</g>
</g>
25
</defs>
<g transform="translate(100,50)" >
<line x1="0" y1="0" x2="200" y2="0"
line-cap="round" stroke-width="10"
stroke="black" />
30
<circle cx="100" cy="0" r="10"
fill="black"/>
<use xlink:href="#edge"/>
<g transform="translate(200,0)" >
<use xlink:href="#edge"/>
35
</g>
</g>
</svg>
VISAPP 2011 - International Conference on Computer Vision Theory and Applications
402
Details of the code is as follows:
Line 1 denotes the XML declaration.
Lines 2–4 denotes the root tag and declares name
spaces to use this document.
Lines 5–25 defines one segment of feath-
ers with animation(lines 6–17) and make an
arrow(lines19–24), which makes easy to change
the speed of animation of the tail and the length
of tail.
Lines 10–16 defines the rotated animation of the
tail.
Line 13 defines the head/tail rotation angle first
to 30
and then to 150
, which is kept for one
cycle and then changed back to 30
and kept for
one cycle, and so on.
Duration time or rotation time is defined in line
16 and line 14 defines the ratio of the time de-
noted the angles.
Line 15 denotes the animation will be contin-
ued forever.
The rest of the code denotes the final figure.
Lines 27–29 denotes the main segment.
Lines 30–31 denotes the circle at the center.
Line 32 specifies the left tail to refer ones pre-
viously defined.
Lines 33–35 specifies the right tail to shift the
ones previously defined.
Becouse the code of SVG can be embedded in HTML
code or directly written in HTML5(W3C, 2010a), we
make a web page to change parameters of an optical
illusion interactivelly.
4 EXPERIMENTS
As previously stated, we used SVG to create and
animate the Judd illusion by continuously changing
the angle of the tail and arrowhead. The number of
browsers can currently play animated SVG files is
very limited.
We chose the Opera browser for this study be-
couse some famous browsers does not support to
show SVG’s figures or no to show animation of SVG.
We animated the Judd illusion so that the tail and
arrowhead repeatedly rotated forward and backward
with a cycle 25 sec, as see in Figure 3.
There are three figures in the right side indicates
to show or not to show the figures on the right side re-
spectively. Figure 4 shows the figure when the bottom
of the check boxes is clicked.
Figure 3: The figure using the experiment.
Figure 4: The figure when the bottom of the check boxes is
clicked.
Thus, one can easily checks that one figure’s an-
imation gives effects to change the degree of optical
illusion of the other figures. The animation of this
fugures starts when one clicks on the areas of the
browser.
Despite the fact that both the main segment and
the dot were completely stationary, all five volunteers
who watched the animation responded that they per-
ceived the main segment to be moving horizontally.
With three figures displayed simultaneously, the
main segments seem to move even even when the cen-
tral dots were present, as shown in Figure 3.
When we increased the rotation speed (cycles of
5 sec), the effect of the illusion weakened. However,
such movement was barely perceived when the cen-
tral dot was omitted, as shown in Figure 5.
Figure 6 shows a case in which the main segments
are omitted, but the dots are displayed.
Interestingly, the “invisible” main segments
seemed to move. However, the orientation of the mo-
tion differed from what was expected from “Mori-
naga’s paradox of displacement” (Ninio, 2001, Fig.
13.1).
NEW OPTICAL ILLUSION BY ANIMATING JUDD ILLUSION USING SCALABLE VECTOR GRAPHICS
403
Figure 5: Three figures without dots in center.
Figure 6: Three figures without main segments.
5 APPLICATION TO OTHER
ILLUSIONS
Figure 7 shows the Fick Illusion(Robinson, 1972, Fig.
3.76), in which the two segments appear to have dif-
ferent length, although they are actually the same.
Figure 7: Fick Illusion.
A vertical segment was continuously moved from
left to right by using SVG’s animation function. We
concluded that the subjects could not perceive any
changes in the length of the line when the segment
was moving. We think that this is because the sub-
jects did not focus on more than two segments at the
same time.
6 CONCLUSIONS
When we animated a still image of the Judd illusion
with SVG, we found an unexpectednew animated op-
tical illusion. This method seems to have extremely
wide coverage because it is possible to animate most
optical illusions by changing their parameters.
This study is useful not only for providing a new
way of enjoying illusions, but also to help clarify the
mechanism responsiable for illusions from a different
perspective.
REFERENCES
Goto, T. and Tanaka, H., editors (2005). Handbook of the
Science of Illusion (in Japanese). University of Tokyo
Press, Tokyo.
Ninio, J. (2001). The Science of Illusions. Cornell Univer-
sity Press, London.
Processing.org (2010). Processing. http://processing.org/.
Robinson, J. O. (1972). The Psychology of Visual Illusion.
Dover Publications, New York.
W3C (2010a). Html5. http://www.w3.org/TR/html5/.
W3C (2010b). Scalable vector graphics (svg) 1.1 specifica-
tion. http://www.w3.org/TR/SVG11/intro.html.
VISAPP 2011 - International Conference on Computer Vision Theory and Applications
404