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.
}