Documentation for Korean Animation

• 1. Introduction
• 2. Logo
• 3. Background
• 4. Gayageum Player
• 5. Samulnori Player
• 6. Musical Instruments
• 7. Butterfly
• 8. Ribbons
• 9. Final Fly Away
• 10. Scene Development
• 11. Timeline

1. Introduction

The basis for the animation was the script provided by the organisers setting out what they would like to see in the animation.

The main objects in the proposed animation were:

• Lady playing the Gayageum, Korean traditional musical instrument which has twelve strings
• Butterfly whose outline in flight is a W shape
• A typical Hanok Korean house which usually has features of the Changdeokgung Palace
• A typical Samulnori band that plays four different instruments:
  • Janggu Drum: stretched skins over a wooden base.
  • Buk Drum: more conventional shallow barrel-shaped drum, with a round wooden body that is covered on both ends with animal skin. Played with long mallet held downwards
  • Jing: a large gong made of brass, 14in upwards made of brass, circular markings. Cloth wrapped mallet with spherical head about 11in long and large 4in head. Face down it is like a tray with a vertical rim. Large ones come on stands. Ones played by marching bands are smaller with a handle
  • Kkwaenggwari: a small flat circular gong that makes a sound more like a cymbal and is struck by a wooden mallet. Seem to be held by strap across back
• Band members having long ribbons on hat that they manipulate rather like gymnasts. Suggest they form O and W shapes, not sure why
• Hanok house turns into logo with the butterfly outlines as roof Ws

Four Band Instruments

The plan was to have the band members as Ws based on the Rio volleyball players that have a height of 400 units.

On that scale, the sizes of the instruments are approximately:

• Janggu: 100 units diameter for end pieces and 130 units long. Inner wooden part is 80 units at ends with hour glass shape. Sticks about 80 units length. Two different sticks, played with hand near top and stick facing downwards. Rotating wrist causes stick to hit drum.
• Buk: 100 units in diameter although can be larger when sitting
• Jing: about 100 units when playing on the move. Much larger when seated is possible.
• Kkwaenggwari: about 50 units played by dancers/band members

2. Logo

The logo is currently defined as 675 by 675 although it may be changed to 750 by 750.

Logo, half normal size

3. Background

Partly due to the late start, the plan was to have a single background involving all the elements required for the animation. The focus initially was on the Gayageum player followed by the butterflies. Then to move to the band/dancers before converging on the hanok. The hanok needs to be based on the logo. Rather than just do O and W, if there are four in the band plus an extra kkwaenggwari player, it would be possible to have the ribbons spelling out WWW23 SEOUL 2014 etc. Decided to see what was feasible.

The red dotted line indicate the outline of the WWW2014 logo.

Proposed Background

Most of the ideas came from the Changdeokgung Palace modified to fit the logo. The roof, wall, grass and steps are very similar to those at the palace

Dimensions used were 1500 by 750 with the visible part being 750 by 750.

Plan was to have the Gayageum player bottom left and the band bottom right. The opening Gayageum player and the band will be zoomed in so that the only background will be the flat area in front of the hanok.

4. Gayageum Player

The Gayageum Player was modelled on this photo of an exhibit in a Seoul museum.

Gayageum Player

The outline was traced and somewhat simplified. It was decided that this would be a 2D scene with just the arms animated. At the request of the Seoul organisers, a more Asian face was later superimposed.

Gayageum Player

5. Samulnori Player

The Samulnori Players have a variety of costumes but members of the band tend to dress the same with bright primary colour sashes. The design of the band character is based on the W used in the Rio volleyball court suitably modified. The arms have been shortened to make it easier to play the drums! They still retain the overall W look. Initially they had hands but it was eventually decided they would have long sleeves covering their hands ;-). The hat eventually has a ribbon attached to it via an arm that rotates. The one here is enlarged somewhat to make it more obvious

Samulnori Player

6. Musical Instruments

6.1 Janggu

The Janggu is too complicated to be defined in 2D so it is a genuine 3D instrument. Only the front tension strings have been drawn.

Janggu

6.2 Buk

The Buk is also defined as a genuine 3D instrument. Again, only the front tension strings have been drawn.

Buk

6.3 Jing

The Jing is mainly 2D but has a 3D rim.

Jing

6.4 Kkwaenggwari

The Kkwaenggwari is basically a smaller version of the jing but usually held by a strap across the back.

Kkwaenggwari

7. Butterfly

