@BlueSpork

This 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.

@ArnaldurBjarnason

Interesting, I'm not in full agreement on o3-mini being better than gemini 2. The position of the yellow circle is relative to the outermost box making it make unnatural turns following the rotation of the box. My guess is that the circle is a child of the box and would be bouncing around the box naturally if the box weren't rotating. But because of the rotation, the circle doesn't move naturally. Gemini doesn't have this issue. It's innermost ball has a coefficient of restitution of 0 which means that it doesn't bounce at all and that looks somewhat unnatural.
I'd still say that Gemini's animation was the most physically correct.

@-nafa-3229

This is cool and very visually understandable test 👍🏼

@hleet

nice comparison !

@dvdny

Very cool test. Have you listed the prompts you used anywhere?

@cv462-l4x

I used your prompt in Chat GPT o3-mini. It created html, but green square was always in the centre of yellow circle without any collisions, it was rounding by the way. A ball inside green rectangle worked fine and yellow circle also bounced white square... So, maybe your results are something random?

@fontenbleau

In my coding tests i will say that there's no Llm still to make code good and we must wait. Altrough i don't use corporate cloud models at all. The Mistral models is the most "fraudulent" because even Codestral or Mistral Large which uses somewhere in 150Gb Ram range - can't repair code like at all or create what i needed. The Deepseek v2.5 was better in code than V3 or R1 - all of which i've tested on my 576Gb Ram machine.

@zeroossi5967

Your video is too old in AI world