dithering-engine.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Dithering Engine | tools.eliana.lol</title>
  <link rel="stylesheet" href="global.css" />
  <link rel="icon" type="image/x-icon" href="favicon.svg" />
  <style>
    .container {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }

    .input-group {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    .input-label {
      font-size: 0.85rem;
      font-weight: bold;
      text-transform: uppercase;
      color: var(--puny);
      letter-spacing: 0.05em;
    }

    .button-group {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
    }

    button {
      flex: 0 1 auto;
      min-width: 120px;
      padding: 10px;
      cursor: pointer;
      font-family: monospace;
      border: 1px solid var(--text);
      background: var(--bg);
      color: var(--text);
      border-radius: 4px;
      transition: all 150ms;
    }

    button:hover {
      background-color: var(--hover);
      border-color: var(--accent);
    }

    button.primary {
      border-color: var(--accent);
      font-weight: bold;
      color: var(--accent);
    }

    button.danger {
      border-style: dashed;
      opacity: 0.7;
    }

    .status {
      padding: 0.75rem 1rem;
      border-radius: 4px;
      margin: 0.5rem 0;
      display: none;
      font-size: 0.9rem;
    }

    .status.show {
      display: block;
    }

    .status.success {
      background-color: rgba(16, 185, 129, 0.1);
      border-left: 3px solid var(--accent);
      color: var(--accent);
    }

    .status.error {
      background-color: rgba(239, 68, 68, 0.1);
      border-left: 3px solid #ef4444;
      color: #ef4444;
    }

    .info-box {
      padding: 1rem;
      background-color: var(--highlight);
      border-left: 3px solid var(--accent);
      font-size: 0.9rem;
      line-height: 1.6;
    }

    @media (max-width: 600px) {
      .button-group {
        flex-direction: column;
      }

      button {
        width: 100%;
      }
    }

    /* Tool-specific styles */
    .dropzone {
      border: 2px dashed var(--puny);
      border-radius: 4px;
      padding: 2.5rem 1rem;
      text-align: center;
      cursor: pointer;
      transition: all 150ms;
    }

    .dropzone:hover,
    .dropzone.dragover {
      border-color: var(--accent);
      background-color: var(--hover);
    }

    .dropzone input {
      display: none;
    }

    .slider-row {
      display: flex;
      align-items: center;
      gap: 1rem;
    }

    .slider-row input[type="range"] {
      flex: 1;
      width: auto;
      padding: 0;
      border: none;
      accent-color: var(--accent);
    }

    .slider-value {
      min-width: 3.5rem;
      text-align: right;
      font-size: 0.9rem;
      color: var(--puny);
    }

    select {
      width: 100%;
      font-family: monospace;
      padding: 10px;
      border: 1px solid var(--puny);
      background: var(--bg);
      color: var(--text);
      box-sizing: border-box;
      border-radius: 4px;
      font-size: 0.95rem;
    }

    #preview-wrap {
      display: none;
    }

    #preview-wrap.show {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }

    .canvas-wrap {
      width: 100%;
      overflow: auto;
      border: 1px solid var(--puny);
      border-radius: 4px;
    }

    #output-canvas {
      display: block;
      max-width: 100%;
      image-rendering: pixelated;
    }

    #source-canvas {
      display: none;
    }
  </style>
