Start by creating an HTML page, with the jQuery and Raphaël libraries, as we have before. We will be creating two SVG images on this page…

Happy Face

On the first of the SVG/paper objects, draw a happy face: head, two eyes, and a smile. The smile should be a path with the Q path command (a Bézier curve). It should look something like this:

We can now use this guy to do some animation…

Raphaël Animations

Add two <button>s below the happy face: “Big eyes” and “Frown”.

Big Eyes

When the “Big eyes” button is clicked, the happy face's eyes should get bigger. You will have to apply the animation to each eye separately (but they should appear to happen at the same time).

To animate a size increase, you will have to give the 'transform' attribute a value indicating that it should scale. For example, 's1.5' indicates a (final) size of 150% of the original.

Frown/Smile

When the “Frown” button is clicked, the mouth should rotate 180° (as an animation) so it appears upside down. When the button is clicked again, it should rotate another 180° and look like a smile again, and so on.

To do this, you'll need to use a variable to keep track of how much to rotate: the first time should be 180, then 360, 540, 720, … (increasing by 180 each time). Create a variable outside the callback function named something like angle and set it to zero initially. Each time the button callback runs, it should increase this variable by 180 (angle = angle + 180) and animate the rotation to the new angle value.

Like with scaling, you will want to animate the 'transform' attribute with an r command. You can build the transformation string like this:

{'transform': 'r'+angle}

[If the angle variable is changing correctly, that will create strings 'r180', 'r360', 'r540', ….]

Video: example of the Exercise 9 behaviour

The for Loop

In the second SVG paper on the page (below the happy face and buttons), we want to draw a tower with eight “floors”:

You must use a for loop to construct the floors. You will need to use the loop counter to calculate the position and size of each rectangle.

Let's make each floor of the tower look a little different. You can also use the loop counter to calculate attribute values for the shapes you create. Use the .attr() function on each floor (as you create it, in the loop) to set at least one of:

• the rectangle's fill colour so they get lighter/darker/redder/whatever as you go up. The 'fill' can be any CSS colour value like '#f70' (like we have been using) or 'rgb(100%, 50%, 0%)' (which might be easier to calculate, since it's all numbers).
• the 'stroke-width' of the lines: making them either thicker or thinner as the tower grows.
• the 'opacity' of each floor... because this tower is kind of transparent?

Text

Just because we haven't used it before, use the paper.text(x, y, text) function to add a label to your tower (like “My Tower” or something).

Submitting

Upload the files to the course web server, as you have before and make sure everything is working. You may want to create a folder exercise9. Submit the URL of your HTML page to the CourSys activity Exercise 9.