The Julia Set

If we fix a complex constant c and plot the escape times for every starting point z₀ in the complex plane, each choice of c unfolds its own self-similar fractal world known as a Julia set.

World overview

Every Julia set has 180° rotational symmetry around the center. Because squaring a number erases its sign, any starting point z₀ and its opposite −z₀ land on the exact same value after the first step, giving every spiral arm a matching twin across the origin.

↺

While the Mandelbrot set is a single map, every complex number c produces its own Julia set. When c comes from inside the Mandelbrot set, the Julia set holds together as one connected shape; when c moves outside the boundary, the shape breaks apart into a scattered cloud of isolated points known as Fatou dust.

↺

Julia set equation

The equation using complex numbers is:

Each pixel supplies the initial complex coordinate z₀:

While the complex parameter c stays fixed across the entire image:

If we expand the complex squaring, the iteration reduces to:

Sub-structures

Across the complex plane, each parameter c shapes its Julia set into spirals, basilicas, Siegel disks, dendrites, and Cantor galaxies. Zooming toward repelling periodic points and their preimages uncovers the same global motif repeating at every scale.

Overview

At shallow magnifications, every pixel runs its own independent escape-time loop inside a WebGL fragment shader using native 32-bit GPU floats, seeding z0 directly from the pixel coordinate and iterating with the fixed complex constant c.

Seahorse Dragon Vortex

Twin logarithmic spiral arms wind into the repelling α fixed point of the dragon Julia set for c = −0.8 + 0.156i, centred near z = −0.5275 + 0.0759i.

UndoReset

span 8.00e-31,024 iter max · Ready

Seahorse Valley Spiral Sanctuary

Counter-rotating seahorse tails in the Julia set for c = −0.747 + 0.108i, centred on its repelling fixed point at a 5.8 × 10⁻³ vertical span, separating deep nocturnal basins from luminous filigree curls.

UndoReset

span 7.73e-31,024 iter max · Ready

Douady’s Rabbit

For c ≈ −0.122561 + 0.744862i at the centre of the period-3 bulb, three dark interior basins meet at every preimage of the α fixed point to form the three-eared silhouette named by Adrien Douady.

UndoReset

span 2.80e+01,024 iter max · Ready

San Marco Basilica

Near the period-2 basilica parameter c = −0.75 + 0.015i, pinched interior basins and mirrored spires stretch along the real axis like Saint Mark’s Basilica reflected across a flooded Venetian lagoon.

UndoReset

span 3.20e+01,024 iter max · Ready

Golden Mean Siegel Disk

On the main cardioid boundary at c ≈ −0.390541 + 0.586788i, the fixed-point multiplier rotates by the golden mean. Instead of spiraling inward, bounded orbits trace invariant topological disks.

UndoReset

span 2.20e+01,024 iter max · Ready

Double Spiral Filigree

In the Seahorse filigree Julia set for c = −0.7269 + 0.1889i, two intertwined arms wind across the origin while smaller curls repeat at every preimage of the critical orbit.

UndoReset

span 4.67e-11,024 iter max · Ready

Double Spiral Nexus

Centred near z = −0.51498922 + 0.06722602i at a 1.2 × 10⁻³ vertical span in the Julia set for c = −0.77568377 + 0.13646737i, paired logarithmic spirals converge on the repelling α fixed point.

UndoReset

span 1.60e-31,024 iter max · Ready

Triple Spiral Junction

For c = −0.087593732 + 0.65509028i near the upper period-3 bulb, three spiral branches meet at the repelling fixed point z ≈ −0.232992 + 0.446860i and repeat along each tributary arm.

UndoReset

span 5.87e-31,024 iter max · Ready

Quad Spiral Pinwheel

Near the upper period-4 bulb at c = 0.28245 + 0.4831i, four-armed spiral filaments wind into the repelling fixed point z ≈ 0.024743 + 0.508251i, adding a fourth turn to the three-armed rabbit junction.

UndoReset

span 5.33e-31,024 iter max · Ready

Misiurewicz Lightning Dendrite

At the Misiurewicz parameter c = i, the critical orbit lands on a repelling cycle after two steps. With no attracting basin, the Julia set has empty interior and forms a pure, infinitely branched tree.

UndoReset

span 2.60e+01,024 iter max · Ready

Scepter Horn Spiral

In the Scepter Valley Julia set for c = −1.25066 + 0.02012i, curled filaments around the repelling fixed point z ≈ −0.725042 + 0.008212i sprout ornate branching spikes.

UndoReset

span 1.20e-31,024 iter max · Ready

Fractal coloring

Given a starting point (x₀, y₀) and a fixed parameter (c_x, c_y), escape-time coloring records how many iterations the orbit takes to cross the escape circle |z| > 2 along with the complex coordinate where it escapes.

const ESCAPE_THRESHOLD = 4;
const MAX_ITERATIONS = 1024;

function iterateUntilEscape(x0, y0, cx, cy) {
  let x = x0, y = y0;
  let numIterations = 0;
  while ((x * x + y * y <= ESCAPE_THRESHOLD) &&
         (numIterations < MAX_ITERATIONS)) {
    const xNext = x * x - y * y + cx;
    const yNext = 2 * x * y + cy;
    x = xNext;
    y = yNext;
    numIterations++;
  }
  const escaped = x * x + y * y > ESCAPE_THRESHOLD;
  return { numIterations, x, y, cx, cy, escaped };
}

