在 processing.js 中检测鼠标接近度

Question

我正在用 processing.js 编码。我希望 size 变量随着光标（鼠标）接近椭圆而变大，并随着光标远离椭圆而变小。大小应（如果可能）限制在最小 50 和最大 200 之间。有什么方法可以实现吗？

我在网上看过，但似乎没有很多关于此的文档（至少对于我正在搜索的内容）。

这是我的代码：

void setup()
{
// Setting up the page
  size(screen.width, screen.height);
  smooth();
  background(0, 0, 0);
// Declaring the variable size ONCE
  size = 50;
}

void draw()
{
  background(0, 0, 0);

// I want the size variable to be greater as the cursor approches the ellipse and to be smaller as the cursor moves away from the ellipse. The size is limited if possible between 50 and 200

// Here is the variable that needs to be changed
  size = 50;

// Drawing the concerned ellipse
  ellipse(width/2, height/2, size, size);
}

谢谢。

Answer 1

首先需要获取鼠标到椭圆的距离：

float distance = dist(mouseX,mouseY, width/2,height/2);

然后，您需要将该距离转换为更有用的范围。我们将调用结果 dia，因为 size() 也是 Processing 中命令的名称。我们还希望 dia 随着距离变小而变大。

对于这两件事，我们将使用 map()，它接受输入值、范围和输出范围：

float dia = map(distance, 0,width/2, 200,50);

当distance为0时，dia = 200且当distance为屏幕宽度除以2时，dia = 50.

在 processing.js 中检测鼠标接近度

Detecting mouse proximity in processing.js

html

javascript

processing

processing.js