CS 242 Fall 2009 : Assignment 1.2
CS 242 Fall 2009 : Assignment 1.2
This page last changed on Feb 24, 2011 by cemeyer2.
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
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:
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:
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)
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.
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
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.
Things to watch out for:
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.
FYI, the idea for this assignment came from here.
|Document generated by Confluence on Feb 22, 2012 18:18|