COP4813 Assignment 9 – Animation
Objectives
Learn how to animate simple objects in Javascript.
Supports Outcome 4
4 – Ability to use client side scripting languages (DHTML, Javascript) to add interactivity to web sites.
Assignment
Part 1 – In this assignment you will animate an object on a canvas. You may animate any type of object (image or an object drawn on the screen). The object will bounce around the screen – in this case start the object animation diagonally across the screen. The angle does not matter, if you increment x and y locations by same amount that will be 45 degrees – different values will give you different amounts.
The object should be bounded (just use a square or rectangle). The object should remain in the bounded area- you can keep it inside the area – by simulating a bounce or send it off in another random direction, or simply have it stop – or choose a new random angle (will require a little bit of math).
You can also have the animation follow a path by using a calculated set of coordinates (which you know how to do from the equation assignment).
Part 2 – The object will respond to a mouse click by doing something. You can have the object change direction, color, image, any visible response to a mouse click event, my favorite was ones that exploded or do some other silly effect (just avoid the screaming ball – it annoys the rest of the office…).
Information
I have lots of lectures on various methods of animation. I recommend using timer based animation as outlined in my animation series.
In addition to my lectures a tutorial that covers the bouncing ball example is at http://sixrevisions.com/html/bouncing-a-ball-around-with-html5-and-javascript/
Estimated Completion Time
5-10 hours – you can have a lot of fun with this, make sure you understand the Javascript code involved in this project.
Supporting Lectures
These will all prove quite useful.
Lecture – Callback Functions in JavaScript
Lecture – Simple Animation Part 1 (uses jQuery)
Lecture – Simple Animation Part 2 (uses HTML5 Canvas)
Lecture – Game Programming Part 1
Lecture – Game Programming Part 2 – Collisions
Lecture – Game Programming Part 3 – Mouse Actions
Lecture – Game Programming Part 4 – Putting it all together
Questions and Answers
Please post any and all questions to the class discussion board, I will copy and paste them here.
External Resources
I have a lot of video resources devoted to learning how to use the objects that you will need to use to complete this assignment. Even if you do not plan on doing what is in the video, they are all worth watching to understand the underlying Javascript concepts.
https://www.webfx.com/blog/web-design/bouncing-a-ball-around-with-html5-and-javascript/ – does a great job of outlining the use of the canvas.
Grading Criteria
This should be working on your web page for points. I recommend writing it in JSFiddle and then migrating it to your web page.
5 Points – Object (any) animates on screen
5 Points – Object responds to a mouse click.