# Problem with hover on area curves

**URL:** <https://discourse.processing.org/t/problem-with-hover-on-area-curves/18120>\
**Category:** Coding Questions\
**Created:** [February 26, 2020, 2:47am UTC](https://discourse.processing.org/t/problem-with-hover-on-area-curves/18120 "2020-02-26T02:47:54Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Samizen](https://avatars.discourse-cdn.com/v4/letter/s/dfb087/32.png) [@Samizen](https://discourse.processing.org/u/Samizen)\
**Post date:** [February 26, 2020, 2:47am UTC](https://discourse.processing.org/t/problem-with-hover-on-area-curves/18120/1 "2020-02-26T02:47:54Z")

</div>

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:

```auto
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.

```auto
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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/c/cb200bf6375d11a30d21321d5af0eacdbfeca25b.png)

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

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [February 26, 2020, 8:44am UTC](https://discourse.processing.org/t/problem-with-hover-on-area-curves/18120/2 "2020-02-26T08:44:09Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![fred](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/fred/32/8180_2.png) [@fred](https://discourse.processing.org/u/fred)\
**Post date:** [February 26, 2020, 10:39am UTC](https://discourse.processing.org/t/problem-with-hover-on-area-curves/18120/3 "2020-02-26T10:39:49Z")

</div>

@Chrisir, it’s a clever solution. 😉

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [February 29, 2020, 4:54am UTC](https://discourse.processing.org/t/problem-with-hover-on-area-curves/18120/4 "2020-02-29T04:54:36Z")

</div>

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/](http://n.clavaud.free.fr/processing/library/picking/)