apply rotation on dist function p5js. Rotation causes dist to malfunction - rotation

Question

I am trying to visualize some data and I require interactivity. I represent the entities that I want to visualize as balls that move like a solar system. in order to gain this I used rotation and translation. However, when I use the distance function to show the name of the entity, it malfunctions and shows the name elsewhere, and the interaction needs to be made somewhere else too unlike what I have in mind. Here is a very simplified version of my code with comments.
//the angle (t) and theta factor as tt
var t=0;
var tt=0.01;
function setup()
{
//creating canvas to darw
createCanvas(600,600);
}
function draw()
{
background(255);
//translating the 0,0 point to the center of the canvas
translate(width/2,height/2);
//applying rotation on the matrix
rotate(1);
//gaining circular movement through sine and cosine oscillation
x=sin(t)*100;
y=cos(t)*50;
//drawing the ball
ellipse(x,y,10,10);
//when the mouse is inside the ball, a text is supposed to appear with the ball that says "on it"
if(dist(mouseX,mouseY,width/2+x,height/2+y)<5)
{
text("on it",x,y);
}
//incrementing the angle
t+=tt;
}

Answer 1

Nothing is malfunctioning. Your problem is caused by the fact that mouseX and mouseY are always in screen space, where your coordinates are in model space after you do the translation and rotate.
You're going to have to project the mouse coordinates into model space. Unfortunately P5.js doesn't have the modelX() and modelY() functions that Processing has, so you're going to have to do this yourself. See George's answer to this question for an excellent guide on exactly how to do that.
The other option I can think of is to do all of your drawing to a P5.Renderer without the rotate or translate, so render space and model space will be the same. Then rotate the whole thing before you draw it. Not sure if that'll work exactly how you want it to, but it's worth investigating. More info can be found in the reference.