时间戳

首页 > 解决方案 > 在处理和理解代码中创建可视化

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

问题描述

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

我在下面附加了用于创建两个移动圆圈的代码，但我无法理解创建者是如何这样做的，如果有人可以向我解释 for 循环是如何工作的以及该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;
    }
}

标签： javafor-loopprocessingvisualizationopenprocess

解决方案

sin和的角度单位cos是弧度。360° 是 2*PI，这就是TWO_PI.
变量x、y和递增 0.0xx到yy2*PI。如果它们达到 2*PI，它们会再次从 0.0 开始。

使用以下代码将从中心点 ( cx, cy) 到半径为 100 个点的圆画线r。

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.0060.002

顺便说一句，代码可以简化，因为x == y和xx == yy. TWO_PI在 [0, ]范围内使用 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 是整数），没有必要“重置”角度。

推荐阅读