Inspired by Sasj Geometric Animations 160324. Click "View Source" to see the processing code.

// http://sasj.tumblr.com/post/141637394240/geometric-animations-160324 // all the moving points are centered at (0,0) // there are four fixed points at (± N, ± N) // two fixed points have red lines, two have blue lines

final int num_points = 3; float radius[] = new floatnum_points; float vel[] = new floatnum_points; float t[] = new floatnum_points;

void setup() { size(512, 512); //blendMode(ADD); // looks better with ADD, but procesingJS doesn't support it frameRate(25);

    for(int i = 0 ; i < num_points ; i++)
    {
        radius[i](i) = random(width*3/8) + width/8;
        vel[i](i) = random(-1,1) * 0.05;
        t[i](i) = 0;
    }

}

void draw() { background(0); strokeWeight(8);

    // center on the display
    translate(width/2, height/2);

    // Draw all of the back ones first
    for(int i = 0 ; i < num_points ; i++)
    {
        float x = radius[i](i) * sin(t[i](i));
        float y = radius[i](i) * cos(t[i](i));
        stroke(64);
        line(-width/4, +height/4, x, y);
        line(+width/4, -height/4, x, y);
        line(-width/4, +height/4, -x, -y);
        line(+width/4, -height/4, -x, -y);
    }

    // draw the bright ones in front
    for(int i = 0 ; i < num_points ; i++)
    {
        float x = radius[i](i) * sin(t[i](i));
        float y = radius[i](i) * cos(t[i](i));
        t[i](i) += vel[i](i);

        stroke(128);
        line(+width/4, +height/4, x, y);
        line(-width/4, -height/4, x, y);
        line(+width/4, +height/4, -x, -y);
        line(-width/4, -height/4, -x, -y);
    }

}

Processing 2016 Art

---

Last update: November 8, 2020