Tritonize Web

This project brings @minimaxir's Tritonize Python project to the web.

It turns any standard image...

e.g. the risqué but widely referenced Lenna portrait.

...into a number of sketch-like images.

Tech Stack

• React 18 with TypeScript for type-safe component development
• Vite for lightning-fast development and builds
• Redux for state management
• pnpm for efficient package management
• HTML5 Canvas for image manipulation - returns Uint8ClampedArray representing each pixel. Image filters are applied by manipulating this array and painting back to canvas.

Development

# Install dependencies
pnpm install

# Start development server
pnpm start

# Build for production
pnpm build

# Preview production build
pnpm preview

To Do:

• Repeatedly load static image into DOM & Canvas (iterations depend on color permutations) and parse out image array.
• Apply tritonize filter to canvas contents.
  • Write result back into appropriate canvas.
• Add adjustable blur radius to image manipulation. Current tri-tone filter leaves a lot of grains on the image. Blur will help smooth contrasting edges.
• Color picker. Choose any (reasonable, given that page will render n! images) number of colors.
• Image drag & drop. Drop an image into the page and the page will take other settings (blur radius, possibly blur iterations -- one argument to the blur filter, and colors) and create display of all possible permutations!
• Investigate FabricJS?