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?
How do you turn an ellipse into a button and when clicked it would show the data on the same screen?
1 Like
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.
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.
2 Likes
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.
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) {
}
1 Like
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
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);
}
Hi thanks for your reply buddy. But this is for p5.js I’m using Processing 3.
Oh sorry … Regardless the principles are the same.
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);
}
1 Like
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
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?
oops! didn’t fully test it.
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;
}
}
1 Like
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:
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;
}
}
Very close!
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:
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.
}
1 Like
Hi Odermonicon, lets say if i have multiple ellipses what must i do to have the same functionality as this ellipse in the code?
At this point, it’s probably best to make a seperate object.
Tutorial: https://processing.org/tutorials/objects/
[WARNING: MY CODE IS OVERENGINEERED AND SHOULDNT BE REPLICATED]
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();
}