dist関数p5jsにローテーションを適用します。回転によってdistが異常になる

Question

私はいくつかのデータを視覚化しようとしており、対話性が必要です。私は、太陽系のように動くボールとして視覚化したいエンティティを表します。これを得るために回転と平行移動を使用しました。しかし、私がエンティティの名前を表示するためにdistance関数を使用すると、それが誤動作し、別の場所に名前が表示されます。また、私の考えとは違ったやり方で対話を行う必要があります。ここに私のコードの非常に単純化されたバージョンがあります。

//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にはProcessingが持っているmodelX()とmodelY()の関数がありませんので、自分でこれを行う必要があります。どのようにそれをするかについての素晴らしいガイドについては、this questionへのジョージの答えを参照してください。

私が考えることのできる他の選択肢は、回転と平行移動なしで図面のすべてをP5.Rendererにすることです。したがって、レンダリングスペースとモデルスペースは同じになります。その後、描画する前に全体を回転させます。それがあなたが望む方法で正確に動作するかどうかはわかりませんが、調査する価値はあります。詳細はthe referenceにあります。