[V0_FILE]typescriptreact:file="app/page.tsx" import SmudgeCanvas from "@/components/smudge-canvas" export default function Home() { return (

Evolving Smudge Canvas

) } [V0_FILE]typescriptreact:file="components/smudge-canvas.tsx" isFixed="true" isQuickEdit="true" "use client" import { useRef, useEffect, useState, useCallback } from "react" import { Button } from "@/components/ui/button" import { RefreshCw, Download } from "lucide-react" type Particle = { x: number y: number vx: number vy: number color: string life: number maxLife: number } export default function SmudgeCanvas() { const canvasRef = useRef(null) const particlesRef = useRef([]) const isDrawingRef = useRef(false) const prevPositionRef = useRef({ x: 0, y: 0 }) const [colorPhase, setColorPhase] = useState(0) const [isFullscreen, setIsFullscreen] = useState(false) // Color palettes for evolution const colorPalettes = [ ["#3498db", "#2980b9", "#1abc9c", "#16a085"], // Blue to Teal ["#e74c3c", "#c0392b", "#f39c12", "#d35400"], // Red to Orange ["#9b59b6", "#8e44ad", "#3498db", "#2980b9"], // Purple to Blue ["#f1c40f", "#f39c12", "#e67e22", "#d35400"], // Yellow to Orange ["#1abc9c", "#16a085", "#2ecc71", "#27ae60"], // Teal to Green ] // Get current color palette based on phase const getCurrentPalette = useCallback(() => { return colorPalettes[Math.floor(colorPhase) % colorPalettes.length] }, [colorPhase]) // Get a random color from the current palette with transition to next palette const getRandomColor = useCallback(() => { const currentPalette = getCurrentPalette() const nextPaletteIndex = (Math.floor(colorPhase) + 1) % colorPalettes.length const nextPalette = colorPalettes[nextPaletteIndex] const transitionProgress = colorPhase % 1 const colorIndex = Math.floor(Math.random() * currentPalette.length) // Get colors from current and next palette const currentColor = currentPalette[colorIndex] const nextColor = nextPalette[colorIndex] // Parse the hex colors to RGB const currentRGB = hexToRgb(currentColor) const nextRGB = hexToRgb(nextColor) // Interpolate between the colors const r = Math.floor(currentRGB.r * (1 - transitionProgress) + nextRGB.r * transitionProgress) const g = Math.floor(currentRGB.g * (1 - transitionProgress) + nextRGB.g * transitionProgress) const b = Math.floor(currentRGB.b * (1 - transitionProgress) + nextRGB.b * transitionProgress) return `rgb(${r}, ${g}, ${b})` }, [colorPhase, getCurrentPalette]) // Helper function to convert hex to RGB const hexToRgb = (hex: string) => { const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex) return result ? { r: Number.parseInt(result[1], 16), g: Number.parseInt(result[2], 16), b: Number.parseInt(result[3], 16), } : { r: 0, g: 0, b: 0 } } // Initialize canvas useEffect(() => { const canvas = canvasRef.current if (!canvas) return const handleResize = () => { const container = canvas.parentElement if (!container) return // Set canvas dimensions to match container canvas.width = container.clientWidth canvas.height = container.clientHeight // Clear and redraw const ctx = canvas.getContext("2d") if (ctx) { ctx.fillStyle = "black" ctx.fillRect(0, 0, canvas.width, canvas.height) } } // Initial sizing handleResize() // Listen for window resize window.addEventListener("resize", handleResize) // Start color evolution const colorInterval = setInterval(() => { setColorPhase((prev) => prev + 0.005) // Slow color evolution }, 100) // Animation loop let animationFrameId: number const render = () => { const ctx = canvas.getContext("2d") if (!ctx) return // Apply slight fade effect to create trails ctx.fillStyle = "rgba(0, 0, 0, 0.03)" ctx.fillRect(0, 0, canvas.width, canvas.height) // Update and draw particles particlesRef.current.forEach((particle, index) => { // Update position particle.x += particle.vx particle.y += particle.vy // Apply friction particle.vx *= 0.98 particle.vy *= 0.98 // Decrease life particle.life-- // Remove dead particles if (particle.life <= 0) { particlesRef.current.splice(index, 1) return } // Calculate opacity based on life const opacity = particle.life / particle.maxLife // Draw particle ctx.beginPath() ctx.arc(particle.x, particle.y, 3 + opacity * 5, 0, Math.PI * 2) ctx.fillStyle = particle.color.replace("rgb", "rgba").replace(")", `, ${opacity})`) ctx.fill() }) animationFrameId = requestAnimationFrame(render) } render() // Cleanup return () => { window.removeEventListener("resize", handleResize) clearInterval(colorInterval) cancelAnimationFrame(animationFrameId) } }, []) // Handle mouse/touch events useEffect(() => { const canvas = canvasRef.current if (!canvas) return const getPosition = (e: MouseEvent | TouchEvent) => { const rect = canvas.getBoundingClientRect() if ("touches" in e) { return { x: e.touches[0].clientX - rect.left, y: e.touches[0].clientY - rect.top, } } else { return { x: e.clientX - rect.left, y: e.clientY - rect.top, } } } const createParticles = (x: number, y: number, prevX: number, prevY: number) => { // Calculate distance and angle between current and previous position const dx = x - prevX const dy = y - prevY const distance = Math.sqrt(dx * dx + dy * dy) const angle = Math.atan2(dy, dx) // Create particles along the path const count = Math.max(Math.floor(distance / 5), 1) for (let i = 0; i < count; i++) { const t = count === 1 ? 0 : i / (count - 1) const px = prevX + dx * t const py = prevY + dy * t // Add some randomness to velocity const spread = 2 const vx = Math.cos(angle) * 2 + (Math.random() - 0.5) * spread const vy = Math.sin(angle) * 2 + (Math.random() - 0.5) * spread // Create 3-5 particles at each point for a fuller effect const particleCount = 3 + Math.floor(Math.random() * 3) for (let j = 0; j < particleCount; j++) { particlesRef.current.push({ x: px + (Math.random() - 0.5) * 10, y: py + (Math.random() - 0.5) * 10, vx: vx + (Math.random() - 0.5) * 2, vy: vy + (Math.random() - 0.5) * 2, color: getRandomColor(), life: 50 + Math.random() * 100, maxLife: 50 + Math.random() * 100, }) } } } const handleStart = (e: MouseEvent | TouchEvent) => { isDrawingRef.current = true const pos = getPosition(e) prevPositionRef.current = pos } const handleMove = (e: MouseEvent | TouchEvent) => { if (!isDrawingRef.current) return const pos = getPosition(e) createParticles(pos.x, pos.y, prevPositionRef.current.x, prevPositionRef.current.y) prevPositionRef.current = pos } const handleEnd = () => { isDrawingRef.current = false } // Mouse events canvas.addEventListener("mousedown", handleStart) canvas.addEventListener("mousemove", handleMove) canvas.addEventListener("mouseup", handleEnd) canvas.addEventListener("mouseout", handleEnd) // Touch events canvas.addEventListener("touchstart", handleStart) canvas.addEventListener("touchmove", handleMove) canvas.addEventListener("touchend", handleEnd) return () => { // Cleanup canvas.removeEventListener("mousedown", handleStart) canvas.removeEventListener("mousemove", handleMove) canvas.removeEventListener("mouseup", handleEnd) canvas.removeEventListener("mouseout", handleEnd) canvas.removeEventListener("touchstart", handleStart) canvas.removeEventListener("touchmove", handleMove) canvas.removeEventListener("touchend", handleEnd) } }, [getRandomColor]) // Clear canvas const handleClear = () => { const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext("2d") if (!ctx) return ctx.fillStyle = "black" ctx.fillRect(0, 0, canvas.width, canvas.height) particlesRef.current = [] } // Save canvas as image const handleSave = () => { const canvas = canvasRef.current if (!canvas) return const dataUrl = canvas.toDataURL("image/png") const link = document.createElement("a") link.download = `evolving-smudge-${new Date().toISOString().slice(0, 10)}.png` link.href = dataUrl link.click() } // Toggle fullscreen const toggleFullscreen = () => { setIsFullscreen(!isFullscreen) } return (

) } [V0_FILE]typescriptreact:file="components/ui/button.tsx" import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const buttonVariants = cva( "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", { variants: { variant: { default: "bg-primary text-primary-foreground hover:bg-primary/90", destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground", link: "text-primary underline-offset-4 hover:underline", }, size: { default: "h-10 px-4 py-2", sm: "h-9 rounded-md px-3", lg: "h-11 rounded-md px-8", icon: "h-10 w-10", }, }, defaultVariants: { variant: "default", size: "default", }, }, ) export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean } const Button = React.forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { const Comp = asChild ? Slot : "button" return }, ) Button.displayName = "Button" export { Button, buttonVariants } [V0_FILE]typescriptreact:file="lib/utils.ts" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]typescriptreact:file="tailwind.config.js" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]css:file="app/globals.css" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 222.2 47.4% 11.2%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 222.2 84% 4.9%; --radius: 0.5rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 210 40% 98%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 212.7 26.8% 83.9%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } /* Custom styles for canvas */ canvas { touch-action: none; } [V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import "./globals.css" import type { Metadata } from "next" import { Inter } from "next/font/google" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Evolving Smudge Canvas", description: "Create digital artwork through smudging and blending colors with dynamic color evolution", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) }

About

About