I am having trouble figuring out how to display the text and image. Here is what I am talking about ( http://evc-cit.info/cit020/screenshots/europe/index.html). This is what I have so far;

String [] picName = {
  "france", "germany", "spain", "sweden"
};
String[] country = {
  "France", "Germany", "Spain", "Sweden"
};
PImage[] flag = new PImage[picName.length];
PImage[] map = new PImage[picName.length];
PImage empty;
PFont f;

void setup( )
{
  size(350, 350);
  /*
    You do this:
   Use a for loop with loadImage( ) to load
   the flag images and map images.
   */
  for (int i = 0; i < picName.length; i++)
  {
    flag[i] = loadImage(picName[i] + "_flag.png");
    map[i] = loadImage(picName[i] + ".png");
  }

  empty = loadImage("europe.png"); // load the blank map
  f = createFont("Arial", 24, true); // create font
  textFont(f); // use that font
}

void draw( )
{
  float y;

  background(255);
  textFont(f, 24);
  textAlign(CENTER);
  tint(255);
  /* You do this: Draw the empty map at (90, 25) */
  image(empty, 90, 25);

  noFill();
  /* You do this: Draw a rectangle around the map */
  rect(89, 24, 247, 251);
  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
   }
   */
  y = 25;
  for (int i = 0; i < picName.length; i++)
  {
    if ( false )
    {
      tint(255);
    }
    image(flag[i], 15, y);
    y = y + 72;

    text(country[i], 175, 310);
  }
  tint(255, 128);

}

I need help on the void keyPressed() part, any suggestions;
float x;
float y;
float xSpeed;
float ySpeed;
float theta;
float rotationSpeed;
float gravityFactor;
boolean drawSquare = true;

void initialize()
{
  color c;
  x = 0;
  y = 0;
  xSpeed = 1.0;
  ySpeed = 1.5;
  c = generateRandomColor();
  fill(c);
  rotationSpeed = radians(2);
  gravityFactor = 0.1;
  // fill(generateRandomColor());
}

void setup()
{
  size(300, 300);
  initialize();
}

void mousePressed()
{
  initialize();
}

void draw()
{
  background(255);
  if (drawSquare == true) {
    pushMatrix();

    translate(x, y);
    rotate(theta);
    rectMode(CENTER);
    rect(0, 0, 20, 20);
    popMatrix();
  }
  else
  {
    pushMatrix();

    translate(x, y);
    rotate (theta);
    triangle(-20, -10, -20, 10, 20, 0);
    popMatrix();// push, translate, rotate, draw triangle, pop
  }

  x = x + xSpeed;// Add the x speed to the x position

  y = y + ySpeed;// Add the y speed to the y position

  ySpeed = ySpeed + gravityFactor;// Add the gravity to the y speed

  theta = theta + rotationSpeed;//Add the speed of rotation to θ

  if (x < 0 || x > width)
  {
    xSpeed = -xSpeed;
  }

  if (y >= height)
  {
    ySpeed *= -0.9;
  }
}
// If the x position is off-screen, reverse the x speed.
//  If the y position is greater than the height of the
// sketch, set the y speed to -0.9 times its current value.


void keyPressed()
{
  //If the user presses the s or S key, your program will set the drawSquare variable to true to indicate that the program should draw squares.

  //If the user presses the t or T key, your program will set the drawSquare variable to false to indicate that the program should draw triangles.

  //If the user presses the c or C key, your program will call the generateRandomColor() function to change the fill color for the current shape.

  //This function will do nothing for any other keypresses.
}

color generateRandomColor()
{
  color result;
  result = color(random(0, 192), random(0, 192), random(0, 192));
  return result;
}

How do I get balloons to move?

Balloon [] balloons = new Balloon[30];

