Retro triangles in Processing

retrotriangles.pde

//
// Retro triangles.
// Created using Processing 3.5.4.
//
// Code by @marcedwards from @bjango.
//
// A GIF of this code can be seen here:
// https://twitter.com/marcedwards/status/1307655695819403265
//

color cyan = #5ef5c8;
color pink = #ff2a9e;
color dark = #24202e;

void setup() {
  size(400, 400, P2D);
  smooth(8);
  frameRate(30);
  colorMode(RGB, 1);
}

void draw() {
  background(dark);

  for (int i = 0; i < 10; i++) {
    for (int j = 0; j < 10; j++) {
      float x = i * 40;
      float y = j * 40;
      float ax = Ease.tri(gradientLinear(x, y, 1 - timeLoop(220)));
      float ay = Ease.tri(gradientPlasma(x, y, 1 - timeLoop(220)));
      tile(x, y, 40, lerp(ax, ay, 0.15));
    }
  }
}

void tile(float x, float y, float s, float amount) {
  float a1 = Ease.hermite5(constrain(amount * 4, 0, 1), 2);
  float a2 = Ease.hermite5(constrain(amount * 4 - 1, 0, 1), 2);
  float a3 = Ease.hermite5(constrain(amount * 4 - 2, 0, 1), 2);
  float a4 = Ease.hermite5(constrain(amount * 4 - 3, 0, 1), 2);

  noStroke();
  fill(cyan);
  beginShape();
  vertex(x, y);
  vertex(x + s * a3, y);
  vertex(x, y + s * a3);
  endShape();

  fill(pink);
  beginShape();
  vertex(x + s, y + s);
  vertex(x + s, y + s - (s * a4));
  vertex(x + s - (s * a4), y + s);
  endShape();

  noFill();
  stroke(cyan);
  strokeWeight(2);
  rectMode(CORNER);

  rect(x, y, s, s); 
  line(x, y, lerp(x, x + s, a1), lerp(y, y + s, a1));
  line(x, y + s, lerp(x, x + s, a2), lerp(y + s, y, a2));
}

//

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

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

float wrap(float value, float offset) {
  return (value + offset) % 1;
}

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

float gradientPlasma(float x, float y, float offset, float a, float b, float c, float d) {
  float value = sin(x / a + offset * TAU);
  value += sin(y / b + (offset * TAU * 2));
  value += sin((x + y) / c + offset * TAU);
  value += sin(sqrt(x * x + y * y) / d - offset * TAU);
  value += 4; // shift range from -4 .. 4 to 0 .. 8
  value /= 8; // bring range down to 0 .. 1
  return wrap(value, offset);
}

float gradientPlasma(float x, float y, float offset) {
  return gradientPlasma(x, y, offset, 23.0, 31.0, 48.0, 16.0);
}

static class Ease {
  static public float hermite5(float t) {
    return t * t * t * (t * (t * 6 - 15) + 10);
  }

  static public float hermite5(float t, int repeat) {
    for (int i = 0; i < repeat; i++) {
      t = hermite5(t);
    }
    return t;
  }

  static public float tri(float t, float repeat) {
    return t * repeat * 2 % 2 <= 1 ? t * repeat * 2 % 2 : 2 - (t * repeat * 2 % 2);
  }

  static public float tri(float t) {
    return t < 0.5 ? t * 2 : 2 - (t * 2);
  }
}