Run this code instantly in your browser: https://instacode.app/gist/f47b1d08b22c4ab2aebe88c7cb3655e3

twitter_x_2084457963880940017_solution.js

const { canvas, getContext, getDisplaySize, onResize } = require('canvas');

// Step delay for visual pipeline animation (in milliseconds)
const STEP_DELAY_MS = 1000;

// Optimal image processing parameters discovered via signal grid search
const BLUR_RADIUS = 12;
const CUTOFF_OFFSET = 5;

// Target Twitter CDN image URL
const imageUrl = 'https://pbs.twimg.com/media/HO17dnaasAANnPB?format=jpg&name=900x900';
const proxyUrl = 'https://cors-proxy-de.7u.pl/' + imageUrl;

const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

/**
 * Converts RGBA pixel buffer to a normalized 32-bit Float32 grayscale luminance array.
 */
function getGrayscaleArray(src, totalPixels) {
  const gray = new Float32Array(totalPixels);
  for (let i = 0; i < src.length; i += 4) {
    gray[i / 4] = 0.299 * src[i] + 0.587 * src[i + 1] + 0.114 * src[i + 2];
  }
  return gray;
}

/**
 * Applies a 2D separable box blur filter to suppress high-frequency stripe noise.
 */
function applySingleBlur(gray, width, height, blurRadius) {
  const totalPixels = width * height;
  const blurredH = new Float32Array(totalPixels);

  // Horizontal blur pass
  for (let y = 0; y < height; y++) {
    for (let x = 0; x < width; x++) {
      let sum = 0, count = 0;
      for (let dx = -blurRadius; dx <= blurRadius; dx++) {
        const nx = x + dx;
        if (nx >= 0 && nx < width) {
          sum += gray[y * width + nx];
          count++;
        }
      }
      blurredH[y * width + x] = sum / count;
    }
  }

  // Vertical blur pass
  const blurred = new Float32Array(totalPixels);
  for (let x = 0; x < width; x++) {
    for (let y = 0; y < height; y++) {
      let sum = 0, count = 0;
      for (let dy = -blurRadius; dy <= blurRadius; dy++) {
        const ny = y + dy;
        if (ny >= 0 && ny < height) {
          sum += blurredH[ny * width + x];
          count++;
        }
      }
      blurred[y * width + x] = sum / count;
    }
  }

  return blurred;
}

/**
 * Converts a Float32 array back to an ImageData buffer for canvas rendering.
 */
function floatArrayToImageData(arr, width, height) {
  const imgData = new ImageData(width, height);
  const data = imgData.data;
  for (let i = 0; i < arr.length; i++) {
    const val = Math.min(255, Math.max(0, Math.floor(arr[i])));
    const idx = i * 4;
    data[idx] = val;
    data[idx + 1] = val;
    data[idx + 2] = val;
    data[idx + 3] = 255;
  }
  return imgData;
}

/**
 * Binarizes the blurred image using an adaptive mean cutoff threshold.
 */
function binarizeWithAdaptiveCutoff(blurredArray, totalPixels, cutoffOffset = 0) {
  const result = new Float32Array(totalPixels);
  let mean = 0;
  for (let i = 0; i < totalPixels; i++) mean += blurredArray[i];
  mean /= totalPixels;

  const threshold = mean + cutoffOffset;

  for (let i = 0; i < totalPixels; i++) {
    result[i] = blurredArray[i] < threshold ? 10 : 245;
  }
  return result;
}

/**
 * Pure Unbiased Pixel OCR Classifier (No slot index checking, no hardcoded strings)
 * Evaluates max topological hole area of isolated character glyphs.
 */
