TEXT

3D Kinetic Ball Simulation

Contributed by loshu2000

Improved by Laravel Company · 2026-09-07

Act as an expert front-end game engineer specializing in highly optimized, single-file HTML5 implementations using p5.js.

Your task is to produce a complete, self-contained implementation of a 3D physics simulation game titled "Kinetic Bounce Arena."

OUTPUT REQUIREMENT:
Provide the entire game as a single index.html file. This file must contain all necessary HTML structure, inline <style> CSS, and the entire JavaScript logic, including the p5.js library loaded via CDN.

GAME SPECIFICATION: Kinetic Bounce Arena

1. Core Mechanics:

  • Environment: The game must feature a rotating 3D cylinder acting as the arena container.
  • Objects: A primary, glowing sphere (the projectile) and 25 smaller, physics-driven particles contained within the cylinder.
  • Player Interaction: The player must control the arena's rotation/tilt by manipulating the mouse position. This movement must directly influence the physics simulation, allowing the main sphere to bounce dynamically within the container.
  • Physics: Implement realistic 3D physics. This includes:
    • Accurate 3D bounding box collision detection for the sphere against the cylinder walls.
    • Momentum transfer: The main sphere must transfer kinetic energy upon collision, affecting the position and velocity of the internal particles.
    • Particle Trails: All 25 particles must leave behind smooth, fading, colorful motion trails to enhance the visual effect of motion.

2. Technical Constraints & Rendering:

  • Framework: Must exclusively use p5.js.
  • Rendering Mode: Utilize p5.js WebGL mode for 3D rendering.
  • Canvas Setup: The rendering canvas must be 600x600 pixels and perfectly centered on the page.
  • Camera/View: Implement a smooth, automatic camera zoom and scaling effect to keep the dynamic 3D scene visible and engaging.

3. Design Aesthetic (Art Direction):

  • Style: Dark Synthwave aesthetic.
  • Materials: Use emissive neon materials, deep dark backgrounds, and strong glow effects for all moving objects and particle trails.
  • Visuals: Particle vectors and the main sphere must glow brightly, emphasizing the high-energy, neon nature of the simulation.

Ensure the resulting code is clean, highly optimized, and ready to run immediately upon opening the HTML file. Focus on the seamless integration of complex 3D physics within the single-file structure.

Original prompt (before our improvements)

I want you to act as an expert front-end game engineer specializing in single-file HTML5 games. Your task is to produce a SINGLE FILE (index.html) implementation of a 3D Kinetic Bounce Arena. GAME SPEC: Title: Kinetic Bounce Arena Core mechanic: Launch a glowing sphere into a rotating 3D cylinder container filled with 25 smaller physics-driven particles. Goal: Keep the main sphere bouncing by adjusting the container's tilt via mouse movement. TECH REQUIREMENTS: Single file: <!doctype html> with inline <style> and <script> using p5.js (loaded via CDN). Rendering: WebGL mode in p5.js, 600x600 canvas centered on page. Physics: Implement 3D bounding box collision detection for the cylinder walls and sphere-to-particle momentum transfer. Particles must leave fading colorful motion trails. Design style: Dark synthwave aesthetic with emissive neon materials, glowing particle vectors, and smooth automatic camera zoom scaling.