# Display a text over an hovered area

**URL:** <https://discourse.processing.org/t/display-a-text-over-an-hovered-area/8706>\
**Category:** Coding Questions\
**Created:** [February 24, 2019, 11:58pm UTC](https://discourse.processing.org/t/display-a-text-over-an-hovered-area/8706 "2019-02-24T23:58:30Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![sevaus](https://avatars.discourse-cdn.com/v4/letter/s/e56c9b/32.png) [@sevaus](https://discourse.processing.org/u/sevaus)\
**Post date:** [February 24, 2019, 11:58pm UTC](https://discourse.processing.org/t/display-a-text-over-an-hovered-area/8706/1 "2019-02-24T23:58:30Z")

</div>

Hello,

Say I have several automata: [https://imgur.com/a/bga8qgE](https://imgur.com/a/bga8qgE) and I want to have a text displayed when the user hovers any arc. How could I do this?

The automata was created using the usual functions arc, rect, line and ellipse.  
I’ve tried looking into tickle ([https://p5js.org/examples/interaction-tickle.html?fbclid=IwAR1hkyiRNGDVIgffvldHSbL9HMBKJHO-gOAWTdPKn9G36FZ-qAwdyJ0Ld3k](https://p5js.org/examples/interaction-tickle.html?fbclid=IwAR1hkyiRNGDVIgffvldHSbL9HMBKJHO-gOAWTdPKn9G36FZ-qAwdyJ0Ld3k)) and mouse functions but to no avail.

---

<div class="post-metadata">

**Author:** ![Carlosmarcab](https://avatars.discourse-cdn.com/v4/letter/c/d9b06d/32.png) [@Carlosmarcab](https://discourse.processing.org/u/Carlosmarcab)\
**Post date:** [February 25, 2019, 7:19am UTC](https://discourse.processing.org/t/display-a-text-over-an-hovered-area/8706/2 "2019-02-25T07:19:49Z")

</div>

Hi! How do you create this automata? Have you created a class to handle them? If you have, create a mouseover method in that class that returns a boolean if mouseX and mouseY are inside the bounding box and group the automata in an ArrayList. Iterate through the ArrayList in draw() and if it finds mouseOver to be true, draw the appropriate text.

---

<div class="post-metadata">

**Author:** ![sevaus](https://avatars.discourse-cdn.com/v4/letter/s/e56c9b/32.png) [@sevaus](https://discourse.processing.org/u/sevaus)\
**Post date:** [February 25, 2019, 3:43pm UTC](https://discourse.processing.org/t/display-a-text-over-an-hovered-area/8706/3 "2019-02-25T15:43:40Z")

</div>

Hello,

The automata is created “by hand”:

```auto
function drawArc(e1,e2,a,k){
  var x = 155+(a-1)*230, y= 140+(4-e1)*50-(e2-e1)*25, h = 2+(e2-e1)*50;
  if (k==1){
    if (e2>=e1){
      arc(x,y,50+(e2-e1)*30,h, 3 * PI / 2, PI / 2, OPEN);
      line(x,y-h/2, x+8,y-h/2-8);
      line(x,y-h/2, x+8,y-h/2+8);
    }
    else {
      arc(x-30,y, 50+(e1-e2)*30, h, 3 * PI / 2, PI / 2, OPEN);
      line(x-38,y-h/2-9, x-30,y-h/2-1);
      line(x-38,y-h/2+7, x-30,y-h/2-1);
    }
  }
  else if (k==2){
    if (e2<e1){
      arc(x,y,50+(e1-e2)*30,h, PI / 2, 3* PI / 2, OPEN);
      line(x,y-h/2, x+8,y-h/2-8);
      line(x,y-h/2, x+8,y-h/2+8);
    }
    else {
      arc(x-30,y, 50+(e2-e1)*30, h, PI / 2, 3*PI / 2, OPEN);
      line(x-38,y-h/2-9, x-30,y-h/2-1);
      line(x-38,y-h/2+7, x-30,y-h/2-1);
    }
  }

}

```

What’s a class?

---

<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 25, 2019, 5:51pm UTC](https://discourse.processing.org/t/display-a-text-over-an-hovered-area/8706/4 "2019-02-25T17:51:03Z")

</div>

Ok basically what you do

you want to have 3 arrays (lists) that hold your data for mouse hover :

- First x[] holds x position of automata

- 2nd holds y position: y []

- 3rd text you want to display : text[]

**Idea**

Idea is that in the first line of each 3 lists the data of the 1st automata

2nd line - again distributed over 3 arrays- data for 2nd automata

Before setup () declare them as :

float[] x = new float [5];  
float[] y = new float [5];  
String [] text = new String [5];

Now in setup() put the data in the 3 parallel arrays:

// first automata  
x[0] = 100;  
y[0] = 200; // adjust  
text[0] = “first automata“;

//2nd automata  
x[1]=333;  
y[1]=444; // adjust  
text[1]= “2nd automata whatever…“;

Now for loop i over them and check

```
 if(dist(mouseX, mouseY, x[],y[]) < 50) {
     
    text( text[], x[],y[] );
 
 }

```

question : what belongs into the 5 empty brackets [] ?

dist here gives you the distance between mouse and current automata position checked in this for loop iteration

If this distance is small enough we show the text

**OOP and classes**

Since you asked.

Now this whole solution is far from perfect or beautiful

One point is that you store the automata position in an array and in your code (where you display them). So that’s double storing. Instead where you display them you could also use the array data x and y.

Next step would be to bundle the data for one automata in a package so all data for one automata is in one place. For this approach you would make a Automata class holding the data. This approach is called object oriented programming (oop). There is a tutorial on that.

Essentially the class Automata is the cookie maker and the objects are the cookies (your automata). Hence the name oop.  
You can store the automata then in an array, so you need only one array and not 3.

Moreover you could place a display function and a mouse hover function inside the class so each automata has its functions.

Chrisir

---

<div class="post-metadata">

**Author:** ![sevaus](https://avatars.discourse-cdn.com/v4/letter/s/e56c9b/32.png) [@sevaus](https://discourse.processing.org/u/sevaus)\
**Post date:** [February 27, 2019, 1:58pm UTC](https://discourse.processing.org/t/display-a-text-over-an-hovered-area/8706/5 "2019-02-27T13:58:57Z")

</div>

I think I get the idea but how can I adapt it so that there are (potentially) multiple texts displayed for a single automata (one for each arc)?

I’ll look into oop, thanks!

Another thing I want to do is being able to freely move around/drag the arcs: do you know how it could be done?

---

<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 27, 2019, 2:35pm UTC](https://discourse.processing.org/t/display-a-text-over-an-hovered-area/8706/6 "2019-02-27T14:35:28Z")

</div>

> [@sevaus](#):
>
> there are (potentially) multiple texts displayed for a single automata

Do you mean they are chosen randomly from a list of texts? You could have arrays text1, text2 etc. and have a random number that tells which one to use. You could also use a 2D array (a grid, see tutorials). Essentially each cell holds a text and then you have one index that is the automatas index and one that is the random number.

**Drag and Drop**

Anyway: when you click (use function mousePressed) on an Automata and you hold the mouse set a global variable hold = true; For loop over all automata and check which one was clicked; store that number i\_clicked=i;

make a function mouseReleased where you say hold=false;

this function gets called automatically

In draw move the selected automata according to the mouse movement by changing the value in the arrays x and y at Position i\_clicked.

---

<div class="post-metadata">

**Author:** ![sevaus](https://avatars.discourse-cdn.com/v4/letter/s/e56c9b/32.png) [@sevaus](https://discourse.processing.org/u/sevaus)\
**Post date:** [February 28, 2019, 7:08am UTC](https://discourse.processing.org/t/display-a-text-over-an-hovered-area/8706/7 "2019-02-28T07:08:50Z")

</div>

Not randomly, there are as many texts as there are arcs for each automata.

---

<div class="post-metadata">

**Author:** ![sevaus](https://avatars.discourse-cdn.com/v4/letter/s/e56c9b/32.png) [@sevaus](https://discourse.processing.org/u/sevaus)\
**Post date:** [February 28, 2019, 7:52am UTC](https://discourse.processing.org/t/display-a-text-over-an-hovered-area/8706/8 "2019-02-28T07:52:00Z")

</div>

Also, I want the text to be gone when I’m no longer hovering the area (it currently stays forever), how can I do that?

---

<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 28, 2019, 8:11am UTC](https://discourse.processing.org/t/display-a-text-over-an-hovered-area/8706/9 "2019-02-28T08:11:16Z")

</div>

**This is for the drag and drop part**

make a function mouseReleased where you say hold=false;

this function gets called automatically

* * *

In draw only show the text when `hold` is true

Or set i\_clicked= -1; in mouseReleased, indicating no automata is selected. Then check this value in draw() and don’t show the text when i\_clicked==-1;

Attention, when you use -1 in the arrays program will crash. So always check if it’s -1 before using it

---

<div class="post-metadata">

**Author:** ![sevaus](https://avatars.discourse-cdn.com/v4/letter/s/e56c9b/32.png) [@sevaus](https://discourse.processing.org/u/sevaus)\
**Post date:** [February 28, 2019, 8:18am UTC](https://discourse.processing.org/t/display-a-text-over-an-hovered-area/8706/10 "2019-02-28T08:18:04Z")

</div>

I’m not following, at the moment I have a function drawArc(automata) that I call in draw() for every automata and I added the test if(dist(mouseX, mouseY, x y) \< 50) in this function drawArc.

Where should I define & call mouseReleased?

---

<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 28, 2019, 9:26am UTC](https://discourse.processing.org/t/display-a-text-over-an-hovered-area/8706/11 "2019-02-28T09:26:05Z")

</div>

Sorry, my bad.

I was referring to the drag and drop functionality, you were talking about the text()

Do you use `background` at the beginning of draw() ? You should.

This line : should provide it that the text only appears when the mouse is near the automata

if(dist(mouseX, mouseY, x y) \< 50)

---

<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 28, 2019, 9:29am UTC](https://discourse.processing.org/t/display-a-text-over-an-hovered-area/8706/12 "2019-02-28T09:29:44Z")

</div>

> [@sevaus](#):
>
> Not randomly, there are as many texts as there are arcs for each automata.

Hm.

My approach was using arrays. I am not sure you have done the arrays bit yet.

Each arc/automata has its position (x,y) and its text.

They are stored in arrays :

```auto
  float[] x = new float [5];
  float[] y = new float [5];
  String [] text = new String [5];

```

and defined separately for each arc in `setup()`:

```auto
// first automata
x[0] = 100;
y[0] = 200; // adjust
text[0] = “first automata“;

//2nd automata
x[1]=333;
y[1]=444; // adjust
text[1]= “2nd automata whatever…

etc.

```

Your line `if(dist(mouseX, mouseY, x y) < 50)` should in fact be in a **for loop** (at the end of function drawArc) with `i` as a variable and use these arrays:

```auto
  if(dist(mouseX, mouseY, x[i],y[i]) < 50) {
     
     text( text[i], x[i],y[i] );
 
  }

```

Can you use the arrays in this way? Then each automata has its own position for mouse hover and its own text.

Chrisir 😉

P.S.

QUICK DEMO

```auto

// Before setup () declare arrays  
float[] x = new float [3];
float[] y = new float [3];
String [] text = new String [3];

void setup() {

  size(900, 600);

  // Now in setup() put the data in the 3 parallel arrays:

  // first automata
  x[0] = 100;
  y[0] = 200; // adjust
  text[0] = "first automata";

  //2nd automata
  x[1]=333;
  y[1]=444; // adjust
  text[1]= "2nd automata whatever…";

  //3rd automata
  x[2]=333;
  y[2]=144; // adjust
  text[2]= "Third automata....\nVery Nice";
  //
}//function 

void draw() {

  background(0); 

  // for loop i over arrays and display them
  for (int i=0; i<x.length; i++) {
    fill(255); 
    rect( x[i], y[i], 
      17, 17);
  }//for

  // Now for loop i over arrays and check the distance to the mouse 
  for (int i=0; i<x.length; i++) {
    if (dist(mouseX, mouseY, x[i], y[i]) < 50) {
      fill(255, 0, 0); 
      text( text[i], 
        x[i], y[i] -17 );
    }//if
  }//for
}//function

```

---

<div class="post-metadata">

**Author:** ![sevaus](https://avatars.discourse-cdn.com/v4/letter/s/e56c9b/32.png) [@sevaus](https://discourse.processing.org/u/sevaus)\
**Post date:** [February 28, 2019, 12:17pm UTC](https://discourse.processing.org/t/display-a-text-over-an-hovered-area/8706/13 "2019-02-28T12:17:50Z")

</div>

I tried your example but the page is blank.

Why should I use background? background(0) is too dark.

I do iterate through the automata, my code is:

```auto
var overBox = false;
var locked = false;

function setup() {
  createCanvas(900, 800);
}

function draw(){

 
   for (every automata){
 
       for (every arc){
         drawArc(arc);

         overBox = (dist(mouseX, mouseY, x, y) < 50);

         if(!locked) {
                  text("text", x, y)
         }
        else {
         overBox = false;
       }
       }
     }

   }

function mousePressed() {
  if(overBox) {
    locked = true;
    fill(255);
  } else {
    locked = false;
    fill(255)
  }

}

function mouseReleased() {
  locked = false;
}

```

Currently, it does display the text I want when I hover an arc but the text still stays when I’m no longer hovering the arc.

---

<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 28, 2019, 1:01pm UTC](https://discourse.processing.org/t/display-a-text-over-an-hovered-area/8706/14 "2019-02-28T13:01:43Z")

</div>

> [@sevaus](#):
>
> I tried your example but the page is blank.

It’s java mode, not js. Run it in java mode.

> Why should I use background? background(0) is too dark.

Now, you **need** background to clear the canvas, otherwise the text won’t disappear. As with `stroke` or `fill` you can insert any gray value you want: `background(200);`