[V0_FILE]typescriptreact:file="page.tsx" isEdit="true" isMerged="true" import { ImageDitherer } from "./components/image-ditherer" export default function DemoPage() { return (

Image Ditherer

) } [V0_FILE]typescriptreact:file="utils/gradient.ts" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" export interface GradientPoint { position: number opacity: number density: number } export interface GradientOptions { angle: number points: GradientPoint[] } export interface GradientMask { opacity: number density: number } // Cubic interpolation function for smoother transitions function cubicInterpolate(y0: number, y1: number, y2: number, y3: number, mu: number): number { const mu2 = mu * mu const mu3 = mu2 * mu const a0 = y3 - y2 - y0 + y1 const a1 = y0 - y1 - a0 const a2 = y2 - y0 const a3 = y1 return a0 * mu3 + a1 * mu2 + a2 * mu + a3 } // Add subtle noise to break up banding function noise(x: number, y: number): number { const value = Math.sin(x * 12.9898 + y * 78.233) * 43758.5453123 return (value - Math.floor(value)) * 0.015 // 1.5% noise } export function calculateGradientMask( x: number, y: number, width: number, height: number, options: GradientOptions, ): GradientMask { const { angle, points } = options // Convert angle to radians const rad = (angle * Math.PI) / 180 // Calculate the gradient position based on angle const cos = Math.cos(rad) const sin = Math.sin(rad) // Normalize coordinates to -0.5 to 0.5 range const normalizedX = x / width - 0.5 const normalizedY = y / height - 0.5 // Calculate position along gradient line let position = (normalizedX * cos + normalizedY * sin + 0.5) * 100 // Add subtle noise to position to break up banding position += noise(x, y) * 100 // Sort points by position const sortedPoints = [...points].sort((a, b) => a.position - b.position) // Find the four points for cubic interpolation let i = 1 while (i < sortedPoints.length - 1 && sortedPoints[i].position < position) i++ const p0 = sortedPoints[Math.max(0, i - 2)] const p1 = sortedPoints[Math.max(0, i - 1)] const p2 = sortedPoints[Math.min(sortedPoints.length - 1, i)] const p3 = sortedPoints[Math.min(sortedPoints.length - 1, i + 1)] // Calculate mu (0-1) between p1 and p2 const mu = (position - p1.position) / (p2.position - p1.position) // Interpolate opacity and density using cubic interpolation const opacity = cubicInterpolate(p0.opacity, p1.opacity, p2.opacity, p3.opacity, mu) / 100 const density = cubicInterpolate(p0.density, p1.density, p2.density, p3.density, mu) / 100 return { opacity: Math.max(0, Math.min(1, opacity)), density: Math.max(0, Math.min(1, density)), } } [V0_FILE]typescriptreact:file="components/gradient-editor.tsx" isEdit="true" isMerged="true" import { useState } from "react" import { Slider } from "@/components/ui/slider" import { Button } from "@/components/ui/button" import { Label } from "@/components/ui/label" import { Plus, Minus } from "lucide-react" import type { GradientPoint } from "../utils/gradient" interface GradientEditorProps { angle: number points: GradientPoint[] onChange: (angle: number, points: GradientPoint[]) => void } export function GradientEditor({ angle, points, onChange }: GradientEditorProps) { const [selectedPoint, setSelectedPoint] = useState(null) const handleAngleChange = (value: number) => { onChange(value, points) } const handlePointChange = (index: number, updates: Partial) => { const newPoints = [...points] newPoints[index] = { ...newPoints[index], ...updates } onChange(angle, newPoints) } const addPoint = () => { if (points.length >= 5) return // Find a good position for the new point const positions = points.map((p) => p.position) let newPosition = 50 while (positions.includes(newPosition)) { newPosition = Math.random() * 100 } onChange(angle, [ ...points, { position: newPosition, opacity: 100, density: 100, }, ]) } const removePoint = (index: number) => { if (points.length <= 2) return const newPoints = points.filter((_, i) => i !== index) onChange(angle, newPoints) setSelectedPoint(null) } return (

