-- 2 --
The final version of the Madrid Logo was given to us in the summer of 2008. In the lower left are the images of Don Quixote and Sancho Panza modelled on the picture by Picasso. Almost immediately the decision was made to base the animation on one of the Don Quixote adventures. After reading the 980 pages of Cervantes book Don Quixote we settled on the well-known story in Chaper 8: Regarding the good fortune of the valorous Don Quixote in the fearful and never imagined adventure of the windmills, along with other events worthy of joyful rememberance. The story is essentially that Don Quixote and his squire Sancho Panza come upon a countryside containing 30 to 40 windmills. Don Quixote says thirty or more enormous giants with whom I intend to do battle. Sancho Panza says What giants? They are windmills; their arms are the sails which turn in the wind. Don Quixote spurred his horse Rocinante crying Flee not, cowards and base creatures for it is a single knight that attacks you. At that point, a gust of wind starts the sails moving as he charged full gallop towards the first windmill. He thrust his lance into the sail; it broke into pieces and Don Quixote and horse were picked up. Meanwhile Sancho Panza hurried to help as fast as his donkey could manage. Don Quixote is convinced that Freston the Wise has turned the giants into windmills to deprive him of a great victory.
This was the basis for the animation. The intention early on was to have both the horse and Don Quixote picked up by the windmill and for Sancho Panza to replace the broken lance by a tree branch as in the story but it was eventually cut back.
Attempts to animate the Picasso drawings of Don Quixote and Sancho Panza were not very realistic partly due to their anatomy so the decision was to start with a realistic view of Don Quixote and Sancho Panza and then switch at some stage to the Picasso images. This led to the eventual storyboard.
The Madrid Animation consists of eight scenes where the first two are only split because of the limitations of the Saxon implementation to handle the first scene:
Most of the scenes have separate timelines for the windmills, DQ and SP where they all appear. Each scene completes by returning to display:none while the next scene changes to display:block. This ensures that the amount of information to be drawn at each scene is kept to a minimum. For example, only two windmills are needed once the initial scenes 1 and 2 are complete. The separation of scene 7 and scene 8 allows the switch from the human-like SP and DQ to the stylised versions in the logo.
-- 3 --
The scene is based on a photograph of a Spanish mountain scene (Fig 2.2) that was transformed by Vector Eye (Fig 2.3). This scene is the origin for the range of colours used. The basis for the mountain range in the background was a seperate photograph (Fig 2.4). It was difficult to get the right 3D effect for both the mountains and the plain from a viewpoint above the plain. In the end we cheated by having the mountains in a vertical backdrop and the plain is horizontal. The plain extends out further to the left and right as you approach the camera to allow the camera movements in the initial scene. The cyan guide squares delimit the outer area where the action takes place and the pink ones the zoomed in area.
Fig 2.2: La Mancha Plain
Fig 2.3: Top Left Transformed by Vector Eye and Simplified
-- 4 --
Fig 2.4: La Mancha Mountain Ridge with Windmills; Basis for Mountain Background
Initial tests established a few parameters:
The basis for the windmill was the photograph of a La Mancha windmill (Fig 2.5).
Fig 2.5: La Mancha Windmills
The number of windmills we could use was limited by the technology. How many windmills could an SVG implementation rotate smoothly? How large a windmill set could the Saxon XSLT implementation handle in terms of the conversion from 3D to 2D. The plan was to use the 3D perspective system developed for the Edinburgh logo but modified to have the horizontal plain as well as the vertical mountain background. We eventually settled on 16. We could probably have rendered more and smoothly animated using the Adobe SVG plugin but the Opera 9.5 implementation was beginning to creek when we got to 16 windmills. As we are doing camera movements at the same time, it means that all the background areas are being animated as well.
Fig 2.6 shows the locations of the windmills. The two that will be seen after the zoom in are the two inside the four blue squares. The windmills have been carefully positioned so that the background windmills do move in front of each other as the viewpoint changes showing that this is a true 3D perspective. Effectively we have implemented Max Fleischer's Rotograph (patent 2054414: 15 September 1936) but with many more Z positions. The windmills are divided into three classes, near, medium and far. The medium and far are smaller in size to emphasis the perspective. Only the near windmills have shadows on the vertical edges.
-- 5 --
The basic background scene was finalised around the middle of October 2008 and the initial version of scenes 1 and 2 were completed by November 2008.
Fig 2.6: Plan View of Windmills
-- 6 --
A path was added into the scene that started near right and went in front of the main windmill which had the brown area (to be the mud bath) to its left (Fig 2.6 and Fig 2.7).
Fig 2.7: Zoomed In View with Road and Mud Bath
The windmill is quite straightforward consisting of six areas. The first is the main body which has two shadows left and right. The brown roof and four windows comprise a single area. The sails are made up of two parts. The four sails make up one and the central stays to which they are fixed are the other. The sails have 12 positions and animation occurs between them. This gives a slight wobble to the movement which is quite realistic for such a structure. The orange circle gives the origin for the objects.
-- 7 --
Fig 2.8: Basis for Windmill and Giant
-- 8 --
The basic file defining the animation consists of:
<scenes><timing>16s</timing>
<objectdst>
<pos>
<origin>
<dx>0</dx><dy>0</dy><dz>-300</dz>
</origin>
<roty>0</roty>
<sc>1</sc>
</pos>
<object><class>w18mt01</class><id>w18mt01</id></object>
<object><class>w18mt02</class><id>w18mt02</id></object>
.....
</objectdst>
<objectbg>
<pos>
<origin><dx>0</dx><dy>0</dy><dz>0</dz></origin>
<roty>0</roty>
<sc>1</sc>
</pos>
<object><class>w18fg01</class><id>w18fg01</id></object>
<object><class>w18fg02</class><id>w18fg02</id></object>
....
</objectbg>
<scene id="w18st1">
<perspective>
<over>-20</over><up>-11</up><rad>1600</rad><pp>1800</pp>
<newx>0</newx><newy>0</newy><scale>1</scale><spline>constant</spline>
</perspective>
<object><class>w18windmill1</class><id>w18windmill1</id>
<pos>
<origin><dx>-135</dx><dy>-64</dy><dz>90</dz>
</origin>
<roty>-45</roty><sc>1</sc>
</pos>
</object>
<object><class>w18windmill1l</class><id>w18windmill1l</id>...</object>
<object><class>w18windmill1r</class><id>w18windmill1r</id>..</object>
<object><class>w18windmill2</class><id>w18windmill2</id>..</object>
<object><class>w18windmill3</class><id>w18windmill3p3</id>..</object>
<object><class>w18windmill4</class><id>w18windmill4p3</id>..</object>
<object><class>w18windmill1</class><id>w18windmill1</id>
<pos>
<origin><dx>136.2</dx><dy>-64</dy><dz>-54.3</dz>
</origin>
<roty>-45</roty><sc>1</sc></pos>
</object>
<object><class>w18windmill1l</class><id>w18windmill1l</id>..</object>
<object><class>w18windmill1r</class><id>w18windmill1r</id>..</object>
<object><class>w18windmill2</class><id>w18windmill2</id>..</object>
<object><class>w18windmill3</class><id>w18windmill3p4</id>..</pos></object>
<object><class>w18windmill4</class><id>w18windmill4p4</id>..</object>
.....
</scene>
</scenes>
<defs>
<path id="w18mt01" d="M-2000,-494v494h4000v-494z"/>
<path id="w18mt02" d="M2000,-57C966,-67 933,-67 900,-57...Z"/>
...
<path id="w18fg01" d="M-2000,-300h4000v1700h-2600l-1400,-700Z"/>
<path id="w18fg02" d="M-950,-270C-815,-255,-760,-280,-625,-265..Z"/>
...
<path id="w18windmill1" d="M-25,60C-8.5,65,8.3,65,25,60..Z"/>
<path id="w18windmill1r" d="M25,60C25,60,25,20,25,20C..Z"/>
<path id="w18windmill1l" d="M-25,60C-25,60,-25,20,-25,20..Z"/>
<path id="w18windmill2" d="M25,0C8.5,-5,-8.2,-5,-25,0..Z"/>
<path id="w18windmill3p1" d="M1.3,1.3L2.5,0L32.5,30L30,32.5.."/>
<path id="w18windmill4p1" d="M5,5L10,0L15,5L5,15L0,10L5,5ZM10,10.."/>
<path id="w18windmill3p2" d="M0.5,1.7L2.2,1.3L13.2,42.2L9.7,43.2..."/>
<path id="w18windmill4p2" d="M1.8,6.8L8.7,5L10.5,11.8L-3.2,15.5L-5,8.7L1.8,6.8ZM3.7,13.7.."/>
</defs>
-- 9 --
The processes applied to this file are:
The first two transformations turn the path definitions into XML, the third adds a Z-value. The 2D view is obtained from the 3D scene using the parameters above. The result is turned back into SVG. Most of these are standard Path_ology library functions apart from def_perspective_scenes which has been modified to add the background mountains and foreground plain. Scene 1 and Scene 2 each define 12 scenes which are added together and the result animated.
All that changes during Scenes 1 and 2 are the orientations of the windmills through two cycles and the position of the viewpoint, where it is pointing and the degree of zoom. The main actions are:
| Scene | Over | Up | Rad | PP | Scale |
|---|---|---|---|---|---|
| 1 | -20 | -11 | 1600 | 1800 | 1 |
| 2 | -20 | -11.3 | 1600 | 1800 | 1 |
| 3 | -20 | -12.2 | 1600 | 1800 | 1 |
| 4 | -20 | -14.2 | 1600 | 1800 | 1 |
| 5 | -20 | -16.7 | 1600 | 1800 | 1 |
| 6 | -20 | -18.7 | 1600 | 1800 | 1 |
| 7 | -20 | -19.8 | 1600 | 1800 | 1 |
| 8 | -20 | -20 | 1600 | 1800 | 1 |
| 9 | -20 | -20 | 1600 | 1800 | 1 |
| 10 | -20 | -20 | 1600 | 1800 | 1 |
| 11 | -19.6 | -20 | 1600 | 1800 | 1 |
| 12 | -18.3 | -20 | 1600 | 1800 | 1 |
| 13 | -15.2 | -20 | 1600 | 1800 | 1 |
| 14 | -10 | -20 | 1600 | 1800 | 1 |
| 15 | -4.7 | -20 | 1600 | 1800 | 1 |
| 16 | -1.7 | -20 | 1600 | 1800 | 1 |
| 17 | -0,4 | -20 | 1600 | 1800 | 1 |
| 18 | 0 | -20 | 1600 | 1800 | 1 |
| 19 | 0 | -20 | 1600 | 1800 | 1 |
| 20 | 0 | -20 | 1600 | 1800 | 1.05 |
| 21 | 0 | -20 | 1600 | 1800 | 1.24 |
| 22 | 0 | -20 | 1600 | 1800 | 1.57 |
| 23 | 0 | -20 | 1600 | 1800 | 1.75 |
| 24 | 0 | -20 | 1600 | 1800 | 1.8 |
The animation is straightforward but we have 95 paths animated and some of the background paths are reasonably complex. Saxon blows up with Heap Overflow if we attempt to animate all 24 frames in one go. Splitting into two is not a big deal but complicates the overall architecture. The animation was completed by the end of December 2008 apart from getting the timing correct with the music. The only problem is that the speed of the windmill turning dictates the timing of the next few scenes as well otherwise the windmill rotation will change. So any change of timing requires Scenes 1 to 4 all to be updated.
The solution is to fair in and out via the table above rather than use the facilities in SVG.
Once the opening two scenes are complete, the background becomes static in terms of viewport and its orientation except where a zoom in occurs and only the foreground animates.
-- 9a --
Fig 2.9: Fairing Up, Over and Scale
-- 10 --
In some ways this is quite a simple scene in that Sancho Panza and Don Quixote just ride into view on their mounts. But it requires:
As the overall aim is for DQ and SP to arrive together, the scene is generated backwards. The main characters start from the final position and walk backwards until the initial position is established. This would be extremely tedious to animate so an XSLT transformation generates the scene definitions from which another XSLT transformation generates the animation thus exhibiting the power of XSLT.
The horse walk cycle is a realistic animation starting from a set of 12 frames that give the positions of the legs and body during a typical walk cycle. A harness was set up that made it relatively easy to construct the body and leg positions. As the motion is symmetric, only one front leg and one back leg needs to be animated. The other leg is the same but 6 frames later.
Fig 3.3: Horse and DQ Walking On
-- 11 --
The animation of Don Quixote is quite subtle but probably not too evident unless you zoom in on the animation. We have attempted to produce a realistic image of a knight in armour with the face corresponding to one of the early Spanish pictures depicting DQ with beard. The fact that he is constrained by quite heavy metallic armour means that his movements are much more constrained than the skier in the Banff animation. Limbs basically rotate as a whole. But the sun glints on the armour making it necessary to give a realistic view of armour in sunlight.
Fig 3.4 shows the limbs. DQ is centred on where he attaches to the saddle. Arms and legs can rotate about their joints. Note the IW3C2 shield!
-- 12 --
Fig 3.5 shows some individual positions. New keyframes were established either by rotating joints or by rotating/skewing the body.
Fig 3.6 shows the detail of the head with the names of the individual parts.
-- 13 --
The complete set of parts for DQ are:
-- 14 --
The donkey animation is quite crude. The body is fairly static with the four legs moving. It is a 12 frame cycle similar to the horse. The stomach of the donkey expands and contracts. The tail and ears move.
-- 15 --
Probably the least important of the four characters. He is very simply drawn (doesn't even have a face). His major activity is waking up to see if DQ is really pointing at a giant. He spends most of the time soporific!
Fig 3.8: Sancho Panza and Donkey
Fig 3.9: Sancho Panza and Donkey
Almost nothing to say. The two main windmills continue to rotate at the same speed for another half cycle.
-- 16 --
Horses in particular look unrealistic if left with their feet in the air. This scene is in two separate parts. The first does no more than move the horse and donkey legs to the ground so that they are balanced on all four legs. As this is done one leg at a time, it takes a while.
The second part sees the wind die down and the windmills stop. They then turn into giants. DQ points this out to SP who wakes up and looks. By this time, the Giants have reverted to windmills so SP goes back to sleep ready to amble off.
DQ meanwhile moves his lance down ready. By the time SP has finished speaking, the wind has died once more and the windmills revert to Giant. DQ gets ready to charge.
The windmill sails morph into the arms of the giant; the roof and windows morph into the hat and face; the side shadows are rounded out to give the body shape. Additional sail positions are defined in between the basic set of 12 to allow the windmills to gradually slow down. These are at 324, 342 and 354 degrees from the first position.
-- 17 --
Fig 4.2 shows the four additional frames of the giant as he rotates colckwise and anticlockwisw about one foot.
Appendix 1 lists the windmill/giant keyframes throughtout Scene 4.
-- 18 --
Fig 4.3 shows the DQ pointing motion after they have come to a stop and the giant appears. The lower frames show the prepare to charge frames prior to the gallop.
-- 19 --
The charge takes SP and DQ with their mounts to the base of the windmill while the windmill is believed to be a giant by DQ. SP has already ambled off and needs to arrive at the windmill just as DQ exits from the windmill. Thus SP needs to consist of a fast walk sequence that starts earlier and finishes later than the horse gallop. DQ needs to arrive at the windmill just as a blade is passing. As before the solution is to start at the windmill and gallop backwards. The point at which the gallop reaches is then the origin for the backwards walk on. So gallop starts at (-135,90) and goes backwards 5.5 per frame with 1.25% increase in size per frame at an angle of 50 degrees. The distance forward of the horse when all four feet off the ground is kept shorter than a normal race horse value due to the weight of the armour!
The horse gallop sequence was modelled on a 15-frame cycle produced by Muybridge (Fig 5.2).
Fig 5.2: Muybridge: Complete Cycle
Frame 1 has the horse pushing off from its leading front leg. Frames 2 to 4 have all four feet off the ground. Frames 5 and 6 have support from the non-lead back leg. Frames 7 and 8 have support from both back legs. Frames 9 and 10 have support from lead back leg and non-lead front leg. Frames 11 and 12 have the weight on the non-lead front leg. Frames 13 to 15 have the weight only on the non-lead front leg.
-- 20 --
-- 21 --
Scene 6 is quite straightforward. DQ tries to stay on windmill as it traverses but comes off just as he returns to ground. Lance gets broken as DQ hits the windmill.
Fig 6.1: Don Quixote and the Windmill
-- 22 --
Again quite straightforward with participants taking various routes into the mud (fig 7.2). The mud was modelled on a photograph of an object being dropped into milk. Only the back of the droplet is shown because it was too cluttered (Fig 7.1). It takes 16 frames to deposit the participants in the mud and do the mud droplets.
-- 23 --
Scene 8 is primarily there to move from the realistic image of DQ and SP to the Picasso version. Several attempts were made to generate mud falling off the characters without much success. Trying to get DQ and SP to clamber out proved difficult because of the number of paths in the characters that needed to be animated plus the anthropology of the characters. Initially, the same technique of adding structure was used as with the charcoal drawing for Beijing. Effectively islands were added on the surface of the characters based on the original paths. This made a kind of Michelin man that was not very realistic.
The final method used was to create a new path inside and outside each character. Each area between the outer and inner paths was then animated to morph into a drop and then to splat on the surface. The timing of each mud drop being released is carefully calculated so that it happens after the part of the character is out of the mud. Six variants of mud descending in terms of horizontal movement are randomly used per mud drop. This gives a reasonably realistic effect.
Fig 8.1 shows the original outline in grey and the outer and inner curves in blue and red. Three of the mud drops are shown descending. The cubic tool is shown that was used to trace around the curves. You position the control points for each cubic reading off the results each time. It took about 2 days to generate the curves and 5 minutes to create the mud descending! Probably the most complicated scene in terms of parallel animation with 24 pieces of mud on the lance, 114 on DQ and 82 on SP. Each descends at a different time with a different distance to drop.
-- 24 --
The process of adding the synchronised soundtrack is as follows:
Final timings were:
Size of Madrid section is 3.89 Mbytes (2.57 Mbytes for soundtrack). Complete Opening is 6.52 Mbytes (9.9 Mbytes soundtrack). Compressed, the animation decreases to 1.58 Mbytes.
-- 25 --
| Scene | Angle | Position Left Windmill |
Time to next frame |
Sancho Panza | Don Quixote |
|---|---|---|---|---|---|
| Scene 1/2 Windmills (18.97secs) | |||||
| 1-24 | 60 (30) 750 | 3-12,1-12,1-2 | 0.825s | ||
| Scene 3 Walk On(4.95 secs) | |||||
| 1-7 | 30 (30) 210 | 2,3,4,5,6,7,8 | 0.824s | ||
| Scene 4a Stopping (4.12secs) | |||||
| 1 | 210 | 8 | 0.824s | ||
| 2 | 240 | 9 | 0.824s | ||
| 3 | 270 | 10 | 0.824s | ||
| 4 | 1044 (324) | p324 | 0.824s | ||
| 5 | 1062 (342) | p342 | 0.824s | ||
| 6 | 360 | p1 | 0.824s | ||
| Scene 4b To/From Giant (4.72secs); SP 1.57s for middle third | |||||
| 1 to 10 10 to 19 19 to 23 |
360 | p1,giant,i4,i8,i4,giant,c4,c8,c4,giant giant,p1,p354,p342,p324,p11,p324,p342,p354,p1 p1,i8,giant,c8,giant |
15 frames that do wake up and sleep. Starts 9/22 way through and finishes 18/22 way through. Starts walking off immediately. Awake while lance descends | Frames 1 to 18 raises and lowers arm; 10 to 18 lowers lance; 19 to 23 gets ready to charge | |
| Scene 5 Gallop (5.46 secs); SP 10.32s starting from 4b end for SP | |||||
| 1-16 | 0, 30, 60 at end | giant,c4,c8,c4,giant c4,c8,c4,giant c4,c8,c4,giant p1,p2,p3 |
0.364s | ||
| Scene 6 Rotate (4 secs) SP starts 0.86s early finishes 4s late ie 10.32s | |||||
| 1-11 | 60 (30) 360, 30 | p3-p12,p1 | 0.4s | ||
| Scene 7 Into the water (4.6 secs) | |||||
| 1-16 | 1.33 cycles | p1-p12,p1-p4 | |||
| Scene 8 Arise, drop mud, logo arrives | |||||
-- 26 --
| Directory | Sub Directory |
Main File |
Transformation | Comment | Final Size (Kbytes) |
|---|---|---|---|---|---|
| scene1_and_2_windmills | scene1_windmills.svg scene2_windmills.svg |
scene12.bat | Standard perspective view using path_ology except merge.xsl merges the two scenes into one This file gives the definitive path definitions for the mountains, plain, and windmills |
1269 | |
| scene3_dq_sp_arrive | donkeysp | donkeystart.svg | donkeystart.bat | Subdirectory sp_keyframes defines the 12 frames of the sleeping SP. He just moves backwards and forwards almost unseen. The tools directory defines the scenes for the walk on. donkey_start_pos.xml defines the 48 frames of the donkey and SP walking on BACKWARDS. Starts at (179.2, 370.4) and does 4 12-frame walk cycles backwards. The distance travelled is 3.2 for each frame at an angle of 50 degrees. Perspective accentuated by a 0.1% increase in size for each frame moved backwards. Finally the scenes are reversed with donkeywalk1 to 12 and spasleep1 to 12 being displayed | 176 |
| scene3_dq_sp_arrive | horsedq | walkstart.svg | walkstart.bat | Subdirectory dq_keyframes defines the 12 frames of the DQ walk on. DQ just moves backwards and forwards almost unseen. The tools directory defines the scenes for the walk on. horse_walk_pos.xml defines the 48 frames of the horse and DQ walking on BACKWARDS. Starts at (202.6, 373.3) and does 4 12-frame walk cycles backwards. The distance travelled is 5.5 for each frame at an angle of 50 degrees. Perspective accentuated by a 0.1% increase in size for each frame moved backwards. Finally the scenes are reversed with horse and DQ parts being displayed | 394 |
| scene3_dq_sp_arrive | windmills | windmills.svg | windmills.bat | A half cycle continuing at the same speed as scenes 1 and 2. | 46 |
| scene4 | windmills | windmills.svg to_and_from_giant.svg |
windmills.bat to_and_from_giant.bat |
Pretty straightforward changes to and from windmills. Only complication is that the stroke and fill properties need to be changed in time with the changes from windmill to giant and vice versa | 42 185 |
| scene4 | sp | spstop.svg to_and_from_giant.svg |
spstop.bat to_and_from_giant.bat |
See chapter 4 above | 29 29 |
| scene4 | dq | dqstop.svg to_and_from_giant.svg |
dqstop.bat to_and_from_giant.bat |
See chapter 4 above | 29 202 |
| scene5 | windmills | giant_then_windmill.svg | giant_then_windmill.bat | Left giant moves anticlockwise while the right one moves clockwise | 135 |
| scene5 | sp | donkey.svg | donkey.bat | This is a 108 frame cycle (9 complete walk cycles) using the standard walk-on walk. Process was identical to the walk-on sequence. The origin in this case was (-155,90), the increment 3.6 per frame and the size change 0.9% per frame | 372 |
| scene5 | dq | gallop.svg | gallop.bat | This is a 75 frame cycle (5 complete 15-frame gallop cycles). Process was identical to the walk-on sequence. The origin in this case was (-135,90), the increment 5.5 per frame and the size change 1.25% per frame | 586 |
-- 27 --
| Directory | Sub Directory |
Main File |
Transformation | Comment | Final Size (Kbytes) |
|---|---|---|---|---|---|
| scene6 | dq | scene6.svg | scene6.bat | 12 frame cycle, windmill rotates once with DQ attached | 111 |
| scene7 | dqsp | scene7.svg | scene7.bat | 16 frames depositing the participants in the mud | 327 |
| scene8 | dq | addmud.svg | mud.bat | Just generates DQ and SP rising with mud falling over. Rest of scene is defined by the consolidation phase | 178 |
| madrid_opening_closing | opening_template.svg | merge.bat | Creates madrid_opening_only.svg which is the final version of the opening sequence for Madrid. This gets dropped into the complete opening sequence. All timings for individual scenes are defined by merge.xsl. It ensures that windmills continue to rotate at same speed between scenes and ensures SP arrives at windmill on time. | 3888 |
