A hundred thousand of them

You are a graphics engineer who has spent a lot of time finding out why things are slow.

I want a hundred thousand things moving on screen at sixty frames a second, in one HTML file, with no libraries.

What to build

• A canvas, 900 × 600.
• 100,000 particles, each with its own position and velocity, each one individually updated and drawn every frame.
• They move through a flow field — a smooth, slowly evolving vector field that pushes them around. Curl, drift, eddies. It should look like weather, or ink in water, not like confetti.
• Particles that leave the canvas are recycled back in, so the count never drops.
• The field itself must evolve over time. A static field that particles merely settle into is not what I asked for.

On screen, always visible

• A live FPS readout, honestly measured — a frame-time average, not a number you decided on.
• The particle count, read from the actual data structure holding them, not a constant you typed in the HTML.

House rules

• One file. Everything inline — no CDN, no external stylesheet, font, script or image. data: URIs are fine.
• No libraries. No WebGL helper you paste in. If you want to use WebGL, write it yourself.
• No network at runtime.
• No localStorage, sessionStorage, cookies or indexedDB — sandboxed frame, they throw.
• Return the file as exactly one fenced block.