One picture, two subjects: an owl up close, a cat from across the room.
Oliva and Torralba's hybrid images, built from subjects drawn here with vector curves: a cat and an owl, a calm and a startled face, a lion and a sunflower. Each is split into luminance and chroma and taken to the frequency domain with a hand-written radix-2 FFT; the hybrid is the Gaussian low-pass of one plus the Gaussian high-pass of the other, brought back with an inverse FFT, with color taken only from the low-pass subject. The viewing distance slider applies the eye's resolution limit, a cutoff in cycles per image that falls as one over distance, with one inverse FFT per frame. The strip of shrinking copies is the honest version (real pixels at real sizes, filtered by your own eyes), and the chart shows both filters, the eye's cutoff and the hybrid's spectrum.
Try it. Drag the viewing distance (or use the left and right arrows), drag the colored handles on the chart to move the two cutoffs, and press and drag across the big image to split it into its low-pass and high-pass layers. Choose a pair (keys 1 to 3), swap which subject gets which band (S) and toggle color (C). Or just step back from your screen.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a hybrid image generator with JavaScript and the HTML canvas element: one picture that shows one subject up close and another from far away. Put everything in a single index.html file with no libraries or build step, so I can open it directly in a browser.
Start simple:
- Draw two simple subjects with the canvas drawing API into two 256 by 256 offscreen canvases, lined up so their main features overlap: for example a cat face and an owl face with the eyes in the same places.
- Read both with getImageData and convert them to grayscale.
- Make a blurred copy of each with a Gaussian blur you write yourself (a separable blur: blur the rows, then the columns).
- The hybrid is: blurred cat + (owl minus blurred owl). The first part keeps only the cat's low spatial frequencies, the second only the owl's fine edges. Add 0.5 gray where needed so it stays in range, and draw it large.
- Next to it draw the same hybrid at half, quarter and eighth size. Up close you should see the owl; in the small copies, the cat.
Once that works, make it beautiful:
- Add sliders for the two blur radii (the low-pass and high-pass cutoffs) and redraw when they change.
- Add a viewing distance slider that blurs the whole hybrid more as you step back, so the picture flips from one subject to the other.
- Keep color from the low-pass subject only; it reads well and makes the far image vivid.
Explain the key ideas in short code comments. When you're done, tell me how to open it and suggest three directions I could take it next, such as doing the filtering with a hand-written FFT, plotting the two filters and the spectrum, or letting me split the image to see its two layers.
