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 ﬁgures efﬁciently if the ﬁgures have regular

shapes. Moreover, it is easy to animate some proper-

ties of ﬁgures 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, ﬁlter effects and template ob-

jects.

SVG drawings can be interactive and dy-

namic. Animations can be deﬁned 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

 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 ﬁgure and to

animate it smoothly.

• We can add to change the properties of the ﬁgures

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 ﬁgures 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 ﬁgures. When

one wants to animate the ﬁgures, one must draw the

ﬁgures on each frames. Moreover, the ﬁgures in Pro-

cessing is not the object, so one try to add the interac-

tivity to the ﬁgures, 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

Main Segment

Figure 2: Judd illusion with animation.

Program 1: Code of Animated Judd Illusion

<?xml version="1.0" encoding="UTF-8" ?>

xmlns:xlink="http://www.w3.org/1999/xlink"

height="100%" width="100%">

<defs>

<line x1="0" y1="0" x2="30"

line-cap="round" stroke-width="10"

stroke="black" >

<animateTransform

attributeName="transform"

type="rotate"

values="30;150;150;30;30"

keyTimes="0;0.4;0.5;0.9;1"

repeatCount="indefinite"

dur="25s" fill="freeze" />

</line>

</g>

</g>

</defs>

<line x1="0" y1="0" x2="200" y2="0"

line-cap="round" stroke-width="10"

stroke="black" />

<circle cx="100" cy="0" r="10"

fill="black"/>

</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 deﬁnes 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 deﬁnes the rotated animation of the

tail.

– Line 13 deﬁnes the head/tail rotation angle ﬁrst

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 deﬁned in line

16 and line 14 deﬁnes 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 ﬁnal ﬁgure.

– Lines 27–29 denotes the main segment.

– Lines 30–31 denotes the circle at the center.

– Line 32 speciﬁes the left tail to refer ones pre-

viously deﬁned.

– Lines 33–35 speciﬁes the right tail to shift the

ones previously deﬁned.

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 ﬁles is

very limited.

We chose the Opera browser for this study be-

couse some famous browsers does not support to

show SVG’s ﬁgures 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 ﬁgures in the right side indicates

to show or not to show the ﬁgures on the right side re-

spectively. Figure 4 shows the ﬁgure when the bottom

of the check boxes is clicked.

Figure 3: The ﬁgure using the experiment.

Figure 4: The ﬁgure when the bottom of the check boxes is

clicked.

Thus, one can easily checks that one ﬁgure’s an-

imation gives effects to change the degree of optical

illusion of the other ﬁgures. 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 ﬁve volunteers

who watched the animation responded that they per-

ceived the main segment to be moving horizontally.

With three ﬁgures 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 ﬁgures without dots in center.

Figure 6: Three ﬁgures 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 speciﬁca-

tion. http://www.w3.org/TR/SVG11/intro.html.

VISAPP 2011 - International Conference on Computer Vision Theory and Applications

404