1. Introduction: First Ideas for Animation, September 2014

The Florence Logo is:

This does not give us a lot to work on other than it is the head of David as produced by Michelangelo. Apparently it was created to depict the underdog's win against all odds and was describing the people of Florence standing up against their governors and the state of Florence standing up against its surrounding states.

The statue of David was originally located outside the Palazzo Vechio thus the idea of focusing on the building for the animation. It was also the seat of government. Depicting David killing Goliath and chopping his head off needed modifying to avoid an X rating!

Starting scene of Palazzo Vechio from a distance.

The proposed storyboard initailly was:

  1. Opens with camera focused on lion above tower, rotating in the wind
  2. Pans down to the bell tower with bells ringing
  3. Pans down again until one-handed clock is centre stage
  4. Pans down again until the city crests are visible, pan backwards and forwards over these
  5. Pan down further to windows then left of main door
  6. Pan left to fountain. W instead of neptune?
  7. In the foreground small W are knocking off the tops of Gs with sling shots
  8. Pan right to door and statue of Hercules and Cacuss
  9. Pan left path door crest to head of David
  10. Fade into Logo

While the pan down was a good starting point the end seemed to be without humour and could be over long. In consequence it was eventually decided to go for a reenactment of the David and Goliath battle but without the gore and finish with that.

2. Palazzo Vechio

2.1 Crests (Coats of Arms)

The nine coats of arms represent:

  1. a red cross on a white background, the cross of the people representing the Florentine citizens
  2. a red iris flower (il giglio) on a white background, the symbol of Florence
  3. a shield divided in two, the left side white and the right side red, representing Florence's union with the nearby town of Fiesole in about 1010
  4. two gold keys, the crest of the church
  5. a blue shield with the words 'libertas' written in gold, representing the freedom of the citizens to rule their own city
  6. a red eagle on a white background, coat of arms donated by Pope Clement IV to the Florentines in the 13th century. The coat of arms with the red eagle on a white field which bind a green dragon symbolizes the Guelph Party. Famous painting of Lodovico degli Obizzi with the standard of Pope Clement IV. "That with the red eagle holding the green dragon between his talons, and the red lily over the eagle - is the Gonfalon of the Guelf party".
  7. a white iris flower on a red background, the first symbol of Florence used by the Ghibellines (the nobility who were initially in charge of the city)
  8. a blue background with gold lily flowers, donated by Charles I King of Naples
  9. a shield divided in two with gold lilies on the right and stripes on the left represents King Robert of Naples who helped protect the city during the 1300's

We have added the IW3C2 logo just for fun!

2.2 Useful URLs

                  http://www.florencewebguide.com/palazzo-vecchio.html
               

2.3 Main Entrance

The marble decorative plaque above the main entrance consists of the two main symbols of Florence: the lion and the lily flower.

At the center is a Christogram with the sun's rays circling the letters YHS with a cross above the H, a Latin monogram standing for Jesus Christ.

The Latin wording below refers to Jesus Christ and can be translated as 'King of Kings and Sir of all Sirs'.

This inscription goes back to the Florentine government of Savonarola, the religious zealot who saw Jesus as being the sole 'leader' of the republic (circa 1495).

2.4 The Arnolfo Tower

Named after the building's architect, this bell tower which juts out of the palazzo is 94 meters tall (over 300 feet) and can be seen from miles away.

Just above the tower is a bronze weather vane in the form of Marzocco, Florence's renowned lion.

Marzocco is holding a staff that is topped with a giglio flower.

The Marzocco weather vane with giglio at top

An area inside houses what is jokingly referred to as the 'alberghetto', literally 'small hotel'. This 'hotel' is really a jail cell and was used to hold prisoners waiting sentencing.

This bell tower has 3 different size bells, all with a different timbre of ring, used in the past to call Florentines for different occasions, each bell having a unique use.

2.5 Clock

