Out of sync lines in Processing

outofsynclines.pde

//
// Out of sync lines.
// Created using Processing 3.5.3.
//
// Code by @marcedwards from @bjango.
//
// A GIF of this code can be seen here:
// https://twitter.com/marcedwards/status/1195668786340233221
//

void setup() {
  size(400, 400, P2D);
  frameRate(30);
  smooth(8);
  strokeCap(SQUARE);
  noFill();
  blendMode(ADD);
}

void draw() {
  background(#333333);
  stroke(#eeeeee);
  float step = width / 16.0;

  for (float i = - step; i <= width + step * 2; i += step) {
    float v = Ease.inOutSin(Ease.tri(gradientLinear(i, height / 2, timeLoop(200))));
    strokeWeight(1 + Ease.inOutSin(v) * 12);

    pushMatrix();
    translate(width / 2, height / 2);
    rotate(v * 0.4 - 0.2);
    translate(-width / 2, -height / 2);
    line(i, -height, i, height * 2);
    line(-height, i, width * 2, i);
    popMatrix();
  }
}

float gradientLinear(float x, float y, float offset) {
  return (offset + ((x + y) / (width + height))) % 1;
}

float timeLoop(float totalframes, float offset) {
  return (frameCount + offset) % totalframes / totalframes;
}

float timeLoop(float totalframes) {
  return timeLoop(totalframes, 0);
}

static class Ease {
  static public float inOutSin(float t) {
    return 0.5 - cos(PI * t) / 2;
  }
  static public float tri(float t) {
    return t < 0.5 ? t * 2 : 2 - (t * 2);
  }
}