🐱 Cat Vision Simulator

\n \n

\n );\n}\n\nfunction CatVisionSimulator() {\n const [imageUrl, setImageUrl] = useState(\"/api/placeholder/600/400\");\n const [catVisionEnabled, setCatVisionEnabled] = useState(false);\n const [brightness, setBrightness] = useState(100);\n const [explanation, setExplanation] = useState(\"default\");\n const [cameraActive, setCameraActive] = useState(false);\n const [imageSource, setImageSource] = useState(\"default\"); // \"default\", \"upload\", \"camera\"\n\n const videoRef = useRef(null);\n const canvasRef = useRef(null);\n const fileInputRef = useRef(null);\n\n // Function to handle file upload\n const handleFileUpload = (e) => {\n const file = e.target.files[0];\n if (file) {\n const reader = new FileReader();\n reader.onload = (event) => {\n setImageUrl(event.target.result);\n setImageSource(\"upload\");\n // Stop camera if it's active\n if (cameraActive) {\n stopCamera();\n }\n };\n reader.readAsDataURL(file);\n }\n };\n\n // Function to apply cat vision filter to the image\n const applyCatVision = (img, canvas, ctx) => {\n ctx.drawImage(img, 0, 0, canvas.width, canvas.height);\n const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);\n const data = imageData.data;\n\n // Apply cat vision transformation\n for (let i = 0; i < data.length; i += 4) {\n // Reduce red sensitivity significantly (cats have fewer red cones)\n data[i] = data[i] * 0.4;\n\n // Enhance blues slightly (cats see blues better than reds)\n data[i + 2] = Math.min(255, data[i + 2] * 1.1);\n\n // Adjust brightness for better night vision\n const brightnessAdjust = brightness / 100;\n data[i] = Math.min(255, data[i] * brightnessAdjust);\n data[i + 1] = Math.min(255, data[i + 1] * brightnessAdjust);\n data[i + 2] = Math.min(255, data[i + 2] * brightnessAdjust);\n }\n\n ctx.putImageData(imageData, 0, 0);\n };\n\n // Start camera stream\n const startCamera = async () => {\n try {\n const stream = await navigator.mediaDevices.getUserMedia({\n video: { facingMode: \"environment\" },\n });\n\n if (videoRef.current) {\n videoRef.current.srcObject = stream;\n videoRef.current.play();\n setCameraActive(true);\n setImageSource(\"camera\");\n }\n } catch (err) {\n console.error(\"Error accessing camera:\", err);\n alert(\"Could not access the camera. Please check permissions.\");\n }\n };\n\n // Stop camera stream\n const stopCamera = () => {\n if (videoRef.current && videoRef.current.srcObject) {\n const tracks = videoRef.current.srcObject.getTracks();\n tracks.forEach(track => track.stop());\n videoRef.current.srcObject = null;\n setCameraActive(false);\n }\n };\n\n // Take a photo from the camera\n const takePhoto = () => {\n if (videoRef.current && canvasRef.current) {\n const canvas = canvasRef.current;\n const video = videoRef.current;\n\n canvas.width = video.videoWidth;\n canvas.height = video.videoHeight;\n\n const ctx = canvas.getContext(\"2d\");\n ctx.drawImage(video, 0, 0, canvas.width, canvas.height);\n\n // Convert to data URL and set as image\n const dataUrl = canvas.toDataURL(\"image/png\");\n setImageUrl(dataUrl);\n setImageSource(\"upload\");\n\n // Stop camera after taking photo\n stopCamera();\n }\n };\n\n // Reset to default image\n const resetToDefault = () => {\n setImageUrl(\"/api/placeholder/600/400\");\n setImageSource(\"default\");\n if (cameraActive) {\n stopCamera();\n }\n };\n\n useEffect(() => {\n if (imageSource === \"camera\") {\n return; // Don't process image if camera is the source\n }\n\n const canvas = document.getElementById(\"vision-canvas\");\n if (!canvas) return;\n\n const ctx = canvas.getContext(\"2d\");\n const img = new Image();\n\n img.onload = () => {\n canvas.width = img.width;\n canvas.height = img.height;\n\n if (catVisionEnabled) {\n applyCatVision(img, canvas, ctx);\n } else {\n ctx.drawImage(img, 0, 0, canvas.width, canvas.height);\n }\n };\n\n img.src = imageUrl;\n }, [imageUrl, catVisionEnabled, brightness, imageSource]);\n\n // Process video frames when camera is active\n useEffect(() => {\n let animationFrameId;\n\n const processVideoFrame = () => {\n if (videoRef.current && cameraActive) {\n const canvas = document.getElementById(\"vision-canvas\");\n if (!canvas) return;\n\n const ctx = canvas.getContext(\"2d\");\n const video = videoRef.current;\n\n // Set canvas dimensions to match video\n if (video.videoWidth && video.videoHeight) {\n canvas.width = video.videoWidth;\n canvas.height = video.videoHeight;\n\n // Draw the video frame to canvas\n if (catVisionEnabled) {\n ctx.drawImage(video, 0, 0, canvas.width, canvas.height);\n const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);\n const data = imageData.data;\n\n // Apply cat vision filter\n for (let i = 0; i < data.length; i += 4) {\n data[i] = data[i] * 0.4; // Reduce red\n data[i + 2] = Math.min(255, data[i + 2] * 1.1); // Enhance blue\n\n // Adjust brightness\n const brightnessAdjust = brightness / 100;\n data[i] = Math.min(255, data[i] * brightnessAdjust);\n data[i + 1] = Math.min(255, data[i + 1] * brightnessAdjust);\n data[i + 2] = Math.min(255, data[i + 2] * brightnessAdjust);\n }\n\n ctx.putImageData(imageData, 0, 0);\n } else {\n ctx.drawImage(video, 0, 0, canvas.width, canvas.height);\n }\n\n // Continue processing frames\n animationFrameId = requestAnimationFrame(processVideoFrame);\n }\n }\n };\n\n if (cameraActive) {\n animationFrameId = requestAnimationFrame(processVideoFrame);\n }\n\n return () => {\n if (animationFrameId) {\n cancelAnimationFrame(animationFrameId);\n }\n };\n }, [cameraActive, catVisionEnabled, brightness]);\n\n // Handle Visual Viewport for mobile devices\n useEffect(() => {\n const handleViewportChange = () => {\n if (!window.visualViewport) return;\n\n // Update the app height based on the visual viewport\n document.documentElement.style.setProperty(\"--app-height\", `${window.visualViewport.height}px`);\n };\n\n if (window.visualViewport) {\n window.visualViewport.addEventListener(\"resize\", handleViewportChange);\n window.visualViewport.addEventListener(\"scroll\", handleViewportChange);\n handleViewportChange();\n }\n\n // Cleanup camera on component unmount\n return () => {\n if (cameraActive) {\n stopCamera();\n }\n\n if (window.visualViewport) {\n window.visualViewport.removeEventListener(\"resize\", handleViewportChange);\n window.visualViewport.removeEventListener(\"scroll\", handleViewportChange);\n }\n };\n }, [cameraActive]);\n\n const toggleVision = () => {\n setCatVisionEnabled(!catVisionEnabled);\n };\n\n const handleExplanationChange = (e) => {\n setExplanation(e.target.value);\n };\n\n const getExplanationText = () => {\n switch (explanation) {\n case \"color\":\n return \"Cats have fewer cone cells than humans, particularly for red colors. They see mostly blues and greens, with reds appearing more muted and less vibrant.\";\n case \"sensitivity\":\n return \"Cats have more rod cells, giving them better night vision and movement detection. They can see in light levels about 6-8 times dimmer than humans.\";\n case \"screens\":\n return \"Cats perceive RGB screens differently than humans. The refresh rate of monitors may be more visible to cats, and the red components appear dimmer to them.\";\n case \"uv\":\n return \"Unlike humans, cats can see some ultraviolet light. This helps them detect certain markings and bodily fluids that are invisible to the human eye.\";\n default:\n return \"Cats have different photoreceptors than humans. They have fewer cone cells (color vision) and more rod cells (night vision). Adjust the settings to simulate cat vision.\";\n }\n };\n\n return (\n

\n {/* Hidden canvas for photo capture */}\n

\n\n

How Cats See Differently

\n\n \n \n \n \n \n \n \n\n

{getExplanationText()}

\n\n

Key Differences:

Fewer cone cells (weaker color perception)
More rod cells (better night vision)
Can see some ultraviolet light
Limited red perception
May see screen refresh rates differently

\n\n

RGB Screens and Cat Vision

\n RGB screens are designed for human trichromatic vision with red, green, and blue pixels. Cats have dichromatic\n vision (primarily blue and green sensitive), making them perceive screens differently. The red component\n appears dimmer to cats, and they may be more sensitive to the refresh rate of the screen.\n

\n\n

Human RGB Perception

Full Red

Full Green

Full Blue

\n\n

Cat RGB Perception

Dim Red

Strong Green

Enhanced Blue

\n\n

Screen Refresh Rates

\n Cats may perceive screen flickering at refresh rates that appear solid to humans. While humans typically can't\n detect flickering above 60Hz, cats might still perceive it at higher rates.\n

Human Perception

Smooth image at 60Hz+

Cat Perception

May detect subtle flickering

\n );\n}\n\nfunction client() {\n const rootElement = document.getElementById(\"root\");\n if (!rootElement) throw new Error(\"Root element not found\");\n createRoot(rootElement).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nconst css = `\n :root {\n --app-height: 100%;\n }\n \n body {\n margin: 0;\n padding: 0;\n height: 100vh;\n height: var(--app-height);\n font-family: system-ui, -apple-system, sans-serif;\n background-color: #f3f4f6;\n color: #1a1a1a;\n }\n \n .cat-vision-app {\n height: 100%;\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n }\n \n header {\n padding: 1rem;\n background: #f5f5f5;\n border-bottom: 1px solid #eee;\n text-align: center;\n }\n \n header h1 {\n margin: 0;\n font-size: 1.5rem;\n }\n \n .simulator-container {\n max-width: 960px;\n margin: 0 auto;\n padding: 1rem;\n }\n \n .main-content {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n margin-bottom: 1.5rem;\n }\n \n @media (min-width: 768px) {\n .main-content {\n flex-direction: row;\n }\n \n .canvas-container {\n width: 65%;\n }\n \n .info-panel {\n width: 35%;\n }\n }\n \n .canvas-container {\n background: white;\n padding: 1rem;\n border-radius: 0.5rem;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n }\n \n .vision-canvas {\n width: 100%;\n height: auto;\n max-width: 600px;\n max-height: 400px;\n border: 1px solid #e5e7eb;\n border-radius: 0.25rem;\n display: block;\n margin: 0 auto;\n }\n \n .controls {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-top: 1rem;\n flex-wrap: wrap;\n gap: 0.5rem;\n }\n \n .vision-toggle-btn {\n padding: 0.5rem 1rem;\n border: none;\n border-radius: 0.25rem;\n background: #e5e7eb;\n cursor: pointer;\n font-weight: 500;\n }\n \n .vision-toggle-btn.active {\n background: #8b5cf6;\n color: white;\n }\n \n .brightness-control {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n }\n \n .source-controls {\n margin-top: 1rem;\n padding: 0.75rem;\n border: 1px solid #e5e7eb;\n border-radius: 0.25rem;\n background: #f9fafb;\n }\n \n .source-controls h3 {\n margin-top: 0;\n margin-bottom: 0.5rem;\n font-size: 0.875rem;\n font-weight: 500;\n }\n \n .source-buttons {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n }\n \n .source-btn {\n display: flex;\n align-items: center;\n gap: 0.25rem;\n padding: 0.25rem 0.75rem;\n border: none;\n border-radius: 0.25rem;\n background: #e5e7eb;\n font-size: 0.875rem;\n cursor: pointer;\n }\n \n .source-btn.active {\n background: #3b82f6;\n color: white;\n }\n \n .source-btn.camera-action {\n background: #10b981;\n color: white;\n }\n \n .source-btn.camera-stop {\n background: #ef4444;\n color: white;\n }\n \n .info-panel {\n background: white;\n padding: 1rem;\n border-radius: 0.5rem;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n }\n \n .info-panel h2 {\n margin-top: 0;\n font-size: 1.25rem;\n margin-bottom: 0.75rem;\n }\n \n .explanation-select {\n width: 100%;\n padding: 0.5rem;\n margin-bottom: 1rem;\n border: 1px solid #e5e7eb;\n border-radius: 0.25rem;\n }\n \n .explanation-text {\n font-size: 0.875rem;\n margin-bottom: 1rem;\n }\n \n .key-differences {\n margin-top: 1rem;\n }\n \n .key-differences h3 {\n font-size: 1rem;\n margin-bottom: 0.5rem;\n }\n \n .key-differences ul {\n padding-left: 1.5rem;\n margin-top: 0.5rem;\n font-size: 0.875rem;\n }\n \n .rgb-section, .refresh-section {\n background: white;\n padding: 1rem;\n border-radius: 0.5rem;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n margin-bottom: 1.5rem;\n }\n \n .rgb-section h2, .refresh-section h2 {\n margin-top: 0;\n font-size: 1.25rem;\n margin-bottom: 0.75rem;\n }\n \n .rgb-section p, .refresh-section p {\n font-size: 0.875rem;\n margin-bottom: 1rem;\n }\n \n .perception-comparison {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n }\n \n @media (min-width: 768px) {\n .perception-comparison {\n flex-direction: row;\n }\n \n .perception-box {\n width: 50%;\n }\n }\n \n .perception-box {\n padding: 0.75rem;\n border: 1px solid #e5e7eb;\n border-radius: 0.25rem;\n background: #f9fafb;\n }\n \n .perception-box h3 {\n text-align: center;\n font-size: 1rem;\n margin: 0 0 0.5rem 0;\n }\n \n .color-dots {\n display: flex;\n justify-content: center;\n gap: 1rem;\n }\n \n .color-item {\n text-align: center;\n }\n \n .color-dot {\n width: 2rem;\n height: 2rem;\n border-radius: 9999px;\n margin: 0 auto 0.25rem;\n }\n \n .red-human { background-color: #dc2626; }\n .green-human { background-color: #059669; }\n .blue-human { background-color: #2563eb; }\n \n .red-cat { background-color: #fca5a5; }\n .green-cat { background-color: #059669; }\n .blue-cat { background-color: #1e40af; }\n \n .color-item p {\n margin: 0;\n font-size: 0.75rem;\n }\n \n .refresh-comparison {\n display: flex;\n gap: 1rem;\n text-align: center;\n }\n \n .refresh-comparison > div {\n flex: 1;\n }\n \n .refresh-comparison h4 {\n font-size: 0.875rem;\n margin: 0 0 0.5rem 0;\n }\n \n .refresh-demo {\n height: 3rem;\n border-radius: 0.25rem;\n position: relative;\n overflow: hidden;\n }\n \n .refresh-demo.human {\n background: linear-gradient(to right, #3b82f6, #8b5cf6);\n }\n \n .refresh-demo.cat {\n background: linear-gradient(to right, #3b82f6, #8b5cf6);\n }\n \n .flicker-overlay {\n position: absolute;\n inset: 0;\n background-color: white;\n opacity: 0.1;\n animation: flicker 0.05s infinite alternate;\n }\n \n .refresh-comparison p {\n margin: 0.25rem 0 0 0;\n font-size: 0.75rem;\n }\n \n @keyframes flicker {\n 0% { opacity: 0.1; }\n 100% { opacity: 0.2; }\n }\n\n @media (prefers-color-scheme: dark) {\n body {\n background-color: #1f2937;\n color: #f9fafb;\n }\n \n header {\n background: #111827;\n border-bottom-color: #374151;\n }\n \n .canvas-container, .info-panel, .rgb-section, .refresh-section {\n background: #1a1a1a;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);\n }\n \n .vision-canvas {\n border-color: #374151;\n }\n \n .vision-toggle-btn {\n background: #374151;\n color: #f3f4f6;\n }\n \n .source-controls {\n background: #111827;\n border-color: #374151;\n }\n \n .explanation-select {\n background: #111827;\n color: #f3f4f6;\n border-color: #374151;\n }\n \n .source-btn {\n background: #374151;\n color: #f3f4f6;\n }\n \n .perception-box {\n background: #111827;\n border-color: #374151;\n }\n }\n`;\n\nexport default async function server(request: Request): Promise {\n return new Response(\n `\n \n \n Cat Vision Simulator\n \n \n \n \n

\n \n \n \n \n `,\n {\n headers: { \"content-type\": \"text/html\" },\n },\n );\n}","deleted","label",[98],"permalink","https://www.val.town/x/recklessreticence/CatVision/code/main.tsx","extension","actionData","errors"]

Image Source:

How Cats See Differently

Key Differences:

RGB Screens and Cat Vision

Human RGB Perception

Cat RGB Perception

Screen Refresh Rates

Human Perception

Cat Perception