The request was to have butterflies that flew from one part of the animation to another. The opportunity was taken to incorporate the IW3C2 logo, slightly distorted, into the definition of the butterfly. The butterfly has two wings each side that can rotate independently. So they do actually move at slightly different rotations.

Butterfly

8. Ribbons

Getting the ribbons to look realistic is quite a challenge. They are based on the elephant trunk used in the Hyderabad animation but having a lot more sections and more degrees of freedom in terms of rotation.

A position is defined by an XML file as follows:

<frame type="xy" title="flatw"><height>1200</height>
<d>-3</d><d>-3</d><d>3</d><d>3</d><d>-3</d><d>-3</d><d>3</d><d>3</d><d>-3</d><d>3</d>
<d>60</d><d>60</d><d>40</d><d>0</d><d>0</d><d>0</d><d>0</d><d>-50</d><d>-50</d><d>-40</d>
<d>0</d><d>0</d><d>0</d><d>50</d><d>50</d><d>40</d><d>0</d><d>0</d><d>0</d><d>-50</d>
<d>-50</d><d>-40</d><d>0</d><d>0</d><d>0</d><d>0</d><d>0</d><d>0</d><d>0</d><d>0</d>
</frame>

In the simplest definition, the ribbon position is defined by giving the length, 1200 units in this case, divided into 40 sections of 30 units each.

In this case, the rotations are defined as being in the X-Y plane, that is the Z-coordinate remains the same throughout. Each section sits vertically upwards on top of the previous one unless a rotation is applied to it. In the example above, the ribbon is perturbed left and right in a wavy motion for the first 10 steps. It is then rotated 160 degrees over the next three intervals and continues at this angle for another 4 intervals (making the first stroke of a W). It is then rotated back by 140 degrees to make the second stroke and so on until the eventtual W shape is generated.

Similar definitions are created for 2014Seoul which gives the building blocks for creating the ribbon patterns. The positions can also be defined in the X-Z plane but with their individual Y positions specified as well. This allow the ribbon to move in all 3 dimensions between the keyframes specified. By adding intermediate ribbon like positions, the basic definition of the paths of the ribbons are established.

The actual conversion to SVG vectors is quite expensive as effectively the last section has 40 transformations applied to it and its starting position is dependent on the previous 39 sections. So a 3D matrix has to be accumulated for each section and applied to that particular section. It is then the starting point for the next sections.. The actual animation is not expensive but the definition of the sections making up the ribbon is.

The added complication is that the starting point is also rotating as the attachment link to the hat rotates!

Ribbon

9. Final Fly Away

It proved difficult getting the ribbon to look like a butterfly to do the final fly way to the roof of the hanuk. In consequence, it was decided to start with a ribbon-like butterfly and work backwards and forwards from that position.

First the original outline of the butterfly was turned into two curves that represented the boundaries of the ribbon.

Butterfly inner and outer boundaries

This can then be turned into a ribbon.

Ribbon Outline in shape of butterfly

All we had to do then was to produce some intermediate frames showing how the butterfly can be arrived at from the intermediate frames.

Intermediate frames

The final problem was that we have a ribbon butterfly and we need it to flap its wings so it was necessary to split the butterfly into several parts.

Butterfly in 3 parts

The butterfly then flies leftwards, stopping to turn into the hanuk decoration. The inner part of the butterfly gets smaller until it is completely filled in. The outer part animates into the roof decoration.

Butterfly into decoration

10. Scene Development

The complete animation consists of a set of scenes:

• scene01: Gayageum Player and Butterflies
• scene02: Butterflies over the hanuk house
• scene03: Samulnori Band Playing
• scene03bf: Butterflies
• scene04: Letter Ribbons
• scene05: Ribbon Butterflie
• scene06: Ribbon Butterflies fly away
• scene07: Ribbon Butterflies fill in and change to hanuk roof decoration

Each scene is reasonably independent although their timings can overlap. For example the samulnori band continues to play throughout the remaining scenes.

The basic file structure is as follows:

• korea_full
  • w00
    • w00.svg
  • w20
    • w20.svg
  • w21
    • w21.svg
  • w22
    • w22.svg
  • w23
    • w23.svg
  • w99
    • w99.svg
  • full_merge.bat
  • play.svg etc
  • w23dev
    • koreapathology
      • defs.xml
      • add_paths.xsl
      • def_perspective_scenes.xsl
      • animate_scenes.xsl
    • scene01
      • scene01_butterfly.svg
      • scene01.bat
      • merge.bat
      • scene_animated01_butterfly.svg
      • scene_animated01_lady.svg
      • scene_animated01.svg
    • scene02
    • scene03
    • scene03_bf
    • scene04
    • scene05
    • scene06
    • scene07
    • merge.bat
    • merge.xsl
    • anims.xml
    • play.svg
    • w23.svg

