[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_23":24,"_25":26,"_27":21,"_28":21,"_29":21,"_30":21,"_31":21,"_32":21,"_33":34},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":-7,"_12":13,"_14":15,"_16":17,"_18":19,"_20":21,"_22":21},"sharedTextdocId","67a9d652be18819184bcc4f46dc71e99","versionInt","title","Dotted Image Effect","type","code/react","content","import React, { useState, useRef, useEffect } from 'react';\nimport { Slider } from '@/components/ui/slider';\nimport { Switch } from '@/components/ui/switch';\nimport { Card } from '@/components/ui/card';\nimport { Label } from '@/components/ui/label';\nimport { Upload } from 'lucide-react';\n\nconst DotEffectProcessor = () => {\n const [image, setImage] = useState(null);\n const [blockSize, setBlockSize] = useState(6);\n const [maxRadius, setMaxRadius] = useState(3);\n const [spacing, setSpacing] = useState(1);\n const [threshold, setThreshold] = useState(20);\n const [darkBackground, setDarkBackground] = useState(false);\n const [isDragging, setIsDragging] = useState(false);\n const canvasRef = useRef(null);\n const previewRef = useRef(null);\n const fileInputRef = useRef(null);\n\n const processImage = (sourceImage) => {\n const canvas = canvasRef.current;\n const previewContainer = previewRef.current;\n if (!canvas || !previewContainer || !sourceImage) return;\n\n const ctx = canvas.getContext('2d'); \n \n // Get preview container dimensions\n const previewWidth = previewContainer.clientWidth;\n const previewHeight = previewContainer.clientHeight;\n \n // First, determine maximum safe canvas dimensions\n const MAX_CANVAS_SIZE = 4096; // Common maximum canvas dimension\n const scale = Math.min(\n MAX_CANVAS_SIZE / sourceImage.width,\n MAX_CANVAS_SIZE / sourceImage.height,\n 1\n );\n \n // Calculate dimensions maintaining aspect ratio\n const imageAspectRatio = sourceImage.width / sourceImage.height;\n const containerAspectRatio = previewWidth / previewHeight;\n \n let width, height;\n if (imageAspectRatio > containerAspectRatio) {\n // Image is wider than container\n width = Math.min(previewWidth, sourceImage.width * scale);\n height = width / imageAspectRatio;\n } else {\n // Image is taller than container\n height = Math.min(previewHeight, sourceImage.height * scale);\n width = height * imageAspectRatio;\n }\n \n // Ensure dimensions are integers\n width = Math.floor(width);\n height = Math.floor(height);\n \n // Set canvas dimensions\n canvas.width = width;\n canvas.height = height;\n \n // Draw original image\n ctx.drawImage(sourceImage, 0, 0, width, height);\n \n // Get image data\n const imageData = ctx.getImageData(0, 0, width, height);\n const data = imageData.data;\n \n // Clear canvas and set background\n ctx.fillStyle = darkBackground ? 'black' : 'white';\n ctx.fillRect(0, 0, width, height);\n \n // Draw dots\n const stepSize = blockSize + spacing;\n ctx.fillStyle = darkBackground ? 'white' : 'black';\n \n for (let y = 0; y < height; y += stepSize) {\n for (let x = 0; x < width; x += stepSize) {\n let totalBrightness = 0;\n let samples = 0;\n \n // Sample brightness from the block\n for (let sy = 0; sy < blockSize; sy++) {\n for (let sx = 0; sx < blockSize; sx++) {\n const sampleX = x + sx;\n const sampleY = y + sy;\n if (sampleX < width && sampleY < height) {\n const pos = (sampleY * width + sampleX) * 4;\n const brightness = (data[pos] + data[pos + 1] + data[pos + 2]) / 3;\n totalBrightness += brightness;\n samples++;\n }\n }\n }\n \n const avgBrightness = totalBrightness / samples;\n \n // Apply threshold\n if (avgBrightness > (threshold * 2.55)) {\n const radius = (maxRadius * avgBrightness) / 255;\n ctx.beginPath();\n ctx.arc(x + blockSize/2, y + blockSize/2, radius, 0, Math.PI * 2);\n ctx.fill();\n }\n }\n }\n };\n\n const handleFile = (file) => {\n if (file && file.type.startsWith('image/')) {\n const reader = new FileReader();\n reader.onload = (e) => {\n const img = new Image();\n img.onload = () => {\n setImage(img);\n processImage(img);\n };\n img.src = e.target.result;\n };\n reader.readAsDataURL(file);\n }\n };\n\n const handleDrop = (e) => {\n e.preventDefault();\n setIsDragging(false);\n const file = e.dataTransfer.files[0];\n handleFile(file);\n };\n\n const handleDragOver = (e) => {\n e.preventDefault();\n setIsDragging(true);\n };\n\n const handleDragLeave = (e) => {\n e.preventDefault();\n setIsDragging(false);\n };\n\n // Handle window resize\n useEffect(() => {\n let resizeTimer;\n const handleResize = () => {\n clearTimeout(resizeTimer);\n resizeTimer = setTimeout(() => {\n if (image) {\n processImage(image);\n }\n }, 100);\n };\n\n window.addEventListener('resize', handleResize);\n return () => {\n window.removeEventListener('resize', handleResize);\n clearTimeout(resizeTimer);\n };\n }, [image, blockSize, maxRadius, spacing, threshold, darkBackground]);\n\n useEffect(() => {\n if (image) {\n processImage(image);\n }\n }, [blockSize, maxRadius, spacing, threshold, darkBackground]);\n\n return (\n

