Citizen

Citizen is a powerful image processing tool focused on implementing various advanced dithering algorithms, allowing you to transform images into artistic halftone visuals.

Key Features

1. Dithering Algorithms

• None: Keep the original image
• Bayer Dithering: Apply Bayer matrix dithering
• Floyd–Steinberg Dithering: Classic error diffusion algorithm
• Atkinson Dithering: Apply Atkinson dithering method
• Blue Noise Dithering: Use blue noise pattern for dithering
• Halftone: Simulate traditional printing halftone effect

2. Image Adjustments

• Contrast Adjustment: Adjust image contrast
• Brightness Adjustment: Adjust image brightness
• Color Mapping: Support custom two-color mapping

3. Special Features

• Power Mode: Toggle special effects on/off
• Real-Time Preview: Instantly preview all adjustments
• Image Upload: Upload local images for processing
• Export: Save processed images

Technical Implementation

Core Algorithms

• Uses Canvas API for image processing
• Multiple dithering algorithms implemented in TypeScript
• 3D preview rendering via Three.js

State Management

• Custom Hook for managing application state
• Image texture state management
• Real-time processing progress updates

Usage

1. Upload Image

   • Click the upload button to select a local image
   • Supports common formats (PNG, JPG, etc.)

2. Select Algorithm

   • Choose a dithering algorithm from the dropdown
   • Real-time preview for each algorithm

3. Adjust Parameters

   • Use sliders to adjust contrast and brightness
   • Select or define custom color mapping
   • Adjust Bayer dithering level (if applicable)

4. Export Result

   • Click export to save processed image
   • Supports copy to clipboard

Development Notes

File Structure

• AdvancedDithering.tsx: Main component
• algo.ts: Algorithm implementations
• PlayCanvas.tsx: 3D preview component
• useStore.ts: State management
• page.tsx: Page entry
• layout.tsx: Layout component

Dependencies

• Three.js: 3D rendering
• React: UI framework
• TypeScript: Type support
• Lucide Icons: Icon library

Notes

1. Large images may take longer to process
2. Some algorithms (e.g., Blue Noise) require extra resource files
3. Modern browsers recommended for best performance