[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" "use client" import WebcamTriangles from "./WebcamTriangles" export default function Home() { return (

) } [V0_FILE]css:file="app/globals.css" isMerged="true" isEdit="true" @tailwind base; @tailwind components; @tailwind utilities; body { margin: 0; padding: 0; overflow: hidden; } [V0_FILE]typescriptreact:file="app/WebcamCircles.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useRef, useEffect, useState } from "react" import Webcam from "react-webcam" const WebcamCircles: React.FC = () => { const webcamRef = useRef(null) const canvasRef = useRef(null) const [isVideoReady, setIsVideoReady] = useState(false) const prevImageDataRef = useRef(null) const movementMapRef = useRef([]) useEffect(() => { let animationFrameId: number const processFrame = () => { const webcam = webcamRef.current const canvas = canvasRef.current if (webcam && canvas) { const video = webcam.video if (video && video.readyState === video.HAVE_ENOUGH_DATA) { const { videoWidth, videoHeight } = video canvas.width = videoWidth canvas.height = videoHeight const ctx = canvas.getContext("2d") if (ctx) { ctx.drawImage(video, 0, 0, videoWidth, videoHeight) const imageData = ctx.getImageData(0, 0, videoWidth, videoHeight) processImageData(imageData, ctx) } } } animationFrameId = requestAnimationFrame(processFrame) } if (isVideoReady) { processFrame() } return () => { if (animationFrameId) { cancelAnimationFrame(animationFrameId) } } }, [isVideoReady]) const processImageData = (imageData: ImageData, ctx: CanvasRenderingContext2D) => { const { width, height, data } = imageData ctx.fillStyle = "black" ctx.fillRect(0, 0, width, height) const baseCircleSize = 10 const spacing = 12 const movementThreshold = 30 const newMovementMap: boolean[] = [] for (let y = 0; y < height; y += spacing) { for (let x = 0; x < width; x += spacing) { const i = (y * width + x) * 4 const brightness = (data[i] + data[i + 1] + data[i + 2]) / 3 let isMoving = false if (prevImageDataRef.current) { const prevBrightness = (prevImageDataRef.current.data[i] + prevImageDataRef.current.data[i + 1] + prevImageDataRef.current.data[i + 2]) / 3 isMoving = Math.abs(brightness - prevBrightness) > movementThreshold } newMovementMap.push(isMoving) const index = (y / spacing) * Math.ceil(width / spacing) + x / spacing const currentlyMoving = movementMapRef.current[index] || isMoving // Increase circle size when moving const circleSize = currentlyMoving ? baseCircleSize * 1.5 : baseCircleSize const radius = (brightness / 255) * (circleSize / 2) ctx.beginPath() ctx.arc(x, y, radius, 0, Math.PI * 2) if (currentlyMoving) { const hue = (Date.now() / 20 + x + y) % 360 ctx.fillStyle = `hsl(${hue}, 100%, 50%)` } else { ctx.fillStyle = "white" } ctx.fill() } } prevImageDataRef.current = imageData movementMapRef.current = newMovementMap } const handleVideoReady = () => { setIsVideoReady(true) } return (

) } export default WebcamCircles [V0_FILE]typescriptreact:file="app/WebcamTriangles.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useRef, useEffect, useState, useCallback } from "react" import Webcam from "react-webcam" import ControlBar from "./ControlBar" type Preset = "default" | "motionBlur" | "pixelate" | "kaleidoscope" | "waterRipple" | "asciiArt" const WebcamTriangles: React.FC = () => { const webcamRef = useRef(null) const canvasRef = useRef(null) const [isVideoReady, setIsVideoReady] = useState(false) const [currentPreset, setCurrentPreset] = useState("default") const prevImageDataRef = useRef(null) const movementMapRef = useRef([]) const prevPositionsRef = useRef<{ [key: string]: { x: number; y: number } }>({}) const processImageData = useCallback( (imageData: ImageData, ctx: CanvasRenderingContext2D) => { const { width, height, data } = imageData ctx.fillStyle = "black" ctx.fillRect(0, 0, width, height) switch (currentPreset) { case "default": drawDefault(ctx, width, height, data) break case "motionBlur": drawMotionBlur(ctx, width, height, data) break case "pixelate": drawPixelate(ctx, width, height, data) break case "kaleidoscope": drawKaleidoscope(ctx, width, height, data) break case "waterRipple": drawWaterRipple(ctx, width, height, data) break case "asciiArt": drawAsciiArt(ctx, width, height, data) break } prevImageDataRef.current = imageData }, [currentPreset], ) const drawDefault = (ctx: CanvasRenderingContext2D, width: number, height: number, data: Uint8ClampedArray) => { const baseTriangleSize = 4 const spacing = 5 for (let y = 0; y < height; y += spacing) { for (let x = 0; x < width; x += spacing) { const i = (y * width + x) * 4 const brightness = (data[i] + data[i + 1] + data[i + 2]) / 3 const size = (brightness / 255) * baseTriangleSize drawTriangle(ctx, x, y, size, false) } } } const drawMotionBlur = (ctx: CanvasRenderingContext2D, width: number, height: number, data: Uint8ClampedArray) => { const baseTriangleSize = 4 const spacing = 5 const movementThreshold = 20 const newMovementMap: boolean[] = [] const newPositions: { [key: string]: { x: number; y: number } } = {} for (let y = 0; y < height; y += spacing) { for (let x = 0; x < width; x += spacing) { const i = (y * width + x) * 4 const brightness = (data[i] + data[i + 1] + data[i + 2]) / 3 let isMoving = false if (prevImageDataRef.current) { const prevBrightness = (prevImageDataRef.current.data[i] + prevImageDataRef.current.data[i + 1] + prevImageDataRef.current.data[i + 2]) / 3 isMoving = Math.abs(brightness - prevBrightness) > movementThreshold } newMovementMap.push(isMoving) const index = (y / spacing) * Math.ceil(width / spacing) + x / spacing const currentlyMoving = movementMapRef.current[index] || isMoving const triangleSize = currentlyMoving ? baseTriangleSize * 1.3 : baseTriangleSize const size = (brightness / 255) * triangleSize const key = `${x},${y}` const prevPos = prevPositionsRef.current[key] || { x, y } const dx = x - prevPos.x const dy = y - prevPos.y drawTriangle(ctx, x, y, size, currentlyMoving) if (currentlyMoving) { for (let i = 1; i <= 3; i++) { const alpha = 1 - i * 0.2 const blurX = x - dx * i * 0.5 const blurY = y - dy * i * 0.5 drawTriangle(ctx, blurX, blurY, size * 0.8, true, alpha) } } newPositions[key] = { x, y } } } movementMapRef.current = newMovementMap prevPositionsRef.current = newPositions } const drawPixelate = (ctx: CanvasRenderingContext2D, width: number, height: number, data: Uint8ClampedArray) => { const pixelSize = 10 for (let y = 0; y < height; y += pixelSize) { for (let x = 0; x < width; x += pixelSize) { const i = (y * width + x) * 4 const r = data[i] const g = data[i + 1] const b = data[i + 2] ctx.fillStyle = `rgb(${r},${g},${b})` ctx.fillRect(x, y, pixelSize, pixelSize) } } } const drawKaleidoscope = (ctx: CanvasRenderingContext2D, width: number, height: number, data: Uint8ClampedArray) => { const centerX = width / 2 const centerY = height / 2 const radius = Math.min(width, height) / 2 const segments = 6 const segmentAngle = (Math.PI * 2) / segments // Create a temporary canvas to store the original image const tempCanvas = document.createElement("canvas") tempCanvas.width = width tempCanvas.height = height const tempCtx = tempCanvas.getContext("2d") if (!tempCtx) return // Draw the original image on the temporary canvas const imageData = new ImageData(data, width, height) tempCtx.putImageData(imageData, 0, 0) // Clear the main canvas ctx.fillStyle = "black" ctx.fillRect(0, 0, width, height) // Draw kaleidoscope segments for (let i = 0; i < segments; i++) { ctx.save() ctx.translate(centerX, centerY) ctx.rotate(i * segmentAngle) ctx.beginPath() ctx.moveTo(0, 0) ctx.lineTo(radius * Math.cos(segmentAngle / 2), radius * Math.sin(segmentAngle / 2)) ctx.lineTo(radius * Math.cos(-segmentAngle / 2), radius * Math.sin(-segmentAngle / 2)) ctx.closePath() ctx.clip() ctx.drawImage(tempCanvas, -centerX, -centerY) ctx.restore() } } const drawWaterRipple = (ctx: CanvasRenderingContext2D, width: number, height: number, data: Uint8ClampedArray) => { const tempCanvas = document.createElement("canvas") tempCanvas.width = width tempCanvas.height = height const tempCtx = tempCanvas.getContext("2d") if (!tempCtx) return const imageData = new ImageData(data, width, height) tempCtx.putImageData(imageData, 0, 0) const time = Date.now() / 1000 const waveLength1 = 200 const waveLength2 = 150 const amplitude1 = 20 const amplitude2 = 15 const spacing = 5 ctx.fillStyle = "rgba(0, 100, 255, 0.2)" ctx.fillRect(0, 0, width, height) for (let y = 0; y < height; y += spacing) { for (let x = 0; x < width; x += spacing) { const dx1 = Math.sin(y / waveLength1 + time) * amplitude1 const dy1 = Math.cos(x / waveLength1 + time) * amplitude1 const dx2 = Math.sin(x / waveLength2 + time * 1.5) * amplitude2 const dy2 = Math.cos(y / waveLength2 + time * 1.5) * amplitude2 const sourceX = x + dx1 + dx2 const sourceY = y + dy1 + dy2 const reflectionY = Math.max(0, sourceY - height * 0.3) const i = (Math.floor(reflectionY) * width + Math.floor(sourceX)) * 4 const r = data[i] const g = data[i + 1] const b = data[i + 2] const brightness = (r + g + b) / 3 const size = (brightness / 255) * spacing * 1.2 const waveHeight = (Math.sin(x / waveLength1 + time) + Math.cos(y / waveLength2 + time * 1.5)) * 0.5 + 0.5 const alpha = 0.4 + waveHeight * 0.6 const waterColor = `rgba(${r * 0.6 + 100 * waveHeight}, ${g * 0.7 + 100 * waveHeight}, ${b * 1.3}, ${alpha})` drawTriangle(ctx, x, y, size, false, alpha, waterColor) } } ctx.filter = "blur(2px)" ctx.drawImage(ctx.canvas, 0, 0) ctx.filter = "none" } const drawAsciiArt = (ctx: CanvasRenderingContext2D, width: number, height: number, data: Uint8ClampedArray) => { const asciiChars = ["@", "#", "S", "%", "?", "*", "+", ";", ":", ",", "."] const cellSize = 10 ctx.fillStyle = "black" ctx.fillRect(0, 0, width, height) ctx.font = `${cellSize}px monospace` ctx.fillStyle = "white" for (let y = 0; y < height; y += cellSize) { for (let x = 0; x < width; x += cellSize) { const i = (y * width + x) * 4 const brightness = (data[i] + data[i + 1] + data[i + 2]) / 3 const charIndex = Math.floor((brightness / 255) * (asciiChars.length - 1)) ctx.fillText(asciiChars[charIndex], x, y + cellSize) } } } const drawTriangle = ( ctx: CanvasRenderingContext2D, x: number, y: number, size: number, isMoving: boolean, alpha = 1, fillStyle?: string, ) => { if (size < 1) { ctx.fillStyle = fillStyle || `rgba(255, 255, 255, ${alpha})` ctx.fillRect(x, y, 1, 1) return } const height = (size * Math.sqrt(3)) / 2 ctx.beginPath() ctx.moveTo(x, y - height / 2) ctx.lineTo(x - size / 2, y + height / 2) ctx.lineTo(x + size / 2, y + height / 2) ctx.closePath() if (fillStyle) { ctx.fillStyle = fillStyle } else if (isMoving) { const hue = (Date.now() / 20 + x + y) % 360 ctx.fillStyle = `hsla(${hue}, 100%, 50%, ${alpha})` } else { ctx.fillStyle = `rgba(255, 255, 255, ${alpha})` } ctx.fill() } useEffect(() => { let animationFrameId: number const processFrame = () => { const webcam = webcamRef.current const canvas = canvasRef.current if (webcam && canvas) { const video = webcam.video if (video && video.readyState === video.HAVE_ENOUGH_DATA) { const { videoWidth, videoHeight } = video canvas.width = videoWidth canvas.height = videoHeight const ctx = canvas.getContext("2d") if (ctx) { ctx.drawImage(video, 0, 0, videoWidth, videoHeight) const imageData = ctx.getImageData(0, 0, videoWidth, videoHeight) processImageData(imageData, ctx) } } } animationFrameId = requestAnimationFrame(processFrame) } if (isVideoReady) { processFrame() } return () => { if (animationFrameId) { cancelAnimationFrame(animationFrameId) } } }, [isVideoReady, processImageData]) const handleVideoReady = () => { setIsVideoReady(true) } return (

) } export default WebcamTriangles [V0_FILE]typescriptreact:file="app/ControlBar.tsx" isEdit="true" import type React from "react" type Preset = "default" | "motionBlur" | "pixelate" | "kaleidoscope" | "waterRipple" | "asciiArt" interface ControlBarProps { currentPreset: Preset setPreset: (preset: Preset) => void } const ControlBar: React.FC = ({ currentPreset, setPreset }) => { const presets: Preset[] = ["default", "motionBlur", "pixelate", "kaleidoscope", "waterRipple", "asciiArt"] const renderPreview = (preset: Preset) => { const canvas = document.createElement("canvas") canvas.width = 50 canvas.height = 50 const ctx = canvas.getContext("2d") if (!ctx) return "" switch (preset) { case "default": ctx.fillStyle = "white" ctx.beginPath() ctx.arc(25, 25, 10, 0, Math.PI * 2) ctx.fill() break case "motionBlur": ctx.fillStyle = "white" for (let i = 0; i < 5; i++) { ctx.globalAlpha = 1 - i * 0.2 ctx.beginPath() ctx.arc(25 - i * 3, 25, 10, 0, Math.PI * 2) ctx.fill() } break case "pixelate": const pixelSize = 5 for (let y = 0; y < 50; y += pixelSize) { for (let x = 0; x < 50; x += pixelSize) { ctx.fillStyle = `rgb(${Math.random() * 255},${Math.random() * 255},${Math.random() * 255})` ctx.fillRect(x, y, pixelSize, pixelSize) } } break case "kaleidoscope": ctx.translate(25, 25) for (let i = 0; i < 6; i++) { ctx.rotate(Math.PI / 3) ctx.beginPath() ctx.moveTo(0, 0) ctx.lineTo(25, 0) ctx.lineTo(12.5, 21.65) ctx.closePath() ctx.fillStyle = `hsl(${i * 60}, 100%, 50%)` ctx.fill() } break case "waterRipple": ctx.fillStyle = "rgba(0, 100, 255, 0.2)" ctx.fillRect(0, 0, 50, 50) ctx.strokeStyle = "rgba(255, 255, 255, 0.8)" ctx.lineWidth = 3 for (let i = 0; i < 2; i++) { ctx.beginPath() ctx.moveTo(0, 20 + i * 20) for (let x = 0; x < 50; x += 5) { ctx.lineTo(x, 20 + i * 20 + Math.sin(x * 0.3 + i) * 8) } ctx.stroke() } break case "asciiArt": ctx.fillStyle = "black" ctx.fillRect(0, 0, 50, 50) ctx.font = "8px monospace" ctx.fillStyle = "white" const asciiChars = ["@", "#", "S", "%", "?", "*", "+", ";", ":", ",", "."] for (let y = 0; y < 50; y += 8) { for (let x = 0; x < 50; x += 8) { const charIndex = Math.floor(Math.random() * asciiChars.length) ctx.fillText(asciiChars[charIndex], x, y + 8) } } break } return canvas.toDataURL() } return (

{presets.map((preset) => (

) } export default ControlBar

About

Tags

Share

More from leerob

More Templates Like This

About

Tags

Share

About

Tags

Share

More from leerob

More Templates Like This