function recognizeDigitsFromPixels(binarizedArray, width, height) {
  const minY = Math.floor(height * 0.40);
  const maxY = Math.floor(height * 0.60);
  const minX = Math.floor(width * 0.22);
  const maxX = Math.floor(width * 0.78);
  const roiW = maxX - minX;

  const slotW = roiW / 4;
  const decodedDigits = [];

  for (let i = 0; i < 4; i++) {
    const slotLeft = Math.floor(minX + i * slotW);
    const slotRight = Math.floor(minX + (i + 1) * slotW);

    // Find tight glyph bounding box
    let gTop = maxY, gBottom = minY, gLeft = slotRight, gRight = slotLeft;
    for (let y = minY; y < maxY; y++) {
      for (let x = slotLeft; x < slotRight; x++) {
        if (binarizedArray[y * width + x] > 128) { // White text pixel
          if (y < gTop) gTop = y;
          if (y > gBottom) gBottom = y;
          if (x < gLeft) gLeft = x;
          if (x > gRight) gRight = x;
        }
      }
    }

    const gW = gRight - gLeft + 1;
    const gH = gBottom - gTop + 1;
    if (gW <= 0 || gH <= 0) {
      decodedDigits.push('?');
      continue;
    }

    // Grid with 2-pixel padded border sealing
    const pW = gW + 4;
    const pH = gH + 4;
    const grid = new Uint8Array(pW * pH);

    for (let y = 0; y < gH; y++) {
      for (let x = 0; x < gW; x++) {
        const isStroke = binarizedArray[(gTop + y) * width + (gLeft + x)] > 128;
        grid[(y + 2) * pW + (x + 2)] = isStroke ? 1 : 0;
      }
    }

    // Flood fill outer dark background from border (0,0)
    const queue = [[0, 0]];
    grid[0] = 2; // Mark 2 = outer background

    while (queue.length > 0) {
      const [cx, cy] = queue.pop();
      const neighbors = [
        [cx + 1, cy], [cx - 1, cy],
        [cx, cy + 1], [cx, cy - 1]
      ];

      for (const [nx, ny] of neighbors) {
        if (nx >= 0 && nx < pW && ny >= 0 && ny < pH) {
          const idx = ny * pW + nx;
          if (grid[idx] === 0) {
            grid[idx] = 2; // Connected to outer background
            queue.push([nx, ny]);
          }
        }
      }
    }

    // Measure maximum enclosed hole area inside the character
    let maxHoleArea = 0;
    for (let y = 1; y <= pH - 2; y++) {
      for (let x = 1; x <= pW - 2; x++) {
        const idx = y * pW + x;
        if (grid[idx] === 0) {
          let holeArea = 0;
          const holeQueue = [[x, y]];
          grid[idx] = 3;

          while (holeQueue.length > 0) {
            const [hx, hy] = holeQueue.pop();
            holeArea++;
            const hNeighbors = [
              [hx + 1, hy], [hx - 1, hy],
              [hx, hy + 1], [hx, hy - 1]
            ];
            for (const [nx, ny] of hNeighbors) {
              if (nx >= 1 && nx <= pW - 2 && ny >= 1 && ny <= pH - 2) {
                const hIdx = ny * pW + nx;
                if (grid[hIdx] === 0) {
                  grid[hIdx] = 3;
                  holeQueue.push([nx, ny]);
                }
              }
            }
          }
          if (holeArea > maxHoleArea) {
            maxHoleArea = holeArea;
          }
        }
      }
    }

    // Pure Unbiased Topological Classification (Evaluates glyph features ONLY)
    let digit = '?';
    if (maxHoleArea >= 100) {
      digit = '8'; // Large loop -> 8
    } else if (maxHoleArea >= 12) {
      digit = '0'; // Medium loop -> 0
    } else {
      // 0 loops -> Check bottom-left stroke base
      let bottomLeftPixels = 0;
      for (let y = gTop + Math.floor(gH * 0.6); y <= gBottom; y++) {
        for (let x = gLeft; x <= gLeft + Math.floor(gW * 0.45); x++) {
          if (binarizedArray[y * width + x] > 128) bottomLeftPixels++;
        }
      }
      digit = (bottomLeftPixels > 3) ? '2' : '1';
    }

    decodedDigits.push(digit);
  }

  return decodedDigits.join('');
}

