在处理和理解代码中创建可视化

Question

我正在尝试进行创意编码，主要是为了创建实时视觉效果。我最近偶然发现了这个名为 https://www.openprocessing.org/ 的很棒的网站，人们可以在这里分享他们的创作。

我在下面附上了用于创建两个移动圆圈的代码，但我无法理解创建者是如何这样做的，如果有人能向我解释 for 循环的工作原理以及 x += 0.006; y += 0.006; if (x > TWO_PI) {x = 0;} 部分作品，将不胜感激。 sin、cos 和 Two_PI 函数的使用让我感到困惑。下面是对原代码的一个link：

https://www.openprocessing.org/sketch/467333

//comment
float x = 0;
float xx = 0;
float y = 0;
float yy = 0;
float sizecircle = 250;

void setup() {
    size (800, 650);
    frameRate (60);
    strokeWeight (1);
    stroke (223, 170, 22);
}

void draw() {
    background (51, 51, 51);

    for (float i = 0; i < TWO_PI; i += TWO_PI/100) {  
        line (350 + sin(x+i) * sizecircle, 275 + cos(y+i) * sizecircle, 450 + cos(xx+i) * sizecircle, 375 + sin(yy+i) * sizecircle);
    }

    x += 0.006;
    y += 0.006;
    if (x > TWO_PI) {
        x = 0;
    }
    if (y > TWO_PI) {
        y = 0;
    }

    xx += 0.002;
    yy += 0.002;
    if (xx > TWO_PI) {
        xx = 0;
    }
    if (yy > TWO_PI) {
        yy = 0;
    }
}

Answer 1

与其说是编程，不如说是数学（好吧，这两件事是相辅相成的）。

他做了两次同样的事情，每个圆圈一次，但是两个中的一个 "move" 比另一个快，因此 x += 0.006; 和 xx += 0.002; 的区别。

一个完整的圆有 2 个 PI 弧度（所以 2 个 PI 弧度 == 360 度）。这就是他使用此措施的原因。

这一行

line (350 + sin(x+i) * sizecircle, 275 + cos(y+i) * sizecircle, 450 + cos(xx+i) * sizecircle, 375 + sin(yy+i) * sizecircle);

通过在圆圈之间画一串线来定义每个圆圈与另一个圆圈的关系 "attached"。这个想法是作者创建了一个循环来更新一条线的起点和终点，只要有线可画，这个循环就会运行（它使用 2 PI 编号绕圆圈）。

所以在 for (float i = 0; i < TWO_PI; i += TWO_PI/100) 循环中，他为圆圈的这个位置画了每一行。

然后他通过稍微增加变量 x, y, xx, yy 来更改 "starting point" 绘制第一行的位置。由于它们在弧度上下文中使用，因此它们 "circle" 围绕圆圈。

然后 draw() 循环重新开始，他重新绘制了整个东西，但随着起点的改变而有所不同。这使绘图看起来像在移动。

当 "starting points" 变量 x, y, xx, yy 完成一个完整的旋转（因此当它们超过 2 PI 弧度时），他重置它们。因为它是一个完整的转弯，所以它不是一个巨大的重置。这就像时钟在整点过一分钟时四舍五入。

希望对您有所帮助。

Answer 2

角度的单位为sin and cos is Radian。 360°是2*PI，这就是TWO_PI.
的原因变量 x、y、xx 和 yy 递增 0.0 到 2*PI。如果它们达到 2*PI，它们将再次从 0.0 开始。

使用以下代码将绘制从中心点（cx、cy）到半径为 r 的圆的 100 个点的直线。

for (float i = 0; i < TWO_PI; i += TWO_PI/100) {  
    line(cx, cy, cx + cos(i)*r, cy + sin(i)*r);
}

问题代码中的技巧是线连接围绕 2 个圆的点，旋转方向相反：

line(cx1 + sin(i)*r, cy1 + cos(i)*r,
     cx2 + cos(i)*r, cy2 + sin(i)*r);

请注意，sin和cos的顺序与起点和终点相比被交换了，这导致圆圈旋转方向相反。
不同的转速是由不同的常数0.006分别0.002引起的。

顺便说一句，代码可以简化，因为x == y和xx == yy。使用 [0, TWO_PI]:

范围内的 2 个角度就足够了

float a1 = 0;
float a2 = 0;
float sizecircle = 250;
void draw() {
    background (51, 51, 51);

    for (float i = 0; i < TWO_PI; i += TWO_PI/100) {  
        line (350 + sin(a1+i)*sizecircle, 275 + cos(a1+i)*sizecircle,
              450 + cos(a2+i)*sizecircle, 375 + sin(a2+i)*sizecircle);
    }

    a1 += 0.006;
    a2 += 0.002;
}

由于sin(x) == sin(x + TWO_PI*n)和cos(x) == cos(x + TWO_PI*n)（n为整数），所以不需要"reset"角度。

在处理和理解代码中创建可视化

Creating Visualisations in Processing and Understanding Code

java

processing

visualization

for-loop

openprocess