void setup() {
  size(400, 400);
  frameRate(20);
  for (int i = 0; i < balloons.length; i++) {
    float w = random(20, 45);
    float h = w + random(5, 10);
    float x = random(w/2, width-w/2);
    float y = random(h/2, height-h/2);
    color c = color(random(255), random(255), random(200), random(128, 200));
    balloons[i] = new Balloon(x, y, w, h, c);
  }
}

void draw() {
  background(255);
  for (int i = 0; i < balloons.length; i++) {
    // Only act on balloons that have not "popped"
    if (balloons[i].alive) {
      balloons[i].display();
      //balloons[i].move();
      if (balloons[i].hit()) balloons[i].alive = false;
    }
  }
}

class Balloon {
  // An alternative method to "pop" a balloon
  boolean alive = true;

  float x;
  float y;
  float w;
  float h;
  color c;
  float xSpeed;
  float ySpeed;

  Balloon(float bx, float by, float bw, float bh, color bc) {
    x = bx;
    y = by;
    w = bw;
    h = bh;
    c = bc;
    xSpeed = 3;
    ySpeed = 7;
  }

  void display() {
    fill(c, 150);
    ellipse(x, y, w, h);
  }

  boolean hit() {
    float a = w / 2.0;
    float b = h / 2.0;
    float ex = mouseX - x; // calculate relative to center of ellipse
    float ey = mouseY - y;
    float r = (ex * ex) / (a * a) + (ey * ey) / (b * b);
    return (r < 1);
  }

  /*void pop() {
   x= -1000;
   y= -1000;
   xSpeed = 0;
   ySpeed = 0;
   alive = false;
   }*/

  void move() {
    x += xSpeed;
    if (x < w/2 || x > width-w/2) xSpeed = -xSpeed;

    y += ySpeed;
    if (y < h/2 || y > height-h/2) ySpeed = -ySpeed;
  }
}

I have this code almost finished, but I am stuck at one part. I don't understand how to make the balloon disappear when the mouse is over the balloon. Here is some information, http://evc-cit.info/cit020/arrays.html

Here is my code;
Balloon [] balloons = new Balloon[30];

void setup()
{
  float x;
  float y;
  float w;
  float h;
  color c;
  size(400, 400);
  frameRate(20);
  for (int i = 0; i < balloons.length; i++)
  {
    w = random(20, 45);
    h = w + random(5, 10); /* h = random(25, 55); // doesn't work */
    x = random(w/2, width-w/2);/* so that balloon is on screen */
    y = random(h/2, height-h/2);/* so that balloon is on screen */
    c = color(random(255), random(255), random(200), random(128, 200));
    balloons[i] = new Balloon(x, y, w, h, c);/* random color */
  }
}
void draw()
{
  background(255);
  for (int i = 0; i < balloons.length; i++)
  {
    if (balloons[i].hit(mouseX, mouseY)) // the parameters will be the point we want to test to see if it's "inside"
    }
else
{
 

  balloons[i].display();
  balloons[i].move(); //move the balloon at index number i*/

  // if the mouse "hits" balloon at index number i
  //   then pop balloon at index number i
}
}


class Balloon
{
  float x;
  float y;
  float w;
  float h;
  color c;
  float xSpeed;
  float ySpeed;

  Balloon(float bx, float by, float bw, float bh, color bc)
  {
    x = bx;
    y = by;
    w = bw;
    h = bh;
    c = bc;
    xSpeed = 3;
    ySpeed = 7;
  }

  void display()
  {
    fill(c, 150);
    ellipse(x, y, w, h);
  }

  boolean hit (int pX, int pY)
  {
    float a = w / 2.0;
    float b = h / 2.0;
    float ex = pX - x; // calculate relative to center of ellipse
    float ey = pY - y;
    float r = (ex * ex) / (a * a) + (ey * ey) / (b * b);
    return (r < 1);
  }

  void pop()
  {
    x= -1000;
    y= -1000;
    xSpeed = 0;
    ySpeed = 0;
  }
 
