Programming Assignment 1
Animation in JavaScript

Due on Tuesday September 24 before midnight
Worth 6% of your final grade


This project must be done individually. No copying is permitted. The goal of this project is to learn client-side web programming using JavaScript. More specifically, you will create a web page that moves photographs around the screen, much like a screen saver.

This project must be done individually. No copying is permitted. Note: We will use a system for detecting software plagiarism, called Moss, which is an automatic system for determining the similarity of programs. That is, your program will be compared with the programs of the other students in class as well as with the programs submitted in previous years. This program will find similarities even if you rename variables, move code, change code structure, etc.

Note that, if you use a Search Engine to find similar programs on the web, we will find these programs too. So don't do it because you will get caught and you will get an F in the course (this is cheating). Don't look for code to use for your project on the web or from other students (current or past). Just do your project alone using the help given in this project description and from your instructor and GTA only. Finally, you should not post your code nor deploy your project on a public web site.


You will do this project on your own PC/laptop. You have to use either the Mozilla Firefox or the Google Chrome web browser to run and debug your JavaScript code. On Firefox, select "Web Developer" then "Debugger", and click on "Show in Separate Window" to get the debugger on a separate window. On Chrome, select "More tools" then "Developer Tools", then click on "Undock into separate window".
Note: You should not use any JavaScript library, such as JQuery or d3.js. You should not use the JavaScript canvas object nor svg graphics.


The following web pages contain various tutorials. Use them as a reference only. The class slides contain enough information on JavaScript and DOM.

Project Description

You are asked to write a JavaScript program that moves a number of photos arround a court window. The photos bounce on the court borders and on each other. Please watch the video photos.mp4 for a demo of how the screen should look like. You should put your code in only one JavaScript file photos.js, which is used in the file photos.html, that implements the following actions:

The court is 1000x600px and the photos have width 80px, but you should make your program work for any size of court, and any number and size of photos. The initial position of each photo is a random place inside the court. When you click on the court, photos will start moving in random directions and random speeds. The photos bounce on the court sides and on each other. When you click on the court again, the animation is suspended, when you click again, the animation resumes, etc. So each time you click, it suspends or resumes.


Note: You should use plain JavaScript. You should not use any JavaScript library, such as JQuery and d3.js. You should not use the JavaScript canvas object or svg graphics.

What to Submit

Use the form below to submit your photos.html and photos.js files. We do not accept email or hardcopy submissions. These files are automatically uploaded directly into your personal class account for this particular project, so you don't have to include your name or student ID or project number in the file name. You may submit your files as many times as you like, but only the most recently submitted files will be retained and evaluated (newly submitted files replace the old files under the same file name). After you submit the files, please double-check that your submitted files are correct by clicking on the Status link and by playing your animation on your browser.

Submit Project #1:

Last modified: 09/09/2019 by Leonidas Fegaras