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

【问题标题】：Detecting mouse proximity in processing.js在 processing.js 中检测鼠标接近度
【发布时间】：2015-05-13 23:22:15
【问题描述】：

我正在使用 processing.js 进行编码。我希望大小变量随着光标（鼠标）接近椭圆而变大，并随着光标远离椭圆而变小。大小应该（如果可能的话）限制在最小 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);
}

谢谢。

【问题讨论】：

标签： javascript html processing processing.js

【解决方案1】：

首先，你需要得到鼠标到椭圆的距离：

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

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

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

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

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

【讨论】：