let thingsText = "THINGS ";  // Left alignment

let rightThingsText = " THINGS";  // Right alignment

let startTime;

let cycleLength = 8000;

let animationDuration = 2500;

let numberOfLines = 35;  // Number of stacked animations

let lineSpacing = 32;   // Gap between lines

let timeOffset = 400;   // Time offset between each line's animation

let fontSize = 32;      // Font size

let colorOffsetAmount = 0.3;  // Amount of color separation

let animationSpeed = 1.0;    // Animation speed multiplier

​

// Time tracking

let lastFrameTime = 0;

let animationTime = [];

​

// Array to store start times for each line

let startTimes = [];

let basePositions = [];

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  updateTextSettings();

  // Initialize start times and animation times with offsets

  for (let i = 0; i < numberOfLines; i++) {

    startTimes[i] = millis();

    animationTime[i] = -(i * timeOffset);

    updateBasePositions();

  }

  lastFrameTime = millis();

}

​

function updateTextSettings() {

  textFont('Arial');

  textSize(fontSize);

  textAlign(LEFT, CENTER);

  textStyle(BOLD);

  // Recalculate text dimensions

  thingsWidth = textWidth(thingsText);

  staticWidth = textWidth(staticText);

  totalWidth = staticWidth + thingsWidth;

}

​

function updateBasePositions() {

  for (let i = 0; i < numberOfLines; i++) {

    basePositions[i] = {

      x: width/2 - totalWidth/2,

      y: (i * (fontSize + lineSpacing)) + fontSize

    };

  }

}

​

function draw() {

  background(0);

  // Calculate delta time

  let currentTime = millis();

  let deltaTime = (currentTime - lastFrameTime) * animationSpeed;

  lastFrameTime = currentTime;

  // Update animation times and draw

  for (let i = 0; i < numberOfLines; i++) {

    animationTime[i] = (animationTime[i] + deltaTime) % cycleLength;

    if (animationTime[i] < 0) animationTime[i] += cycleLength;

    drawAnimationLine(i);

  }

}

​

function drawColoredText(str, x, y, progress = 0) {

  push();

  blendMode(SCREEN);

  noStroke();

  // Only apply offset during animation (progress > 0)

  let offset = progress * 20 * colorOffsetAmount;

  // Draw Cyan layer

  fill(0, 255, 255,170);

  text(str, x - offset, y);

  // Draw Magenta layer

  fill(255, 0, 255,170);

  text(str, x, y);

  // Draw Yellow layer

  fill(255, 255, 0,170);

  text(str, x + offset, y);

  pop();

}

​

function drawAnimationLine(lineIndex) {

  let elapsedTime = animationTime[lineIndex];

  let baseX = basePositions[lineIndex].x;

  let baseY = basePositions[lineIndex].y;

  let rightPos = baseX + staticWidth;

  let leftPos = baseX - thingsWidth;

  let staticX = baseX;

  // Calculate the mid-pause duration based on cycle length and animation duration

  let midPauseDuration = (cycleLength - (2 * animationDuration)) / 2;

  if (elapsedTime < animationDuration) {

    // First animation with easing

    let progress = elapsedTime / animationDuration;

    let easedProgress = easeInOutCubic(progress);

    staticX = map(easedProgress, 0, 1, baseX, baseX + thingsWidth);

    // Calculate animation progress for color offset (peak at middle)

    let colorProgress = sin(progress * PI);

    drawColoredText(staticText, staticX, baseY, colorProgress);

    drawColoredText(rightThingsText, rightPos + (width * easedProgress), baseY, colorProgress);

    drawColoredText(thingsText, -thingsWidth + (leftPos + thingsWidth + thingsWidth) * easedProgress, baseY, colorProgress);

  } 

  else if (elapsedTime < animationDuration + midPauseDuration) {

    // First pause: "THINGS I LOVE MAKING"

    drawColoredText(thingsText, leftPos + thingsWidth, baseY, 0);

    drawColoredText(staticText, baseX + thingsWidth, baseY, 0);

  }

  else if (elapsedTime < animationDuration * 2 + midPauseDuration) {

    // Second animation with easing

    let progress = (elapsedTime - (animationDuration + midPauseDuration)) / animationDuration;

    let easedProgress = easeInOutCubic(progress);

    staticX = map(easedProgress, 0, 1, baseX + thingsWidth, baseX);

    // Calculate animation progress for color offset (peak at middle)

    let colorProgress = sin(progress * PI);

    drawColoredText(staticText, staticX, baseY, colorProgress);

    drawColoredText(thingsText, leftPos + thingsWidth - (width * easedProgress), baseY, colorProgress);

    drawColoredText(rightThingsText, width + (rightPos - width) * easedProgress, baseY, colorProgress);

  }

  else {

    // Second pause: "I LOVE MAKING THINGS"

    drawColoredText(staticText, baseX, baseY, 0);

    drawColoredText(rightThingsText, rightPos, baseY, 0);

  }

}

​

function easeInOutCubic(x) {

  return x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2;

}

​

function keyPressed() {

  if (key === 'q' || key === 'Q') {

    fontSize = max(8, fontSize - 2);

    updateTextSettings();

    updateBasePositions();

  }

  if (key === 'w' || key === 'W') {

    fontSize = min(72, fontSize + 2);

    updateTextSettings();

    updateBasePositions();

  }

  if (key === 'a' || key === 'A') {

    lineSpacing = max(-20, lineSpacing - 2);

    updateBasePositions();

  }

  if (key === 's' || key === 'S') {

    lineSpacing = min(100, lineSpacing + 2);

    updateBasePositions();

  }

  if (key === 'c' || key === 'C') {

    animationSpeed = max(0.1, animationSpeed - 0.1);

  }

  if (key === 'v' || key === 'V') {

    animationSpeed = min(2.0, animationSpeed + 0.1);

  }

  // New controls for cycle length

  if (key === 'e' || key === 'E') {

    cycleLength = max(2000, cycleLength - 100);

  }

  if (key === 'r' || key === 'R') {

    cycleLength = min(10000, cycleLength + 100);

  }

  // New controls for animation duration

  if (key === 'd' || key === 'D') {

    animationDuration = max(200, animationDuration - 50);

  }

  if (key === 'f' || key === 'F') {

    animationDuration = min(cycleLength/2 - 100, animationDuration + 50);

  }

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

  updateBasePositions();

}