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

) } [V0_FILE]css:file="app/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; } [V0_FILE]typescriptreact:file="app/layout.tsx" isFixed="true" isQuickEdit="true" isMerged="true" import "./globals.css" import type { Metadata } from "next" import { Inter } from "next/font/google" import type React from "react" // Import React const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Physics Demo", description: "Interactive physics simulation using Matter.js", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/FluidBackground.tsx" isEdit="true" isMerged="true" import type React from "react" import { useRef, useEffect } from "react" import * as THREE from "three" const vertexShader = ` varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } ` const fragmentShader = ` uniform float uTime; uniform vec2 uResolution; uniform vec3 uInteractionPoints[20]; varying vec2 vUv; #define NUM_OCTAVES 5 float rand(vec2 n) { return fract(sin(dot(n, vec2(12.9898, 4.1414))) * 43758.5453); } float noise(vec2 p) { vec2 ip = floor(p); vec2 u = fract(p); u = u*u*(3.0-2.0*u); float res = mix( mix(rand(ip), rand(ip+vec2(1.0,0.0)), u.x), mix(rand(ip+vec2(0.0,1.0)), rand(ip+vec2(1.0,1.0)), u.x), u.y); return res*res; } float fbm(vec2 x) { float v = 0.0; float a = 0.5; vec2 shift = vec2(100); mat2 rot = mat2(cos(0.5), sin(0.5), -sin(0.5), cos(0.50)); for (int i = 0; i < NUM_OCTAVES; ++i) { v += a * noise(x); x = rot * x * 2.0 + shift; a *= 0.5; } return v; } void main() { vec2 uv = vUv; vec2 pos = uv * 2.0 - 1.0; pos.x *= uResolution.x / uResolution.y; float f = 0.0; for (int i = 0; i < 20; i++) { vec2 objPos = uInteractionPoints[i].xy; float dist = length(pos - objPos); f += 0.01 / (dist * dist + 0.01); } vec2 q = vec2(0); q.x = fbm(pos + 0.00 * uTime); q.y = fbm(pos + vec2(1.0)); vec2 r = vec2(0); r.x = fbm(pos + 1.0 * q + vec2(1.7, 9.2) + 0.15 * uTime); r.y = fbm(pos + 1.0 * q + vec2(8.3, 2.8) + 0.126 * uTime); float noise = fbm(pos + r); vec3 color = mix( vec3(0.101961, 0.619608, 0.666667), vec3(0.666667, 0.666667, 0.498039), clamp((f + noise) * 0.5, 0.0, 1.0) ); color = mix( color, vec3(0, 0, 0.164706), clamp(length(q), 0.0, 1.0) ); color = mix( color, vec3(0.666667, 1, 1), clamp(length(r.x), 0.0, 1.0) ); gl_FragColor = vec4((f + noise + 0.1) * color, 1.0); } ` interface FluidBackgroundProps { interactionPoints: { x: number; y: number }[] } export const FluidBackground: React.FC = ({ interactionPoints }) => { const containerRef = useRef(null) const sceneRef = useRef(null) const cameraRef = useRef(null) const rendererRef = useRef(null) const materialRef = useRef(null) useEffect(() => { if (!containerRef.current) return const width = window.innerWidth const height = window.innerHeight const scene = new THREE.Scene() sceneRef.current = scene const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1) cameraRef.current = camera const renderer = new THREE.WebGLRenderer({ alpha: true }) renderer.setSize(width, height) containerRef.current.appendChild(renderer.domElement) rendererRef.current = renderer const geometry = new THREE.PlaneGeometry(2, 2) const material = new THREE.ShaderMaterial({ vertexShader, fragmentShader, uniforms: { uTime: { value: 0 }, uResolution: { value: new THREE.Vector2(width, height) }, uInteractionPoints: { value: new Array(20).fill(new THREE.Vector3()) }, }, }) materialRef.current = material const mesh = new THREE.Mesh(geometry, material) scene.add(mesh) const animate = () => { if (materialRef.current) { materialRef.current.uniforms.uTime.value += 0.01 } if (rendererRef.current && sceneRef.current && cameraRef.current) { rendererRef.current.render(sceneRef.current, cameraRef.current) } requestAnimationFrame(animate) } animate() return () => { if (rendererRef.current && containerRef.current) { containerRef.current.removeChild(rendererRef.current.domElement) } } }, []) useEffect(() => { if (materialRef.current) { const positions = interactionPoints.map( (point) => new THREE.Vector3((point.x / window.innerWidth) * 2 - 1, -((point.y / window.innerHeight) * 2 - 1), 0), ) materialRef.current.uniforms.uInteractionPoints.value = [ ...positions, ...new Array(20 - positions.length).fill(new THREE.Vector3()), ] } }, [interactionPoints]) return

} [V0_FILE]typescriptreact:file="components/PhysicsDemo.tsx" isEdit="true" isQuickEdit="true" "use client" import { useEffect, useRef, useState } from "react" import Matter from "matter-js" import { FluidBackground } from "./FluidBackground" const MAX_INTERACTION_POINTS = 20 const PhysicsDemo = () => { const sceneRef = useRef(null) const engineRef = useRef(Matter.Engine.create()) const runnerRef = useRef(Matter.Runner.create()) const renderRef = useRef(null) const objectsRef = useRef([]) const [interactionPoints, setInteractionPoints] = useState<{ x: number; y: number }[]>([]) useEffect(() => { const engine = engineRef.current const runner = runnerRef.current const width = window.innerWidth const height = window.innerHeight const render = Matter.Render.create({ element: sceneRef.current!, engine: engine, options: { width, height, wireframes: false, background: "transparent", }, }) renderRef.current = render const boundaries = [ Matter.Bodies.rectangle(width / 2, height + 50, width, 100, { isStatic: true }), Matter.Bodies.rectangle(width / 2, -50, width, 100, { isStatic: true }), Matter.Bodies.rectangle(-50, height / 2, 100, height, { isStatic: true }), Matter.Bodies.rectangle(width + 50, height / 2, 100, height, { isStatic: true }), ] for (let i = 0; i < 20; i++) { const object = createObject(Math.random() * width, Math.random() * height) objectsRef.current.push(object) } Matter.Composite.add(engine.world, [...boundaries, ...objectsRef.current]) const mouse = Matter.Mouse.create(render.canvas) const mouseConstraint = Matter.MouseConstraint.create(engine, { mouse: mouse, constraint: { stiffness: 0.2, render: { visible: false }, }, }) Matter.Composite.add(engine.world, mouseConstraint) render.mouse = mouse const addObjectInterval = setInterval(() => { const newObject = createObject(Math.random() * width, -50) Matter.Composite.add(engine.world, newObject) objectsRef.current.push(newObject) objectsRef.current = objectsRef.current.filter((object) => { if (object.position.y > height + 100) { Matter.Composite.remove(engine.world, object) return false } return true }) }, 2000) Matter.Events.on(engine, "beforeUpdate", () => { objectsRef.current.forEach((body) => { Matter.Body.applyForce(body, body.position, { x: (Math.random() - 0.5) * 0.001, y: (Math.random() - 0.5) * 0.001, }) }) updateInteractionPoints() }) render.canvas.addEventListener("click", (event) => { const mousePosition = mouse.position const clickedBody = Matter.Query.point(objectsRef.current, mousePosition)[0] if (!clickedBody) { const newObject = createObject(mousePosition.x, mousePosition.y) Matter.Composite.add(engine.world, newObject) objectsRef.current.push(newObject) } }) Matter.Runner.run(runner, engine) Matter.Render.run(render) return () => { clearInterval(addObjectInterval) Matter.Render.stop(render) Matter.Runner.stop(runner) Matter.Engine.clear(engine) render.canvas.remove() render.textures = {} } }, []) const updateInteractionPoints = () => { const newPoints = objectsRef.current .sort((a, b) => b.speed - a.speed) .slice(0, MAX_INTERACTION_POINTS) .map((body) => ({ x: body.position.x, y: body.position.y })) setInteractionPoints(newPoints) } function getRandomColor() { const colors = [ "#2C2C2C", // Deep Gray "#3A3A3A", // Charcoal Gray "#4A4A4A", // Dark Gray "#1E1E1E", // Almost Black "#3E2723", // Dark Brown "#4E342E", // Brown "#5D4037", // Medium Brown "#6D4C41", // Light Brown ] return colors[Math.floor(Math.random() * colors.length)] } function createObject(x: number, y: number) { const size = Math.random() * 30 + 20 const shapeType = Math.random() > 0.5 ? "circle" : "rectangle" if (shapeType === "circle") { return Matter.Bodies.circle(x, y, size, { restitution: 0.9, friction: 0.005, render: { fillStyle: getRandomColor(), }, }) } else { return Matter.Bodies.rectangle(x, y, size * 2, size, { restitution: 0.9, friction: 0.005, render: { fillStyle: getRandomColor(), }, }) } } return (

) } export default PhysicsDemo

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This