Welcome to my latest blog post! Here, I share exciting information about about my wave equation solver made in plain HTML and JS without any libraries. See this Link for the simulator: really simple, plain js Wave Equation Solver .
In this post, I’ll cover various aspects of the topic, including the Implementation.
Implementation
The Implementation is built around the use of the HTML canvas. First off all there is a invisble canvas 16 times smaller than the one you see later. This one does the heavy lifting while the visible canvas is later an upscaled version of the calculation canvas. Then the initial parameters are set and two arrays for the waveheight are created. One holds the new data which is being generated by the stored data of the other. To then start the process an initial disturbance is placed. Next step by step each pixel of the calculation canvas is updated through the old waveheight of its nearbourghs. On certain timepoints the pixels are renderd and the waveheight data is put through both canvases to be displayed. When the wave is finished every thing is reset and a new initial wave is placed. The cycle repeats.
Conclusion
In conclusion, the wave simulator is not complex. It was very fun to learn how to use the html canvas and how to optmise it!