To keep high iteration counts near the Julia boundary from bunching into noisy stripes, palettePhase compresses the escape count with a square-root curve before sampling a 512-entry periodic cubic spline interpolated in Oklab color space.

const PALETTE_SIZE = 512;

function palettePhase(value, gScale = 7) {
  return (Math.sqrt(Math.max(0, value) + 1) - 1) *
    gScale / 55;
}

function samplePalette(value, paletteTable) {
  const phase = palettePhase(value);
  const position =
    (phase - Math.floor(phase)) * PALETTE_SIZE;
  const index = Math.floor(position);
  const fraction = position - index;
  const base0 = index * 4;
  const base1 = ((index + 1) % PALETTE_SIZE) * 4;
  const sampleChannel = c => {
    const c0 = paletteTable[base0 + c];
    const c1 = paletteTable[base1 + c];
    return Math.round(c0 + (c1 - c0) * fraction);
  };
  return [
    sampleChannel(0),
    sampleChannel(1),
    sampleChannel(2),
    255,
  ];
}

function getIterationColor(result, paletteTable) {
  const { numIterations } = result;
  return samplePalette(numIterations, paletteTable);
}

Sweeping across the viewport grid maps each pixel to its starting coordinate (x₀, y₀), runs the recurrence for the fixed parameter (c_x, c_y), and writes the sampled RGBA color for every escaping orbit while leaving bounded interior points dark.

function drawJuliaSet(
  canvasEl, xRange, yRange, cx, cy,
  getColor, paletteTable
) {
  const canvasWidth = canvasEl.width;
  const canvasHeight = canvasEl.height;
  const context = canvasEl.getContext('2d');
  const canvasImageData =
    context.createImageData(canvasWidth, canvasHeight);
  const image = canvasImageData.data;
  for (let i = 0; i < canvasHeight; i++) {
    for (let j = 0; j < canvasWidth; j++) {
      const x0 = xRange[0] +
        j * (xRange[1] - xRange[0]) / canvasWidth;
      const y0 = yRange[0] +
        i * (yRange[1] - yRange[0]) / canvasHeight;
      const result = iterateUntilEscape(x0, y0, cx, cy);
      const pixelIndex = 4 * (i * canvasWidth + j);
      if (result.escaped) {
        const pixels = getColor(result, paletteTable);
        for (let p = 0; p < 4; p++) {
          image[pixelIndex + p] = pixels[p];
        }
      }
    }
  }
  context.putImageData(canvasImageData, 0, 0);
}

Here's the central spiral of the dragon Julia set (c = −0.8 + 0.156i) colored from integer iteration counts alone, where each discrete escape step forms a visible contour band.

UndoReset

span 9.60e-11,024 iter max · Ready

Running three additional iterations after crossing |z| > 2 and subtracting the doubly logarithmic escape potential turns the integer step count into a continuous escape time mu.

const ESCAPE_RADIUS = 2;
const SMOOTHING_STEPS = 3;

function getMu({ numIterations, x, y, cx, cy }) {
  for (let i = 0; i < SMOOTHING_STEPS; i++) {
    const xNext = x * x - y * y + cx;
    const yNext = 2 * x * y + cy;
    x = xNext;
    y = yNext;
  }
  const distanceSquared = x * x + y * y;
  return numIterations + SMOOTHING_STEPS + 1 -
    Math.log(0.5 * Math.log(distanceSquared)) /
    Math.log(ESCAPE_RADIUS);
}

function getSmoothColor(result, paletteTable) {
  const mu = getMu(result);
  return samplePalette(mu, paletteTable);
}

Feeding mu into the same repeating plum, amethyst, champagne, and rose-gold Oklab spline removes the stepped contour seams across the spiral arms.

UndoReset

span 9.60e-11,024 iter max · Ready

Inverse iteration and orbit-density methods render Julia sets by plotting either the backward preimages of repelling periodic points or the visit frequency of escaping trajectories across the viewport.

About

All fractals on the page are interactive and rendered when they're in view. Every image can be expanded into full-screen mode using the button in its bottom-right corner. Full-screen views also display live complex-plane coordinates and let you undo camera steps or reset to the starting view.

As you zoom deeper, each canvas automatically switches to more sophisticated rendering pipelines to stay fast and avoid pixelation. Shallow views run per-pixel escape loops in 32-bit WebGL fragment shaders.

Zooming past 10^-3 switches to compensated double-single shaders and 64-bit workers. Beyond 10^-14, the renderer switches to perturbation theory and arbitrary-precision decimal math so you can keep zooming without losing detail.

Fractal image controls when hovering

• shift + scroll mouse wheel — zoom in/out
• shift + click and drag — draw a selection box to zoom in
• double-click (or shift + double-click) — zoom in/out at cursor
• + / − keys — zoom in/out
• pinch — zoom in/out
• click and drag — pan the view
• arrow keys (when focused or hovering) — pan the view in 10% steps
• two-finger swipe — pan the view on touchscreens
• one-finger swipe — scroll the page
• cmd-z / cmd-shift-z — undo or redo camera actions
• 0 — reset view to its initial position