DelaySquareSpiral.pde

// Variation of "A trick to get looping curves with lerp and delay" tutorial
// by Étienne Jacob
// https://twitter.com/n_disorder
// https://necessarydisorder.wordpress.com/2018/03/31/a-trick-to-get-looping-curves-with-lerp-and-delay/

int numFrames = 100;

void setup()
{
  size(800,800,P3D);
  stroke(255);
  fill(255);
}

float x1(float t, float rr){
  float a = t * TWO_PI;
  float r = min( 1.0 / abs( cos( a ) ), 1.0 / abs( sin( a ) ) );
  return 0.5 * width + rr * r * cos( a );
}
float y1(float t, float rr){
  float a = t * TWO_PI;
  float r = min( 1.0 / abs( cos( a ) ), 1.0 / abs( sin( a ) ) );
  return 0.5 * height + rr * r * sin( a );
}

float x2(float t){
  return 0.5*width;
}
float y2(float t){
  return 0.5*height;
}

int m = 1000;

float delay_factor = 0.5;

void draw(){
  float t = 1.0*(frameCount - 1)/numFrames;

  background(0);

  pushStyle();
  strokeWeight(2);
  float rr = 400.0;
  for( float t0 = 0; t0 < 0.25; t0 += 0.01 )
  {
    stroke(255 * t0 * 4,100);
    for(int i=0;i<=m;i++){
      float tt = 1.0*i/m;
      float t1 = t + t0;

      float x = lerp(x1(t1 - delay_factor*tt, rr),x2(t),tt);
      float y = lerp(y1(t1 - delay_factor*tt, rr),y2(t),tt);
      float x1 = lerp(x1(t1 - delay_factor*tt, -rr),x2(t),tt);
      float y1 = lerp(y1(t1 - delay_factor*tt, -rr),y2(t),tt);

      point(x,y);
      point(x1,y1);
      point(width-y,x);
      point(width-y1,x1);
    }
  }
  popStyle();

  println("saving frame " + frameCount + "/" + numFrames);
  if(frameCount<=numFrames) saveFrame("fr###.png");
  if(frameCount == numFrames) stop();
}