let img;

function preload() {
  img = loadImage('/mnt/data/B9727E26-B9F8-4F22-87F5-DC7EF0B9BE02.jpeg'); // Load the image
}

function setup() {
  createCanvas(550, 550);
  frameRate(30);
  rectMode(CENTER);
  textFont('Courier New');
  textSize(18);
  textAlign(CENTER, CENTER);
}

function draw() {
  let bgColorIndex = Math.floor(frameCount / 100);
  let bgColor = getColorFromPalette(bgColorIndex);
  background(bgColor[0], bgColor[1], bgColor[2], 20);

  // Display the image in the center of the canvas
  image(img, 0, 0, width, height);

  drawLetters();
  for (let i = 0; i < iteration; i++) {
    cableData.forEach((cable, index) => {
      drawCable(cable, index);
    });
    drawRouter();
  }
}

function drawLetters() {
  noStroke();
  let x = 55;
  let y = 110;
  let symbols = ["▓", "░", "▒", "█", "║", "▌", "│", "ﾑ", "尺", "ズ", "刀", "乇", "乇", "丂"];
  
  for (let i = 32; i < 127; i++) {
    symbols.push(String.fromCharCode(i));
  }

  switch (textSeed) {
    case 0:
      fill(random(1, 128));
      while (y < 450) {
        fill(random(1, 255));
        text(random(3) > 2 ? symbols[Math.floor(Math.random() * symbols.length)] : '.', x, y);
        x += 20;
        if (x > 500) {
          x = 55;
          y += 20;
        }
      }
      break;
    case 1:
      fill(255);
      textSize(24);
      for (let j = 0; j < letterCount; j++) {
        text(String.fromCharCode(random(32, 127)), random(50, 500), random(100, 450));
      }
      break;
    case 2:
      fill(random(1, 127));
      while (y < 450) {
        fill(random(1, 127));
        text(random(3) > 2 ? symbols[Math.floor(Math.random() * symbols.length)] : '█', x, y);
        x += 20;
        if (x > 500) {
          x = 55;
          y += 20;
        }
      }
      break;
  }
}

function drawCable([strokeWidth, topx, bottomx, jittop, jitbot], cableIndex) {
  let cableColor = getColorFromPalette(cableIndex);
  stroke(cableColor[0], cableColor[1], cableColor[2]);
  strokeWeight(strokeWidth);

  topx = constrain(topx + random(-jittop, jittop), 50, 500);
  bottomx = constrain(bottomx + random(-jitbot, jitbot), 50, 500);

  noFill();
  beginShape();
  switch (cableSeed) {
    case 0:
      bezier(topx, cablePlacement.uppery, topx, 250, bottomx, 250, bottomx, cablePlacement.lowery);
      break;
    case 1:
      bezier(topx, cablePlacement.uppery, topx, 250 + random(-100, 100), bottomx, 250 + random(-100, 100), bottomx, cablePlacement.lowery);
      break;
    case 2:
      bezier(topx, cablePlacement.uppery, topx - 100, -100, bottomx + 100, 650, bottomx, cablePlacement.lowery);
      break;
  }
  endShape();
  strokeWeight(1);
  drawPort(topx, bottomx);
}

function drawPort(topx, bottomx) {
  let portColor = getColorFromPalette(Math.floor(random(colorPalette.length)));
  fill(portColor[0], portColor[1], portColor[2]);
  noStroke();
  rect(topx, cablePlacement.uppery, 5 + random(1, 15), 20);
  rect(bottomx, cablePlacement.lowery, 5 + random(1, 15), 20);
}

function drawRouter() {
  stroke(255);

  let randomLines = Array.from({ length: 7 }, () => random(50, 500));
  let randomLinesSmall = Array.from({ length: 2 }, () => random(50, 100));

  switch (routerSeed) {
    case 0:
      line(routerBox.p1, randomLinesSmall[1], routerBox.p3, randomLinesSmall[1]);
      break;
    case 1:
      strokeWeight(random(1, 6));
      randomLines.slice(0, 5).forEach(lineX => {
        line(lineX, routerBox.p2, lineX, routerBox.p4 + 50);
      });
      break;
    case 2:
      line(randomLines[0], routerBox.p2 + 50, routerBox.p3, randomLinesSmall[1]);
      line(routerBox.p1, randomLinesSmall[1], randomLines[0], routerBox.p4 + 50);
      line(randomLines[0], routerBox.p2 + 50, randomLines[2], routerBox.p4);
      break;
  }

  let bottomBoxOffset = 400;
  switch (routerSeed) {
    case 0:
      line(routerBox.p1, randomLinesSmall[1] + bottomBoxOffset, routerBox.p3, randomLinesSmall[1] + bottomBoxOffset);
      break;
    case 1:
      randomLines.slice(0, 3).forEach(lineX => {
        line(lineX, routerBox.p2 + bottomBoxOffset, lineX, routerBox.p4 + bottomBoxOffset + 50);
      });
      break;
    case 2:
      line(randomLines[5], routerBox.p2 + bottomBoxOffset, routerBox.p3, randomLinesSmall[1] + bottomBoxOffset);
      line(routerBox.p1, randomLinesSmall[1] + bottomBoxOffset, randomLines[5], routerBox.p4 + bottomBoxOffset);
      line(randomLines[5], routerBox.p2 + bottomBoxOffset, randomLines[2], routerBox.p4 + bottomBoxOffset + 50);
      break;
  }
}