[V0_FILE]typescriptreact:file="app/page.tsx" import CanvasComponent from "@/components/canvas-component" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" export default function Home() { return (

Canvas Circles A simple canvas drawing two circles

) } [V0_FILE]typescriptreact:file="tailwind.config.ts" import type { Config } from "tailwindcss" const config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", 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")], } satisfies Config export default config [V0_FILE]typescriptreact:file="components/canvas-component.tsx" "use client" import { useEffect, useRef, useState } from "react" export default function CanvasComponent() { const canvasRef = useRef(null) const [isDragging, setIsDragging] = useState(false) const [draggedCircle, setDraggedCircle] = useState<"blue" | "red" | null>(null) // Store circle positions in state so they persist during dragging const [blueCirclePos, setBlueCirclePos] = useState({ x: 0, y: 0 }) const [redCirclePos, setRedCirclePos] = useState({ x: 0, y: 0 }) // Track the last mouse position for calculating drag delta const lastMousePosRef = useRef({ x: 0, y: 0 }) useEffect(() => { const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext("2d") if (!ctx) return // Set canvas dimensions and initialize circle positions const resizeCanvas = () => { const { width, height } = canvas.getBoundingClientRect() // Set the canvas dimensions to match its CSS size canvas.width = width canvas.height = height // Initialize circle positions if they're at 0,0 (first render) if (blueCirclePos.x === 0 && blueCirclePos.y === 0) { const wallX = width / 2 setBlueCirclePos({ x: wallX - width / 4, y: height / 2, }) setRedCirclePos({ x: wallX + width / 8, y: height / 2, }) } // Redraw the scene drawScene(ctx, width, height, blueCirclePos, redCirclePos) } // Initial resize resizeCanvas() // Add resize listener window.addEventListener("resize", resizeCanvas) // Mouse event handlers const handleMouseDown = (e: MouseEvent) => { const rect = canvas.getBoundingClientRect() const mouseX = e.clientX - rect.left const mouseY = e.clientY - rect.top // Store the current mouse position lastMousePosRef.current = { x: mouseX, y: mouseY } // Check if the mouse is over either circle // Reduced to 25% of original size const radius = (Math.min(canvas.width, canvas.height) / 12) * 0.25 // Check blue circle const distToBlue = Math.sqrt(Math.pow(mouseX - blueCirclePos.x, 2) + Math.pow(mouseY - blueCirclePos.y, 2)) // Check red circle const distToRed = Math.sqrt(Math.pow(mouseX - redCirclePos.x, 2) + Math.pow(mouseY - redCirclePos.y, 2)) if (distToBlue <= radius) { setIsDragging(true) setDraggedCircle("blue") } else if (distToRed <= radius) { setIsDragging(true) setDraggedCircle("red") } } const handleMouseMove = (e: MouseEvent) => { if (!isDragging || !draggedCircle) return const rect = canvas.getBoundingClientRect() const mouseX = e.clientX - rect.left const mouseY = e.clientY - rect.top // Calculate the movement delta const deltaX = mouseX - lastMousePosRef.current.x const deltaY = mouseY - lastMousePosRef.current.y // Update the last mouse position lastMousePosRef.current = { x: mouseX, y: mouseY } // Update the position of the dragged circle if (draggedCircle === "blue") { setBlueCirclePos((prev) => ({ x: prev.x + deltaX, y: prev.y + deltaY, })) } else if (draggedCircle === "red") { setRedCirclePos((prev) => ({ x: prev.x + deltaX, y: prev.y + deltaY, })) } // Redraw the scene drawScene( ctx, canvas.width, canvas.height, draggedCircle === "blue" ? { x: blueCirclePos.x + deltaX, y: blueCirclePos.y + deltaY } : blueCirclePos, draggedCircle === "red" ? { x: redCirclePos.x + deltaX, y: redCirclePos.y + deltaY } : redCirclePos, ) } const handleMouseUp = () => { setIsDragging(false) setDraggedCircle(null) } // Add mouse event listeners canvas.addEventListener("mousedown", handleMouseDown) window.addEventListener("mousemove", handleMouseMove) window.addEventListener("mouseup", handleMouseUp) // Add touch event listeners for mobile canvas.addEventListener("touchstart", (e) => { e.preventDefault() const touch = e.touches[0] const mouseEvent = new MouseEvent("mousedown", { clientX: touch.clientX, clientY: touch.clientY, }) handleMouseDown(mouseEvent) }) window.addEventListener("touchmove", (e) => { if (!isDragging) return e.preventDefault() const touch = e.touches[0] const mouseEvent = new MouseEvent("mousemove", { clientX: touch.clientX, clientY: touch.clientY, }) handleMouseMove(mouseEvent) }) window.addEventListener("touchend", () => { handleMouseUp() }) // Clean up return () => { window.removeEventListener("resize", resizeCanvas) canvas.removeEventListener("mousedown", handleMouseDown) window.removeEventListener("mousemove", handleMouseMove) window.removeEventListener("mouseup", handleMouseUp) canvas.removeEventListener("touchstart", (e) => { e.preventDefault() const touch = e.touches[0] const mouseEvent = new MouseEvent("mousedown", { clientX: touch.clientX, clientY: touch.clientY, }) handleMouseDown(mouseEvent) }) window.removeEventListener("touchmove", (e) => { if (!isDragging) return e.preventDefault() const touch = e.touches[0] const mouseEvent = new MouseEvent("mousemove", { clientX: touch.clientX, clientY: touch.clientY, }) handleMouseMove(mouseEvent) }) window.removeEventListener("touchend", () => { handleMouseUp() }) } }, [isDragging, draggedCircle, blueCirclePos, redCirclePos]) // Function to draw the circles, wall, and radiating vectors const drawScene = ( ctx: CanvasRenderingContext2D, width: number, height: number, bluePos: { x: number; y: number }, redPos: { x: number; y: number }, ) => { // Clear the canvas ctx.clearRect(0, 0, width, height) // Wall position (center of canvas horizontally, top half only) const wallX = width / 2 const wallTopY = 0 const wallBottomY = height / 2 // Wall only covers top half // Draw the wall (vertical line - half height) ctx.beginPath() ctx.moveTo(wallX, wallTopY) ctx.lineTo(wallX, wallBottomY) ctx.strokeStyle = "#333333" ctx.lineWidth = 4 ctx.stroke() // Circle radius - reduced to 25% of original size const radius = (Math.min(width, height) / 12) * 0.25 // Draw blue circle ctx.beginPath() ctx.arc(bluePos.x, bluePos.y, radius, 0, Math.PI * 2) ctx.fillStyle = "#1E90FF" // Dodger Blue ctx.fill() // Draw red circle ctx.beginPath() ctx.arc(redPos.x, redPos.y, radius, 0, Math.PI * 2) ctx.fillStyle = "#FF4136" // Red ctx.fill() // Calculate angles between circles const blueToRedAngle = Math.atan2(redPos.y - bluePos.y, redPos.x - bluePos.x) const redToBlueAngle = Math.atan2(bluePos.y - redPos.y, bluePos.x - redPos.x) // Cone width in radians (25 degrees) const coneWidth = (10 * Math.PI) / 180 const halfConeWidth = coneWidth / 2 // Draw radiating vectors const maxVectorLength = Math.max(width, height) * 2 // Make vectors longer const numRays = 200 // Lots of rays for a dense cone // Function to calculate ray-wall intersection const calculateIntersection = ( startX: number, startY: number, endX: number, endY: number, wallX: number, wallTopY: number, wallBottomY: number, ) => { // If the ray doesn't cross the wall horizontally, no intersection if ((startX < wallX && endX < wallX) || (startX > wallX && endX > wallX)) { return null } // Calculate the y-coordinate at the wall intersection const slope = (endY - startY) / (endX - startX) const wallY = startY + slope * (wallX - startX) // Check if the intersection is within the wall's height range if (wallY >= wallTopY && wallY <= wallBottomY) { return { x: wallX, y: wallY } } return null } // Vectors from blue circle to red circle (in a cone) ctx.strokeStyle = "rgba(30, 144, 255, 0.4)" // Blue with transparency ctx.lineWidth = 0.5 for (let i = 0; i < numRays; i++) { // Calculate angle within the cone const angleOffset = (i / numRays) * coneWidth - halfConeWidth const rayAngle = blueToRedAngle + angleOffset const rayEndX = bluePos.x + Math.cos(rayAngle) * maxVectorLength const rayEndY = bluePos.y + Math.sin(rayAngle) * maxVectorLength // Check if the ray intersects with the wall const intersection = calculateIntersection(bluePos.x, bluePos.y, rayEndX, rayEndY, wallX, wallTopY, wallBottomY) // Draw the ray, stopping at the wall if there's an intersection ctx.beginPath() ctx.moveTo(bluePos.x, bluePos.y) if (intersection && bluePos.x < wallX && rayEndX > wallX) { // Ray hits the wall, stop at intersection ctx.lineTo(intersection.x, intersection.y) } else { // Ray doesn't hit the wall or goes away from it ctx.lineTo(rayEndX, rayEndY) } ctx.stroke() } // Vectors from red circle to blue circle (in a cone) ctx.strokeStyle = "rgba(255, 65, 54, 0.4)" // Red with transparency ctx.lineWidth = 0.5 for (let i = 0; i < numRays; i++) { // Calculate angle within the cone const angleOffset = (i / numRays) * coneWidth - halfConeWidth const rayAngle = redToBlueAngle + angleOffset const rayEndX = redPos.x + Math.cos(rayAngle) * maxVectorLength const rayEndY = redPos.y + Math.sin(rayAngle) * maxVectorLength // Check if the ray intersects with the wall const intersection = calculateIntersection(redPos.x, redPos.y, rayEndX, rayEndY, wallX, wallTopY, wallBottomY) // Draw the ray, stopping at the wall if there's an intersection ctx.beginPath() ctx.moveTo(redPos.x, redPos.y) if (intersection && redPos.x > wallX && rayEndX < wallX) { // Ray hits the wall, stop at intersection ctx.lineTo(intersection.x, intersection.y) } else { // Ray doesn't hit the wall or goes away from it ctx.lineTo(rayEndX, rayEndY) } ctx.stroke() } } return (

) }