Description
CS 559 Programming Assignment 1
Description
In our recent lecture (in particular, on September 8th) we saw a few introductory examples of
using the HTML5 canvas for simple drawing in 2D. Those include a simple demonstration of
creating a canvas element and drawing a single colored line [JSbin link]
(https://jsbin.com/bovuhok) , a demonstration of the use of function calls, and filled
polygons [JSbin link] (https://jsbin.com/suhujar) , and an introduction to the use of sliders as
input elements along with their associated callback mechanisms [JSbin link]
(https://jsbin.com/fesukexori) . Incidentally, you can find these same examples in our GitHub
repository (https://github.com/sifakis/CS559F22_Demos) (under the subdirectory Week2/; look
for the subdirectories Demo0, …, Demo2 under it) more properly written as .html files and .js
files containing the HTML/JavaScript code respectively.
CS 559 Programming Assignment 1
The goal of this assignment is to have you figure out the programming aspects of drawing
pictures on web pages using the JavaScript 2D Canvas library. You should create a new
program (as a single HTML file, or even better a separate .html file and a .js file with the
JavaScript code, as exemplified in the demos from the GitHub repository) that includes – at
minimum – the following visual elements:
You should draw at least one filled shape (e.g. a polygon).
You should either have multiple, separate filled shapes (not merely identical copies of one
another; craft a different shape instead), or draw some shapes that are not
filled alongside the filled polygons, for example polygonal shapes that are only drawn as
a line (if you do the latter, make sure that this shape includes more than one line
segment). You are welcome to do both, of course, and include multiple filled shapes and
multiple line-drawn (non-filled strokes) along them!
You must demonstrate the use of more than one color in your drawing
You must include at least one slider in your program, and have it affect the image drawn
in some way. For example, it could control the location of one of the polygon vertices
being drawn; or it could control the thickness of some line; or it could move an entire
shape.
The requirements above are what is asked of you to get a “Satisfactory” grade (i.e. a score
of “3”) in the programming assignment. If you want to contend for an “above-and-beyond”
grade (i.e. “4”), you should consider drawing something more elaborate. For example, you
might consider doing several add-ons such as the following (not an exhaustive list) :
Something that creatively combines many shapes to create an interesting appearance.
Something that changes shape (perhaps as triggered by the value of the slider) in an
interesting way.
Something that includes an animation (we gave hints/examples of how to do this towards
the end of the September 15th lecture).
You can satisfy the requirements by taking the short examples in the tutorials (and giving
proper attribution – see the collaboration policy) and combining or modifying them. However,
we recommend that you put some effort into really understanding what is going on. And to
make a picture that is more fun. Go ahead, show off your creativity!
We will give you a bunch of resources for getting started with JavaScript and Canvas (Start
with the “learning JavaScript” (http://graphics.cs.wisc.edu/WP/tutorials/learning-javascript/)
page). If you’re new to JavaScript, take one of the example programs to start with, and
experiment with changing the drawing command stop see what happens. In fact, you can
tinker with the examples right in JSBin. And you might want to tinker with other parts of the
program to see how it works.
Even if you know JavaScript and Canvas, please look through the tutorials – they will
connect things to the other concepts in class.
To do this assignment, we recommend that you start with: HTML5 Canvas What and Why
(http://graphics.cs.wisc.edu/WP/tutorials/html5-canvas-what-and-why/) (well, maybe you should
look at the Learning JavaScript (http://graphics.cs.wisc.edu/WP/tutorials/learning-javascript/)
page first)
And then read the: Getting Started with HTML5 Canvas
(http://graphics.cs.wisc.edu/WP/tutorials/getting-started-with-html5-canvas/) page. You might also
want to go look at some more of the JavaScript Canvas resources listed on the HTML5
Canvas What and Why (http://graphics.cs.wisc.edu/WP/tutorials/html5-canvas-what-and-why/) .
This will give you enough to start doing the assignment. Then you’ll want to learn a bit more
about what you can do with Canvas, and probably to become a better JavaScript
programmer as well. The next programming assignments won’t be as easy…