\n {/* Controls Panel - Full width on mobile, fixed width on desktop */}\n

\n \n

\n \n handleFile(e.target.files[0])}\n className=\"hidden\"\n />\n

\n \n

\n Drag and drop an image here, or{' '}\n fileInputRef.current.click()}\n className=\"text-blue-600 hover:text-blue-700\"\n >\n browse\n \n

\n {image &&

Image loaded successfully!

}\n

\n \n

\n Block Size\n

\n {\n const value = parseInt(e.target.value);\n if (!isNaN(value) && value >= 4) {\n setBlockSize(value);\n }\n }}\n className=\"w-16 px-2 py-1 text-right text-sm border rounded\"\n />\n px\n

\n setBlockSize(value[0])}\n min={4}\n max={40}\n step={1}\n />\n

\n \n

\n Max Dot Radius\n

\n {\n const value = parseInt(e.target.value);\n if (!isNaN(value) && value >= 1) {\n setMaxRadius(value);\n }\n }}\n className=\"w-16 px-2 py-1 text-right text-sm border rounded\"\n />\n px\n

\n setMaxRadius(value[0])}\n min={1}\n max={20}\n step={1}\n />\n

\n \n

\n Spacing\n

\n {\n const value = parseInt(e.target.value);\n if (!isNaN(value) && value >= 0) {\n setSpacing(value);\n }\n }}\n className=\"w-16 px-2 py-1 text-right text-sm border rounded\"\n />\n px\n

\n setSpacing(value[0])}\n min={0}\n max={10}\n step={1}\n />\n

\n\n

\n Brightness Threshold\n

\n {\n const value = parseInt(e.target.value);\n if (!isNaN(value) && value >= 0 && value <= 100) {\n setThreshold(value);\n }\n }}\n className=\"w-16 px-2 py-1 text-right text-sm border rounded\"\n />\n %\n

\n setThreshold(value[0])}\n min={0}\n max={100}\n step={1}\n />\n

\n \n

\n Dark Background\n \n

\n \n\n \n

\n\n {/* Preview Panel - Full width and height below controls on mobile, takes remaining width on desktop */}\n

\n \n

\n \n );\n};\n\nexport default DotEffectProcessor;\n","access","public","isModerationBlocked",false,"isAnonifyApiKeyDetected","dd",{"_35":36,"_37":38},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",34],"traceId","7923144396462775874","traceTime",1776425697161]