Prompt del Juego de Arena de Rebote Cinético 3D

<!doctype html> <html lang="es"> <head> <meta charset="utf-8"> <title>Kinetic Bounce Arena</title> <style> html, 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 { display: block; border-radius: 12px; box-shadow: 0 0 40px rgba(0, 255, 255, 0.3), 0 0 80px rgba(255, 0, 255, 0.2); } #info { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); color: #0ff; text-shadow: 0 0 10px #0ff, 0 0 20px #f0f; font-size: 14px; letter-spacing: 2px; text-transform: uppercase; background: rgba(0,0,0,0.6); padding: 8px 20px; border-radius: 20px; border: 1px solid rgba(0,255,255,0.3); pointer-events: none; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.min.js"></script> </head> <body> <div id="info">Mueve el ratón para inclinar la arena</div> <script> // ====== CONFIGURACIÓN ====== const ARENA_RADIUS = 180; const ARENA_HEIGHT = 300; const MAIN_RADIUS = 22; const PARTICLE_COUNT = 25; const PARTICLE_MIN_R = 4; const PARTICLE_MAX_R = 10; const GRAVITY = 0.35; const DAMPING = 0.985; const FRICTION = 0.995; // ====== ESTADO GLOBAL ====== let mainSphere; let particles = []; let trails = []; let camAngleX = 0; let camAngleY = 0; let targetCamX = 0; let targetCamY = 0; let tiltX = 0; let tiltY = 0; let targetTiltX = 0; let targetTiltY = 0; // ====== CLASE ESFERA ====== class Sphere { constructor(x, y, z, r, isMain = false) { this.pos = createVector(x, y, z); this.vel = createVector(0, 0, 0); this.r = r; this.isMain = isMain; this.color = isMain ? color(0, 255, 255) : color(255, 0, 255); this.glow = isMain ? 200 : 100; } update() { // Gravedad this.vel.y += GRAVITY; // Inclinación del contenedor (fuerza) this.vel.x += tiltX * 0.5; this.vel.z += tiltY * 0.5; // Amortiguación this.vel.mult(FRICTION); // Integración this.pos.add(this.vel); // Colisión con paredes del cilindro this.collideCylinder(); // Colisión con suelo y techo if (this.pos.y - this.r < -ARENA_HEIGHT/2) { this.pos.y = -ARENA_HEIGHT/2 + this.r; this.vel.y *= -0.8; } if (this.pos.y + this.r > ARENA_HEIGHT/2) { this.pos.y = ARENA_HEIGHT/2 - this.r; this.vel.y *= -0.8; } } collideCylinder() { let distFromAxis = sqrt(this.pos.x * this.pos.x + this.pos.z * this.pos.z); let maxDist = ARENA_RADIUS - this.r; if (distFromAxis > maxDist) { // Normalizar let nx = this.pos.x / distFromAxis; let nz = this.pos.z / distFromAxis; this.pos.x = nx * maxDist; this.pos.z = nz * maxDist; // Reflejar velocidad let dot = this.vel.x * nx + this.vel.z * nz; this.vel.x -= 2 * dot * nx; this.vel.z -= 2 * dot * nz; this.vel.mult(0.85); } } draw() { push(); translate(this.pos.x, this.pos.y, this.pos.z); // Efecto glow if (this.isMain) { // Halo exterior push(); noFill(); stroke(0, 255, 255, 50); strokeWeight(4); sphere(this.r * 1.4); pop(); } // Material emisivo emissiveMaterial(red(this.color), green(this.color), blue(this.color), this.glow); specularMaterial(255); shininess(100); sphere(this.r); pop(); } } // ====== CLASE ESTELA ====== class Trail { constructor(pos, color) { this.pos = pos.copy(); this.color = color; this.life = 255; } update() { this.life -= 6; } draw() { if (this.life <= 0) return; push(); translate(this.pos.x, this.pos.y, this.pos.z); noStroke(); fill(red(this.color), green(this.color), blue(this.color), this.life); sphere(2); pop(); } } // ====== FUNCIONES PRINCIPALES ====== function setup() { createCanvas(600, 600, WEBGL); pixelDensity(1); // Esfera principal mainSphere = new Sphere(0, 0, 0, MAIN_RADIUS, true); mainSphere.vel = createVector(3, 5, 2); // Partículas for (let i = 0; i < PARTICLE_COUNT; i++) { let angle = random(TWO_PI); let radius = random(20, ARENA_RADIUS - 20); let x = cos(angle) * radius; let z = sin(angle) * radius; let y = random(-ARENA_HEIGHT/2 + 20, ARENA_HEIGHT/2 - 20); let r = random(PARTICLE_MIN_R, PARTICLE_MAX_R); let p = new Sphere(x, y, z, r); p.vel = createVector(random(-2, 2), random(-2, 2), random(-2, 2)); p.color = color(random(255), random(100, 255), random(200, 255)); particles.push(p); } } function draw() { background(10, 10, 30); // Control de inclinación con el ratón targetTiltX = (mouseX - width/2) / width * 2; targetTiltY = (mouseY - height/2) / height * 2; tiltX = lerp(tiltX, targetTiltX, 0.05); tiltY = lerp(tiltY, targetTiltY, 0.05); // Cámara automática con zoom targetCamX = sin(frameCount * 0.005) * 50; targetCamY = cos(frameCount * 0.003) * 30; camAngleX = lerp(camAngleX, targetCamX, 0.02); camAngleY = lerp(camAngleY, targetCamY, 0.02); // Configurar cámara let camDist = 500 + sin(frameCount * 0.01) * 30; camera(camAngleX, camAngleY, camDist, 0, 0, 0, 0, 1, 0); // Iluminación ambientLight(60, 60, 80); pointLight(255, 0, 255, -200, -200, 200); pointLight(0, 255, 255, 200, 200, -200); pointLight(100, 100, 255, 0, 300, 0); // Dibujar contenedor cilíndrico drawCylinder(); // Actualizar y dibujar esfera principal mainSphere.update(); mainSphere.draw(); // Colisiones esfera-principal con partículas for (let p of particles) { let d = p5.Vector.dist(mainSphere.pos, p.pos); let minDist = mainSphere.r + p.r; if (d < minDist && d > 0) { // Transferencia de momento let normal = p5.Vector.sub(p.pos, mainSphere.pos).normalize(); let relVel = p5.Vector.sub(mainSphere.vel, p.vel); let speed = relVel.dot(normal); if (speed > 0) { let impulse = normal.copy().mult(speed * 0.8); p.vel.add(impulse); mainSphere.vel.sub(impulse.copy().mult(0.5)); // Crear estela trails.push(new Trail(p.pos, p.color)); } } } // Actualizar y dibujar partículas for (let p of particles) { p.update(); p.draw(); // Colisiones entre partículas for (let other of particles) { if (p === other) continue; let d = p5.Vector.dist(p.pos, other.pos); let minDist = p.r + other.r; if (d < minDist && d > 0) { let normal = p5.Vector.sub(other.pos, p.pos).normalize(); let relVel = p5.Vector.sub(p.vel, other.vel); let speed = relVel.dot(normal); if (speed > 0) { let impulse = normal.copy().mult(speed * 0.5); p.vel.add(impulse); other.vel.sub(impulse); } } } } // Actualizar y dibujar estelas for (let i = trails.length - 1; i >= 0; i--) { trails[i].update(); trails[i].draw(); if (trails[i].life <= 0) { trails.splice(i, 1); } } // Limitar estelas if (trails.length > 200) { trails.splice(0, trails.length - 200); } } function drawCylinder() { push(); noFill(); stroke(0, 255, 255, 80); strokeWeight(2); // Paredes del cilindro (wireframe) let segments = 32; let topY = -ARENA_HEIGHT/2; let bottomY = ARENA_HEIGHT/2; // Círculos superior e inferior beginShape(LINES); for (let i = 0; i <= segments; i++) { let angle = (i / segments) * TWO_PI; let x = cos(angle) * ARENA_RADIUS; let z = sin(angle) * ARENA_RADIUS; vertex(x, topY, z); vertex(x, bottomY, z); } endShape(); // Anillos for (let ring = 0; ring < 3; ring++) { let y = lerp(topY, bottomY, ring / 2); beginShape(LINE_LOOP); for (let i = 0; i <= segments; i++) { let angle = (i / segments) * TWO_PI; let x = cos(angle) * ARENA_RADIUS; let z = sin(angle) * ARENA_RADIUS; vertex(x, y, z); } endShape(); } // Líneas verticales for (let i = 0; i < segments; i += 4) { let angle = (i / segments) * TWO_PI; let x = cos(angle) * ARENA_RADIUS; let z = sin(angle) * ARENA_RADIUS; line(x, topY, z, x, bottomY, z); } // Suelo y techo con rejilla stroke(255, 0, 255, 40); for (let i = -6; i <= 6; i++) { let x = i * 30; line(x, topY, -ARENA_RADIUS, x, topY, ARENA_RADIUS); line(-ARENA_RADIUS, topY, x, ARENA_RADIUS, topY, x); line(x, bottomY, -ARENA_RADIUS, x, bottomY, ARENA_RADIUS); line(-ARENA_RADIUS, bottomY, x, ARENA_RADIUS, bottomY, x); } pop(); } </script> </body> </html>