处理 - 指向鼠标指针的方向

Question

我正在努力达到如下图所示的效果

在我的代码中，我设法创建了这个效果但是在重复效果时，它似乎在内部成倍增加。任何人都可以帮助我让我的代码在上面的图像中实现效果吗？

void setup(){
  size(500,500);
  frameRate(60);
  ellipseMode(CENTER);
  smooth();
  loop();
}

void draw() {

  background(#ffffff);

  //border
  strokeWeight(3);
  fill(255);
  arc(50, 50, 50, 50, -PI, -PI / 2);
  fill(255);
  arc(450, 450, 50, 50, 0, PI / 2.0);
  line(25, 50, 25, 475);
  line(25, 475, 450, 475);
  line(475, 450, 475, 25);
  line(475, 25, 135, 25);
  fill(0);
  text("MAGNETS", 60, 30);

  //Lines    
for(int i=0; i<3; i++){
  drawMagnet();
}
}

  float angle = 0;
  int x = 75;
  int y = 75;
  float tAngle = 0;
  float easing = 0.1f;

void drawMagnet(){

    int l = 10; //length

    angle = atan2( mouseY - y, mouseX - x);

    float dir = (angle - tAngle) / TWO_PI;
    dir -= round(dir);
    dir *= TWO_PI;

    tAngle += dir * easing;

    stroke(0);
    translate(x, y);
    rotate(tAngle);
    line(-l, 0, l, 0);
}

Answer 1

您的轮播和翻译正在堆叠，这会导致您的问题。要解决此问题，您可以执行以下操作：

  pushMatrix();
  translate(x, y);
  rotate(tAngle);
  line(-l, 0, l, 0);
  popMatrix();

我在这里使用pushMatrix()和popMatrix()函数，因此您的旋转和翻译不会叠加。

但是你的所有行都在同一个x,y位置。所以他们都会对鼠标位置有相同的角度。

您正在使用translate()函数在不同位置绘制它们，但这不会改变其基础“模型”位置。

与我对this question的回答类似，您需要将计算基于线的屏幕位置（使用screenX()和screenY()函数），或者您需要停止依靠translate()移动你的线并直接计算他们的位置。