3D Kinetic Bounce Arena Spiel-Prompt

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Kinetic Bounce Arena</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.min.js"></script> <style> body { margin: 0; padding: 0; background: #0a0a1a; display: flex; justify-content: center; align-items: center; min-height: 100vh; font-family: 'Courier New', monospace; overflow: hidden; } canvas { border: 2px solid #ff00ff; box-shadow: 0 0 30px rgba(255, 0, 255, 0.3), 0 0 60px rgba(0, 255, 255, 0.2); border-radius: 10px; } #info { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); color: #00ffff; font-size: 14px; text-shadow: 0 0 10px #00ffff; letter-spacing: 2px; background: rgba(0, 0, 0, 0.7); padding: 8px 20px; border-radius: 20px; border: 1px solid #00ffff; pointer-events: none; z-index: 10; } </style> </head> <body> <div id="info">MOVE MOUSE TO TILT ARENA</div> <script> // Global variables let mainSphere; let particles = []; let cylinderRadius = 200; let cylinderHeight = 300; let tiltX = 0; let tiltY = 0; let targetTiltX = 0; let targetTiltY = 0; let camZoom = 1; let trailPoints = []; const PARTICLE_COUNT = 25; const MAX_TRAIL = 30; // Particle class class Particle { constructor() { this.reset(); this.trail = []; } reset() { // Random position within cylinder bounds const angle = random(TWO_PI); const radius = random(0, cylinderRadius * 0.8); this.pos = createVector( cos(angle) * radius, random(-cylinderHeight * 0.4, cylinderHeight * 0.4), sin(angle) * radius ); this.vel = p5.Vector.random3D().mult(random(2, 6)); this.size = random(3, 8); this.color = color( random(100, 255), random(100, 255), random(200, 255), 200 ); this.trail = []; } update() { // Apply gravity based on tilt this.vel.x += tiltY * 0.1; this.vel.z += tiltX * 0.1; this.vel.y += 0.05; // slight upward drift // Update position this.pos.add(this.vel); // Cylinder wall collision const horizontalDist = sqrt(this.pos.x * this.pos.x + this.pos.z * this.pos.z); if (horizontalDist > cylinderRadius - this.size) { // Normalize position to get normal const normal = createVector(this.pos.x, 0, this.pos.z).normalize(); // Reflect velocity const dot = this.vel.dot(normal); this.vel.sub(normal.mult(2 * dot)); // Push back inside this.pos.x = normal.x * (cylinderRadius - this.size); this.pos.z = normal.z * (cylinderRadius - this.size); // Add bounce energy this.vel.mult(0.95); } // Top and bottom collision if (this.pos.y > cylinderHeight / 2 - this.size) { this.pos.y = cylinderHeight / 2 - this.size; this.vel.y *= -0.9; } if (this.pos.y < -cylinderHeight / 2 + this.size) { this.pos.y = -cylinderHeight / 2 + this.size; this.vel.y *= -0.9; } // Add trail this.trail.push(this.pos.copy()); if (this.trail.length > MAX_TRAIL) { this.trail.shift(); } } draw() { // Draw trail for (let i = 0; i < this.trail.length - 1; i++) { const alpha = map(i, 0, this.trail.length, 0, 150); const trailColor = color( red(this.color), green(this.color), blue(this.color), alpha ); stroke(trailColor); strokeWeight(map(i, 0, this.trail.length, 1, 3)); line( this.trail[i].x, this.trail[i].y, this.trail[i].z, this.trail[i + 1].x, this.trail[i + 1].y, this.trail[i + 1].z ); } // Draw particle noStroke(); fill(this.color); push(); translate(this.pos.x, this.pos.y, this.pos.z); sphere(this.size); pop(); // Glow effect push(); translate(this.pos.x, this.pos.y, this.pos.z); fill(red(this.color), green(this.color), blue(this.color), 30); sphere(this.size * 2); pop(); } } // Main sphere class class MainSphere { constructor() { this.pos = createVector(0, 0, 0); this.vel = createVector(5, 5, 5); this.size = 25; this.color = color(255, 0, 255, 255); } update() { // Apply gravity based on tilt this.vel.x += tiltY * 0.15; this.vel.z += tiltX * 0.15; this.vel.y += 0.08; // Update position this.pos.add(this.vel); // Cylinder wall collision const horizontalDist = sqrt(this.pos.x * this.pos.x + this.pos.z * this.pos.z); if (horizontalDist > cylinderRadius - this.size) { const normal = createVector(this.pos.x, 0, this.pos.z).normalize(); const dot = this.vel.dot(normal); this.vel.sub(normal.mult(2 * dot)); this.pos.x = normal.x * (cylinderRadius - this.size); this.pos.z = normal.z * (cylinderRadius - this.size); this.vel.mult(0.98); } // Top and bottom collision if (this.pos.y > cylinderHeight / 2 - this.size) { this.pos.y = cylinderHeight / 2 - this.size; this.vel.y *= -0.95; } if (this.pos.y < -cylinderHeight / 2 + this.size) { this.pos.y = -cylinderHeight / 2 + this.size; this.vel.y *= -0.95; } // Particle collision for (let p of particles) { const dist = p5.Vector.dist(this.pos, p.pos); if (dist < this.size + p.size) { // Calculate collision normal const normal = p5.Vector.sub(p.pos, this.pos).normalize(); // Transfer momentum const relativeVel = p5.Vector.sub(this.vel, p.vel); const speed = relativeVel.dot(normal); if (speed > 0) { const impulse = normal.mult(speed * 0.8); this.vel.sub(impulse); p.vel.add(impulse); // Add extra bounce to main sphere this.vel.add(normal.mult(2)); } } } // Add trail trailPoints.push(this.pos.copy()); if (trailPoints.length > MAX_TRAIL) { trailPoints.shift(); } } draw() { // Draw trail for (let i = 0; i < trailPoints.length - 1; i++) { const alpha = map(i, 0, trailPoints.length, 0, 200); stroke(255, 0, 255, alpha); strokeWeight(map(i, 0, trailPoints.length, 2, 5)); line( trailPoints[i].x, trailPoints[i].y, trailPoints[i].z, trailPoints[i + 1].x, trailPoints[i + 1].y, trailPoints[i + 1].z ); } // Draw main sphere noStroke(); fill(this.color); push(); translate(this.pos.x, this.pos.y, this.pos.z); sphere(this.size); pop(); // Glow effect push(); translate(this.pos.x, this.pos.y, this.pos.z); fill(255, 0, 255, 40); sphere(this.size * 2.5); pop(); } } // Setup function function setup() { createCanvas(600, 600, WEBGL); pixelDensity(1); // Initialize main sphere mainSphere = new MainSphere(); // Initialize particles for (let i = 0; i < PARTICLE_COUNT; i++) { particles.push(new Particle()); } // Set initial camera camera(0, 0, 500, 0, 0, 0, 0, 1, 0); } // Draw function function draw() { // Clear with dark background background(10, 10, 30); // Update tilt based on mouse targetTiltX = map(mouseX, 0, width, -0.5, 0.5); targetTiltY = map(mouseY, 0, height, -0.5, 0.5); // Smooth tilt tiltX = lerp(tiltX, targetTiltX, 0.05); tiltY = lerp(tiltY, targetTiltY, 0.05); // Camera zoom based on main sphere position const distFromCenter = mainSphere.pos.mag(); camZoom = map(distFromCenter, 0, cylinderRadius, 1, 0.8); // Apply transformations push(); // Apply tilt rotation rotateX(tiltX); rotateZ(tiltY); // Apply camera zoom scale(camZoom); // Draw cylinder container drawCylinder(); // Draw particles for (let p of particles) { p.update(); p.draw(); } // Draw main sphere mainSphere.update(); mainSphere.draw(); pop(); // Draw grid floor drawGrid(); } // Draw cylinder container function drawCylinder() { push(); // Wireframe cylinder noFill(); stroke(0, 255, 255, 100); strokeWeight(1); // Draw cylinder walls const segments = 32; const topY = cylinderHeight / 2; const bottomY = -cylinderHeight / 2; // Vertical lines for (let i = 0; i < segments; i++) { const angle = (TWO_PI / segments) * i; const x = cos(angle) * cylinderRadius; const z = sin(angle) * cylinderRadius; line(x, topY, z, x, bottomY, z); } // Horizontal circles for (let y = bottomY; y <= topY; y += cylinderHeight / 8) { beginShape(); for (let i = 0; i <= segments; i++) { const angle = (TWO_PI / segments) * i; const x = cos(angle) * cylinderRadius; const z = sin(angle) * cylinderRadius; vertex(x, y, z); } endShape(CLOSE); } // Top and bottom rings stroke(255, 0, 255, 150); strokeWeight(2); beginShape(); for (let i = 0; i <= segments; i++) { const angle = (TWO_PI / segments) * i; const x = cos(angle) * cylinderRadius; const z = sin(angle) * cylinderRadius; vertex(x, topY, z); } endShape(CLOSE); beginShape(); for (let i = 0; i <= segments; i++) { const angle = (TWO_PI / segments) * i; const x = cos(angle) * cylinderRadius; const z = sin(angle) * cylinderRadius; vertex(x, bottomY, z); } endShape(CLOSE); pop(); } // Draw grid floor function drawGrid() { push(); translate(0, 250, 0); rotateX(HALF_PI); // Grid lines stroke(0, 255, 255, 30); strokeWeight(1); for (let i = -300; i <= 300; i += 50) { line(i, -300, i, 300); line(-300, i, 300, i); } pop(); } // Window resize handler function windowResized() { resizeCanvas(600, 600); } </script> </body> </html>