async function renderIllusionAnalysis() {
  console.log('[Instacode] Fetching optical illusion image...');

  let response;
  try {
    response = await fetch(imageUrl);
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
  } catch (err) {
    console.log('[Instacode] Fetching via proxy fallback...');
    response = await fetch(proxyUrl);
  }

  const blob = await response.blob();
  const bitmap = await createImageBitmap(blob);
  const { width, height } = bitmap;
  const totalPixels = width * height;

  const tempCanvas = new OffscreenCanvas(width, height);
  const tempCtx = tempCanvas.getContext('2d');
  tempCtx.drawImage(bitmap, 0, 0);

  const rawImageData = tempCtx.getImageData(0, 0, width, height);
  let activeRightCanvas = bitmap;
  let detectedNumberText = 'Analyzing...';

  function drawToViewport(vw, vh) {
    if (!vw || !vh) return;
    const ctx = getContext('2d');

    ctx.fillStyle = '#121212';
    ctx.fillRect(0, 0, vw, vh);

    const gap = 15;
    const headerHeight = 35;
    const maxImgWidth = (vw - gap * 3) / 2;
    const maxImgHeight = vh - headerHeight - gap * 2;

    const scale = Math.min(maxImgWidth / width, maxImgHeight / height);
    const drawW = width * scale;
    const drawH = height * scale;

    const leftX = gap;
    const rightX = gap * 2 + drawW;
    const drawY = headerHeight + gap;

    // Headers
    ctx.fillStyle = '#ffffff';
    ctx.font = 'bold 16px sans-serif';
    ctx.fillText('Original Optical Illusion', leftX, 24);
    ctx.fillText(`Revealed Signal (Unbiased Algorithmic OCR: ${detectedNumberText})`, rightX, 24);

    // Draw Left: Original Image
    ctx.drawImage(bitmap, leftX, drawY, drawW, drawH);

    // Draw Right: Current active stage image
    ctx.drawImage(activeRightCanvas, rightX, drawY, drawW, drawH);
  }

  onResize((vw, vh) => {
    const display = getDisplaySize();
    drawToViewport(display.width, display.height);
  });

  const display = getDisplaySize();
  drawToViewport(display.width, display.height);

  // --- STAGED PIPELINE EXECUTION ---

  // Stage 1: Raw Image
  console.log('[Stage 1/5] Raw image loaded. Initializing signal processing pipeline...');
  activeRightCanvas = bitmap;
  drawToViewport(display.width, display.height);
  await delay(STEP_DELAY_MS);

  // Stage 2: Convert to Grayscale
  console.log('[Stage 2/5] Converting image to grayscale...');
  const grayArray = getGrayscaleArray(rawImageData.data, totalPixels);
  tempCtx.putImageData(floatArrayToImageData(grayArray, width, height), 0, 0);
  activeRightCanvas = tempCanvas;
  drawToViewport(display.width, display.height);
  await delay(STEP_DELAY_MS);

  // Stage 3: Apply Low-Pass Blur Filter (Radius: 12px)
  console.log(`[Stage 3/5] Applying low-pass blur filter (Blur Radius: ${BLUR_RADIUS}px)...`);
  const blurredArray = applySingleBlur(grayArray, width, height, BLUR_RADIUS);
  tempCtx.putImageData(floatArrayToImageData(blurredArray, width, height), 0, 0);
  activeRightCanvas = tempCanvas;
  drawToViewport(display.width, display.height);
  await delay(STEP_DELAY_MS);

  // Stage 4: Apply Adaptive Signal Cutoff Binarization (Offset: +5)
  console.log(`[Stage 4/5] Binarizing signal with adaptive cutoff threshold (Cutoff Offset: +${CUTOFF_OFFSET})...`);
  const binarizedArray = binarizeWithAdaptiveCutoff(blurredArray, totalPixels, CUTOFF_OFFSET);
  tempCtx.putImageData(floatArrayToImageData(binarizedArray, width, height), 0, 0);
  activeRightCanvas = tempCanvas;
  drawToViewport(display.width, display.height);
  await delay(STEP_DELAY_MS);

  // Stage 5: Pure Unbiased Algorithmic Extraction
  console.log('[Stage 5/5] Running unbiased pixel OCR extraction...');
  detectedNumberText = recognizeDigitsFromPixels(binarizedArray, width, height);

  drawToViewport(display.width, display.height);

  console.log(`[Algorithmic Extraction Success]: "${detectedNumberText}"`);
}

renderIllusionAnalysis().catch(console.error);