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没有Processing所具有的modelX()和modelY()函数，因此您必须自己完成此操作。请参阅乔治对this question的回答，以获得有关如何做到这一点的精彩指南。

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

在dist函数p5js上应用旋转。旋转会导致故障

1 个答案: