CS 242 Fall 2009 : Assignment 1.2 | charlie on software

CS 242 Fall 2009 : Assignment 1.2

This page last changed on Feb 24, 2011 by cemeyer2.

Assignment 1.2 – Generating images of our maps

This is the second part of a three part assignment that will span over the course of three weeks. Look over this page frequently for Update markers with clarifications or changes.

Language: A scripting language such as Perl, Python, or Ruby

Submission: This assignment is due Thursday, March 10th at 8:00 AM in a folder in SVN named Assignment3.1


  1. Use the output from week 1 to create an image of our terrain map
  2. learn how CSS and HTML work
  3. learn the basics of a new language

Goal: Read the in the output from last week’s assignment and create an image of our map.

Update: an example solution is posted at https://csil-projects.cs.uiuc.edu/svn/fa09/cs242/_public/solutions/Assignment1.2

Now that we have our neighbor grid data, we can use it along with our original input file to create a graphical representation of our map. Using the larger given map from our assignment last week, we can create something like:

We will do all of this with some simple CSS and HTML. This way we do not have to worry about image libraries and all of the details they entail. We will be using a image that contains multiple configurations of each tile. I have taken this image from the FreeCiv game. Please take a look at it. We will not be using all the image inside for this assignment. We will be making use of *g*rass, *d*esert, *i*ce, *j*ungle, *p*lains, *s*wamps, *r*oads, *w*ater, *h*otrocks, *f*orest and *m*ountains. Except for hotrock, which is just a name I made up, the rest should be pretty intuitive. All the images that we use are illustrated in the Map 1 above. Please right click and save this image to use in your project.

If you take a close look at this image, you will see that it is composed of tiles of our different terrain types, with varying neighbors. If you inspect it even closer, you can see that they are all arranged in a very particular order. The first tile in a row (take the desert tiles for example) shows just that tile with no neighbors of differing types, the second has a different neighbor on the north side, the third has a different neighbor on the west side, and so on. If we count in base 2, we see the following:

West South East North
0 0 0 0
0 0 0 1
0 0 1 0
0 0 1 1

And so on…

Notice how this pattern resembles the output format of our previous week’s code. Remember a 1 signifies that the neighbor on that side is different than that cell, while a 0 means that they are the same. Ok, so here is what you have to do:

  1. Read in both the original map file and the output for your code from last week for the original map file
  2. For each cell in the map, generate a portion of HTML code for that cell and write it to file

You will read in each cell and transform it into a CSS class name. For instance, if you read in G from the original map and a byte with the bits 11011010 from your output of last week’s code, you will generate the CSS class grass1_0_1_1 (notice how the numbers in the CSS class correspond to bits 7, 5, 3, and 1 respectively)

How to use HTML

For testing, we recommend that you first start out by writing a HTML file with a table then convert it to divs later for the finished product. The table is easier to debug. To create a table in HTML, see the example below:

This is just for example, as you will see soon, our output table will not require text in each cell of the table since we will be assigning it a CSS background.

How to use CSS

CSS is an easy way to style HTML pages. To start off, make sure the image of the tiles you downloaded is in the same directory as the HTML file and CSS file you are about to create. Here is an example CSS file:

You will need to create one CSS class for each type of terrain (notice how the background-position changes for each of the different types of terrain). But, this CSS file will only have the classes necessary for cells that have no neighbors, which will make for an ugly map. So, you will need to create a CSS file that looks like the following:

You will need one CSS class per tile on the image, so 8 (correction) 16 per terrain type. It is a requirement of this assignment that you write a helper programe to create this file for you, since it will be extremely tedious and error-prone to do it by hand.

Once you have your CSS file created, you can create an html file to display the image. It might look something like:

Once you are finished, you should be able to open the resulting HTML file and see the map in its full glory:

To get rid of the spaces between cells, use div tags instead of a table. Search on the web for information on how to do this and post questions on the newsgroup if you run into any problems.


  1. Modularize your code as much as possible. Use multiple functions and files to separate out the key pieces of logic.
  2. Use a helper program such as Firebug to help debug your output (safari also has a great developer menu that can help a lot)

Things to watch out for:

  1. How do you handle tiles that don’t have neighbor tiles (such as forest, mountain, and hotrock)?
  2. Are you generating the CSS by hand? DON’T!
  3. How adaptable is your program to change in input? What if we changed up the elements on the map to include new or different tiles?
  4. How easy is your program to use? Did you include a README file? Do you have command line parameters or are you hard coding names in?
  5. Try using your map generator from part 1 to test your code for part 2 on larger maps.

Useful tutorials and links

  1. Ruby
  2. Python
  3. Perl

This assignment is due by 8:00 am on wednesday, September 9th at https://csil-projects.cs.uiuc.edu/svn/fa09/cs242/NETID/Assignment1.2 replacing NETID with your actual netid.


Note: As is usual for CS242, only about 1/2 of the points will be given for having a program that accomplishes the given task. The rest will be for the style of your code and your participation in discussion section. That being said, you should still focus on completing all of the tasks you are given, but be aware that if you do not create good code, you will be heavily penalized.

Total 50 Points

FYI, the idea for this assignment came from here.

map_div.png (image/png)

tiles.png (image/png)

map_tables.png (image/png)
Document generated by Confluence on Feb 22, 2012 18:18

  1. No comments yet.

  1. No trackbacks yet.