  void move()
  {
    x += xSpeed;
    if (x < w/2 || x > width-w/2)
    {
      xSpeed = -xSpeed;
    }

    y += ySpeed;
    if (y < h/2 || y > height-h/2)
    {
      ySpeed = -ySpeed;
    }
  }
}

How do I create a balloon string, I have the rest of the work done.
I also tried using this,
line(x, y + h/3, x, y + h/3 + 20);
 Here is a hint that I tried to follow but confused still;

display()

This function draws the balloon at its current position. It will also draw a a string at the bottom of the balloon (using a black line()). The string starts at the center of the balloon at the bottom, and extends to the right one-third the width of the balloon and the line’s height is one-third the height of the balloon. The string is outside the balloon’s bounding box.

Balloon balloon1;
Balloon balloon2;

void setup()
{
  size(300, 300);
  balloon1 = new Balloon(50, 60, 20, 30, color(255, 0, 0));
  balloon2 = new Balloon(70, 100, 30, 40, color(0, 255, 255));
}
void draw()
{
  background(255);
  balloon1.move();
  balloon1.display();
  balloon2.move();
  balloon2.display();
}
class Balloon
{
  float x;
  float y;
  float w;
  float h;
  color c;
  float xSpeed;
  float ySpeed;

  Balloon(float bx, float by, float bw, float bh, color bc)
  {
    x = bx;
    y = by;
    w = bw;
    h = bh;
    c = bc;
    xSpeed = 1;
    ySpeed = 2;
  }

  void display()
  {
    fill(c, 150);
    ellipse(x, y, w, h);
    line(x, y + h/3, x, y + h/3 + 20);
  }

  void move()
  {
    x += xSpeed;
    y += ySpeed;
   
    if (x < w/2 || x > width-w/2) xSpeed = -xSpeed;
    if (y < h/2 || y > height-h/2) ySpeed = -ySpeed;
    }
}

I can't figure out the speed for this, how to make it move?

move()

This function moves the balloon as specified in the x and y speed instance variables. If the balloon would move off the screen, it reverses direction. The balloon may not leave the window; the string may.

Balloon balloon1;
Balloon balloon2;

void setup()
{
  size(300, 300);
  balloon1 = new Balloon(50, 60, 20, 30, color(255, 0, 0));
  balloon2 = new Balloon(70, 100, 30, 40, color(0, 255, 255));
}
void draw()
{
  background(255);
  balloon1.move();
  balloon1.display();
  balloon2.move();
  balloon2.display();
}



class Balloon
{
  float x;
  float y;
  float w;
  float h;
  color c;
  float xSpeed;
  float ySpeed;

  Balloon(float bx, float by, float bw, float bh, color bc)
  {
    x = bx;
    y = by;
    w = bw;
    h = bh;
    c = bc;
    xSpeed = 1;
    ySpeed = 2;
  }
 
  void display()
  {
    fill(c);
    ellipse(x, y, w, h);
  }
 
  void move()
  {
    // do stuff here
  }
}

I can't figure how to get the string which is suppose to be line for the balloon. Here how it looks like;
http://imgur.com/jjhZJ

float bX = 50;
float bY = 60;
float bWidth = 70;
float bHeight = 80;
color balloonColor = color(0, 0, 255);
float bHSpeed = 2;
float bVSpeed = 2;

void setup()
{
  size(300, 300);
  bWidth = random(10, 70);

  bHeight = random(10, 80);

  balloonColor = color(random(0, 255), random(0, 255), random(0, 255)); // randomly set the balloon color

  ellipse(bX + 50, bY + 60, bWidth + 70, bHeight + 80); // set bX and bY; make sure that the balloon
  //will be entirely on screen when it starts

  bX = random(bWidth / 2.0, width - bWidth / 2.0);
  bHSpeed = 2;
  bVSpeed = 2;
  smooth();
}