The still functioning clock located on the front of the tower goes back to the 14th century. This is a clock with no minute hand, but just with marks along the clockface to indicate 15 and 30 minute intervals! The city's first public time-teller, the original clock was installed in 1353 (today you see a replacement dated about 1670).

2.6 Portrait

To the right of the main entrance in the lower corner of the palace is a profile portrait chiseled in the building's facade. This rough sketch in the stone is attributed to none other than Michelangelo.

3. Scene Development

The main emphasis initially was to get a realistic view of the building.

This was achieved but the file size is quite high due to the bricks. Several XSLT transformations have been used to:

  • Produce a random set of bricks per row
  • Define the file position of each brick
  • Sort bricks according to styling
  • Amalgamate all bricks of a section into a set of 15 paths of all bricks in each shape and colour

This has been usful in keeping the file size down but it is still too large. Although the bricks do correspond to the size of the actual bricks, it was decided that they had to be increased in size to get the file size down.

By mid-September 2014 the animation of the building was nearly complete consisting of six sections:

  • Focus on weather vane rotating in the wind
  • Move down to bells being rung
  • Move down to 1-handed clock
  • Stop to view the 10 crests
  • Move down to door, then back off to show complete building
  • Focus on the bottom two tiers of building with viewpoint moved to show the side of the building

There was also a side view. Although the bricks cover the whole building, the parts difficult to clad without a lot of effort have been left plain.

4. Final Animation

This documentation is to allow us to remember where we are! The action has been broken down into 14 separate scenes:

Description Number Time
scene01: Weather Vane Rotates 01 8.0
scene02: Bells Ring 02 5.0
scene03: Move Down To Clock 03 4.0
scene04: Move Down to Crests 04 5.0
scene05: Move to Door then Zoom Out to Full View 05 8.0
scene06: Move viewpoint to get side view, Ws appear 06 9.0
scene07: Ws and GOLIATH clash, 07 12.0
scene08: Ws Back Off 08 5.0
scene09: David Appears 09 5.0
scene10: Throws Stone 10 1.0
scene11: GOLIATH Defeated, Ws Cheer, David Picked Up 11 6.0
scene12: Ws Make Way for David to Pass 12 3.0
scene13: David Moves To Poster Turning Head 13 10.0
scene14: Ws Collapse, Zoom on to Logo 14 5.0
Freeze 2.0

Total time is 88 secs.

4.1 Bricks Development

To generate a random set of bricks, the actions required are:

  • Given the width and height of an area, define a sequence of Large, Medium and Small rows that fills the area plus some.
  • bricks.xsl in the directory generate_random_bricks in the directory bricks_dev achieves this. The width and sequence of rows are hand-coded into the file which contains random numbers for brick widths (actually pseudo random). File generated is bricks.svg
  • Modify the last few bricks in a row so that each row is the correct width.
  • For area a the transformations applied are:
    java -jar  C:/files/path_ology/library/saxon6.jar  -o  bricks_sort_out.xml  bricks_sorta.xml  bricks_sort.xsl
    java -jar  C:/files/path_ology/library/saxon6.jar  -o  new_bricks.xml  bricks_sort_out.xml  bricks_sort_out.xsl
    Apply transformation to paths generating new_bricks_out.xml
    java -jar  C:/files/path_ology/library/saxon6.jar  -o  mimimala.xml  new_bricks_out.xml  bricks_minimala.xsl
    
  • bricks_sort.xsl takes the sequence of rows of bricks and generates transformation for each brick
  • new_bricks has the use elements replaced by actual paths
  • The bricks are sorted depending on colour and then bricks_minimala.xsl amalgamates all bricks of a certain colour
  • End result is a set of six paths for each area of bricks.
X Y Z

SVG 3D Axes

The perspective transformation is defined by the parameters in the following diagram:

Rad is distance to viewpoint Vplane is distance from viewpoint to viewplane Y X Z Over Up Rad Vplane

Perspective Transformation