An animated arrow using lots of points in Processing

theonlywayisup.pde

//
// The only way is up.
// Created using Processing 4.0a3.
//
// Code by @marcedwards from @bjango.
//
// A GIF of this code can be seen here:
// https://twitter.com/marcedwards/status/1357998635447799810
//

void setup() {
  size(450, 450, P2D);
  frameRate(30);
  smooth(8);
  colorMode(RGB, 1);
  stroke(1);
  strokeWeight(1);
  noFill();
}

void draw() {
  background(0);
  blendMode(ADD);

  float movesize = 120;
  int pad = int(movesize);
  
  // Make step bigger for fewer dots and better performance.
  int step = 1;
  
  for (int i = -pad; i < width + pad; i += step) {
    for (int j = -pad; j < height + pad; j += step) {

      float v = 0.01 + Ease.hermite5(Ease.tri(gradientArrowUp(i, j, timeLoop(180))), 2);
      float x = i + valueNoise(i * 0.1, j * 0.1) * v * movesize;
      float y = j + valueNoise(i * 0.09, j * 0.1) * v * movesize;

      stroke(0.1 + 0.6 * valueNoise(i, j));
      point(x, y);
    }
  }
}

//

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

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

float valueNoise(float x, float y) {
  float v = sin(x * 281.53 + y * 57.15) * 131.13;
  return v - floor(v);
}

float gradientArrowUp(float x, float y, float offset) {
  float v = y / height + 1 - (abs(x - width / 2) / width);
  return wrap(v, offset);
}

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

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) {
    return t < 0.5 ? t * 2 : 2 - (t * 2);
  }
}