对dist函数p5js应用旋转。旋转导致dist发生故障

Question

我正在尝试可视化一些数据，并且我需要交互性。我代表我想要形象化为像太阳系一样移动的球的实体。为了获得这个我使用了旋转和平移。但是，当我使用距离函数来显示实体的名称时，它会发生故障并在其他位置显示名称，并且交互需要在其他位置进行，这与我的想法不同。以下是带有注释的代码的简化版本。

//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

没有什么故障。你的问题是事实，mouseX和mouseY总是在屏幕空间，你的坐标是在模型空间中，你做翻译和旋转后引起的。

你将不得不项目鼠标坐标转换为模型空间。不幸的是P5.js不具有处​​理有modelX()和modelY()功能，所以你将不得不这样做自己。请参阅George对this question的回答，以获得有关如何做到这一点的绝佳指南。

我能想到的另一个选择是将所有绘图工作做到P5.Renderer而没有旋转或平移，因此渲染空间和模型空间将是相同的。然后在绘制之前旋转整个事物。不知道这是否会按照你想要的方式工作，但值得研究。更多信息可在the reference中找到。