Colored Map of the 50 States in US (Difficulty: 3)

CreatiCode

Introduction

The map of all 50 states in the US is a handy tool for creating interactive projects for social studies or geography. In this tutorial, you will learn to build a very basic demo that shows all 50 states in different colors. You will practice using table variables and clones along the way.

Step 1 - Remix the Template

Please open the following project and remix it as your own project.

play.creaticode.com/projects/6787f4c3b71b8505f221326c

This project has only one sprite called “states”. It contains the costumes of all 50 states, in pure white color. It also includes a table with these columns about each state: state, x, y, shortname, color, saturation. You will learn how to use the costumes and this table in the steps below.

Step 2 - Use Clone to Display One State

Next, to keep it simple, we will first try to display one state. We will need to use a clone to represent that state, and hide the original sprite itself. This way, to show more states later, we just need to add more clones.

You can pick the costume of any state, such as “Florida”. When you run the project, you will see the map of that state at the center:

Step 3 - Specify the State Using Clone ID

In CreatiCode, when you create a clone, you can also specify a “clone ID”, which can be any text or number. This makes it easy to tell each clone to do something differently. In this step, we will set the clone ID to be 1. And when we select the costume, we will use the clone ID as the row number to read the state name from the “stateinfo” table. Since the clone ID is set to 1, we will get the first state in the table, which is “Alabama”:

The program will show the map of Alamaba now when we run it:

Step 4 - Move the clone to the given position

To show each state at its correct position, we need to read the x and y positions of that state from the table, then make the clone go there. Again, we are still using the “clone ID” as the row number to index into the table.

Now we see the Alabama state in the correct position:

Step 5 - Add Color to the State

We can also use color effects to change the “color” and “saturation” of the state, so that it is no longer white. We need to read these 2 columns from the table in a similar way, using clone ID as the row number:

And now the Alabama state has a nice color:

Step 6 - Print the Short name (Abbreviation) of the state

Next, we can read the “shortname” column to get the 2-letter abbreviation of the state, and then “print” them at the same x and y positions. Note that this block is too wide so it is shown as 2 rows below:

This is what we get now:

Step 7 - Make 50 Clones Using a For-loop

To add all 50 states, we just need to make 50 clones with clone ID going from 1 to 50. An easy way to do it is to use a for-loop like this:

This will give us a complete map:

Step 8 - Random Coloring

If you don’t like the default color/saturation that is given, you can color the states in other ways. For example, you can use 2 random numbers for the color and saturation effects. Note that the color effect takes any number between 1 and 200 (not 100), and the saturation is a number between 1 and 100. If you don’t want to use colors that are too “strong” or “light”, you can limit the saturation between 20 and 80 like this:

Now every time you run the project, you will get a new random color set:

Step 9 - Faster Drawing (Advanced)

You might have noticed that it takes a few seconds to draw all 50 states. This is because after adding each clone, the playground will update the stage to reflect that. If we just want to draw all 50 states quickly, we can use a common trick that disables “screen refresh”:

Define a new custom block named “add states”, and check “Run without screen refresh” on the left:

Next, move the for-loop inside the definition of this block:

Essentially, the program is running the same tasks, but the playground will not update the stage until all 50 states are added, so it is much faster:

Additional Challenges

You can build many interesting projects based on this template. Here are some ideas for you to try:

Shift the short name: Currently the 2-letter abbreviation is printed at the center of each state. However, it does not look good for some states, such as Hawaii, Michigan, New York, Idaho, etc. You can add 2 new columns of “xshift” and “yshift” to the “stateinfo” table, and fill in how much you want to shift the 2 letters from the center of the state. For example, if you want the “HI” to be printed below the Hawaii map, you can set the yshift for the row of Hawaii to be -30, and when you print the “HI” onto the map, add the yshift to the y position of the letters.
Interactive Map: You can make a state show a highlight whenever it touches the mouse pointer by changing its “brightness” color effect.
Zoom-in: When a user clicks any state, you can show an enlarged version of that state and other states near by. You will not only need to change the “size” of the clone, but also scale its x and y positions.