對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中找到。