javascript - 如何在一个数字上升时降低一个数字？

Question

我从 Processing 中的鼠标 (mouseX) 位置获取一个值，随着该值变大，我希望渲染的框数量以 5 (rotStep )。

我做了很多阅读，发现我应该使用的方法称为“负相关”，或者至少我认为是。我从来没有上过高等数学，所以我在这里几乎一无所知。也许已经存在一个功能可以做到这一点。经过大量谷歌搜索后，我来到这里询问。

尝试将 mouseX 输入除以自身和其他一些随机总和，但这似乎比我预期的要复杂。

我正在尝试生成艺术生成，并且可以使用提示来进一步尝试渲染更多框(四边形)，因为 mouseX 值降低。

void setup() {
  pixelDensity(displayDensity());
  size(500, 500);
  background(0);
  noFill();
  stroke(255);
}

void draw() {
  translate(width/2, height/2);
  ellipse(0, 0, 50, 50);
  background(0);
  mouseX= constrain(mouseX, 1, width);
  mouseY= constrain(mouseY, 1, height);

  float rotationMax = 90;
  float rotStep = (mouseX/15)+5;

  //I need to add a negative correlation so the number
  //of squares lowers as the mouseX position gets higher
  //and all this in steps of 5


  float quadSize = mouseX;
  float qs = quadSize;

  for (float i=0; i<rotationMax; i+=rotStep) {
    float deg = rotStep;
    float rad = radians(deg);
    stroke(255);
    strokeWeight(1);
    rotate(rad);
    quad(-qs, -qs, qs, -qs, qs, qs, -qs, qs);
  }
}

当 mouseX 变量增加时，rotStep 变量应该减少，反之亦然。变量 rotStep 也应该以 5 为步长增加或减少。

Answer 1

我能给你的最好建议是拿出一张纸和一支铅笔，画一张鼠标位置表和你想要的方框数。它可能看起来像这样:

mouseX  boxes
---------------
0      | 50
100    | 40
200    | 30
300    | 20
400    | 10
500    | 0

这只是一个示例，因此您的数字可能会有所不同。但我们的想法是将 mouseX 映射到您要绘制的框数。

一旦你有了它，你就可以尝试找到一个方程式，让你从 mouseX 到你的框数。这可能是一个单一的等式，也可能涉及将值存储在一起的 if 语句。

您可以通过从最大可能值中减去或使用 mouseX 作为除数来获得“负相关”。

float reverseMouseX = width - mouseX;
float inverseMouseX = 1 / mouseX;

对于这两种方法，随着 mouseX 的增加，变量的值将减少。然后，您可以在等式或 if 语句逻辑中使用这些值。

要获得上面显示的示例表，我可能会这样做:

int boxes = (width - mouseX) / 10;

这是一种通用方法，但您可以将其应用到您的目标中以提出特定的解决方案。

祝你好运!