[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_23":24,"_25":21,"_26":27,"_28":27,"_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","67aa008eb6548191b352962a999c66b5","versionInt","title","Dotted Effect","type","code/javascript","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, RotateCcw, Play, Pause } from 'lucide-react';\nimport { Button } from '@/components/ui/button';\n\nconst DEFAULT_SETTINGS = {\n blockSize: 6,\n maxRadius: 3,\n spacing: 1,\n threshold: 20,\n darkBackground: false\n};\n\nconst DotEffectProcessor = () => {\n const [mediaSource, setMediaSource] = useState(null);\n const [isVideo, setIsVideo] = useState(false);\n const [isPlaying, setIsPlaying] = useState(false);\n const [settings, setSettings] = useState(DEFAULT_SETTINGS);\n const [isDragging, setIsDragging] = useState(false);\n const [error, setError] = useState(null);\n \n const canvasRef = useRef(null);\n const previewRef = useRef(null);\n const fileInputRef = useRef(null);\n const videoRef = useRef(null);\n const animationFrameRef = useRef(null);\n\n const resetSettings = () => {\n setSettings(DEFAULT_SETTINGS);\n if (mediaSource) {\n processFrame(mediaSource);\n }\n };\n\n const processFrame = (source) => {\n const canvas = canvasRef.current;\n const previewContainer = previewRef.current;\n if (!canvas || !previewContainer || !source) return;\n\n const ctx = canvas.getContext('2d');\n \n try {\n // Get preview container dimensions\n const previewWidth = previewContainer.clientWidth;\n const previewHeight = previewContainer.clientHeight;\n \n // Calculate safe dimensions\n const MAX_CANVAS_SIZE = 4096;\n const sourceWidth = isVideo ? source.videoWidth : source.width;\n const sourceHeight = isVideo ? source.videoHeight : source.height;\n \n const scale = Math.min(\n MAX_CANVAS_SIZE / sourceWidth,\n MAX_CANVAS_SIZE / sourceHeight,\n 1\n );\n \n const imageAspectRatio = sourceWidth / sourceHeight;\n const containerAspectRatio = previewWidth / previewHeight;\n \n let width, height;\n if (imageAspectRatio > containerAspectRatio) {\n width = Math.min(previewWidth, sourceWidth * scale);\n height = width / imageAspectRatio;\n } else {\n height = Math.min(previewHeight, sourceHeight * scale);\n width = height * imageAspectRatio;\n }\n \n width = Math.floor(width);\n height = Math.floor(height);\n \n canvas.width = width;\n canvas.height = height;\n \n ctx.drawImage(source, 0, 0, width, height);\n \n const imageData = ctx.getImageData(0, 0, width, height);\n const data = imageData.data;\n \n ctx.fillStyle = settings.darkBackground ? 'black' : 'white';\n ctx.fillRect(0, 0, width, height);\n \n const stepSize = settings.blockSize + settings.spacing;\n ctx.fillStyle = settings.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 for (let sy = 0; sy < settings.blockSize; sy++) {\n for (let sx = 0; sx < settings.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 if (avgBrightness > (settings.threshold * 2.55)) {\n const radius = (settings.maxRadius * avgBrightness) / 255;\n ctx.beginPath();\n ctx.arc(x + settings.blockSize/2, y + settings.blockSize/2, radius, 0, Math.PI * 2);\n ctx.fill();\n }\n }\n }\n \n setError(null);\n } catch (err) {\n setError('Error processing media. Please try a different file or refresh the page.');\n console.error('Processing error:', err);\n }\n };\n\n const processVideo = () => {\n if (isVideo && isPlaying && videoRef.current) {\n processFrame(videoRef.current);\n animationFrameRef.current = requestAnimationFrame(processVideo);\n }\n };\n\n const handleFile = (file) => {\n if (!file) return;\n \n const isVideoFile = file.type.startsWith('video/');\n setIsVideo(isVideoFile);\n \n const reader = new FileReader();\n reader.onload = (e) => {\n if (isVideoFile) {\n const video = document.createElement('video');\n video.src = e.target.result;\n video.onloadedmetadata = () => {\n videoRef.current = video;\n setMediaSource(video);\n video.play();\n setIsPlaying(true);\n };\n } else {\n const img = new Image();\n img.onload = () => {\n setMediaSource(img);\n processFrame(img);\n };\n img.src = e.target.result;\n }\n };\n reader.readAsDataURL(file);\n };\n\n const togglePlayback = () => {\n if (!videoRef.current) return;\n \n if (isPlaying) {\n videoRef.current.pause();\n } else {\n videoRef.current.play();\n }\n setIsPlaying(!isPlaying);\n };\n\n useEffect(() => {\n if (mediaSource && !isVideo) {\n processFrame(mediaSource);\n }\n }, [settings]);\n\n useEffect(() => {\n if (isVideo && isPlaying) {\n processVideo();\n }\n return () => {\n if (animationFrameRef.current) {\n cancelAnimationFrame(animationFrameRef.current);\n }\n };\n }, [isPlaying, settings]);\n\n return (\n

\n \n

\n {\n e.preventDefault();\n setIsDragging(false);\n handleFile(e.dataTransfer.files[0]);\n }}\n onDragOver={(e) => {\n e.preventDefault();\n setIsDragging(true);\n }}\n onDragLeave={(e) => {\n e.preventDefault();\n setIsDragging(false);\n }}\n className={`border-2 border-dashed rounded-lg p-8 text-center transition-colors\n ${isDragging ? 'border-blue-500 bg-blue-50' : 'border-gray-300'}\n ${mediaSource ? 'border-green-500' : ''}`}\n >\n handleFile(e.target.files[0])}\n className=\"hidden\"\n />\n

\n \n

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

\n {mediaSource && (\n

\n {isVideo ? 'Video' : 'Image'} loaded successfully!\n

\n )}\n

\n \n

\n {error && (\n

\n {error}\n

\n )}\n \n

\n \n \n Reset\n \n \n {isVideo && (\n \n {isPlaying ? (\n \n ) : (\n \n )}\n {isPlaying ? 'Pause' : 'Play'}\n \n )}\n

\n\n

\n Block Size\n

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

\n setSettings({...settings, blockSize: 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 setSettings({...settings, maxRadius: value});\n }\n }}\n className=\"w-16 px-2 py-1 text-right text-sm border rounded\"\n />\n px\n

\n setSettings({...settings, maxRadius: 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 setSettings({...settings, spacing: value});\n }\n }}\n className=\"w-16 px-2 py-1 text-right text-sm border rounded\"\n />\n px\n

\n setSettings({...settings, spacing: 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 setSettings({...settings, threshold: value});\n }\n }}\n className=\"w-16 px-2 py-1 text-right text-sm border rounded\"\n />\n %\n

\n setSettings({...settings, threshold: value[0]})}\n min={0}\n max={100}\n step={1}\n />\n

\n \n

\n Dark Background\n setSettings({...settings, darkBackground: checked})}\n />\n

\n \n\n \n

\n\n

\n \n

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