Gradient Angle ({angle}°) handleAngleChange(value)} />

Gradient Points

{points.map((point, index) => (

setSelectedPoint(index)} />

))}

{selectedPoint !== null && (

Position ({points[selectedPoint].position}%) handlePointChange(selectedPoint, { position: value })} />

Opacity ({points[selectedPoint].opacity}%) handlePointChange(selectedPoint, { opacity: value })} />

Density ({points[selectedPoint].density}%) handlePointChange(selectedPoint, { density: value })} />

)}

) } [V0_FILE]typescriptreact:file="components/color-mode-selector.tsx" isMerged="true" import { Check } from "lucide-react" import { cn } from "@/lib/utils" export interface ColorMode { id: string name: string foreground: string background: string } interface ColorModeSelectorProps { value: string modes: ColorMode[] onChange: (mode: ColorMode) => void } export function ColorModeSelector({ value, modes, onChange }: ColorModeSelectorProps) { return (

{modes.map((mode) => ( ))}

) } [V0_FILE]typescript:file="utils/dither.ts" isEdit="true" import { type GradientOptions, calculateGradientMask } from "./gradient" export interface DitherOptions { threshold?: number pixelSize?: number spacing?: number blur?: number gradient?: GradientOptions resolution?: number invert?: boolean steps?: number brightness?: number contrast?: number useOrdered?: boolean } // Enhanced Bayer matrix for smoother transitions const bayerMatrix8x8 = [ [0, 48, 12, 60, 3, 51, 15, 63], [32, 16, 44, 28, 35, 19, 47, 31], [8, 56, 4, 52, 11, 59, 7, 55], [40, 24, 36, 20, 43, 27, 39, 23], [2, 50, 14, 62, 1, 49, 13, 61], [34, 18, 46, 30, 33, 17, 45, 29], [10, 58, 6, 54, 9, 57, 5, 53], [42, 26, 38, 22, 41, 25, 37, 21], ] export function ditherImage(ctx: CanvasRenderingContext2D, width: number, height: number, options: DitherOptions = {}) { const { threshold = 128, pixelSize = 1, spacing = 2, blur = 0, gradient = { angle: 0, points: [ { position: 0, opacity: 100, density: 100 }, { position: 100, opacity: 100, density: 100 }, ], }, resolution = 2, invert = false, steps = 2, brightness = 0, contrast = 0, useOrdered = true, } = options // Get image data const imageData = ctx.getImageData(0, 0, width, height) const data = imageData.data // Create temporary canvas for processing const tempCanvas = document.createElement("canvas") tempCanvas.width = width tempCanvas.height = height const tempCtx = tempCanvas.getContext("2d")! // Apply blur if specified if (blur > 0) { tempCtx.filter = `blur(${blur}px)` tempCtx.drawImage(ctx.canvas, 0, 0) const blurredData = tempCtx.getImageData(0, 0, width, height).data for (let i = 0; i < data.length; i += 4) { data[i] = blurredData[i] data[i + 1] = blurredData[i + 1] data[i + 2] = blurredData[i + 2] } } // Clear the main canvas ctx.clearRect(0, 0, width, height) // Calculate actual spacing based on resolution const actualSpacing = Math.max(1, Math.floor(spacing / resolution)) // Apply dithering for (let y = 0; y < height; y += actualSpacing) { for (let x = 0; x < width; x += actualSpacing) { const i = (Math.floor(y) * width + Math.floor(x)) * 4 let brightness = (data[i] + data[i + 1] + data[i + 2]) / 3 // Apply brightness and contrast adjustments brightness = brightness * (1 + contrast / 100) + brightness * (brightness / 100) // Invert if needed if (invert) { brightness = 255 - brightness } // Get gradient mask values with high precision const mask = calculateGradientMask(x, y, width, height, gradient) // Apply ordered dithering if enabled if (useOrdered) { const matrixX = x % 8 const matrixY = y % 8 const bayerValue = bayerMatrix8x8[matrixY][matrixX] / 64 const ditheredThreshold = threshold + (bayerValue - 0.5) * 255 * mask.density brightness = brightness > ditheredThreshold ? 255 : 0 } if (brightness > threshold) { // Set pixel opacity based on gradient mask ctx.fillStyle = `rgba(255, 255, 255, ${mask.opacity})` ctx.fillRect(x, y, pixelSize, pixelSize) } } } } [V0_FILE]typescriptreact:file="components/image-ditherer.tsx" isFixed="true" isEdit="true" isQuickEdit="true" "use client" import { useCallback, useEffect, useRef, useState } from "react" import { Slider } from "@/components/ui/slider" import { Label } from "@/components/ui/label" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Upload } from "lucide-react" import { Switch } from "@/components/ui/switch" import { ditherImage, type DitherOptions } from "../utils/dither" import { GradientEditor } from "./gradient-editor" import type { GradientPoint } from "../utils/gradient" interface ImageDithererProps { initialSrc?: string } export function ImageDitherer({ initialSrc }: ImageDithererProps) { const canvasRef = useRef(null) const fileInputRef = useRef(null) const [imageSrc, setImageSrc] = useState(initialSrc || "") const [imageDimensions, setImageDimensions] = useState({ width: 800, height: 400 }) const [gradientAngle, setGradientAngle] = useState(0) const [gradientPoints, setGradientPoints] = useState([ { position: 0, opacity: 100, density: 100 }, { position: 100, opacity: 100, density: 100 }, ]) const [options, setOptions] = useState({ threshold: 128, pixelSize: 1, spacing: 2, blur: 0, resolution: 2, invert: false, steps: 2, brightness: 0, contrast: 0, useOrdered: true, }) const [isProcessing, setIsProcessing] = useState(false) const processImage = useCallback(async () => { const canvas = canvasRef.current if (!canvas || !imageSrc) return setIsProcessing(true) const ctx = canvas.getContext("2d")! // Load image const img = new Image() img.crossOrigin = "anonymous" try { await new Promise((resolve, reject) => { img.onload = resolve img.onerror = reject img.src = imageSrc }) // Update canvas dimensions to match image const maxWidth = Math.min(1200, window.innerWidth - 48) const scale = maxWidth / img.width const scaledWidth = img.width * scale const scaledHeight = img.height * scale canvas.width = scaledWidth canvas.height = scaledHeight setImageDimensions({ width: scaledWidth, height: scaledHeight }) ctx.drawImage(img, 0, 0, scaledWidth, scaledHeight) // Apply dithering with current options ditherImage(ctx, scaledWidth, scaledHeight, { ...options, gradient: { angle: gradientAngle, points: gradientPoints, }, }) } catch (error) { console.error("Error processing image:", error) } finally { setIsProcessing(false) } }, [imageSrc, options, gradientAngle, gradientPoints]) useEffect(() => { if (imageSrc) { processImage() } }, [processImage, imageSrc]) // Added imageSrc to dependencies const handleFileUpload = (event: React.ChangeEvent) => { const file = event.target.files?.[0] if (file) { const reader = new FileReader() reader.onload = (e) => { setImageSrc(e.target?.result as string) } reader.readAsDataURL(file) } } return (

{ setGradientAngle(angle) setGradientPoints(points) }} />

Steps ({options.steps}) setOptions((prev) => ({ ...prev, steps: value }))} />

Ordered Dithering setOptions((prev) => ({ ...prev, useOrdered: checked }))} />

Resolution ({options.resolution?.toFixed(1)}) setOptions((prev) => ({ ...prev, resolution: value }))} />

Pixel Size ({options.pixelSize}) setOptions((prev) => ({ ...prev, pixelSize: value }))} />

Spacing ({options.spacing}) setOptions((prev) => ({ ...prev, spacing: value }))} />

Brightness ({options.brightness}%) setOptions((prev) => ({ ...prev, brightness: value }))} />

Contrast ({options.contrast}%) setOptions((prev) => ({ ...prev, contrast: value }))} />

Blur ({options.blur?.toFixed(1)}) setOptions((prev) => ({ ...prev, blur: value }))} />

) }