function preload() {

  monoFont = loadFont("terminal-grotesque-webfont.ttf");

}

​

function setup() {

  createCanvas(400, 400);

  //textFont(monoFont);

  textSize(28);

  fill(255);

  // Solid color definitions

  yellowShades = color(255, 223, 0); // Solid yellow

  lightBlueShades = color(173, 216, 230); // Light blue

  fusciaShades = color(255, 0, 255); // Fuchsia

}

​

let time = 0;

let cycleCount = 0;

let yellowShades;

let lightBlueShades;

let fusciaShades;

let characterColors = {}; // Store colors for each character position

​

function draw() {

  let currentChar, currentShades;

  if (cycleCount < 1) {

    currentChar = "⌁";

    currentShades = yellowShades;

  } else if (cycleCount < 2) {

    currentChar = "⥀";

    currentShades = lightBlueShades;

  } else if (cycleCount < 3) {

    currentChar = "⏚";

    currentShades = fusciaShades;

  } else {

    cycleCount = 0; // Reset the cycle after all characters have iterated

    currentChar = "⌁";

    currentShades = yellowShades;

  }

​

  drawZero(currentChar, currentShades);

  if (time > 300) { // More rounds before resetting

    time = 0;

    cycleCount++;

    characterColors = {}; // Reset character colors

  }

}

​

function drawZero(char, shade) {

  background(0);

  text(char, 200, 200);

  time += 2.5;

​

  let centerX = width / 2;

  let centerY = height / 2;

  // One loop per character type now

  if (time > 10) {

    drawCharacter(centerX, centerY - 50, char, shade);

  }

  if (time > 20) {

    drawCharacter(centerX + 50, centerY - 50, char, shade);

  }

  if (time > 30) {

    drawCharacter(centerX + 50, centerY, char, shade);

  }

  if (time > 40) {

    drawCharacter(centerX + 50, centerY + 50, char, shade);

  }

  if (time > 50) {

    drawCharacter(centerX, centerY + 50, char, shade);

  }

  if (time > 60) {

    drawCharacter(centerX - 50, centerY + 50, char, shade);

  }

  if (time > 70) {

    drawCharacter(centerX - 50, centerY, char, shade);

  }

  if (time > 80) {

    drawCharacter(centerX - 50, centerY - 50, char, shade);

  }

  if (time > 90) {

    drawCharacter(centerX, centerY - 100, char, shade);

  }

  if (time > 100) {

    drawCharacter(centerX + 100, centerY - 100, char, shade);

  }

  if (time > 110) {

    drawCharacter(centerX + 100, centerY, char, shade);

  }

  if (time > 120) {

    drawCharacter(centerX + 100, centerY + 100, char, shade);

  }

  if (time > 130) {

    drawCharacter(centerX, centerY + 100, char, shade);

  }

  if (time > 140) {

    drawCharacter(centerX - 100, centerY + 100, char, shade);

  }

  if (time > 150) {

    drawCharacter(centerX - 100, centerY, char, shade);

  }

  if (time > 160) {

    drawCharacter(centerX - 100, centerY - 100, char, shade);

  }

}

​

function drawCharacter(x, y, char, shade) {

  let positionKey = `${x},${y}`;

  if (!characterColors[positionKey]) {

    characterColors[positionKey] = shade;

  }

  fill(characterColors[positionKey]);

  text(char, x, y);

}

​