CP5310 Assignment – Individual Work

CP5310 Assignment – Individual Work
Multimedia application (10%, due week 6 [5/4/19] at 5 pm)
Purpose
The purpose of this assignment is to check your basic web-development and JavaScript skills.
Task
You are required to create a simple web-page containing an HTML5 Canvas, displaying an animated animal
mimicking connect the dots game using JavaScript.
Basic Animation
When the page is loaded the canvas should display at least 50 dots that allow strokes to be drawn between these
dots to form an animal shape with the following characteristics:
• The leftmost dot is at x=7, and y can be anything (i.e. the leftmost part of the animal body is touching
the left side of the canvas, see diagram below, right)
• Size of each dot – radius 7
• Starting from the topmost dot of the animal, draw a stroke (clockwise) between each pair of dots to
form the animal shape, continue until complete.
• Stroke width – 7 pixels
• Wait 3 seconds before automatically drawing the next stroke (between the next pair of
dots).
• Stroke colours – blue, red, yellow
• Stroke style – gradient
• Note that the canvas size should occupied the full width and height of the screen with zero
margin on all sides. The canvas border should have solid style with the width of 2 pixels.
When all the strokes are drawn (the canvas shows the completely drawn animal), move the drawn animal to the
right by 4 pixels at a time until the rightmost part of the animal touches the rightmost border of the canvas.
Advanced Features
Change the page so that when it is loaded the canvas is blank, displaying two buttons:
• Begin Animation (changes to ‘Stop’ once it is clicked)
• Clear screen
When the ‘Begin Animation’ button is pressed, the dots should be displayed on the screen with the following
characteristics:
• Move the positions of all the dots so the completely drawn animal is now in the middle of the canvas.
• Draw the animal as per the Basic Animation.
• Once the animal is drawn, move the animal towards the right, left, top, or bottom (randomly selected
each time button is clicked) of the canvas, this keeps going until the user press “Stop” button, or the
animal reaches the edge.
If the “Stop Animation” button is clicked then all drawing/animation is stopped, and the button label reverts to
“Begin Animation”. Clicking begin again will restart the drawing from the beginning.
Frontend and Coding
Your webpage must include an HTML5 Canvas and buttons as needed. This will be the frontend of your site,
which the users interact with directly. Animation, drawing, and so on, must be implemented using appropriate
JavaScript code.
ALL WORK IS INDIVIDUAL: You can follow tutorials on the internet but if you copy and paste then
you will be pulled up on plagiarism.
See the rubric on the next page.
Multimedia Application Rubric: