在 Processing 3.0 中使用缓动鼠标绘图

Question

我正在尝试借助像 [this][1] 这样的线条创建一个流畅的绘图工具。我完成了基础知识，但我的代码有几个问题。

这是我正在处理的草图的代码：

void setup() {
  frameRate(60);
  size(640, 360);
  fill(255, 126);

  }

void draw() {
  s1.display(mouseX, mouseY);
  s1.update(mouseX, mouseY);
  }




  void update(float targetX, float targetY) {
    x += vx;
    y += vy; 
  }

  void display(float nx, float ny) {
   if (mousePressed == true) {
    
    background(0);
      
    stroke(40, 255, 150);
    line(x, y, nx, ny);

    
    noStroke();
    fill(255, 130, 40);
    ellipse(x, y, 5, 5);
   
  } else  {
   background(0);
   }
  }
}

问题是，当我没有将背景设置为特定颜色（此处为 0；黑色）时，引导字符串（绿线和橙色点）将自己绘制到 canvas 上，如下所示出色地。但是，我只喜欢将它们用作向导，用作帮手。那么，不画弦线，怎么才能按照橙点画线呢？

Answer 1

即使您的帧率非常高，您的鼠标实际上也不会穿过屏幕上的每个像素。它一次移动多个像素，具体取决于您移动鼠标的速度。因此，在帧之间，鼠标可以从一个位置移动到另一个位置，而无需穿过这两个位置之间的每个位置。

为了解决这个问题，您可以从之前的位置到当前位置绘制直线，而不是在当前位置绘制椭圆。

在您的 Spring2D class 中，您必须跟踪 上一个 位置。您可以只使用两个变量：

float previousX;
float previousY;

您需要在 update() 函数中更新这些变量。

previousX = x;
previousY = y;

然后在你的display()函数中，你需要使用这些变量来画一条从前一个点到当前点的线：

strokeWeight(radius*2);
line(previousX, previousY, x, y);

这将防止您看到的点之间出现空格。

如果您有任何其他问题，请 post 在它们自己的 post 中作为单独的问题。尝试将您的问题缩小到关于特定代码行或尽可能少的代码行的特定问题。很难回答一般 "how do I do this" 类型的问题。 Stack Overflow 专为更具体的 "I tried X, expected Y, but got Z instead" 类型问题而设计。如果您尝试更具体一些，您的运气会好得多（响应时间也会更快）。祝你好运，这似乎是一个有趣的项目。

在 Processing 3.0 中使用缓动鼠标绘图

Drawing with an easing mouse in Processing 3.0

javascript

processing

drawing

mouseevent