void draw( )
{
  bX += bHSpeed;
  bY += bVSpeed;


  background(255);
  drawHouse(20, 155, 95, 95);
  drawHouse(150, 80, 120, 170);


  drawBalloon(bX, bY, bWidth, bHeight, balloonColor);// draw the balloon by calling drawBalloon()

  bX += bHSpeed;

  if (bX < bWidth / 2 || bX > width - bWidth / 2)
  {
    bHSpeed = -bHSpeed;
  }
  if (bY < bHeight / 2 || bY > width - bHeight / 2)
  {
    bVSpeed = -bVSpeed;
  }
}

void drawBalloon(float x, float y, float w, float h, color c)
{
 
  fill(c, 50);
  ellipse(x, y, w, h);
  fill(10, 30, 110, 20);
}

void drawHouse(float x, float y, float w, float h)
{
  float topY = y + h / 3.0;
  fill(255);
  stroke(0);
  triangle(x + w / 2.0, y, x, topY, x + w, topY);
  rect(x, topY, w, 2.0 * h / 3.0);
  rect(x + w / 8.0, y + h / 3.0 + (0.125) * 2 * h / 3.0, w / 8.0, h / 8.0);
  rect(x + 5.0 / 8.0 * w, y + 3.0 / 4.0 * h, 3.0 / 16.0 * w, h / 4.0);
}

I am having trouble getting the same exact picture. I realized that the one that I did does not start the way it should be. If you see if you run it has all the shapes then if you run it again it only shows one shape or the other way around. It should have all the shapes running when you run it again and again. Also I can't seem to get the blue color in there.

Here are more hints to this;
part 1
http://imgur.com/yCiva
part 2
http://imgur.com/ZkGkI
This is how it suppose to look like;
http://evc-cit.info/cit020/coffee_solution/index.html




int cx;
int cy;
int sx;
int sy;
int tx;
int ty;
int distance1;
int distance2;
int cityBlockDistance(int x1, int y1, int x2, int y2)
{
  int result;
  result = (abs(x1 - x2) + abs(y1 - y2));
  return result;
}

void setup()
{
  size(200, 200);
  findCoffee();
}


void mouseClicked()
{

  findCoffee();
}

void findCoffee()
{
  background(255); 
  // Draw the grid lines. No boarders!
  for (int i=1; i<10; i++)
  {
    line(0, i*20, width, i*20);
    line(i*20, 0, i*20, height);
  }
  //Generate cx and cy.
  cx = 20 * int(random(1, 10));
  cy = 20 * int(random(1, 10));
  //Generate sx and sy
  sx = 20 * int(random(1, 10));
  sy = 20 * int(random(1, 10));
  //Generate tx and ty.
  tx = 20 * int(random(1, 10));
  ty = 20 * int(random(1, 10));
  //Calculate distancei1.
  distance1 = cityBlockDistance(tx, ty, cx, cy);
  distance2 = cityBlockDistance(tx, ty, sx, sy);
  if (distance1 < distance2)
  {
    fill(0, 0, 255);
  }
  else
  {
    fill(255);
  }
}
void draw()
{
  // Draw a circle.
  ellipse(cx, cy, 10, 10);
  fill(255, 255, 255);
  if (distance1 > distance2)
  {
    fill(45, 0, 255);
  }
  else
  {
    rectMode(CENTER);
    rect(sx, sy, 10, 10);
    fill(0, 128, 0);
  }
  if (distance1 > distance2)
  {
    fill(45, 0, 255);
  }
  else
  {
    triangle( tx-5, ty+5, tx, ty-5, tx+5, ty+5);
  }



  //Calculate distance2.
  //distance2;
  //Set fill color.
}

How can I get this to work;

Here are more hints to this;
part 1
http://imgur.com/yCiva
part 2
http://imgur.com/ZkGkI

Here is some parts to it;

1. size(700, 500);
2. background(255);
3. int numLines = 20;
4. float h = height/numLines;
5. float w = width/numLines;
6. for (int i=0; i<numLines; i++) {
7.   line(0, i*h, width, i*h);
8.   line(i*w, 0, i*w, height);
9. }