</head>
<body>
  <nav>
    <div class="left">
      <a href="index.html">home</a> | <a href="extra.html">extra</a> |
      <a href="credits.html">credits</a> |
      <a href="changelog.html">logs</a>
    </div>
    <div class="right">
      <button id="theme-toggle">[theme]</button> |
      <a href="https://eliana.lol">site</a>
    </div>
  </nav>

  <main>
    <h1>Dithering Engine</h1>
    <p class="puny">Convert photos to 1-bit dithered images using Floyd-Steinberg, Bayer matrix, or ordered dithering algorithms.</p>

    <div class="container">
      <div id="upload-section">
        <div class="input-group">
          <span class="input-label">Image</span>
          <div class="dropzone" id="dropzone">
            <p>Drag & drop an image here, or click to browse</p>
            <p class="puny" style="margin-top: 0.5rem;">JPG, PNG, GIF, WEBP supported</p>
            <input type="file" id="file-input" accept="image/*" />
          </div>
        </div>
      </div>

      <div id="preview-wrap">
        <div class="input-group">
          <span class="input-label">Settings</span>

          <div class="input-group">
            <label class="puny" for="algo-select">Dithering algorithm</label>
            <select id="algo-select">
              <option value="floyd" selected>Floyd-Steinberg (error diffusion)</option>
              <option value="bayer2">Bayer matrix 2x2</option>
              <option value="bayer4">Bayer matrix 4x4</option>
              <option value="bayer8">Bayer matrix 8x8</option>
              <option value="random">Random / noise threshold</option>
              <option value="threshold">Plain threshold (no dither)</option>
            </select>
          </div>

          <div class="input-group">
            <label class="puny" for="threshold-slider">Threshold midpoint</label>
            <div class="slider-row">
              <input type="range" id="threshold-slider" min="0" max="255" value="128" step="1" />
              <span class="slider-value" id="threshold-value">128</span>
            </div>
          </div>

          <div class="input-group">
            <label class="puny" for="scale-slider">Pixel scale (1 = full resolution)</label>
            <div class="slider-row">
              <input type="range" id="scale-slider" min="1" max="8" value="1" step="1" />
              <span class="slider-value" id="scale-value">1</span>
            </div>
          </div>
        </div>

        <div class="input-group">
          <span class="input-label">Preview</span>
          <div class="canvas-wrap">
            <canvas id="output-canvas"></canvas>
          </div>
        </div>

        <div class="button-group">
          <button class="primary" id="apply-btn">Apply dither</button>
          <button id="download-btn">Download PNG</button>
          <button class="danger" id="reset-btn">Reset</button>
        </div>
      </div>

      <canvas id="source-canvas"></canvas>

      <div class="info-box">
        <strong>Tip:</strong> Floyd-Steinberg gives the most organic, photo-realistic dither. Bayer matrices give that classic retro/game-boy look. Increase pixel scale to make the dither pattern chunkier and more visible.
      </div>

      <div class="status" id="status"></div>
    </div>
  </main>

  <footer style="margin-top: 4rem; text-align: center" class="puny">
    © 2026 eliana.lol • <a href="credits.html">credits</a>
  </footer>

  <!-- Theme Toggle Script (Required for all tools) -->
  <script>
    const html = document.documentElement;
    const toggle = document.getElementById('theme-toggle');
    const saved =
      localStorage.getItem('theme') ||
      (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');

    html.setAttribute('data-theme', saved);
    if (toggle) toggle.innerText = saved === 'dark' ? '[light]' : '[dark]';

    if (toggle) {
      toggle.onclick = () => {
        const now = html.getAttribute('data-theme');
        const next = now === 'dark' ? 'light' : 'dark';
        html.setAttribute('data-theme', next);
        localStorage.setItem('theme', next);
        toggle.innerText = next === 'dark' ? '[light]' : '[dark]';
      };
    }
  </script>

  <!-- Tool-specific script -->
  <script>
    function showStatus(message, type = 'success') {
      const status = document.getElementById('status');
      status.textContent = message;
      status.className = `status show ${type}`;
      setTimeout(() => status.classList.remove('show'), 2000);
    }

    const dropzone = document.getElementById('dropzone');
    const fileInput = document.getElementById('file-input');
    const previewWrap = document.getElementById('preview-wrap');
    const sourceCanvas = document.getElementById('source-canvas');
    const outputCanvas = document.getElementById('output-canvas');
    const srcCtx = sourceCanvas.getContext('2d', { willReadFrequently: true });
    const outCtx = outputCanvas.getContext('2d', { willReadFrequently: true });

    let currentImage = null;
    const MAX_DIM = 800;

    const BAYER = {
      bayer2: [[0, 2], [3, 1]],
      bayer4: [
        [0, 8, 2, 10],
        [12, 4, 14, 6],
        [3, 11, 1, 9],
        [15, 7, 13, 5]
      ],
      bayer8: [
        [0, 32, 8, 40, 2, 34, 10, 42],
        [48, 16, 56, 24, 50, 18, 58, 26],
        [12, 44, 4, 36, 14, 46, 6, 38],
        [60, 28, 52, 20, 62, 30, 54, 22],
        [3, 35, 11, 43, 1, 33, 9, 41],
        [51, 19, 59, 27, 49, 17, 57, 25],
        [15, 47, 7, 39, 13, 45, 5, 37],
        [63, 31, 55, 23, 61, 29, 53, 21]
      ]
    };

    dropzone.addEventListener('click', () => fileInput.click());
    dropzone.addEventListener('dragover', (e) => { e.preventDefault(); dropzone.classList.add('dragover'); });
    dropzone.addEventListener('dragleave', () => dropzone.classList.remove('dragover'));
    dropzone.addEventListener('drop', (e) => {
      e.preventDefault();
      dropzone.classList.remove('dragover');
      const file = e.dataTransfer.files[0];
      if (file) handleFile(file);
    });
    fileInput.addEventListener('change', (e) => {
      const file = e.target.files[0];
      if (file) handleFile(file);
    });

    function handleFile(file) {
      if (!file.type.startsWith('image/')) {
        showStatus('Please upload an image file.', 'error');
        return;
      }
      const reader = new FileReader();
      reader.onload = (e) => {
        const img = new Image();
        img.onload = () => {
          let w = img.width, h = img.height;
          if (w > MAX_DIM || h > MAX_DIM) {
            const scale = MAX_DIM / Math.max(w, h);
            w = Math.round(w * scale);
            h = Math.round(h * scale);
          }
          sourceCanvas.width = w;
          sourceCanvas.height = h;
          srcCtx.drawImage(img, 0, 0, w, h);

          currentImage = true;
          previewWrap.classList.add('show');
          applyDither();
          showStatus('Image loaded.', 'success');
        };
        img.src = e.target.result;
      };
      reader.readAsDataURL(file);
    }

    function grayscaleData(w, h) {
      const imageData = srcCtx.getImageData(0, 0, w, h);
      const data = imageData.data;
      const gray = new Float32Array(w * h);
      for (let i = 0, p = 0; i < data.length; i += 4, p++) {
        gray[p] = data[i] * 0.299 + data[i + 1] * 0.587 + data[i + 2] * 0.114;
      }
      return gray;
    }

    function applyDither() {
      if (!currentImage) return;
      const fullW = sourceCanvas.width, fullH = sourceCanvas.height;
      const scale = parseInt(document.getElementById('scale-slider').value, 10);
      const w = Math.max(1, Math.floor(fullW / scale));
      const h = Math.max(1, Math.floor(fullH / scale));

      // downscale into a temp canvas at working resolution
      const work = document.createElement('canvas');
      work.width = w;
      work.height = h;
      const workCtx = work.getContext('2d', { willReadFrequently: true });
      workCtx.drawImage(sourceCanvas, 0, 0, w, h);

      const imageData = workCtx.getImageData(0, 0, w, h);
      const data = imageData.data;
      const gray = new Float32Array(w * h);
      for (let i = 0, p = 0; i < data.length; i += 4, p++) {
        gray[p] = data[i] * 0.299 + data[i + 1] * 0.587 + data[i + 2] * 0.114;
      }

      const algo = document.getElementById('algo-select').value;
      const threshold = parseInt(document.getElementById('threshold-slider').value, 10);
      const out = new Uint8ClampedArray(w * h);

      if (algo === 'floyd') {
        const buf = Float32Array.from(gray);
        for (let y = 0; y < h; y++) {
          for (let x = 0; x < w; x++) {
            const idx = y * w + x;
            const old = buf[idx];
            const newVal = old < threshold ? 0 : 255;
            out[idx] = newVal;
            const err = old - newVal;
            if (x + 1 < w) buf[idx + 1] += err * 7 / 16;
            if (x - 1 >= 0 && y + 1 < h) buf[idx + w - 1] += err * 3 / 16;
            if (y + 1 < h) buf[idx + w] += err * 5 / 16;
            if (x + 1 < w && y + 1 < h) buf[idx + w + 1] += err * 1 / 16;
          }
        }
      } else if (algo === 'bayer2' || algo === 'bayer4' || algo === 'bayer8') {
        const matrix = BAYER[algo];
        const n = matrix.length;
        const max = n * n;
        for (let y = 0; y < h; y++) {
          for (let x = 0; x < w; x++) {
            const idx = y * w + x;
            const m = matrix[y % n][x % n];
            const adjustedThreshold = ((m + 0.5) / max) * 255;
            out[idx] = gray[idx] < (threshold - 127.5 + adjustedThreshold) ? 0 : 255;
          }
        }
      } else if (algo === 'random') {
        for (let i = 0; i < w * h; i++) {
          const noise = (Math.random() - 0.5) * 255 * 0.6;
          out[i] = (gray[i] + noise) < threshold ? 0 : 255;
        }
      } else {
        for (let i = 0; i < w * h; i++) {
          out[i] = gray[i] < threshold ? 0 : 255;
        }
      }

      // write to output canvas, scaled back up for visibility
      outputCanvas.width = fullW;
      outputCanvas.height = fullH;
      const outImg = workCtx.createImageData(w, h);
      for (let i = 0; i < w * h; i++) {
        outImg.data[i * 4] = out[i];
        outImg.data[i * 4 + 1] = out[i];
        outImg.data[i * 4 + 2] = out[i];
        outImg.data[i * 4 + 3] = 255;
      }
      workCtx.putImageData(outImg, 0, 0);

      outCtx.imageSmoothingEnabled = false;
      outCtx.clearRect(0, 0, fullW, fullH);
      outCtx.drawImage(work, 0, 0, fullW, fullH);
    }

    document.getElementById('threshold-slider').addEventListener('input', (e) => {
      document.getElementById('threshold-value').textContent = e.target.value;
    });
    document.getElementById('scale-slider').addEventListener('input', (e) => {
      document.getElementById('scale-value').textContent = e.target.value;
    });

    document.getElementById('apply-btn').addEventListener('click', () => {
      if (!currentImage) {
        showStatus('Upload an image first.', 'error');
        return;
      }
      applyDither();
      showStatus('Dither applied.', 'success');
    });

    document.getElementById('download-btn').addEventListener('click', () => {
      if (!currentImage) {
        showStatus('Upload an image first.', 'error');
        return;
      }
      outputCanvas.toBlob((blob) => {
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = 'dithered.png';
        a.click();
        URL.revokeObjectURL(url);
        showStatus('Downloaded dithered.png', 'success');
      });
    });

    document.getElementById('reset-btn').addEventListener('click', () => {
      currentImage = null;
      previewWrap.classList.remove('show');
      fileInput.value = '';
      showStatus('Reset.', 'success');
    });
  </script>
</body>
</html>