Programming Assignment #4

by Eftychios Sifakis on October 12, 2020

Due: Wednesday, October 21st. (see the class late policy on the Syllabus)

Synopsis: You will make a program that uses a parametric curve to define an intricate trajectory, and use this representation both to draw such a curve as well as move/animate an object along it.

Learning Objectives: To exercise your understanding of parametric curves and their representations, their use for motion/animation purposes, and become more familiar with the concept of continuity of piecewise-defined curves.

Evaluation: Based on the announced evaluation system. You get a check (“3”) if you turn in a viable, and complete submission (even if it just draws a rectangle like the example in the tutorial). “Above and beyond” grades will be awarded for people who make particularly cool pictures.

Hand-in: Will be as a Canvas (the course management system, not the JavaScript drawing library) assignment. [Submission link] Make sure that you turn in all files needed for your program to run. It is acceptable to turn in a single HTML file with your program, but much preferable to separate your code into an .html file and a separate .js file containing the JavaScript code, similar to the examples in our GitHub repository (see, e.g. Demos 0 from Week 5). If you submit anything else than a single HTML file, please put everything in a single ZIP archive. It is not acceptable to submit a link to JSbin for this assignment!


In the last few lectures (especially in Week 6) we discussed the representation and implementation of parametric curves. We addressed the motivation in using such geometric tools (e.g. creating more intricate shapes than the ones allowed by built-in canvas commands, and having the ability to animate objects along them). We also looked at implementation considerations associated with the use of parametric curves in 2D (most of which are found in our GitHub repository under Week6/), such as the drawing of a curve as a finely-refined chain of line segments [JSBin demo], using the parametric representation to control the position and orientation of an object that travels along the curve [JSBin demo], and how piecewise-defined curves are implemented and what different degrees of continuity feel like [JSBin demo].

In this assignment you will create your own program, in the spirit of the demos we saw in class, extending them of course into something more interesting and hopefully exciting! You are welcome to take inspiration or even adopt some of the implementation practices from the in-class demos; your program, however must fulfill the following requirements in order to get a satisfactory “3” grade:

  • Requirement #1. Your drawing has to include, at minimum, one of the following:
    (a) A piecewise-defined curve, that shifts from one formula to another (see the example in this [JSBin demo]), that is also closed in the sense that the curve returns to the place where it started, forming a closed “loop”; note that this is different from the example we saw in class, where all curves, including those that had piecewise-definitions, were “open”.
    or (you can do both if you wish!)
    (b) Multiple separate curves, out of which one has to have a piecewise-defined formula (i.e. at least two components with different formulas, joined together), but in this case the curves don’t have to be closed (unless you want them to be!).
  • Requirement #2. Your drawing needs to have at least one object that is animated using one of the curves defined. It is sufficient to have the parametric curve control only the position of the moving object (as in this [JSBin demo]), but if you want to be extra fancy you can also control the orientation of the moving object (see this [JSBin demo]).
  • Requirement #3. You must “draw” the path of at least one of the curves involved in your scene (consider the way we discussed in our demos, by splitting the curve up into small line segments). It’s ok to have a “switch” of sorts (e.g. the value of a slider) that “turns off” drawing the curve line, if you feel your scene looks better without it! As long as there is the option to display that path, you are good!
  • Requirement #4. At the point where the different formulas of a piecewise-defined curve in your scene, you must enforce at least C0-continuity (G1-continuity or higher would be nice; C2 might be overkill, but you are welcome to do it). This is just for one of the junctions in one of your piecewise-defined curves; you are free to use any degree of continuity for all other cases.

You are welcome to use either sliders, or automatic animation to “move” your objects along any curve trajectories; use whatever feels best for your vision of the scene you want to create!

As always, you are encouraged to try and exceed these requirements, and if you do well, you can compete for a “4” above-and-beyond grade. Here are some recommendations for that:

  • Controlling position and orientation of objects in your scene.
  • Having controls/sliders that alter the shape of your curved trajectories.
  • Create intriguing motions and shapes.
  • Enhance the appearance of curved profiles by giving them “thickness” or drawing multiple parallel lines that go alongside your curve; think of a train track with 2 parallel rails, that swerve together!


The following will be useful references for the topics discussed in weeks 4 through 7:

  • Foundations of Computer Graphics (Chapter 6, section 1 Link) discusses transformations and representations in 2D. Later sections in this chapter venture into 3D, which will be useful very soon!
  • Chapter 5 of Hart’s Big Fun Computer Graphics Book (Link) is also very useful for 2D geometry and transforms.
  • Foundations of Computer Graphics Chapter 15 (Link) covers the representations of parametric curves, and many other concepts as we discuss in class! Our lectures were very closely aligned to the notation used in this chapter.

Leave a Comment

Previous post:

Next post: