Problem with hover on area curves

Processing Coding Questions
1

I am creating a sketch with comparison of different social media uses. I have layered multiple area curves one in front of the other. My intention is to create a hover effect on the point of interest. The problem I ran into is that an area curve placed in topmost layer (created last) overrides the hover comparison value for all curves.

I’ll paste the code of interest here:

void drawDataPoints(int col) {
  int rowCount = socialMedia.getRowCount();
  
  for(int row = 0; row < rowCount; row++) {
    float value = socialMedia.getFloat(row, col);
    float x = map(row, 0, 12, 50, width - 50);
    float y = map(value, dataMin, dataMax, plotY2, plotY1);
    strokeWeight(3);
    point(x, y);
    if((mx>50) && (mx<(width-50))) {
      stroke(60);
      strokeWeight(1);
      line(mx, plotY2, mx, plotY1);
      if(abs(mx-x) < 2) {
        fill(0);
        text(value, mx+6, my-30);
        println("value: " + value);
      }
  }
    }
}

This is the function for drawing point of interests on the curve.

There’s another function to show a curve as an area.

void drawDataArea(int col) {
  noStroke();
  beginShape();
  int rowCount = socialMedia.getRowCount();
  for (int row = 0; row < rowCount; row++) {
    float value = socialMedia.getFloat(row, col);
    float x = map(row, 0, 12, 50, width - 50);
    float y = map(value, dataMin, dataMax, plotY2, plotY1);
    vertex(x, y);
  }
// For lower-right and lower-left corners.
vertex(plotX2, plotY2);
vertex(50, plotY2);
endShape(CLOSE);
}

I’ve called a function for mouseMoved() where mx = mouseX

I don’t know how much of sense this question makes but please help.

Capture
Capture796×296 9.9 KB

This is what I got thus far and I am looking to have a hover effect on those little black dots.

2 Likes
2

You can just use get (mouseX,mouseY) to store a color underneath the mouse

Now compare the color to the color of the graphs

When they are equal that’s your graph

2 Likes
3

@Chrisir, it’s a clever solution. :wink:

3 Likes
4

This trick is also used in other applications, like selecting complex 3D shapes. Sometimes you draw an onscreen image and an offscreen buffer to mark the color zones for checking. That is called “picking.” See for example the Picking Library http://n.clavaud.free.fr/processing/library/picking/

2 Likes