计算一根绳子的长度和一个奇怪的结果

Question

我正在尝试计算p5.js中圆/椭圆范围内的绳索长度
给出的参数是values和size。 values是一个由3个值组成的简单数组：色调，饱和度和亮度。更重要的参数是size，它是形状（圆圈）的宽度和高度 当for循环遍历size的长度时，执行数学计算以通过毕达哥拉斯定理导出一半的索长度。 r的大小是size的一半，或半径。 y是for循环的当前值。 r^2 - |y-r|^2 = x^2其中x是电线长度的一半（绝对值不是必需的，但它或多或少仅用于确保和调试）。
然而，每当我在等式中r时，我都会收到下面的奇怪形状。当我不在方程式中r时，我得到旋转的方形。背景中的圆圈表示我正在尝试显示的当前HSL。

当我不平方r时会发生这种情况

当我平方r时会发生这种情况

这是我目前的代码：

this.draw = function(values, size) {
  //angleMode(DEGREES);
  this.gap = values[2];
  this.r = size / 2;
  this.lCol = map(values[1], 0, 100, 10, 70)

  strokeUniform(this.lCol);
  fillUniform(map(values[2], 0, 100, this.lCol + 20, 240));
  strokeWeight(map(values[0], 0, 360, 0, 10));
  translate(this.r, this.r, 0);

  for (y = 0; y < size; y++) {
    if (y % Math.floor(this.gap / 2) == 0) {
      if (this.r > y) {
        this.len = ((this.r ^ 2 - (Math.abs(this.r - y) ^ 2))) ^ 0.5;
        line(0 - this.len, 0 - (this.r - y), 0 + this.len, 0 - (this.r - y));
      } else {
        this.len = ((this.r ^ 2 - ((y - this.r) ^ 2))) ^ 0.5;
        line(0 - this.len, y - this.r, 0 + this.len, y - this.r);
      }
    }
  }
}

Answer 1

这不符合您的预期：

r^2

^符号是bitwise XOR operator，它适用于二进制数。例如：

var x = 5; // 0101
var y = 1; // 0001
var z = x ^ y; // 0100
console.log(z); // 4

换句话说，XOR运算符查看数字的二进制表示中的每个数字，如果只有一个参数为1，则结果数字为1。

更多信息：

• JavaScript operators
• Bitwise XOR

您可能需要Math.pow()功能。可以找到更多信息here。

更好的是，P5.js提供了sq()功能。更多信息可以在the P5.js reference找到。

同样，请查找Math.sqrt()或P5.js sqrt()功能，而不要使用^ 0.5。