main.js

(() => {
  const canvas = createCanvas();
  const ctx = canvas.getContext('2d');

  let width = canvas.width = window.innerWidth;
  let height = canvas.height = window.innerHeight;

  let imageData = ctx.createImageData(width, height);
  let data = imageData.data;
  let deadPixels = new Set();
  let lastTime = 0;
  let isBroken = false;
  let threshold = 0.05;
  let clusters = new Map();
  let clusterData = new Map();
  let clusterSizeVariance = 1;
  let clusterBaseSize = 10;
  let timeouts = [];
  let mousePos = encodePos(0, 0);
  let colorMode = null;

  const offsets = [
    [-1, -1], [0, -1], [1, -1],
    [-1, 0], [1, 0],
    [-1, 1], [0, 1], [1, 1]
  ];

  function encodePos(x, y) {
    return y * width + x;
  }

  function decodePos(pos) {
    return [pos % width, Math.floor(pos / width)];
  }

  function getClusterSize() {
    const screenSize = Math.min(width, height);
    const sizeMultiplier = clusterBaseSize * (1 + Math.pow(Math.random(), 2) * clusterSizeVariance * 5);
    return Math.floor(screenSize * sizeMultiplier);
  }

  function kill(x, y, clusterId = null, color) {
    const i = (y * width + x) * 4;
    const pos = encodePos(x, y);

    if (clusterId === null) {
      clusterId = Date.now() + Math.floor(Math.random() * 1000);
    }

    clusters.set(pos, clusterId);

    if (!clusterData.has(clusterId)) {
      clusterData.set(clusterId, {
        size: 0,
        maxSize: getClusterSize()
      });
    }

    clusterData.get(clusterId).size++;
    let colorValues = []
    if (color === "random") {
      colorValues = [Math.floor(Math.random() * 256), Math.floor(Math.random() * 256), Math.floor(Math.random() * 256)];
    }
    else {
      colorValues = [color >> 16 & 0xFF, color >> 8 & 0xFF, color & 0xFF];
    }
    data[i] = colorValues[0];
    data[i + 1] = colorValues[1];
    data[i + 2] = colorValues[2];
    data[i + 3] = 255;

    deadPixels.add(pos);
  }

  function grow() {
    Array.from(deadPixels).map(decodePos).forEach(([x, y]) => {
      const pos = encodePos(x, y);
      const currentCluster = clusters.get(pos);

      const cluster = clusterData.get(currentCluster);
      if (cluster && cluster.size >= cluster.maxSize) {
        return;
      }

      for (const [dx, dy] of offsets) {
        const nx = x + dx;
        const ny = y + dy;

        if (nx < 0 || nx >= width || ny < 0 || ny >= height || deadPixels.has(encodePos(nx, ny))) {
          continue;
        }

        if (Math.random() < threshold) {
          kill(nx, ny, currentCluster, colorMode);
        }
      }
    });

    threshold += (Math.random() * 0.01 - 0.005);
    threshold = Math.max(0.01, Math.min(0.1, threshold));
  }

  function draw(timestamp) {
    if (!lastTime) lastTime = timestamp;
    const deltaTime = timestamp - lastTime;

    if (deltaTime > 32 && isBroken) {
      grow();
      lastTime = timestamp;
    }

    const [mouseX, mouseY] = decodePos(mousePos);
    const isOverDeadPixel = deadPixels.has(mousePos) || Array.from(deadPixels).some(pos => {
      const [dx, dy] = decodePos(pos);
      return Math.abs(mouseX - dx) <= 15 && Math.abs(mouseY - dy) <= 15;
    });
    canvas.style.cursor = isOverDeadPixel ? 'none' : 'auto';

    ctx.putImageData(imageData, 0, 0);
    requestAnimationFrame(draw);
  }

  function startReaction(x, y) {
    if (deadPixels.has(encodePos(x, y))) return;
    const clusterId = Date.now();
    kill(x, y, clusterId);
    isBroken = true;
  }


  function handleClick(event) {
    const x = Math.floor(event.clientX);
    const y = Math.floor(event.clientY);
    startReaction(x, y);
  }

  function handleMouseUp(event) {
    let button = event.button;
    if (button === 1) colorMode = colorMode === 'random' ? null : 'random';
  }

  function handleMouseMove(event) {
    const mouseX = Math.floor(event.clientX);
    const mouseY = Math.floor(event.clientY);
    mousePos = encodePos(mouseX, mouseY);
  }

  function handleResize() {
    width = canvas.width = window.innerWidth;
    height = canvas.height = window.innerHeight;

    imageData = ctx.createImageData(width, height);
    data = imageData.data;

    deadPixels = new Set();
    clusters = new Map();
    clusterData = new Map();
    threshold = 0.05;
    isBroken = false;

    timeouts.forEach(timeout => clearTimeout(timeout));
    timeouts = [];
  }

  function init() {
    canvas.addEventListener('click', handleClick, { passive: true });
    canvas.addEventListener('mouseup', handleMouseUp, { passive: true });
    window.addEventListener('resize', handleResize, { passive: true });
    canvas.addEventListener('mousemove', handleMouseMove);
    handleResize();
    requestAnimationFrame(draw);

    for (let i = 0; i < 5; i++) {
      timeouts.push(setTimeout(() => {
        const randomX = Math.floor(Math.random() * width);
        const randomY = Math.floor(Math.random() * height);
        startReaction(randomX, randomY);
      }, i * 2000));
    }
  }

  function createCanvas() {
    const canvas = document.createElement('canvas');
    canvas.id = 'broken-screen-canvas';
    canvas.style.position = 'fixed';
    canvas.style.top = '0';
    canvas.style.left = '0';
    // canvas.style.pointerEvents = 'none';
    canvas.style.zIndex = '2147483647';
    canvas.style.width = '100dvw';
    canvas.style.height = '100dvh';
    canvas.style.backgroundColor = 'transparent';
    document.body.appendChild(canvas);
    return canvas;
  }
  init();
})();