Drosterizer

A browser-based interactive Droste effect generator. Load an image, draw a boundary curve, and watch your image recursively contain itself.

What is the Droste Effect?

The Droste effect is a recursive visual where an image appears within itself, creating an infinite loop. Named after a Dutch cocoa brand whose packaging featured a nurse holding a tray with the same box, the effect has been used in art from M.C. Escher to modern digital creations.

Drosterizer includes both the regular and the spiral versions of the effect, adding rotational distortion that creates mesmerizing vortex-like recursions.

Features

Interactive curve editor - Define the recursion boundary with a pen-like tool
Real-time WebGL rendering - GPU-accelerated effect processing
Adjustable parameters - Control spiral intensity, zoom level, and scale
Animated zoom - Smoothly travel through recursion levels
PNG export - Download your creation at full resolution
Fully client-side - No uploads, all processing happens in your browser

How It Works

Load an image with a well defined and approprately sized object (i.e. a person holding a frame)
Draw a closed bezier curve around the area where the image should recurse
Preview the effect with adjustable parameters
Download the result

The effect is computed using log-polar coordinate transformation in a WebGL fragment shader. The curve you draw defines where the image boundary maps to, and the shader tiles this mapping infinitely inward.

Tech Stack

React 19 with TypeScript
Vite
WebGL with custom GLSL shaders
React Spectrum S2 for UI components

Getting Started

# Install dependencies
bun install

# Start development server
bun dev

# Build for production
bun run build

Project Structure

src/
├── components/
│   ├── bezier-editor/   # Interactive curve drawing
│   ├── canvas/          # Mask and effect canvases
│   ├── controls/        # Parameter sliders
│   ├── image-loader/    # Drag-and-drop loader
│   └── layout/          # Responsive container
├── math/
│   ├── bezier.ts        # Curve evaluation
│   └── geometry.ts      # Rasterization, radial distance mapping
├── webgl/
│   ├── droste-renderer.ts
│   ├── utils.ts
│   └── shaders/
│       ├── droste.vert.glsl
│       └── droste.frag.glsl
└── hooks/
    └── use-zoom-animation.ts

Controls

Curve Editor

Click to place anchor points
Click + drag to create curved segments
Click first point to close the curve (requires 3+ points)
Drag anchors/handles to adjust the curve
Alt + drag handle for independent handle control
Double-click anchor to convert corner to curve
Right-click to delete points

Effect Parameters

Spiral (-8 to 8) - Rotational twist per recursion level
Zoom (0-1, modulo arithmetic) - Position within the infinite recursion
Zoom animation - Auto-animate through levels
Scale override - Manual control of recursion scaling

3.1 KiB Raw Permalink Blame History