为什么围绕原点旋转点会失去与原点的距离？

Question

我正在尝试计算 JavaScript 中点的旋转，发现这些值在 1% off 的范围内（并且始终处于大约正确的角度，但更接近 1%旋转点）。这比浮点不精确可能引入的错误要多得多，并且在同一方向上太可靠了。

下面是演示代码和问题的 HTML / JavaScript。输出行 36 显示了将点 (100,100) 旋转 10 度 36 次的结果。因此，应该在 (100,100) 的大约 .000000001 范围内。但是更接近于(57,57).

画点的时候是做蜗牛-shell的图案。 IE。腐烂的轨道谁能看出我做错了什么？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Why is the rotation losing distance to origin?</title>
</head>
<body>
<script>
    let x = 100; let y = 100;
    let Cx = 0;  let Cy = 0;
    let rotation = 10 * Math.PI / 180; // 10 degrees as radians

    for(let i = 0; i <= 36; i++) {
        if (i > 33 || i < 3) { document.write(i + ": {" + x + ", " + y + "} <br />"); }
        else if (i === 33){ document.write(".<br />"); }
        else { document.write("."); }

        // Rotate 10 degrees from the last position.
        x = Math.cos(rotation) * (x - Cx) - Math.sin(rotation) * (y - Cy) + Cx;
        y = Math.sin(rotation) * (x - Cx) + Math.cos(rotation) * (y - Cy) + Cy;
    }
</script>
</body>
</html>

在此先感谢您的帮助。

Answer 1

问题出在这两个语句上：

x = Math.cos(rotation) * (x - Cx) - Math.sin(rotation) * (y - Cy) + Cx;
y = Math.sin(rotation) * (x - Cx) + Math.cos(rotation) * (y - Cy) + Cy;

第一条语句用旋转后的值覆盖x的值，然后旋转后的值用于计算旋转后的y坐标。试试这个：

let x1 = Math.cos(rotation) * (x - Cx) - Math.sin(rotation) * (y - Cy) + Cx;
y = Math.sin(rotation) * (x - Cx) + Math.cos(rotation) * (y - Cy) + Cy;
x = x1;

为什么围绕原点旋转点会失去与原点的距离？

Why is Rotation of a Point Around Origin Losing Distance from Origin?

javascript

geometry

rotation