let fromColor, toColor;

let button;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  // Create a button to trigger the animation

  button = createButton('Run Animation');

  button.position(10, 10);

  button.mousePressed(runAnimation);

​

  // Generate random colors for the background gradient

  fromColor = color(random(255), random(255), random(255));

  toColor = color(random(255), random(255), random(255));

​

  // Generate random lines

  generateLines();

  noLoop(); // We'll manually control when to redraw

}

​

function draw() {

  // Draw gradient background

  for (let y = 0; y < height; y++) {

    let inter = map(y, 0, height, 0, 1);

    let c = lerpColor(fromColor, toColor, inter);

    stroke(c);

    line(0, y, width, y);

  }

​

  // Draw and animate random horizontal lines

  for (let i = 0; i < lines.length; i++) {

    let lineData = lines[i];

    // Use noise for smoother random motion

    lineData.yPos = lineData.baseYPos + (noise(frameCount * 0.01 + lineData.offset) - 0.5) * 50 * lineData.speed;

    // Interpolate colors over time

    let interColor = lerpColor(lineData.startColor, lineData.endColor, (sin(frameCount * 0.01) + 1) / 2);

    let nextLine = lines[(i + 1) % lines.length];

    let blendedColor = lerpColor(interColor, lerpColor(nextLine.startColor, nextLine.endColor, (sin(frameCount * 0.01) + 1) / 2), 0.5);

    stroke(blendedColor);

    strokeWeight(lineData.width); // Set the width of the line

    line(0, lineData.yPos, width, lineData.yPos);

  }

​

  // Redraw on the next frame

  requestAnimationFrame(draw);

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

  setup(); // Re-run setup to regenerate lines and gradient

}

​

function generateLines() {

  lines = [];

  let lineCount = 5;

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

    lines.push({

      yPos: random(height),

      baseYPos: random(height),

      startColor: color(random(255), random(255), random(255)),

      endColor: color(random(255), random(255), random(255)),

      speed: random(0.1, 0.5), // slower speed for smoother animation

      offset: random(1000), // random offset for noise function

      width: random(50, 80) // random width for each line

    });

  }

}

​

function runAnimation() {

  // Generate new random colors for the background gradient

  fromColor = color(random(255), random(255), random(255));

  toColor = color(random(255), random(255), random(255));

​

  // Generate new random lines

  generateLines();

  // Redraw the canvas

  draw();

}

​