void draw()
{
  // for animation
  float fTimeDiff = (float)(millis() - gnTimeStart)/1000.0f;
  
  background(0);
  
  pushMatrix();
  pushStyle();
  
  // list of years 
  for(int i = 0; i<7; i++) {
   //stroke(255);
   textFont(gFont1);
   fill(255);
   textAlign(CENTER, CENTER);
   text(years[i], (i*120)+180, height-70);
   }
   
   // list of musicians
   for(int i = 0; i<10; i++) {
     textFont(gFont1);
     fill(255);
     textAlign(LEFT, LEFT);
     text(musicians[i], 30, (i*60)+105);
   }
   
   // Title and copyright
   textFont(gFont2);
   textAlign(LEFT, LEFT);
   fill(200);
   text("Who is the most popular classical musician in Seattle?", 30,30,900,30);
   textFont(gFont1);
   textAlign(RIGHT, TOP);
   fill(100);
   text("Project 2: BiVariate 2D Spatial Map Project, MAT 259 Winter 2012", 500,730,500,730);
   text("by Yoon Chung Han", 500,740,500,740);
   text("Press Key 1,2,3,4 to change color", 500,40,500,40);
  
  // draw each bar of musician
  for(int i=0; i<7; i++)  {
    for(int j=0; j<12; j++)  {
    
    int nIdx   = i*12+j;
    int nWidth = (gnBarsWidth+gnBarsHSpace)*7*12 - 120+(i*12+j)*gnBarsWidth;
      
      for( int k=0; k<gpDataMatrices.length; k++ )  {

        pushMatrix();
        pushStyle();
        
        int nColor = (int)((float)gpDataMatrices[k][i][j]/(float)gpMaxDataMatrices*255.0f);  // mode 1
        int nHue = (int)(240.0f - (float)gpDataMatrices[k][i][j]/(float)gpMaxDataMatrices*240.0f);  // mode2
        float nColor2 = map(nColor, 0, 255, 50, 255); // mode3
        float nColor3 = map(nColor, 0, 255, 30, 255); // mode3

        int nAlpha = 255;
        float fDiff = fTimeDiff - gfAnimationProceedSpeed*nIdx;
        if( fDiff <= gfAnimationSpeed || fDiff >= .0f )  nAlpha = (int)(fDiff/gfAnimationSpeed*255.0f);
        
        // box
        if( gpBarsMouseEvent[k][i][j] == true )  {
          
          switch(gnColorMode)  {
            case 1:
              colorMode(RGB, 255);
              stroke(0, 0, 0, nAlpha);
              fill(255, 255, 255, nAlpha);
              break;
              
            case 2:  // hsb
              colorMode(HSB, 360, 255, 255, 255);
              stroke(nHue, 192, 255, nAlpha);
              fill(nHue, 255, 255, nAlpha);
              break;
              
              case 3:  // hsb
              colorMode(RGB, 255, 255, 255, 255);
              stroke(nColor2, nColor2, 0, nAlpha);
              fill(255, 255, 0, nAlpha);
              break;
              
              case 4:  // hsb
              colorMode(RGB, 255, 255, 255, 255);
              stroke(255, 0, 0, nAlpha);
              fill(255, 0, 0, nAlpha);
              break;
          }
          
        }
        else  {

          switch(gnColorMode)  {
            case 1:
              colorMode(RGB, 255);
              noStroke();
              fill(nColor, nColor, nColor, nAlpha);
              break;
              
            case 2:  // hsb
              colorMode(HSB, 360, 255, 255, 255);
              noStroke();
              fill(nHue, 255, 200, nAlpha);
              break;
              
               case 3:  // hsb
              colorMode(RGB, 255, 255, 255, 255);
              noStroke();
              fill(nColor2,nColor2, 0, nAlpha);
              break;
              
               case 4:  // hsb
              colorMode(RGB, 255, 255, 255, 255);
              noStroke();
              fill(nColor3, 0, 0, nAlpha);
              break;
          }
        }
        
        float fRectX       = gnBarsLeft + (float)nIdx*(gnBarsWidth+gnBarsHSpace);
        float fRectY       = gnBarsTop + k * (gnBarsHeight+gnBarsVSpace);
        float fRectWidth   = gnBarsWidth;
        float fRectHeight  = gnBarsHeight;
        noStroke();
        rect(fRectX, fRectY, fRectWidth, fRectHeight);
        
        popStyle();
        popMatrix();
          
      }  // for k
      
    }  // for j
  }  // for i
  
  // draw number onto the bar
  // (this should be done after drawing bars)
  textFont(gFont1);  // for rollover effect
  textAlign(RIGHT, TOP);
  for(int i=0; i<7; i++)  {
    for(int j=0; j<12; j++)  {
    
    int nIdx   = i*12+j;
    int nWidth = (gnBarsWidth+gnBarsHSpace)*7*12 - 120+(i*12+j)*gnBarsWidth;
      
      for( int k=0; k<gpDataMatrices.length; k++ )  {

        // mouse rollover
        if( gpBarsMouseEvent[k][i][j] == true )  {
          
          // text
          String strText = gpDataMatrices[k][i][j].toString();
          int nTextX = gnBarsLeft + nIdx*(gnBarsWidth+gnBarsHSpace) - gnBarsWidth*2;
          int nTextY = gnBarsTop + k * (gnBarsHeight+gnBarsVSpace) - 20;
          int nTextWidth = gnBarsWidth*4;
          int nTextHeight = 20;
          
          fill(0);
          text(strText, nTextX+1, nTextY+1, nTextWidth+1, nTextHeight+1 );
          fill(255,0,0);
         // textFont(gFont2);
          text(strText, nTextX, nTextY, nTextWidth, nTextHeight );
          
        }  // if
        
      }  // for k
      
    }  // for j
  }  // for i

  popMatrix();
  popStyle();
  
}