COMP4021 Lab 3 SVG Object Animation

Overview

In this lab, you will learn how to
- Create an SVG object with the software WebDraw
- Use SVG and JavaScript to animate your SVG creation
Two files (lab.svg and ding.wav) are given to you as the starting point
- An SVG program is created in lab.svg
- JavaScript in lab.svg is used to control the animation
- The animation will contain a sound effect ding.wav
The code is working in both Internet Explorer and Mozilla Firefox
However due to the differences in audio support special code is required when playing a sound file

First, you need to download the files (lab.svg and ding.wav) to your local hard disk
You need to use Internet Explorer or Mozilla Firefox to view the SVG content
- To use Firefox in CS lab 1 please go to the following folder and then start FirefoxPortable.exe
```
L:/apps/comp4021/Firefox
```
You will use the software WebDraw to create an SVG object, which is available in:
```
L:/apps/comp4021/WebDraw 1
```
If you need an SVG editor at home, you can download Inkscape here instead or from the official site here
If required, you can read the SVG specification here

WebDraw is an easy-to-use interface for creating SVG documents
Inkscape is an application similar to WebDraw: less user-friendly than WebDraw, but it's free and downloadable right from the Internet
In this lab we will try to stick with WebDraw first
You can draw any SVG object by a simple click-and-drag
You can also change any of the attributes of the object
For example, the following 'Smiley' is created using WebDraw:

Click to see image in original size
After you have created your object, the next step is to put the object into the given lab.svg
You should copy the appropriate SVG statements from the WebDraw source window

Click to see image in original size
These statements would then be pasted within the svg element inside lab.svg
You need to be careful to copy only the required part
You have to ensure that a group, with an id of smiley, should be used to enclose your SVG object, i.e.
```
<g id="smiley">
    ... your object's SVG statements here ...
</g>
```
For this particular lab, you need to tell the JavaScript the size of your SVG object
The size can be specified using two global variables, OBJECT_WIDTH and OBJECT_HEIGHT

Below is an example display of lab.svg after inserting the smiley in the right place:

Click to see image in original size
In lab.svg, we use setInterval to periodically update our WebDraw object
After the user clicks on the start button the move() function is called for every 0.05 second, i.e. 20 times per second
Some code is missing at the end of the move() function
The existing code updates the variables x, y and angle and your task is to apply the changes to the WebDraw object
To do this we have to use the setAttribute method of the object
First we produce the strings necessary to translate (change in x, y) and rotate (change in angle) with the variables translate and rotate respectively
As a reminder, translate(tx, [ty]) will move the element to tx and ty units along the x-axis and the y-axis respectively
On the other hand, rotate(angle, centre x, centre y) will rotate the element angle degrees around the point (centre x, centre y)
Then we update the transform attribute of our Webdraw object with the following:
```
object.setAttribute("transform", translate + rotate);
```
so that it will be drawn in a new position as well as a new orientation
Now you have created your first SVG animation!

You need to insert an audio tag under the svg tag of lab.svg
However, due to the differences in audio support between Internet Explorer and Firefox you need to create an audio tag for each type of the viewers:
- For Internet Explorer (i.e. Adobe SVG viewer), you need:
```
<a:audio id="ding_asv" xlink:href="ding.wav" begin="indefinite"/>
```
- For Firefox, you need:
```
<xhtml:audio id="ding" src="ding.wav" begin="indefinite"/>
```
In the code a special function playsnd() is given so that appropriate sound file is played in the corresponding browser
Then you can use the function to play the sound if the object hits the boundary
That means the sound is added in the if-blocks that check the x and y values
You can play the sound using the following code:
```
playsnd("ding")
```