
LLM Comparison/Test: Complex Coding Animation Challenge
I tested 7 LLMs (Grok 3, Mistral AI's Le Chat, Qwen2.5-Max, Deepseek R1, Claude 3.5 Sonnet, Gemini 2.0 Pro, and OpenAI's o3-mini) with a complex coding animation challenge involving nested shapes, collision detection, and a dynamic canvas.
Here is the prompt I used:
This request is for creating a complex nested animation system with proper collision detection, placed in the center of the screen.
Create a single HTML file with JavaScript that implements an animation on a black background. The animation will have a containment hierarchy: The ball is contained within the inner square, the inner square is contained within the middle circle, and the middle circle is contained within the outer square. All elements should be initialized near the center of the canvas.
Animation Elements:
Outer Square: A light blue-bordered square (500x500px) that rotates clockwise.
The canvas size must be large enough to fully contain this square at its maximum diagonal span.
Canvas: The canvas should dynamically resize to fit the rotating outer square’s maximum extent.
Middle Circle: A orange-bordered circle (diameter: 250px) that bounces inside the outer square. The circle must remain fully contained within the outer square at all times, with proper realistic collision detection.
Inner Square: A green-bordered square (150x150px) that rotates counterclockwise. The inner square must always stay inside the middle circle without exceeding its boundary.
Ball: A red ball (radius: 10px) with a random initial velocity. The ball must stay within the inner square at all times, realistically bouncing off its sides upon collision.
Requirements:
The animation should run smoothly on a black background.
Implement accurate collision detection to ensure:
The ball remains within the inner square and properly bounces off its sides without visibly clipping through the edges.
The middle circle stays within the outer square, ensuring it never moves beyond the outer boundary.
Use efficient JavaScript techniques for rendering and physics to maintain high performance.
コメント