Create a rollover effect with data within a grid array?

breezySC007

Hi guys, I am new to Processing (two months!) so please excuse the use of any layman terms. Basically I have created a grid array, "mylife" and would like additional information to appear when your mouse rolls over the chart. Ideally, when you rollover the chart and the value in the grid array is 0 I want the "stock" array to draw. When you rollover a value of 1, I want the "sleep" array to draw. In the end I would like to be able to have additional information drawn for each value in the grid array. Let me know if I need to give anymore information, I'm using Processing 2.0. Here is the code...

float[] stock = {0,0,0,0, 1.94, 0.27, -0.12, 0.39, -0.30, -0.30, -0.30, -0.18, 0.43, 0.51, -0.20, -0.35, -0.35, -0.35, -0.35, 0.47, -0.95, 0,0,0,0 };

float[] sleep = {0,0,0,0, -1, -.5, 0, 0, -.5, -1.5, -.5, -1.5, -1.5, 2, 0, -.5, 1, 1, 3, .5 ,0,0,0,0,};

int[][] mylife = 
{ {0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},
  {0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},
  {0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},
  {0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},
  {0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},
  {0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},
  {1, 1, 1, 1, 1, 1, 1, 1, 1, 8, 2, 2, 2, 2, 2, 2, 9, 9, 6, 6, 4, 4, 4, 4},
  {1, 1, 1, 1, 1, 1, 1, 1, 6, 8, 2, 2, 2, 2, 2, 2, 7, 2, 2, 2, 2, 2, 9, 6},
  {1, 1, 1, 1, 1, 1, 1, 1, 1, 6, 7,10,10,10,10, 8, 2, 2, 2, 2, 2, 2, 2, 4},
  {6, 1, 1, 1, 1, 1, 1, 1, 1, 6, 7, 4, 4, 4, 4, 8, 2, 2, 2, 2, 2, 2, 2, 9},
  {1, 1, 1, 1, 1, 1, 1, 1, 7, 6, 2, 2, 2, 2, 2, 2, 7, 2, 2, 2, 2, 2, 2, 1},
  {1, 1, 1, 1, 1, 1, 1, 1, 1, 8, 2, 2, 2, 2, 2, 2, 7, 2, 2, 2, 2, 2, 6, 1},
  {1, 1, 1, 1, 1, 1, 1, 1, 8, 7, 2, 2, 2, 2, 2, 2, 7, 2, 2, 2, 2, 2, 2, 1},
  {1, 1, 1, 1, 1, 1, 1, 1, 1, 8, 4, 4, 4, 4, 4, 6, 5, 4, 4,10,10, 6, 6, 6},
  {6, 1, 1, 1, 1, 1, 1, 1, 1, 8,10,10, 4, 4, 4, 4, 8, 2, 2, 2, 2, 2, 2, 4},
  {4, 4, 1, 1, 1, 1, 1, 4, 4, 5, 3, 3, 3, 3, 3, 3, 3, 3, 5, 9, 9, 7, 6, 6},
  {6, 1, 1, 1, 1, 1, 1, 1, 7,10,10,10,10, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4,10},
  {1, 1, 1, 1, 1, 1, 1, 1, 1, 8, 7,10,10, 4, 4, 4, 8, 2, 2, 2, 2, 2, 2, 2},
  {1, 1, 1, 1, 1, 1, 1, 1, 4, 4, 8, 2, 2, 2, 2, 2, 7, 2, 2, 2, 2, 2, 2, 4},
  {4, 1, 1, 1, 1, 1, 1, 1, 1, 8, 4, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 4, 4},
  {4, 4, 1, 1, 1, 1, 1, 4, 4, 5, 3, 3, 3, 3, 3, 3, 3, 3, 5, 9,10,10, 6, 6},
  {6, 6, 1, 1, 1, 1, 1, 1, 1, 1, 7, 4, 4, 4, 7, 4, 4, 2, 2, 2, 2, 2, 2, 4},
  {4, 1, 1, 1, 1, 1, 1, 1, 4, 4, 5, 3, 3, 3, 3, 3, 3, 3, 5, 7, 6, 6, 9, 6},
  {0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},
  {0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},
};

int r = 0;
int rows = 0;
int xscale = 100;
int yscale = 25;


void setup() {
  size(800, 1000);
  background(255);
 // noLoop();
}

void draw(){
   pushMatrix();
   translate(-40,400);
   rotate(radians(-90));
   mylife();
   popMatrix();  

   pushMatrix();
   translate(0,600);
   sleep();
   popMatrix(); 

   pushMatrix();
   translate(0,550);
   stocks();
   popMatrix();  
}


void mylife() {
  for (int i=0; i<24; i++) {
  for (int j=0; j<24; j++) {
  r= mylife[i][j];
  noStroke();
  cchoice(r);
  rect((j*15),(i*30),15,15);
  }
  }
}


void stocks(){
  strokeWeight(6);
  stroke(236, 21, 89);
  smooth();
  float lineWidth = (float) width/(stock.length-1);
  for (int i=0; i<stock.length-1; i++) {
  line(i*lineWidth, stock[i]*80, (i+1)*lineWidth, stock[i+1]*80);
  }
}

void sleep(){
  strokeWeight(6);
  stroke(98,226,0);
  smooth();
  float lineWidth = (float) width/(stock.length-1);
  for (int i=0; i<sleep.length-1; i++) {
  line(i*lineWidth, sleep[i]*120, (i+1)*lineWidth, sleep[i+1]*120);
}
}


void cchoice(int value) {
  if (value == 0) {
  fill(255,255,255);
  }else if (value==1) {
     fill(33, 50, 64);
  }else if (value==2) {
   fill(16, 200, 205);
  }else if (value==3) {
     fill(98,226,0);
  }else if (value==4) {
     fill(255,113,0); 
  }else if (value==5) {
    fill(151,2,167);
  }else if (value==6) {
     fill(17,66,170);
  }else if (value==7) {
     fill(250, 249, 60);
  }else if (value==8) {
     fill(236, 21, 89);
  }else if (value==9) {
     fill(0,166,124);
  } else {
    fill(201,246,0);
  } 
}

PhiLho

You need to check mouseX and mouseY against the coordinates of your rects. Would be easier if you don't use translate() and rotate(), BTW...

A common alternative is to draw each rect on a separate (not displayed) PGraphics, with a different color for each. Then check the color under the mouse position to know which rect is hovered.

breezySC007

Thanks for the reply, I looked into PGraphics and it was a little over my head. I think I am going to use a simple mousePressed for this project. Thanks for your time :-)