在處理和理解代碼中創建可視化

Question

我正在嘗試進行創意編碼，主要是為了創建實時視覺效果。 我最近偶然發現了這個名為https://www.openprocessing.org/的很棒的網站，人們可以在這里分享他們的創作。

我在下面附加了用於創建兩個移動圓圈的代碼，但我無法理解創建者是如何這樣做的，如果有人可以向我解釋 for 循環是如何工作的以及x += 0.006; y += 0.006; if (x > TWO_PI) {x = 0;} x += 0.006; y += 0.006; if (x > TWO_PI) {x = 0;} x += 0.006; y += 0.006; if (x > TWO_PI) {x = 0;}部分有效，將不勝感激。 sin 、 cos和 Two_PI 函數的使用讓我感到困惑。 這是原始代碼的鏈接：

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

sin和cos的角度單位是弧度。 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 是整數），因此沒有必要“重置”角度。

Answer 2

它更多的是關於數學而不是編程（嗯，這兩件事是齊頭並進的）。

他做了兩次同樣的事情，每個圓圈一次，但是兩者中的一個會比另一個“移動”得更快，因此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);

通過在它們之間繪制一堆線來定義每個圓圈如何“連接”到另一個圓圈。 這個想法是，作者創建了一個循環來更新一條線的起點和終點，只要有要繪制的線，這個循環就會運行（它使用 2 PI 編號繞着圓圈運行）。

因此，在for (float i = 0; i < TWO_PI; i += TWO_PI/100)循環中，他為圓的 position 繪制了每一條線。

然后他改變了“起點”，他將通過稍微增加變量x, y, xx, yy來繪制第一條線。 當它們在弧度的上下文中使用時，它們圍繞圓圈“環繞”。

然后draw()循環重新開始，他重新繪制了整個東西，但隨着起點的變化有點不同。 這使繪圖看起來像在移動。

當“起點”變量x, y, xx, yy完成一個完整的轉彎時（所以當它們超過 2 PI 弧度時），他將它們重置。 因為它是一個完整的回合，所以它不是一個巨大的重置。 這就像時鍾比整點過一分鍾時四舍五入。

希望能幫助到你。