Due: Thursday, September 10th. (see the class late policy on the Syllabus)
Synopsis: You need to create a program that draws a picture on a 2D Canvas on a Web page.
Learning Objectives: To make sure everyone understands how to make pictures with Canvas, so we can make more interesting ones later. We also want to make sure that you can turn in assignments.
Evaluation: Check/No Check/Above and Beyond. You get a check if you turn in a viable, and complete submission (even if it just draws a rectangle like the example in the tutorial). We will mark above and beyond for people who make particularly cool pictures.
Handin: Will be as a Canvas (the course management system, not the JavaScript drawing library) assignment. Click on this to handin. Make sure that you turn in all files needed for your program to run. There should be a single HTML file, and possibly an extra JavaScript file. For this assignment, we discourage you from using any libraries. But if you do use a library, make clear
Description
This assignment is part of Programming Assignment Group 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. All you need to do is to make a picture using Canvas. It can be simple (just a square will do), but that would be boring – try to experiment. If you’re creative, it’s more fun for all of us!
For this assignment, it’s OK if your entire assignment is in an HTML file (stick the Javascript code right inside). If you do put your code into a separate script file, make sure to include everything we need to look at your program. There should be one (and only one) HTML file. We would prefer that you avoid using external libraries for this assignment, but if you do, make it clear which one and either include it if it’s small, or link to a reliable content distributor. Be sure to explain what you have used in the type-in box with your submission.
You can satisfy the requirements by taking the short examples in the tutorials (and giving proper attribution – see the collaboration policy). 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 my “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. In fact, here’s a link to a JSBin for an example solution (this is more fully explained in the tutorial listed below).
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, I recommend that you start with: HTML5 Canvas What and Why (well, maybe you should look at the Learning JavaScript page first)
And then read the: 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. Also, my “When Do I Draw?” tutorial will help you understand some of the JavaScript coding idioms.
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…
Coming Attractions
This program is small enough that you’ll probably want to start the next one from scratch. But the idea is that the first 4 programming assignments will build up into doing something more substantial (like a project). See the description of Programming Assignment Group 1.
For next week (September 17th)… you’ll add animation and use hierarchical transformations to make a complex moving object (like a quadcopter or a robot).
For the following week (September 24th)… you will draw in 3D into the 2D canvas in wireframe.
For the week after that (October 1)… you’ll draw in 3D into the 2D canvas trying to make things look solid.
