Figure 20.1: WWW20 Logo
Music
South Indian veena and violin playing a pseudo Carnatic raga.
Animation
Looking at photographs of elephants being painted for a festival, the two things that came over were the rather crude tools used to paint the elephant and the poor canvas to paint on! No spray cans or paint brushes were used, just pieces of wood with crudely cut teeth. The elephant's skin has major crevices making it difficult to get a very even finished look. We thought we would use this as the starting point for the animation.
Figure 20.2: Elephant Skin
We used the Muybridge photographs of an elephant in motion as the basis for the elephant walk. The tricky part of the animation was the trunk due to the number of muscles avaliable. Our cut-down version consisted of 35 segments along the length of the trunk each of which could be transformed independently. A position for the trunk is then defined by a vector of 35 numbers. The first defines the rotation of the first segment. The second defines the rotation of the second relative to the first and so on.
Animating the trunk going up is then achieved by defining key vectors to animate between. The sequence actually used was:
0,0,-2,-2,-2,2,2,2,0,-2,-2,-2,-2,-2,1,1,1,1,1,3,3,3,3,3,14,14,14,14,14,14,14,14,16,16,16 0,0,-2,-2,-2,2,2,2,0,-2,-2,-2,-2,-2,0,0,2,2,2,5,5,5,5,5,14,14,14,14,14,14,14,14,16,16,16 0,0,-2,-2,-2,2,2,2,0,-2,-2,-2,-2,-2,0,0,3,3,3,8,8,8,8,8,14,14,14,14,14,14,14,14,16,16,16 0,0,-2,-2,-2,2,2,2,0,-2,-2,-2,-2,-2,0,0,3,3,3,4,4,4,4,4,10,10,10,10,10,10,10,10,12,12,12 0,0,-2,-2,-2,2,2,2,0,-2,-2,-2,-2,-2,0,0,-3,-3,-3,-4,-4,-4,-4,-4,10,10,10,10,10,10,10,10,12,12,12 0,0,-4,-4,-4,-2,-2,-2,-2,-2,-2,-2,-2,-2,0,0,-3,-3,-3,-4,-4,-4,-4,-4,10,10,10,10,10,10,10,10,12,12,12 0,0,-6,-6,-6,-4,-4,-4,-4,-4,-4,-4,-4,-4,-3,-3,-3,-3,-3,-4,-4,-4,-4,-4,8,8,8,8,8,8,8,8,8,8,8 0,0,-6,-6,-6,-4,-4,-4,-4,-4,-4,-4,-4,-4,-3,-3,-3,-3,-3,-4,-4,-4,-4,-4,4,4,4,4,4,4,4,4,4,4,4 0,0,-6,-6,-6,-4,-4,-4,-4,-4,-4,-4,-4,-4,-3,-3,-3,-3,-3,-4,-4,-4,-4,-4,0,0,0,0,0,0,0,0,0,0,0 0,0,-6,-6,-6,-4,-4,-4,-4,-4,-4,-4,-4,-4,-5,-5,-5,-5,-5,-5,-5,-5,-5,-5,-4,-4,-4,-4,-4,-4,-4,-4,-4,-4,-4 0,0,-6,-6,-6,-5,-5,-5,-5,-5,-5,-5,-5,-5,-6,-6,-6,-6,-6,-6,-5,-5,-5,-5,-4,-4,-4,-4,-4,-4,-4,-4,-4,-4,-4 0,0,-6,-6,-6,-6,-6,-6,-6,-6,-6,6,-6,-6,-7,-7,-7,-7,-7,-7,-6,-6,-6,-6,-4,-4,-4,-4,-4,-4,-4,-4,-4,-4,-4 -2,-2,-7,-7,-7,-7,-7,-7,-7,-7,-7,7,-7,-7,-8,-8,-8,-8,-8,-8,-7,-7,-7,-7,-5,-5,-5,-5,-5,-5,-5,-5,-5,-5,-5
Defining this in XML and applying an XSLT transformation generated the necessary SVG code. Figure 20.3 shows an alternative trunk animation. The main problem is making sure that the changes from one keyframe to the next are not too large.
Figure 20.3: Animated Trunk
The 13 separate animations used are shown below.Hitting each cyan circle shows you one of the animations.
Figure 20.4: Hyderabad Animations
To get some background to the animation we added a rendering of the Charinmar in Hyderabad.
