# How do you turn an ellipse into a button and when clicked it would show the data on the same screen?

**URL:** <https://discourse.processing.org/t/how-do-you-turn-an-ellipse-into-a-button-and-when-clicked-it-would-show-the-data-on-the-same-screen/19366>\
**Category:** Coding Questions\
**Created:** [April 3, 2020, 3:32pm UTC](https://discourse.processing.org/t/how-do-you-turn-an-ellipse-into-a-button-and-when-clicked-it-would-show-the-data-on-the-same-screen/19366 "2020-04-03T15:32:14Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![Stage1](https://avatars.discourse-cdn.com/v4/letter/s/df788c/32.png) [@Stage1](https://discourse.processing.org/u/Stage1)\
**Post date:** [April 3, 2020, 3:32pm UTC](https://discourse.processing.org/t/how-do-you-turn-an-ellipse-into-a-button-and-when-clicked-it-would-show-the-data-on-the-same-screen/19366/1 "2020-04-03T15:32:14Z")

</div>

Hello, im trying to figure out how i can turn my ellipse shapes to show some form of data but first it would need to be turned into a button. For example when you click the shape it should show the text next to it on the same screen with some data like numbers?

---

<div class="post-metadata">

**Author:** ![SomeOne](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/someone/32/8639_2.png) [@SomeOne](https://discourse.processing.org/u/SomeOne)\
**Post date:** [April 3, 2020, 6:34pm UTC](https://discourse.processing.org/t/how-do-you-turn-an-ellipse-into-a-button-and-when-clicked-it-would-show-the-data-on-the-same-screen/19366/2 "2020-04-03T18:34:20Z")

</div>

Ok, when you click with the mouse you get coordinates. You can check with coordinates was the click inside the ellipse, or at least was it close by. Ellipse coordinates can be used to define a rectangle that surrounds the ellipse and if the mouse click is inside it then you show text on the screen.

If your ellipse is filled with unique color, you can check if the pixel where mouse was clicked has that colour then you show again text on the screen.

---

<div class="post-metadata">

**Author:** ![slow\_izzm](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/slow_izzm/32/5637_2.png) [@slow\_izzm](https://discourse.processing.org/u/slow_izzm)\
**Post date:** [April 3, 2020, 6:44pm UTC](https://discourse.processing.org/t/how-do-you-turn-an-ellipse-into-a-button-and-when-clicked-it-would-show-the-data-on-the-same-screen/19366/3 "2020-04-03T18:44:53Z")

</div>

You can use the `dist()` function and check if the distance from the mouse and the ellipse is less that the radius/2. if this is true and the mouseIsPressed then invoke a function that shows the data.

---

<div class="post-metadata">

**Author:** ![Stage1](https://avatars.discourse-cdn.com/v4/letter/s/df788c/32.png) [@Stage1](https://discourse.processing.org/u/Stage1)\
**Post date:** [April 4, 2020, 9:06am UTC](https://discourse.processing.org/t/how-do-you-turn-an-ellipse-into-a-button-and-when-clicked-it-would-show-the-data-on-the-same-screen/19366/4 "2020-04-04T09:06:57Z")

</div>

I tried something but im not close as i dont know how to setup the mouspressed also also i dont know how to show data on the side.

```auto
void setup(){
  size(800,600);
}
void draw(){
  background(0);
  noStroke();
  fill(245, 27, 27, 151);
  ellipse(110,110,120,120);
  if(dist(mouseX,mouseY,110,110)<60){
  }
}
void mousePressed() {
  if (mouseButton == LEFT) {
    
}

```

---

<div class="post-metadata">

**Author:** ![slow\_izzm](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/slow_izzm/32/5637_2.png) [@slow\_izzm](https://discourse.processing.org/u/slow_izzm)\
**Post date:** [April 4, 2020, 7:02pm UTC](https://discourse.processing.org/t/how-do-you-turn-an-ellipse-into-a-button-and-when-clicked-it-would-show-the-data-on-the-same-screen/19366/5 "2020-04-04T19:02:05Z")

</div>

If you want to use the `mousePressed()` function then you can toggle a boolean in that distance check. Or you can check `if (dist(...) <60 && mouseIsPressed)`.

[https://p5js.org/reference/#/p5/mouseIsPressed](https://p5js.org/reference/#/p5/mouseIsPressed)

```auto
function setup() {
  createCanvas(400, 400);
  noStroke();
}

function draw() {
  background(220);

  let pos = createVector(width / 2, height / 2);
  let rad = 200;

  ellipse(pos.x, pos.y, rad);
  if (isHovering(createVector(pos.x, pos.y), rad) && mouseIsPressed) {
    fill('red');
  } else if (isHovering(createVector(pos.x, pos.y), rad)) {
    fill('green');
  } else {
    fill('blue');
  }
}

function isHovering(pos, rad) {
  return (dist(mouseX, mouseY, pos.x, pos.y) <= rad / 2);
}

```

---

<div class="post-metadata">

**Author:** ![Stage1](https://avatars.discourse-cdn.com/v4/letter/s/df788c/32.png) [@Stage1](https://discourse.processing.org/u/Stage1)\
**Post date:** [April 4, 2020, 9:39pm UTC](https://discourse.processing.org/t/how-do-you-turn-an-ellipse-into-a-button-and-when-clicked-it-would-show-the-data-on-the-same-screen/19366/6 "2020-04-04T21:39:26Z")

</div>

Hi thanks for your reply buddy. But this is for p5.js I’m using Processing 3.

---

<div class="post-metadata">

**Author:** ![slow\_izzm](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/slow_izzm/32/5637_2.png) [@slow\_izzm](https://discourse.processing.org/u/slow_izzm)\
**Post date:** [April 4, 2020, 10:17pm UTC](https://discourse.processing.org/t/how-do-you-turn-an-ellipse-into-a-button-and-when-clicked-it-would-show-the-data-on-the-same-screen/19366/7 "2020-04-04T22:17:23Z")

</div>

Oh sorry … Regardless the principles are the same.

```auto
void setup() {
  size(400, 400);
  noStroke();
}

void draw() {
  background(220);

  PVector pos = new PVector(width / 2, height / 2);
  int rad = 200;

  ellipse(pos.x, pos.y, rad, rad);
  if (isHovering(new PVector(pos.x, pos.y), rad) && mousePressed) {
    fill(#ff0000);
  } else if (isHovering(new PVector(pos.x, pos.y), rad)) {
    fill(#00ff00);
  } else {
    fill(#0000ff);
  }
}

boolean isHovering(PVector pos, int rad) {
  return (dist(mouseX, mouseY, pos.x, pos.y) <= rad / 2);
}

```

[https://processing.org/reference/mousePressed.html](https://processing.org/reference/mousePressed.html)

---

<div class="post-metadata">

**Author:** ![Odermonicon](https://avatars.discourse-cdn.com/v4/letter/o/96bed5/32.png) [@Odermonicon](https://discourse.processing.org/u/Odermonicon)\
**Post date:** [April 5, 2020, 1:15am UTC](https://discourse.processing.org/t/how-do-you-turn-an-ellipse-into-a-button-and-when-clicked-it-would-show-the-data-on-the-same-screen/19366/8 "2020-04-05T01:15:59Z")

</div>

```auto
void setup(){
  size(800,600);
}
void draw(){
  background(0);
  noStroke();
  fill(245, 27, 27, 151);
  ellipse(110,110,120,120);
  if(dist(mouseX,mouseY,110,110)<60){
    cursor(HAND);
  }
}
void mousePressed() {
  if (mouseButton == LEFT && dist(mouseX,mouseY,110,110)<60) {
    // Code for elipse clicked...
  }
}

```

try this

---

<div class="post-metadata">

**Author:** ![Stage1](https://avatars.discourse-cdn.com/v4/letter/s/df788c/32.png) [@Stage1](https://discourse.processing.org/u/Stage1)\
**Post date:** [April 5, 2020, 9:28am UTC](https://discourse.processing.org/t/how-do-you-turn-an-ellipse-into-a-button-and-when-clicked-it-would-show-the-data-on-the-same-screen/19366/9 "2020-04-05T09:28:23Z")

</div>

Hi Odermonicon, i tried the code but its got the finger cursor on the entire window when moved about and im unsure if the clicking actually works. Could you show me a different example where the ellipse shape is clicked and it shows some text after its been clicked?

---

<div class="post-metadata">

**Author:** ![Odermonicon](https://avatars.discourse-cdn.com/v4/letter/o/96bed5/32.png) [@Odermonicon](https://discourse.processing.org/u/Odermonicon)\
**Post date:** [April 5, 2020, 9:34am UTC](https://discourse.processing.org/t/how-do-you-turn-an-ellipse-into-a-button-and-when-clicked-it-would-show-the-data-on-the-same-screen/19366/10 "2020-04-05T09:34:50Z")

</div>

oops! didn’t fully test it.

```auto
boolean drawText = false; // make sure text is not shown
void setup(){
  size(800,600);
}
void draw(){
  background(0);
  noStroke();
  fill(245, 27, 27, 151);
  ellipse(110,110,120,120);
  if(dist(mouseX,mouseY,110,110)<60){
    cursor(HAND);
  } else {
    cursor(ARROW);
  }
  if (drawText) {
    // Maybe use fill() to change the color of the text?
    text("Hi!", 110, 110);
  }
}
void mousePressed() {
  if (mouseButton == LEFT && dist(mouseX,mouseY,110,110)<60) {
    drawText = true;
  }
}

```

---

<div class="post-metadata">

**Author:** ![Stage1](https://avatars.discourse-cdn.com/v4/letter/s/df788c/32.png) [@Stage1](https://discourse.processing.org/u/Stage1)\
**Post date:** [April 5, 2020, 11:28am UTC](https://discourse.processing.org/t/how-do-you-turn-an-ellipse-into-a-button-and-when-clicked-it-would-show-the-data-on-the-same-screen/19366/11 "2020-04-05T11:28:03Z")

</div>

Oh wow this is amazing thankyou! What if i wanted to have the text to dissapear after the shape has been clicked on again?

Would it be something like this:

```auto
boolean drawText = false; // make sure text is not shown
void setup(){
  size(800,600);
}
void draw(){
  background(0);
  noStroke();
  fill(245, 27, 27, 151);
  ellipse(110,110,120,120);
  if(dist(mouseX,mouseY,110,110)<60){
    cursor(HAND);
  } else {
    cursor(ARROW);
  }
  if (drawText) {
    // Maybe use fill() to change the color of the text?
    fill(#FFFF00);
    text("Hi!", 110, 110);
  }
}
void mousePressed() {
  if (mouseButton == LEFT && dist(mouseX,mouseY,110,110)<60) {
    drawText = true;
  } else if (mouseButton == LEFT && dist(mouseX,mouseY,110,110)<60){
   drawText = false; 
  }
}

```

---

<div class="post-metadata">

**Author:** ![Odermonicon](https://avatars.discourse-cdn.com/v4/letter/o/96bed5/32.png) [@Odermonicon](https://discourse.processing.org/u/Odermonicon)\
**Post date:** [April 5, 2020, 6:51pm UTC](https://discourse.processing.org/t/how-do-you-turn-an-ellipse-into-a-button-and-when-clicked-it-would-show-the-data-on-the-same-screen/19366/12 "2020-04-05T18:51:24Z")

</div>

Very close!

```auto
boolean drawText = false; // make sure text is not shown
void setup(){
  size(800,600);
}
void draw(){
  background(0);
  noStroke();
  fill(245, 27, 27, 151);
  ellipse(110,110,120,120);
  if(dist(mouseX,mouseY,110,110)<60){
    cursor(HAND);
  } else {
    cursor(ARROW);
  }
  if (drawText) {
    // Maybe use fill() to change the color of the text?
    fill(#FFFF00);
    text("Hi!", 110, 110);
  }
}
void mousePressed() {
  if (mouseButton == LEFT && dist(mouseX,mouseY,110,110)<60) {
    drawText = drawText ? false : true; // *Very* fancy way of coding it.
    /*
    The above can be written as:
    if (drawText == true) drawText = false; // If displaying text, stop displaying it.
    else drawText = true; // Otherwise, start displaying it.
    */
  }
}

```

The problem with your code:

```auto
if (mouseButton == LEFT && dist(mouseX,mouseY,110,110)<60) { // If hovering over circle:
 drawText = true; // Start displaying text.
} else // If NOT hovering over circle:
if (mouseButton == LEFT && dist(mouseX,mouseY,110,110)<60){ // If hovering over circle:
 drawText = false; // Unreachable code: false != true.
}

```

---

<div class="post-metadata">

**Author:** ![Stage1](https://avatars.discourse-cdn.com/v4/letter/s/df788c/32.png) [@Stage1](https://discourse.processing.org/u/Stage1)\
**Post date:** [April 5, 2020, 7:16pm UTC](https://discourse.processing.org/t/how-do-you-turn-an-ellipse-into-a-button-and-when-clicked-it-would-show-the-data-on-the-same-screen/19366/13 "2020-04-05T19:16:45Z")

</div>

Hi Odermonicon, lets say if i have multiple ellipses what must i do to have the same functionality as this ellipse in the code?

---

<div class="post-metadata">

**Author:** ![Odermonicon](https://avatars.discourse-cdn.com/v4/letter/o/96bed5/32.png) [@Odermonicon](https://discourse.processing.org/u/Odermonicon)\
**Post date:** [April 5, 2020, 8:49pm UTC](https://discourse.processing.org/t/how-do-you-turn-an-ellipse-into-a-button-and-when-clicked-it-would-show-the-data-on-the-same-screen/19366/14 "2020-04-05T20:49:49Z")

</div>

At this point, it’s probably best to make a seperate object.  
Tutorial: [https://processing.org/tutorials/objects/](https://processing.org/tutorials/objects/)

[WARNING: MY CODE IS OVERENGINEERED AND SHOULDNT BE REPLICATED]

```auto
class Circle {
  boolean drawText = false;
  String text;
  PVector pos;
  PVector attrib;
  color col;
  color textcol;
  Circle(String t, PVector p, PVector a, color c, color tc) {
    text = t;
    pos = p;
    attrib = a;
    col = c;
    textcol = tc;
  }
  void draw() {
    pushStyle();
    noStroke();
    fill(col);
    ellipse(pos.x,pos.y,attrib.x,attrib.y);
    if(dist(mouseX,mouseY,pos.x,pos.y)<(attrib.x+attrib.y)/4){
      cursor(HAND);
    } else {
      cursor(ARROW);
    }
    if (drawText) {
      // Maybe use fill() to change the color of the text?
      fill(textcol);
      text(text, pos.x, pos.y);
    }
    popStyle();
  }
  void click() {
    if (mouseButton == LEFT && dist(mouseX,mouseY,pos.x,pos.y)<(attrib.x+attrib.y)/2) {
      drawText = drawText ? false : true;
    }
  }
}

Circle a; // This is where the code starts.
void setup(){
  size(800,600);
  color tmp1 = color(245, 27, 27, 151); // Color.
  color tmp2 = #FFFF00; // Text color.
  a = new Circle("Hi!", new PVector(110,110), new PVector(120,120), tmp1, tmp2);
  // This is bad, Never do this ^^^ .
}
void draw(){
  background(0);
  a.draw();
}
void mousePressed() {
  a.click();
}

```