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

我正在尝试进行创意编码,主要用于创建实时视觉效果。我最近偶然发现了一个名为https://www.openprocessing.org/的出色网站,人们可以在其中分享自己的创作。

我在下面附加了用于创建两个运动圆的代码,但是我很难理解创建者的工作方式,如果有人可以向我解释for循环的工作方式以及x += 0.006; y += 0.006; if (x > TWO_PI) {x = 0;}部分的工作方式的作品,将不胜感激。 sincos和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;
    }
}
sttea 回答:在处理和理解代码中创建可视化

更多的是数学而不是编程(嗯,这两者是紧密结合的)。

他做两次相同的事情,每个圆圈一次,但是两个人之一会比另一个人“运动”得更快,因此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)循环中,他绘制了此圆圈位置的每一条线。

然后,他通过稍微增加变量x,y,xx,yy来改变“起点”,从而绘制第一条线。当它们用在弧度的上下文中时,它们在圆圈周围“圈”。

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

当“起点”变量x,yy完成一整圈时(因此,当它们超过2 PI弧度时),他将其重置。由于这是一个完整的转折,所以它并不是一个很大的重置。这就像在时钟比小时晚一分钟时四舍五入。

希望有帮助。

,

sincos的角度单位为Radian。 360°是2 * PI,这就是TWO_PI的原因。
变量xyxxyy递增0.0到2 * PI。如果它们达到2 * PI,则它们再次从0.0开始。

使用以下代码将围绕半径为cx的圆从中心点(cyr)到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);

请注意,与终点相比,sincos的顺序被交换为起点,这导致圆沿相反的方向旋转。
不同的转速分别由不同的常数0.0060.002引起。


通过x == yxx == 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是整数),因此不必“重置”角度。

本文链接:https://www.f2er.com/3116573.html

大家都在问