寻找点的角度以产生机械波效果

Question

这只是为了好玩。

我想知道如何获得它们各自旋转的圆中每个点的角度公式。

这些是给定的值：

• 行数
• 列数
• 圆的半径（通用）

这是我想要实现的图片：

我假设每个点的旋转速度都是均匀的

更新：

哎呀！感谢您所有的回答。然而，我也成功制作了自己的图案，但是模式不同：

只在构造函数中进行逻辑处理：

CircleWithDots() : timer(clock()), angle(angle_counter = (angle_counter >= REVOLUTION - 1) ? 0 : angle_counter + ANGLE_STEP) { }

其中：

REVOLUTION = 360 + 1;
ANGLE_STEP = 20;

还有这个（用于旋转点）：

x = table_cos[angle] * radius;
y = -table_sin[angle] * radius;

- mr5

---

我认为角度本身可以通过2个sin（或sin和cos）函数的组合获得，每个函数的输入将是行和列。 - thumbmunkeys

@thumbmunkeys 我通过截图（不动）得到了一个想法，就是随着行和列的增加，角度只是比前一个角度大 x。嗯。 - mr5

我认为如果你只是添加 x，最终会得到一个锯齿状的图案，而不是平滑曲线。 - thumbmunkeys

尝试使用sine函数，其中输入仅为行（归一化到[0,1]范围），我认为您最终将得到一个水平波形。 - thumbmunkeys

它们对角线对齐, 因此像(xpos-ypos)*scale_factor这样的表达式足以满足需求。 - PeterT

Answer 1

就像我在评论中所说的那样，这只是对角线对齐的问题，所以你需要做的就是

(xpos-ypos)*scale_factor

这是一个processing js画板（它有点慢，你可以复制粘贴到本地处理安装程序中以获得更快的运行速度）：

http://sketchpad.cc/yT0pQfbYXV

相关部分如下：

        ang = (x-y) * scalefac + anim;
        float xpos = x*xscale+ sin(ang)*cwidth/2.0;
        float ypos = y*yscale+ cos(ang)*cheight/2.0;
        arc(xpos,ypos,4,4,0,PI*2);

如果有人想要平铺版本，这里是：

- PeterT

---

哇！看起来和我发布的 GIF 几乎一样。干得好:D - mr5

Answer 2

太棒了！这是一个相当简单的练习。其中有几个步骤和一个重要的认识。

首先，我注意到在水平行上，每个周期有16个圆圈，与y轴类似。我认为水平邻居之间的角度步进将与垂直邻居之间的角度步进相同。因此，如果圆圈0,0位于0度，则圆圈0,1将位于（360 /（16 + 1））度，圆圈1,0也是如此。（注意：源代码中使用了360/16）

我只需递增每列和每行的圆圈原点位置。我还递增了每列和每行的角度偏移量。使用偏移留给我每个点在行/列中的位置不同的能力，同时也给我通过增加它来步进动画的能力。

这是一个运行示例： http://jsfiddle.net/GVTsB/

代码的重要部分是绘制每个帧的函数。两个绘制圆形的函数都采用圆心。

function drawFrame(angleOffset)
{
    var can = byId('dest');
    var ctx = can.getContext('2d');
    var x, y, xStep, yStep;
    ctx.clearRect(0,0,can.width,can.height);

    for (yStep=0; yStep<21; yStep++)
    {
        angle = yStep * (360 / 16);
        angle += angleOffset;

        y = yStep * 460/20 + 0.5;
        for (xStep=0; xStep<21; xStep++)
        {
            x = xStep * 460/20 + 0.5;
            drawCircle(x,y, 21, ctx);

            var pos = calcPos(angle, 21);
            pos.x += x;
            pos.y += y;
            fillCircle(pos.x,pos.y,3,ctx,'red');
            angle += (360 / 16);
        }
    }
}

- enhzflep

---

非常好。不过似乎有点偏差，而且点的旋转方向与问题中相反。 - Lightness Races in Orbit

干杯。我猜是因为疲劳的眼睛。 :) 这只是一个简单的问题，需要反转从calcPos返回的y坐标。也就是说，在屏幕空间中增加y会向下移动，而三角函数中的+y则向上移动。感谢您指出这一点。 - enhzflep

Answer 3

任意一对点[I，J]的相对运动可能方程为

AngularPosition[I, J] = SquareRoot((-X[I] + X[J])^2 + (-Y[J] + Y[J])^2)

在哪里

VectorPosition[I, J] = (-X[I] + X[J], -Y[J] + Y[J])

-X[I] + X[J] = sin(K*t + PhaseDiffXofDots[I, J])

-Y[I] + Y[J] = cos(K*t + PhaseDiffYofDots[I, J])

{ Or it could be same, sin or cos in both X and Y directions }


PhaseDiffXofDots[I, J] = (-(circle[I]CenterX + (circle[J]CenterX))*H

PhaseDiffYofDots[I, J] = (-(circle[I]CenterY + (circle[J]CenterY))*V

其中 X 是数组中的水平位置， Y 是数组中的垂直位置， t 是时间， K 是点旋转的恒定速度， 而 H、V 则是相邻圆之间的水平和垂直相位差（可能在此处 H = V）。

- akhil999in