计算绳索的长度和一个奇怪的结果
Calculating the length of a cord and a bizarre result
我正在尝试计算 p5.js 中 circle/ellipse 范围内的电线长度。
给出的参数是 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);
}
}
}
}
这没有达到您的预期:
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。
更多信息在这里:
您可能需要 Math.pow()
功能。可以找到更多信息 here.
更好的是,P5.js 提供了 sq()
功能。可以在 the P5.js reference.
中找到更多信息
同样,寻找 Math.sqrt()
或 P5.js sqrt()
函数而不是使用 ^ 0.5
.
我正在尝试计算 p5.js 中 circle/ellipse 范围内的电线长度。
给出的参数是 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);
}
}
}
}
这没有达到您的预期:
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。
更多信息在这里:
您可能需要 Math.pow()
功能。可以找到更多信息 here.
更好的是,P5.js 提供了 sq()
功能。可以在 the P5.js reference.
同样,寻找 Math.sqrt()
或 P5.js sqrt()
函数而不是使用 ^ 0.5
.