मल्टी-बॉल हेप्टागन फिजिक्स सिमुलेशन

यहाँ HTML, CSS, और JavaScript है जो 20 गेंदों को घूमते हुए सप्तभुज (heptagon) के अंदर उछलते हुए दिखाता है। प्रत्येक गेंद का रंग अद्वितीय है, उस पर नंबर लिखा है, गुरुत्वाकर्षण लागू है, और दीवारों से टकराव का पता लगाया जाता है। सभी कोड एक ही फाइल में हैं। ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bouncing Balls in Spinning Heptagon</title> <style> body { margin: 0; overflow: hidden; background-color: #1a1a2e; display: flex; justify-content: center; align-items: center; height: 100vh; font-family: Arial, sans-serif; } canvas { display: block; background-color: #16213e; border-radius: 10px; box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); } </style> </head> <body> <canvas id="canvas" width="800" height="800"></canvas> <script> const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const width = canvas.width; const height = canvas.height; // Heptagon properties const centerX = width / 2; const centerY = height / 2; const radius = 300; let angleOffset = 0; const rotationSpeed = 0.005; // radians per frame // Ball properties const ballCount = 20; const gravity = 0.2; const friction = 0.99; const bounce = 0.7; // Generate unique colors function generateColor(index) { const hue = (index * 360 / ballCount) % 360; return `hsl(${hue}, 70%, 60%)`; } // Ball class class Ball { constructor(index) { this.index = index; this.radius = 15; this.x = centerX + (Math.random() - 0.5) * 200; this.y = centerY + (Math.random() - 0.5) * 200; this.vx = (Math.random() - 0.5) * 8; this.vy = (Math.random() - 0.5) * 8; this.color = generateColor(index); this.label = index + 1; } update() { // Apply gravity this.vy += gravity; // Apply friction this.vx *= friction; this.vy *= friction; // Update position this.x += this.vx; this.y += this.vy; // Collision with heptagon walls this.collideWithWalls(); } collideWithWalls() { // Get current heptagon vertices const vertices = getHeptagonVertices(); // Check collision with each edge for (let i = 0; i < vertices.length; i++) { const v1 = vertices[i]; const v2 = vertices[(i + 1) % vertices.length]; // Find closest point on edge to ball center const closest = closestPointOnSegment(this.x, this.y, v1.x, v1.y, v2.x, v2.y); const dx = this.x - closest.x; const dy = this.y - closest.y; const dist = Math.sqrt(dx * dx + dy * dy); if (dist < this.radius) { // Calculate normal (from edge to ball center) let nx = dx / dist; let ny = dy / dist; // If dist is 0, use edge normal if (dist === 0) { const edgeX = v2.x - v1.x; const edgeY = v2.y - v1.y; const len = Math.sqrt(edgeX * edgeX + edgeY * edgeY); nx = -edgeY / len; ny = edgeX / len; // Ensure normal points toward ball const dot = nx * (this.x - v1.x) + ny * (this.y - v1.y); if (dot < 0) { nx = -nx; ny = -ny; } } // Push ball out of wall this.x = closest.x + nx * this.radius; this.y = closest.y + ny * this.radius; // Reflect velocity const dot = this.vx * nx + this.vy * ny; this.vx = this.vx - 2 * dot * nx; this.vy = this.vy - 2 * dot * ny; // Apply bounce damping this.vx *= bounce; this.vy *= bounce; } } } draw() { // Draw ball ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2); ctx.fillStyle = this.color; ctx.fill(); ctx.strokeStyle = 'rgba(0,0,0,0.3)'; ctx.lineWidth = 2; ctx.stroke(); // Draw number label ctx.fillStyle = 'white'; ctx.font = 'bold 12px Arial'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(this.label, this.x, this.y); } } // Helper functions function getHeptagonVertices() { const vertices = []; const sides = 7; for (let i = 0; i < sides; i++) { const angle = angleOffset + (i * 2 * Math.PI / sides); const x = centerX + radius * Math.cos(angle); const y = centerY + radius * Math.sin(angle); vertices.push({ x, y }); } return vertices; } function closestPointOnSegment(px, py, x1, y1, x2, y2) { const dx = x2 - x1; const dy = y2 - y1; const lenSq = dx * dx + dy * dy; let t = ((px - x1) * dx + (py - y1) * dy) / lenSq; t = Math.max(0, Math.min(1, t)); return { x: x1 + t * dx, y: y1 + t * dy }; } // Create balls const balls = []; for (let i = 0; i < ballCount; i++) { balls.push(new Ball(i)); } // Animation loop function animate() { ctx.clearRect(0, 0, width, height); // Update rotation angleOffset += rotationSpeed; // Draw heptagon const vertices = getHeptagonVertices(); ctx.beginPath(); ctx.moveTo(vertices[0].x, vertices[0].y); for (let i = 1; i < vertices.length; i++) { ctx.lineTo(vertices[i].x, vertices[i].y); } ctx.closePath(); ctx.strokeStyle = 'rgba(255, 255, 255, 0.8)'; ctx.lineWidth = 3; ctx.stroke(); // Update and draw balls balls.forEach(ball => { ball.update(); ball.draw(); }); requestAnimationFrame(animate); } animate(); </script> </body> </html> ``` ### मुख्य विशेषताएं: 1. **20 गेंदें**: हर गेंद का अपना नंबर (1 से 20) और अद्वितीय रंग है। 2. **घूमता हुआ सप्तभुज**: सात भुजाओं वाला आकार लगातार घूमता रहता है। 3. **गुरुत्वाकर्षण**: सभी गेंदों पर नीचे की ओर बल लगता है। 4. **टकराव का पता लगाना**: गेंदें सप्तभुज की दीवारों से टकराकर उछलती हैं। 5. **घर्षण और उछाल**: यथार्थवादी गति के लिए घर्षण और उछाल गुणांक शामिल हैं। आप इस कोड को किसी भी HTML फाइल में सेव करके ब्राउज़र में खोल सकते हैं और गेंदों को उछलते हुए देख सकते हैं।