banner graphic

Alternative Homework 1

Due Monday, October 30

This homework assignment is strictly optional: you are not required to do it. It's intended for students who are very confident about their understanding of links, graphics, and imagemapping and want a more substantial challenge. In the future, alternative assignments will substitute for regular assignments. THIS ONE DOES NOT. You must still complete the regular assignment due October 30. (That assignment will be given out on October 23.)

All the files you will need for this alternative assignment can be found in the hwk.alt.1 folder within introShare on Crow.

virtual space map

The graphic above is an image of a virtual space built in MetaCreations Bryce, a simple but powerful 3-D graphics program. Because the present view is schematic and taken from a great height, it shows relatively little detail; but in fact this world has many features that make for an interesting graphic tour.

That tour has already been constructed by moving a virtual camera to each of the numbered points shown on the map and recording at those points a series of images at 90-degree rotations. By shifting from one image to another, you can give users the impression of moving through the space and turning to change point of view.

Each image is 480 pixels wide and 360 pixels high. If you set up imagemapped links on the left and right margins of each image (say, the rightmost and leftmost 100 pixels), you can link each image to a new page that contains a view rotated 90 degrees. Clicking on the left margin of the image would thus shift the viewpoint 90 degrees left. Clicking right would shift 90 degrees right.

If you imagemap a rectangle in the remaining, central space of the image, and connect this hotspot to a page containing an image in the same degree orientation, but further along the current line of sight (say, at position 3 instead of position 2), you give users the ability to move through the virtual space.

There are 20 viewpoints on the map, each with 4 rotated views (80 images total). For each view there is a JPEG image within the images folder in hwk.alt.1. The JPEGs are named as follows:

    vs[viewpoint].[rotation].jpg

So from the first viewpoint we have four JPEGS: vs01.000.jpg, vs01.090.jpg, vs01.180.jpg, and vs01.270.jpg.

Set up one page for each of the 80 images. Name each page for the image it displays: so the page displaying the image vs01.090.jpg would be called vs01.090.htm.

Adjust the HREFs in the imagemap on each page so that the pages properly connect with one another.

Begin by setting up a template file containing your imagemap, whose coordinates need not change as you go. Clone off this template file to create new pages.

The rotational links (left and right margins of the screen) are straightforward. From the 000 view, the right link leads to the 090 view while the left link leads to the 270 view. If you can't work out these values in your head, draw the four points on a piece of paper. Remember that the left and right neighbors are different for each view, though the viewpoint is always the same.

For the central or linear link, you'll need to know which viewpoints link to which. The table at the bottom of this page shows the next point in succession from any given view. "X" indicates that no further advance is possible in this direction, in which case you may want to route the user to a special page or another point on the map.

Here is a limited demo showing the first few stops on the imagemapped tour.

If you really get into this assignment, you may consider adding a number of refinements, such as:

  • Some indication, graphic or otherwise, that the user may advance from the current viewpoint. (In the demo this is done with a colored horizontal rule, but there are much better solutions.)


  • You may want to compress or possibly resize the graphics. Each one is now somewhere between 100-120 kilobytes, which is far too large for practical Web delivery.


  • You might want to integrate the top-view map into your page design (again, possibly in compressed form) to give a "you are here" indication.

Table of Destinations

Point 01

000 ==> X
090 ==> 02.090
180 ==> 20.180
270 ==> X

Point 02

000 ==> 15.000
090 ==> 04.090
180 ==> 19.180
270 ==> 01.270

Point 03

000 ==> 07.270
090 ==> 04.090
180 ==> 11.180
270 ==> 02.270

Point 04

000 ==> 06.000
090 ==> 05.090
180 ==> 08.180
270 ==> 07.270

Point 05

000 ==> X
090 ==> X
180 ==> 08.180
270 ==> 04.270

Point 06

000 ==> 14.270
090 ==> X
180 ==> 04.180
270 ==> X

Point 07

000 ==> 12.000
090 ==> X
180 ==> 03.180
270 ==> X

Point 08

000 ==> 05.000
090 ==> X
180 ==> 09.180
270 ==> 04.270

Point 09

000 ==> 08.000
090 ==> X
180 ==> 16.180
270 ==> 10.270

Point 10

000 ==> X
090 ==> 09.090
180 ==> X
270 ==> 11.270

Point 11

000 ==> 03.000
090 ==> 10.090
180 ==> X
270 ==> X

Point 12

000 ==> X
090 ==> 07.090
180 ==> X
270 ==> 13.270

Point 13

000 ==> 14.000
090 ==> X
180 ==> 12.180
270 ==> X

Point 14

000 ==> X
090 ==> X
180 ==> X
270 ==> 13.180

Point 15

000 ==> X
090 ==> X
180 ==> 02.180
270 ==> X

Point 16

000 ==> 09.000
090 ==> X
180 ==> X
270 ==> 17.270

Point 17

000 ==> X
090 ==> 16.000
180 ==> X
270 ==> 18.270

Point 18

000 ==> 19.000
090 ==> 17.090
180 ==> X
270 ==> 20.270

Point 19

000 ==> 02.000
090 ==> X
180 ==> 18.180
270 ==> X

Point 20

000 ==> X
090 ==> 18.090
180 ==> X
270 ==> 01.000