A loading spinner with 6 dots

loadingspinner.pde

// A loading spinner with 6 dots.
// By @marcedwards from @bjango.
// 
// Pretty messy and hacked together, but it works. ¯\_(ツ)_/¯
// Created using Processing 3.3.7.

float scaler = 0.24 * 4; // Scale the entire design.
float scalerb = 4; // Scale the entire design more.
int frame = 0;

void setup() {
  size(800, 600, P2D);
  frameRate(30);
  smooth(8);
  noStroke();
}

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

  fill(255, 0, 0);
  for (int a = 1; a <= 6; a++) {
    float rotate = (easeInOutN(float(frame)/60, 12) * 120) +
                   (easeInOutN(easeTriangle(float(frame)/60), 2) * 15);
    float sizeoffset = float(frame) + float(a) * 0.8;
          sizeoffset = (sizeoffset % 60) / 60;
    float size = easeInOutN(easeTriangle(sizeoffset), 18);
    scaler = 0.8 + easeInOutN(easeTriangle(sizeoffset), 12) * 0.2;
    if (a % 2 == 0) {
      size = 1 - size;
    }
    drawDot(a, rotate, size * 6 + 5);
  }

  fill(0, 255, 0);
  for (int a = 1; a <= 6; a++) {
    float rotate = (easeInOutN(float(frame)/60, 14) * 120) +
                   (easeInOutN(easeTriangle(float(frame)/60), 2) * 15);
    float sizeoffset = float(frame) + float(a) * 0.8;
          sizeoffset = (sizeoffset % 60) / 60;
    float size = easeInOutN(easeTriangle(sizeoffset), 18);
    scaler = 0.7 + easeInOutN(easeTriangle(sizeoffset), 12) * 0.3;
    if (a % 2 == 0) {
      size = 1 - size;
    }
    drawDot(a, rotate, size * 6 + 5);
  }

  fill(0, 0, 255);
  for (int a = 1; a <= 6; a++) {
    float rotate = (easeInOutN(float(frame)/60, 16) * 120) +
                   (easeInOutN(easeTriangle(float(frame)/60), 2) * 15);
    float sizeoffset = float(frame) + float(a) * 0.8;
          sizeoffset = (sizeoffset % 60) / 60;
    float size = easeInOutN(easeTriangle(sizeoffset), 18);
    scaler = 0.6 + easeInOutN(easeTriangle(sizeoffset), 12) * 0.4;
    if (a % 2 == 0) {
      size = 1 - size;
    }
    drawDot(a, rotate, size * 6 + 5);
  }

  // Apply a dark blue overlay using screen blending.
  blendMode(SCREEN);
  fill(#191030);
  rect(0, 0, width, height);

  frame++;
  frame = frame % 60;

  // Uncomment the line below to render the frames to PNGs in a render folder.
  //render(60);
}

// Draw a dot.
//
// ID = 1 to 6 for the hexagon vertex number. Radius = dot size.
// Offangle = the offset angle (used for making it rotate).

void drawDot(int id, float offangle, float radius) {
  float angle = radians(id * 60 + 30 + offangle);
  ellipseMode(RADIUS);
  ellipse(width/2 + cos(angle) * 40 * scaler * scalerb,
          height/2 + sin(angle) * 40 * scaler * scalerb,
          radius * scaler * scalerb,
          radius * scaler * scalerb);
}


// Interpolation/easing functions.
//
// t = time. Time values are 0 to 1.

float easeTriangle(float t) {
  return t<0.5 ? t*2 : 2-(t*2);
}

float easeInOutN(float t, float power) {
  return t<0.5 ? 0.5*pow(2*t, power) : 1-0.5*pow(2*(1-t), power);
}


// Render the animation to PNGs in foldername, then exit.
//
// The number of frames and path are optional.
// Do not include a trailing / in the folder name.

void render(int frames, String foldername) {
  saveFrame(foldername+"/frame####.png");
  if (frameCount==frames) {
    exit();
  }
}

void render(int frames) {
  render(frames, "render");
}