Images

In this assignment, you will use Processing’s image capabilities to display the map of Europe and some of its flags. The flags will be dim (use tint(255, 128) to get a dimmed image) until you roll over them. Once you roll over them, you will see the flag in full color, and the map of Europe will show the country, and you will see its name. See what the result should look like.

Planning the Project

Unzip file euro_images.zip and move all of the files into the data folder of your Processing project. It contains these files:

europe.png

A map of Europe with no countries highlighted.

france.png, germany.png, spain.png, sweden.png

A map of Europe with the named country highlighted.

france_flag.png, germany_flag.png, spain_flag.png, sweden_flag.png

Each file contains the flag of the named country.

The screen layout is as shown here (click the picture to see a larger version). The maps are all 246 by 250 pixels, and the flags are all 64 by 32 pixels, spaced 72 pixels apart.

Hints

The program is much easier if you use arrays.

• PImage[] flag: an array to hold the four flag images
• PImage[] europe: an array to hold the four country map images
• PImage empty: holds the “empty” map of Europe (with no countries highlighted
• String[] file = {"france", "germany", "spain", "sweden"};
• String[] country = {"France", "Germany", "Spain", "Sweden"};
• PFont f: hold the font that you use to display the country name

The file names aren’t the same as the country names, because the file names are all lower case. On Windows, capitalization of a file name doesn’t make a difference, but on Linux or Macintosh, it does.

Pseudocode

void setup( )
{
  size(350, 350);
  /*
    You do this:
    Use a for loop with loadImage( ) to load
    the flag images and map images.
  */
  
  empty = loadImage("europe.png"); // load the blank map
  f = createFont("Arial", 24, true); // create font
  textFont(f); // use that font
}

void draw( )
{
  background(255);
  tint(255);
  /* You do this: Draw the empty map at (90, 25) */
  
  noFill();
  /* You do this: Draw a rectangle around the map */
  fill(0);
  
  /* You do this:
  For each country: {
    If the mouse is in that country's flag rectangle, {
        set tint(255) for full color
        display the map of Europe with that country highlighted
        display the country name centered at (175, 310)
    }
    otherwise {
        set tint(255, 128) for light colors
    }
    draw the flag for the country
  }
  */
}

When You Finish

Zip up the sketch into a zip file named europe.zip and upload it.