Assignments JS Animation

Handing In Assignments

You must hand in by using git

Hand In by git

  • Create an empty repo on bitbucket.org, gitlab.com, or github.com,
  • git push your local repo to the above remote repo.
  • For node assignments please put the line(s)

    node_modules/

    into your .gitignore file.

Send a mail to with:

  • The word 'handin <subjectname>' in the subject line of your mail
  • The url of your repo(s).

Assignment JS.Anim.N0

On the basis of the code from today's lesson please place 10 or more moving disks on a 500 x 600 canvas. They must all move linearly and bounce when hitting the wall. They must have different colors, and different sizes. Their trajectories and their speeds must be randomized.

Hand in as jsanimN0.js, and jsanimN0.html

Assignment JS.Anim.N1

On the basis of the code from today's lesson please place 10 or more moving disks on a 500 x 600 canvas. They must all move linearly and bounce when hitting the wall. They must have different colors, and different sizes. Their trajectories and their speeds must be randomized.

The above is equivalent to the previous assignment. Now you must change the coding, so that when a moving disk hits another disk, the bigger disk swallows the the smaller disk, and its area grows with the area of the swallowed disk. When there is but one disk left, the animation must stop, and an appropriate message must appear.

Hand in as jsanimN1.js, and jsanimN1.html

Assignment JS.Anim.N2

Copy the results of the previous assignment so that jsanimN1.js becomes jsanimN2.js, and jsanimN1.html becomes jsanimN2.html.

Change the moving objects so that half of them are squares or rectangles and the other half remain disks (circles). When they move around, occasionally one hits another. The assignement is the same as the previous one. The shape with the larger area swallows the smaller and grows proportionately. When one shape is left the animation must stop with an appropriate message.

Hand in as jsanimN2.js, and jsanimN2.html

Assignment JS.Anim.N3

If you have time create a pale blue disk, small in relation to a 800 x 400 canvas, and animate it so that it moves around the canvas in an elliptical orbit around the yellow center of the black canvas.

Hand in as jsanimN3.js, and jsanimN3.html