Rotating Cube - (partially working)
Generated by Gemma 4 E4B QAT

How This JavaScript Code Works:

1. Setup: It initializes an HTML  element, which is the drawing surface.

2. Geometry Definition:
    * vertices An array defining the 8 corner points (in 3D space: X, Y, Z) of a cube centered around the origin.
    * faces An array defining how these 8 points are connected to form the 6 square faces.
3. Rotation Functions:
    * rotateX, rotateY, rotateZ: 
    These functions take a point and rotate it around a specific axis using basic trigonometry (sine and cosine).
4. Perspective Projection:
    * project: 
    This function is the core of making the cube look 3D. 
    It takes 3D coordinates and transforms them into 2D screen coordinates. 
    The calculation focalLength / (focalLength + z) 
    ensures that points with a larger positive Z (further away) are scaled down.
5. Drawing Function:
    * drawCube: 
    This function orchestrates the drawing process.
        * Rotation: 
            It iterates through every vertex and applies the current angleX, angleY, and angleZ using the rotation functions.
        * Drawing: 
            It then loops through the faces. 
            For each face, it takes the 4 rotated 3D vertices, 
            projects them onto the 2D screen, 
            and uses ctx.lineTo() and ctx.fill() to draw the resulting 2D shape (a quadrilateral).
 6. animate: 
    This is the game/animation loop. 
    It increments the rotation angles slightly every frame, calls drawCube(), 
    and uses requestAnimationFrame to tell the browser to call this function again before the next screen repaint, creating smooth, continuous motion.