CMSI 371 Computer Graphics, Spring 2017
This initial assignment is meant to get you into a development groove with 2D canvas graphics, as well as mark your first step toward an animated 2D scene.
Don’t limit your canvas exposure solely to the functions/properties that you specifically use in your drawings—spend some “big picture” time with the MDN
canvas tutorial and reference pages. You might be pleasantly surprised by how much you can do.
Automated Feedback Setup
In order to connect your repository to our automated code review and feedback system, once you are up and running please send your repository’s URL to Ed Seim. You can either find him in person in the lab, tweet him at https://twitter.com/SirSeim, or mention him in a GitHub comment (
SirSeim). Once he has you hooked up, the system will provide feedback on code formatting and quality whenever you commit a new version to GitHub. Points will be deducted if issues here linger in the final submission.
For this assignment, a unit test suite is not practical to do: the “demo pages” pretty much comprise a visual test suite. Thus, automated feedback only covers code presentation and formatting.
First, envision an animated 2D scene that you’d like to render. Storyboard or script it so that you can get a concrete idea of what you’d like to see.
Then, write at least three (3)
canvas functions that draw three distinct objects in your scene. Known as sprites, they can be things, characters, vehicles, buildings, whatever you like. We say “at least” because, really, the more you do, the better you’ll get, and we don’t want to artificially limit your practice time (or your creativity). Give your sprites some internally movable characteristics like limbs or facial expressions (see the next section).
Use standard control structures like loops and conditionals as needed; don’t feel limited to just
Consult the MDN
canvas website extensively so that you don’t miss out on its full feature set.
Parameterize the Sprites
Your functions’ drawing commands should be parameterized by a separate model object. That is, your functions should accept an object parameter whose properties affect how something gets drawn. For example, if you decide to draw a cartoon character, you can supply an object with a property that states how open or closed its eyes are. Or, you might draw a box with a hinged lid, and its object might state how open, in degrees, the lid should be.
Draw Around the Origin, Transform to Test
One set of characteristics that you shouldn’t parameterize is whole-object movement, rotation, or scaling. These can be done independently by using the
rotate functions, as seen in class.
Also as mentioned in class, center your drawing code around the origin. You can invoke
translate before calling your sprite function to draw it at the desired location. Similarly,
rotate will resize and turn your entire sprite, respectively. You may play with these in your demonstration pages (described next).
Deliverable: Naive Animation Sprite Demo