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

【问题标题】：Finding angles of dots to make a mechanical wave effect寻找点的角度以产生机械波效果
【发布时间】：2014-04-24 10:04:55
【问题描述】：

这只是为了好玩。

我想知道得到每个点在其相应圆圈中旋转的角度的公式。

这些是我给定的值：

行数
列数
他们的圆半径（通用）

这就是我想要实现的画面：

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

更新：

哎呀！感谢您的所有回答。不过，我也设法自己制作，但模式不同：

通过仅在构造函数端执行逻辑：

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;

【问题讨论】：

它认为角度本身可以通过2个sin（或sin和cos）函数的组合获得，每个函数的输入都是行和列
@thumbmunkeys 我只是通过截屏（不动）想出了一个想法，随着行和列的增加，角度只是x 比前一个角度大。嗯
我认为如果你只添加x，你最终会得到锯齿形图案而不是平滑曲线
尝试使用sin，其中输入只是行（归一化为 [0,1] 范围），我想你最终会得到一个水平波
它们对角对齐，所以像(xpos-ypos)*scale_factor 这样的东西就足够了。

标签： language-agnostic waveform

【解决方案1】：

就像我在评论中所说的，它只是对角线排列，所以你所要做的就是

(xpos-ypos)*scale_factor

这是一个处理 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);

如果有人想要一个可平铺的版本，那就是：

【讨论】：

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

【解决方案2】：

真是太棒了！事实证明，这是一个相当简单的练习。有几个步骤和一个重要的认识。

首先，我注意到在水平行中，每个循环有 16 个圆圈，与 y 轴类似。我猜测水平邻居之间的角度步长与垂直邻居之间的角度步长似乎是合理的。因此，如果圆 0,0 位于 0 度，则圆 0,1 将位于 (360 / (16+1)) 度，圆 1,0 也是如此。（注意：我在源码中使用了360/16）

我只是为每一列和每一行增加圆的原点位置。 A 还会增加每列和每行的角度偏移量。使用偏移量使我能够使每个点在行/列中的位置与其他点的位置不同，同时还使我能够通过增加动画来逐步完成动画。

这是一个正在运行的示例： 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);
        }
    }
}

【讨论】：

非常好。不过，似乎有点偏离，并且点旋转从问题中向后。
干杯。估计是眼睛累了。 :) 反转从 calcPos 返回的 y 坐标很简单。即屏幕空间中的 y 向下增加，而三角函数的 +y 向上。感谢您指出这一点。

【解决方案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）

【讨论】：