Lab 1: Shapes and Colors

• Date assigned: Monday, 2012 Sep 3
• Date due: Monday, 2012 Sep 24, 11:59 p.m. Eastern time (should have said Sep 17!)
• 60 points

Overview

Create a canvas drawing with various shapes and colors.

Requirements

Script the canvas to draw a picture. Your picture should include:

• A background and at least two objects in the foreground.
• Lines, polygons or polylines, and curves (circles or arcs).
  • A polyline is a series of connected lines; unlike a polygon, it is not closed.
• Various colors (some using the HSL or HSLA color model), including a gradient and a transparency effect.
  • We will study colors next week (i.e., in the third week of class), so until then, you can just use black and white or simple named colors.
  • A gradient is a smooth transition between colors.
  • For the transparency effect, you need to have two overlapping objects, one “behind” the other.
• Use functions to organize your script.

Use correct HTML5 syntax (see the boilerplate example in Lesson 2: JavaScript Fundamentals).

Put a short “title” above your canvas and a caption below to explain what your picture is about (in case it is not obvious). You can use HTML like this for the purpose:

<h1>Picture Title</h1>
<canvas ...>
  Replacement text
</canvas>
<p>Picture caption</p>

Hints

• Examples of foreground objects: a fish, some seaweed, a rocket, an airplane, a cloud, a human face, a bird, a flower, a tree, an insect, a spider web. This list is not meant to limit you.
• The background can be a plain, solid color (night or day sky or water), or a gradient. You can also have objects in the background, such as hills, clouds, stars.
• Before writing code, sketch your scene on a sheet of paper (perhaps graph paper) and use the sketch to estimate coordinates of significant points.
• Test the script with your web browser’s error console open, so you can see the error messages. Also open the JavaScript console and use console.log to print trace messages, if needed for debugging.
• Develop incrementally: code a little and test; repeat until finished.
• Use top-down design and functions to organize the task hierarchically. For example, if there is a troll in your scene, there should probably be a drawTroll function with some helping functions, maybe organized like this:
  • drawTroll
    • trollHead
      • trollEye
      • trollNose
      • etc.
    • trollBody
      • trollArm
      • trollLeg
      • etc.
• It can be helpful to parameterize functions that draw objects with an “anchor” position, especially if you want to draw multiple objects of the same type at different locations:
  • drawTroll(x, y)

Submission

Turn in the web page (HTML file) as an attachment in Oncourse Assignments. If you have extra files (for example, an external script or style sheet), attach them also. But if you have more than three (3) files, bundle them in a zip, tar, tar.gz, tar.bz2, or tar.xz file and just attach the bundle.

Scoring

• (10 points) The web page uses correct, complete HTML5 boilerplate syntax, and includes a canvas, picture title, and caption.
• (9 points) The drawing has a background and at least two foreground objects.
• (10 points) The drawing makes use of lines, polygons or polylines, and curves.
• (9 points) The drawing has at least three HSL or HSLA colors.
• (6 points) The drawing has a gradient.
• (6 points) The drawing has a transparency effect involving at least two overlapping objects.
• (5 points) The script is effectively organized with hierarchical functions.
• (5 points) The script follows common practices of good code style, such as structural indenting, meaningful identifiers, and comments (but by no means limited to these).

TOTAL: 60 points