This is an interactive ripple tank simulation created as a single HTML file with embedded CSS and JavaScript, without any external libraries. It's designed to be highly customizable through URL parameters.
Let's write an interactive ripple tank simulation as a single file in html, css, and JavaScript. Let's not use any external libraries.
Let's use a dark theme, and let's take an optional URL parameter "hue" that we use to generate a color scheme. I want the page to be able to take any number of optional "header" and "subheader" parameters for displaying as text on the canvas. I want the canvas to be the full screen, with all controls and stats behind toggle-able overlays. I want lots of slick animations, and I want the action to begin as soon as the page loads. I also want it to work well on mobile. I want it to display the frame rate. I want all configuration to be available as optional URL parameters. If a configuration value is set in the URL, it should be updated in the URL when it changes on the page. I want the page to log all configuration options and their uses. I want an optional URL parameter "debug". When debug is set, the URL should be updated to show all the configuration values as they change. Debug should also enable additional console logging.
Let's have a help screen that includes a description of this project, a running changelog, this prompt, specs, and any context that would be useful for other agents modifying this file in the future.
The simulation uses a finite difference method to model wave propagation on a 2D grid. Two buffers are used to store the state of the water surface at the current and previous time steps. The rendering is done on a <canvas> element using `requestAnimationFrame` for smooth animations. All configurations are managed in a single JavaScript object, which is populated from the URL parameters on load and updated dynamically.