沿着六边形的轨迹移动物体

Question

正如您在附件 GIF 中看到的那样，白点在圆形路径中移动。

如何让它沿着六边形的轨迹运动。换句话说，让点沿着六边形路径移动？

我正在使用以下代码旋转白点：

const angle = Math.PI / 6 * delta; // delta is the current time to increment the angle.
const radius = 300;
const x = center.x + Math.cos(angle) * radius;
const y = center.y + Math.sin(angle) * radius;

谢谢

Answer 1

有多种方法可以做到这一点。如果想围绕六边形中心保持恒定的angular旋转速度，那么可以根据旋转的角度修改运动物体的半径。

首先选择六边形顶点对应的半径。在这个例子中，我使用了 90px 的半径。内半径（与六边形边相切的内切圆）是此值的 sqrt(0.75) 倍：

    r_outer = 90.0
    r_inner = r_outer * Math.sqrt(0.75)

如果零角对应于六边形一侧的中点，则通过简单的几何学，沿该侧的半径将等于 r_inner / Math.cos(theta)，因为 theta 从 −30° 到 + 30°。您可以使用浮点模运算符将角度限制在 0 到 60° 的范围内。计算半径时，为使角度保持在±30°以内，只需在计算模数前将角度加30°，再减去即可。

所以完整的计算看起来像这样：

    r0 = 90.0              (Outer radius)
    r1 = r0 * sqrt(0.75)   (Inner radius)
    d30 = 30 * pi/180      (30 degrees in radians)
    d60 = 60 * pi/180      (60 degrees in radians)
    r = r1 / cos((theta + d30) % d60 - d30)
    x = x_center + sin(theta) * r
    y = y_center - cos(theta) * r

这是一个工作示例：

let theta=0.0;
let r0 = 90.0; // Outer radius
let r1 = r0 * Math.sqrt(0.75); // Inner radius
let d30 = 30 * Math.PI/180; // 30 degrees in radians
let d60 = 60 * Math.PI/180; // 60 degrees in radians

function move_dot() {
    theta += 0.025;
    let r = r1 / Math.cos((theta + d30) % d60 - d30);
    let x = Math.sin(theta) * r;
    let y = -Math.cos(theta) * r;
    document.getElementById('dot').style.cx=x.toFixed(2)+'px';
    document.getElementById('dot').style.cy=y.toFixed(2)+'px';
}

document.body.onload=function(){setInterval(move_dot,30);}

#hex { fill:none; stroke:#aaf; stroke-width:1; }
#dot { fill:#000; stroke:none; cx:90px; cy:0px; }

<svg width="200" height="200" viewBox="-100 -100 200 200">
<path id="hex" d="M45-77.94 90 0 45 77.94-45 77.94-90 0-45-77.94Z"/>
<circle id="dot" cx="90" cy="0" r="5"/>
</svg>

沿着六边形的轨迹移动物体

Move an object along the trajectory of a hexagon

javascript

math

html5-canvas