The animations for the IW3C2 Opening, the previous 3 years and the credits are contained in the directories w00, w20, w21, w22, w99 respectively. The current year is in the directory w23 which contains w23.svg generated by the merge.bat in the directory w23_dev. The full_merge.bat in directory korea_full generates all the variants of the opening ceremony animation under the control of the file anims.xml (play.svg etc).

merge.bat in directory w23_dev uses merge.xsl to generate the complete w23.svg animation in the local directory and in korea_full's w23 directory. merge.xsl is quite a crucial transformation as it defines the final background, the overall structure, the final logo, and the various zoom and pan animations over the background scene. It also decides when certain objects no longer need to be displayed. Basically it just includes all the paths and animation commands from the individual scenes but there are also some adjustments for each scene to position them correctly against the background.

scene01 is a merge of the lady and the butterflies. The lady is defined directly in SVG against the background as scene_animated01_lady.svg. The butterflies are defined using the local pathology as scene01_butterfly.svg which creates scene_animated01_butterfly.svg. These two files are merged to create scene_animated01.svg .

scene02 is a straightforward use of the local pathology defining scene02.svg that generates scene_animated02.svg .

scene03 is a straightforward use of the local pathology where scene03.svg generates scene_animated03.svg . However, to ease the definition, the individual musicians are created in separate files scene03_buk, scene03_janggu, scene03_jing, and scene03_kk. These are hand edited together to create the complete band with two different positions for scene03_kk. Need to be careful when updating any individual part of the animation.

scene03bf is a straightforward use of the local pathology where scene03.svg generates the butterflies as scene_animated03.svg . The reason for defining scene03 in two parts is the different timings of the band playing and the butterflies moving.

scene04 has each of the five ribbons defined independently as a straightforward use of the local pathology where the input to pathology is created from the individual ribbons defined in the files ribbon_s.xml etc. Each generates a file ribbon.svg and these five files are merged using merge.xsl to create a file ribbon.svg in the scene04 directory. The set of ribbons then use the local pathology to create the five animated ribbons. The file rebuild.bat does the complete build of the animation from the five ribbon definitions. Alternatively the individual ribbons can be defined in the individual scene04 directories and meged using merge.bat. It is probably safer to do the complete rebuild each time changes are made. Note that all that is defined in scene04 are hats and ribbons. The band is still playing and visible from scene03.

scene05 is a straightforward use of the local pathology where butterflies.svg generates scene_animated05.svg . Nine separate key frames of a butterfly ribbon are defined as described above. The three animated ribbons are defined from the same nine key frames adjusted in terms of position.

scene06 is a straightforward use of the local pathology where butterflies.svg generates scene_animated06.svg . The file butterflies.svg has the same butterfly used in scene05.svg starting at its final position but now split into three parts so that its wings can flap. The same butterfly definition is used for all three flapping butterflies.

scene07 is hand generated starting at the final position of scene06 but with the inner and outer parts of each butterfly now defined as separate parts rather than the three separate ribbons used in scene06. The first animation reduces the inner definition to almost nothing effectively filling in the curved outer boundary. There is then a quick change to just an outer boundary followed by an animation of that outer butterfly to the hanuk decoration. The hanuk decoration has had its small number of curves split appropriately so that the number of curves in the butterfly are the same as those in the hanuk decoration and in the appropriate positions to give a smooth transition.

Thus to regenerate the whole animation from scratch requires the following:

korea_full/w23dev/scene01/scene01.bat             creates butterfly animation and merges lady animation
korea_full/w23dev/scene02/scene02.bat
korea_full/w23dev/scene03/scene03.bat
korea_full/w23dev/scene03bf/scene03.bat
korea_full/w23dev/scene04/rebuild.bat
korea_full/w23dev/scene05/butterflies.bat
korea_full/w23dev/scene06/butterflies.bat
korea_full/w23dev/scene01/scene_animated07.svg    hand edit
korea_full/w23dev/merge.bat
korea_full/full_merge.bat

11. Timeline

Seoul Timeline: Each section sets ID in 0.1s zero change. So sss23.end is the start of scene01. w23strt01.end is the start of scene02 etc. Total time is 66.5s.

The timings for the complete opening session are: