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

) } [V0_FILE]typescriptreact:file="components/CollisionSimulation.tsx" isEdit="true" isMerged="true" "use client" import { useRef, useEffect, useState } from "react" interface Object { x: number y: number vx: number vy: number radius: number color: string } export default function CollisionSimulation() { const canvasRef = useRef(null) const objectsRef = useRef([]) const [canvasWidth] = useState(600) // Adjust as needed const [canvasHeight] = useState(400) // Adjust as needed useEffect(() => { const canvas = canvasRef.current const ctx = canvas?.getContext("2d") if (!ctx) return // Exit if context is not available canvas.width = canvasWidth canvas.height = canvasHeight // Function to create random objects const createObjects = (numObjects: number) => { const newObjects: Object[] = [] for (let i = 0; i < numObjects; i++) { const radius = Math.random() * 20 + 10 // Radius between 10 and 30 const x = Math.random() * (canvasWidth - 2 * radius) + radius const y = Math.random() * (canvasHeight - 2 * radius) + radius const vx = (Math.random() - 0.5) * 2 // Velocity between -1 and 1 const vy = (Math.random() - 0.5) * 2 const color = `hsl(${Math.random() * 360}, 100%, 50%)` // Random color newObjects.push({ x, y, vx, vy, radius, color, }) } return newObjects } objectsRef.current = createObjects(10) // Initialize with 10 objects // Animation Loop let animationFrameId: number const update = () => { ctx.clearRect(0, 0, canvasWidth, canvasHeight) // 1. Update object positions and handle boundary collisions objectsRef.current.forEach((obj, index) => { obj.x += obj.vx obj.y += obj.vy // Boundary collisions (bounce off walls) if (obj.x + obj.radius > canvasWidth || obj.x - obj.radius < 0) { obj.vx = -obj.vx } if (obj.y + obj.radius > canvasHeight || obj.y - obj.radius < 0) { obj.vy = -obj.vy } // 2. Handle object-object collisions for (let j = index + 1; j < objectsRef.current.length; j++) { const otherObj = objectsRef.current[j] const dx = otherObj.x - obj.x const dy = otherObj.y - obj.y const distance = Math.sqrt(dx * dx + dy * dy) if (distance < obj.radius + otherObj.radius) { // Basic collision response: Swap velocities (simplified physics) const tempVx = obj.vx const tempVy = obj.vy obj.vx = otherObj.vx obj.vy = otherObj.vy otherObj.vx = tempVx otherObj.vy = tempVy // Separate objects slightly to prevent sticking (optional, but good for visual) const overlap = obj.radius + otherObj.radius - distance const unitX = dx / distance const unitY = dy / distance obj.x -= (overlap / 2) * unitX obj.y -= (overlap / 2) * unitY otherObj.x += (overlap / 2) * unitX otherObj.y += (overlap / 2) * unitY } } // 3. Draw the object ctx.beginPath() ctx.arc(obj.x, obj.y, obj.radius, 0, Math.PI * 2) ctx.fillStyle = obj.color ctx.fill() ctx.closePath() }) animationFrameId = requestAnimationFrame(update) } update() // Start animation return () => { cancelAnimationFrame(animationFrameId) // Cleanup on unmount } }, [canvasWidth, canvasHeight]) // Dependency array - re-run effect if these change return (

Colliding Objects

) } [V0_FILE]css:file="app/globals.css" isMerged="true" @import url("https://fonts.googleapis.com/css2?family=Creepster&display=swap"); @tailwind base; @tailwind components; @tailwind utilities; .font-gothic { font-family: "Creepster", cursive; } [V0_FILE]javascript:file="tailwind.config.js" isFixed="true" isQuickEdit="true" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", "app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}", ], theme: { extend: { fontFamily: { gothic: ["Creepster", "cursive"], }, 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)", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]typescript:file="utils/perlin.ts" isMerged="true" // A simple Perlin noise implementation export class Perlin { private p: number[] = [] constructor() { // Initialize the permutation array for (let i = 0; i < 256; i++) { this.p[i] = Math.floor(Math.random() * 256) } // Duplicate the permutation array for (let i = 0; i < 256; i++) { this.p[i + 256] = this.p[i] } } noise(x: number, y: number, z: number): number { const X = Math.floor(x) & 255 const Y = Math.floor(y) & 255 const Z = Math.floor(z) & 255 x -= Math.floor(x) y -= Math.floor(y) z -= Math.floor(z) const u = this.fade(x) const v = this.fade(y) const w = this.fade(z) const A = this.p[X] + Y const AA = this.p[A] + Z const AB = this.p[A + 1] + Z const B = this.p[X + 1] + Y const BA = this.p[B] + Z const BB = this.p[B + 1] + Z return this.lerp( w, this.lerp( v, this.lerp(u, this.grad(this.p[AA], x, y, z), this.grad(this.p[BA], x - 1, y, z)), this.lerp(u, this.grad(this.p[AB], x, y - 1, z), this.grad(this.p[BB], x - 1, y - 1, z)), ), this.lerp( v, this.lerp(u, this.grad(this.p[AA + 1], x, y, z - 1), this.grad(this.p[BA + 1], x - 1, y, z - 1)), this.lerp(u, this.grad(this.p[AB + 1], x, y - 1, z - 1), this.grad(this.p[BB + 1], x - 1, y - 1, z - 1)), ), ) } private fade(t: number): number { return t * t * t * (t * (t * 6 - 15) + 10) } private lerp(t: number, a: number, b: number): number { return a + t * (b - a) } private grad(hash: number, x: number, y: number, z: number): number { const h = hash & 15 const u = h < 8 ? x : y const v = h < 4 ? y : h === 12 || h === 14 ? x : z return ((h & 1) === 0 ? u : -u) + ((h & 2) === 0 ? v : -v) } } [V0_FILE]typescriptreact:file="components/GothicCollisionSimulation.tsx" isEdit="true" "use client" import { useRef, useEffect, useState } from "react" import { Perlin } from "../utils/perlin" interface Object { x: number y: number vx: number vy: number radius: number color: string shape: "circle" | "cross" | "skull" | "bat" | "ghost" } interface Particle { x: number y: number vx: number vy: number radius: number color: string life: number } export default function GothicCollisionSimulation() { const canvasRef = useRef(null) const objectsRef = useRef([]) const particlesRef = useRef([]) const [canvasWidth, setCanvasWidth] = useState(typeof window !== "undefined" ? window.innerWidth : 1000) const [canvasHeight, setCanvasHeight] = useState(typeof window !== "undefined" ? window.innerHeight : 800) useEffect(() => { const canvas = canvasRef.current const ctx = canvas?.getContext("2d") if (!ctx) return canvas.width = canvasWidth canvas.height = canvasHeight const perlin = new Perlin() let time = 0 // Gothic color palette const gothicColors = [ "#4A0E4E", // Deep Purple "#81667A", // Dusty Rose "#2C1B47", // Dark Indigo "#505A5B", // Slate Gray "#1E1E24", // Almost Black "#8B0000", // Dark Red "#4B0082", // Indigo "#36013F", // Deep Violet ] // Function to create random objects const createObject = (x: number, y: number): Object => { const radius = Math.random() * 15 + 8 const speed = Math.random() * 3 + 2 const angle = Math.random() * Math.PI * 2 const vx = Math.cos(angle) * speed const vy = Math.sin(angle) * speed const color = gothicColors[Math.floor(Math.random() * gothicColors.length)] const shape = ["circle", "cross", "skull", "bat", "ghost"][Math.floor(Math.random() * 5)] return { x, y, vx, vy, radius, color, shape } } const createObjects = (numObjects: number) => { const newObjects: Object[] = [] for (let i = 0; i < numObjects; i++) { const x = Math.random() * canvasWidth const y = Math.random() * canvasHeight newObjects.push(createObject(x, y)) } return newObjects } objectsRef.current = createObjects(50) const drawObject = (obj: Object) => { ctx.fillStyle = obj.color ctx.strokeStyle = obj.color switch (obj.shape) { case "circle": ctx.beginPath() ctx.arc(obj.x, obj.y, obj.radius, 0, Math.PI * 2) ctx.fill() break case "cross": ctx.lineWidth = 3 ctx.beginPath() ctx.moveTo(obj.x - obj.radius, obj.y) ctx.lineTo(obj.x + obj.radius, obj.y) ctx.moveTo(obj.x, obj.y - obj.radius) ctx.lineTo(obj.x, obj.y + obj.radius) ctx.stroke() break case "skull": ctx.beginPath() ctx.arc(obj.x, obj.y, obj.radius, 0, Math.PI * 2) ctx.fill() ctx.fillStyle = "#000" ctx.beginPath() ctx.arc(obj.x - obj.radius / 3, obj.y - obj.radius / 4, obj.radius / 4, 0, Math.PI * 2) ctx.arc(obj.x + obj.radius / 3, obj.y - obj.radius / 4, obj.radius / 4, 0, Math.PI * 2) ctx.fill() ctx.beginPath() ctx.arc(obj.x, obj.y + obj.radius / 4, obj.radius / 3, 0, Math.PI) ctx.stroke() break case "bat": ctx.beginPath() ctx.moveTo(obj.x, obj.y) ctx.lineTo(obj.x - obj.radius, obj.y - obj.radius / 2) ctx.lineTo(obj.x - obj.radius / 2, obj.y - obj.radius) ctx.lineTo(obj.x, obj.y - obj.radius / 2) ctx.lineTo(obj.x + obj.radius / 2, obj.y - obj.radius) ctx.lineTo(obj.x + obj.radius, obj.y - obj.radius / 2) ctx.closePath() ctx.fill() break case "ghost": ctx.beginPath() ctx.arc(obj.x, obj.y - obj.radius / 2, obj.radius, Math.PI, 2 * Math.PI) ctx.lineTo(obj.x + obj.radius, obj.y + obj.radius / 2) ctx.lineTo(obj.x + obj.radius / 2, obj.y + obj.radius / 4) ctx.lineTo(obj.x, obj.y + obj.radius / 2) ctx.lineTo(obj.x - obj.radius / 2, obj.y + obj.radius / 4) ctx.lineTo(obj.x - obj.radius, obj.y + obj.radius / 2) ctx.closePath() ctx.fill() ctx.fillStyle = "#000" ctx.beginPath() ctx.arc(obj.x - obj.radius / 3, obj.y - obj.radius / 2, obj.radius / 5, 0, Math.PI * 2) ctx.arc(obj.x + obj.radius / 3, obj.y - obj.radius / 2, obj.radius / 5, 0, Math.PI * 2) ctx.fill() break } } const createExplosion = (x: number, y: number, color: string) => { const numParticles = 50 for (let i = 0; i < numParticles; i++) { const angle = Math.random() * Math.PI * 2 const speed = Math.random() * 5 + 2 particlesRef.current.push({ x, y, vx: Math.cos(angle) * speed, vy: Math.sin(angle) * speed, radius: Math.random() * 3 + 1, color, life: 60, }) } } const updateAndDrawParticles = () => { particlesRef.current = particlesRef.current.filter((particle) => { particle.x += particle.vx particle.y += particle.vy particle.life-- if (particle.life > 0) { ctx.beginPath() ctx.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2) ctx.fillStyle = particle.color ctx.fill() return true } return false }) } // Function to draw the fluid background const drawBackground = () => { const imageData = ctx.createImageData(canvasWidth, canvasHeight) const data = imageData.data for (let x = 0; x < canvasWidth; x++) { for (let y = 0; y < canvasHeight; y++) { // Adjust these values to change the smoke effect const scale = 0.003 const speed = 0.0005 const moveX = 0.0002 const moveY = 0.0001 const value = Math.abs( perlin.noise( (x + time * moveX * canvasWidth) * scale, (y + time * moveY * canvasHeight) * scale, time * speed, ), ) const index = (x + y * canvasWidth) * 4 // Dark black/gray/brown fluid style data[index] = Math.floor(value * 30) // Red data[index + 1] = Math.floor(value * 20) // Green data[index + 2] = Math.floor(value * 10) // Blue data[index + 3] = 255 // Alpha } } ctx.putImageData(imageData, 0, 0) } // Animation Loop let animationFrameId: number const update = () => { time += 1 // Increment time to make the background move // Draw the background drawBackground() // Apply a slight fade effect ctx.fillStyle = "rgba(0, 0, 0, 0.05)" ctx.fillRect(0, 0, canvasWidth, canvasHeight) objectsRef.current.forEach((obj, index) => { obj.x += obj.vx obj.y += obj.vy // Boundary collisions with bounce effect if (obj.x + obj.radius > canvasWidth || obj.x - obj.radius < 0) { obj.vx = -obj.vx * 1.1 obj.x = Math.max(obj.radius, Math.min(canvasWidth - obj.radius, obj.x)) } if (obj.y + obj.radius > canvasHeight || obj.y - obj.radius < 0) { obj.vy = -obj.vy * 1.1 obj.y = Math.max(obj.radius, Math.min(canvasHeight - obj.radius, obj.y)) } // Object-object collisions for (let j = index + 1; j < objectsRef.current.length; j++) { const otherObj = objectsRef.current[j] const dx = otherObj.x - obj.x const dy = otherObj.y - obj.y const distance = Math.sqrt(dx * dx + dy * dy) if (distance < obj.radius + otherObj.radius) { // Elastic collision const angle = Math.atan2(dy, dx) const sin = Math.sin(angle) const cos = Math.cos(angle) // Rotate velocities const vx1 = obj.vx * cos + obj.vy * sin const vy1 = obj.vy * cos - obj.vx * sin const vx2 = otherObj.vx * cos + otherObj.vy * sin const vy2 = otherObj.vy * cos - otherObj.vx * sin // Swap velocities obj.vx = vx2 * cos - vy1 * sin obj.vy = vy1 * cos + vx2 * sin otherObj.vx = vx1 * cos - vy2 * sin otherObj.vy = vy2 * cos + vx1 * sin // Separate objects const overlap = obj.radius + otherObj.radius - distance obj.x -= (overlap / 2) * Math.cos(angle) obj.y -= (overlap / 2) * Math.sin(angle) otherObj.x += (overlap / 2) * Math.cos(angle) otherObj.y += (overlap / 2) * Math.sin(angle) } } drawObject(obj) }) updateAndDrawParticles() animationFrameId = requestAnimationFrame(update) } update() // Start animation const handleClick = (event: MouseEvent) => { const rect = canvas.getBoundingClientRect() const x = event.clientX - rect.left const y = event.clientY - rect.top // Check if the click is on an existing object const clickedObjectIndex = objectsRef.current.findIndex((obj) => { const dx = obj.x - x const dy = obj.y - y return Math.sqrt(dx * dx + dy * dy) <= obj.radius }) if (clickedObjectIndex !== -1) { // Create explosion and remove the object const clickedObject = objectsRef.current[clickedObjectIndex] createExplosion(clickedObject.x, clickedObject.y, clickedObject.color) objectsRef.current.splice(clickedObjectIndex, 1) } else { // Create a new object at the click position objectsRef.current.push(createObject(x, y)) } } canvas.addEventListener("click", handleClick) const handleResize = () => { setCanvasWidth(window.innerWidth) setCanvasHeight(window.innerHeight) } window.addEventListener("resize", handleResize) return () => { cancelAnimationFrame(animationFrameId) window.removeEventListener("resize", handleResize) canvas.removeEventListener("click", handleClick) } }, [canvasWidth, canvasHeight]) return (

) }

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This