处理 - 鼠标指针方向的线

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() 函数在不同位置绘制它们，但这不会改变它们的基础 "model" 位置。

与我对的回答类似，您需要根据线条的屏幕位置进行计算（使用 screenX() 和 screenY() 函数），或者您需要停止依赖 translate() 来移动你的线并直接计算它们的位置。

处理 - 鼠标指针方向的线

Processing - Line in direction of mouse pointer

processing