Clicking Pictures

The program below shows a picture and some words below it.
When you click on a word, the program draws a circle or a square
around the corresponding part of the picture.

PImage pic;   // this must include one variable for each picture

void setup() {
  size(900, 600);
 
  pic = loadImage("https://dl.dropboxusercontent.com/u/275979/graphics/waldo.jpg");

  textFont(createFont("Georgia",32));
 
  background(250,180,250);       // background color = pink
 
  image(pic, 0, 0);      // draws the picture on the screen  
 
  fill(0,0,0);
  text("Clear   Waldo   odlaW   Bear   Clown",0,580);
}

void draw()
{
}

void mouseClicked()
{
    if(mouseX < 100)
    {
       image(pic, 0, 0);    
    }
    if(mouseX > 100  &&  mouseX < 180  &&  mouseY > 550  && mouseY < 580)
    {
       stroke(255,0,255);
       strokeWeight(10);
       noFill();
       ellipse(410,260,50,50);
    }
    if(mouseX > 300 && mouseX < 380 && mouseY > 550 && mouseY < 580)
    {
       stroke(255,0,255);
       strokeWeight(10);
       noFill();
       rect(520,0,50,50);      
    }
}


== Practice ==
Find your own pictures, with lots of things in it.
For example, it could be a map of Berlin.
Put WORDS across the bottom of the window.
When the user clicks a word, something should HIGHLIGHT that item.
Use a variety of shapes and colors for the highlights.
Include a [CLEAR] cpmmamd that removes all the markings.
Do as many words/items as you can in one class period.