AI Fractal Explorer - Infinite Mandelbrot Zoom Explore infinite mathematical beauty! Click to zoom

function setup() {
  createCanvas(windowWidth, windowHeight);
  pixelDensity(1); // Important for consistent pixel math
  resizeBuffers();
  computeFractal(); // Initial render
}

function resizeBuffers() {
  fractalImg = createImage(width, height);
  iterData = new Float32Array(width * height);
  viewDirty = true;
}

function computeMaxIterations() {
  const zoom = BASE_VIEW_WIDTH / viewWidth;
  const logZoom = max(0, log10(zoom + 1));
  let maxIter = 60 + Math.floor(logZoom * 80);
  maxIter = constrain(maxIter, 60, 600);
  return maxIter;
}

function computeFractal() {
  const w = width;
  const h = height;
  const scale = viewWidth / w; // same for x and y to preserve aspect
  const maxIter = computeMaxIterations();
  const data = iterData;
  const escapeRadiusSquared = 4;

  for (let py = 0; py < h; py++) {
    const cy = centerY + (py - h / 2) * scale;

    for (let px = 0; px < w; px++) {
      const cx = centerX + (px - w / 2) * scale;

      let zx = 0;
      let zy = 0;
      let zx2 = 0;
      let zy2 = 0;
      let iter = 0;

      // Mandelbrot iteration: z_{n+1} = z_n^2 + c
      while (iter < maxIter && zx2 + zy2 <= escapeRadiusSquared) {
        zy = 2 * zx * zy + cy;
        zx = zx2 - zy2 + cx;
        zx2 = zx * zx;
        zy2 = zy * zy;
        iter++;
      }

      const index = py * w + px;

      if (iter === maxIter) {
        // Likely inside the set
        data[index] = -1;
      } else {
        // Smooth coloring (normalized iteration count)
        // Reference: https://en.wikipedia.org/wiki/Mandelbrot_set#Continuous_(smooth)_coloring
        const log_zn = Math.log(zx2 + zy2) / 2;
        const nu = Math.log(log_zn / Math.log(2)) / Math.log(2);
        const smoothIter = iter + 1 - nu;
        let t = smoothIter / maxIter;
        if (!isFinite(t)) t = 0;
        data[index] = t;
      }
    }
  }

  viewDirty = false;
}

function paletteColor(t) {
  if (t < 0) {
    // Interior of the set: black
    return { r: 0, g: 0, b: 0 };
  }

  t = constrain(t, 0, 1);
  t = Math.sqrt(t); // Emphasize mid-tones

  const hue = (paletteOffset + t * 0.7) % 1; // swirl through hues
  const sat = 1.0;
  const val = 1.0;

  return hsvToRgb(hue, sat, val);
}

function hsvToRgb(h, s, v) {
  let r, g, b;
  const i = Math.floor(h * 6);
  const f = h * 6 - i;
  const p = v * (1 - s);
  const q = v * (1 - f * s);
  const t = v * (1 - (1 - f) * s);

  switch (i % 6) {
    case 0:
      r = v; g = t; b = p; break;
    case 1:
      r = q; g = v; b = p; break;
    case 2:
      r = p; g = v; b = t; break;
    case 3:
      r = p; g = q; b = v; break;
    case 4:
      r = t; g = p; b = v; break;
    case 5:
      r = v; g = p; b = q; break;
  }

  return {
    r: Math.round(r * 255),
    g: Math.round(g * 255),
    b: Math.round(b * 255)
  };
}

function recolorFractal() {
  fractalImg.loadPixels();
  const pixels = fractalImg.pixels;
  const data = iterData;

  let pIndex = 0;
  const len = data.length;

  for (let i = 0; i < len; i++) {
    const t = data[i];
    const col = paletteColor(t);
    pixels[pIndex++] = col.r;
    pixels[pIndex++] = col.g;
    pixels[pIndex++] = col.b;
    pixels[pIndex++] = 255;
  }

  fractalImg.updatePixels();
}

function draw() {
  // Recompute fractal if view changed
  if (viewDirty) {
    computeFractal();
  }

  // Animate color palette
  paletteOffset = (paletteOffset + PALETTE_SPEED) % 1;

  // Apply the current palette to the precomputed escape data
  recolorFractal();

  // Draw fractal
  background(0);
  image(fractalImg, 0, 0, width, height);

  drawHUD();
}

function drawHUD() {
  push();
  noStroke();
  fill(0, 160);
  const boxWidth = 260;
  const boxHeight = 72;
  rect(10, 10, boxWidth, boxHeight, 4);

  fill(255);
  textSize(12);
  textFont('monospace');
  text('Mandelbrot Explorer', 18, 28);

  const zoom = BASE_VIEW_WIDTH / viewWidth;
  const logZoom = zoom > 0 ? log10(zoom) : 0;
  text(`Zoom: 10^${nf(logZoom, 1, 2)}`, 18, 44);
  text('Click: zoom in 2x at cursor', 18, 60);
  text('Drag to pan, scroll to zoom', 18, 76);
  pop();
}

function screenToComplex(sx, sy) {
  const scale = viewWidth / width;
  const re = centerX + (sx - width / 2) * scale;
  const im = centerY + (sy - height / 2) * scale;
  return { re, im };
}

function mousePressed() {
  if (
    mouseButton === LEFT &&
    mouseX >= 0 && mouseX < width &&
    mouseY >= 0 && mouseY < height
  ) {
    isDragging = true;
    hasDragged = false;
    dragStartX = mouseX;
    dragStartY = mouseY;
    dragStartCenterX = centerX;
    dragStartCenterY = centerY;
  }
}

function mouseDragged() {
  if (!isDragging) return;

  const dx = mouseX - dragStartX;
  const dy = mouseY - dragStartY;
  if (!hasDragged && (abs(dx) > 2 || abs(dy) > 2)) {
    hasDragged = true;
  }

  const scale = viewWidth / width;
  centerX = dragStartCenterX - dx * scale;
  centerY = dragStartCenterY - dy * scale;
  viewDirty = true;
}

function mouseReleased() {
  if (!isDragging || mouseButton !== LEFT) return;

  isDragging = false;

  // If it was a click (not a drag), zoom in at cursor
  if (!hasDragged &&
      mouseX >= 0 && mouseX < width &&
      mouseY >= 0 && mouseY < height) {
    const c = screenToComplex(mouseX, mouseY);
    centerX = c.re;
    centerY = c.im;

    // Zoom in 2x
    viewWidth *= 0.5;
    viewWidth = max(viewWidth, 1e-12); // avoid zero
    viewDirty = true;
  }
}

function mouseWheel(event) {
  if (mouseX < 0 || mouseX > width || mouseY < 0 || mouseY > height) {
    return;
  }

  const zoomFactor = event.delta > 0 ? 1.1 : 0.9;

  // Complex coordinate under mouse before zoom
  const before = screenToComplex(mouseX, mouseY);

  // Adjust view width
  viewWidth *= zoomFactor;
  viewWidth = constrain(viewWidth, 1e-12, BASE_VIEW_WIDTH * 10);

  // Re-center so the same complex point stays under the cursor
  const scale = viewWidth / width;
  centerX = before.re - (mouseX - width / 2) * scale;
  centerY = before.im - (mouseY - height / 2) * scale;

  viewDirty = true;

  // Prevent page scroll
  return false;
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  pixelDensity(1);
  resizeBuffers();
}

function log10(x) {
  return Math.log(x) / Math.LN10;
}