Stationary Wave Interactive using ChatGPT

I wanted to challenge ChatGPT to produce a complex interactive in order to prove that it is possible for teachers without much programming background to work with it as well.

This time, it was a lot more trial and error. The first major problem was when I thought the usual javascript library for graphs, Chart.JS would work. However, what I produced as a wonky wave in both directions that somehow attenuated as it travelled even though the equation of the waves did not have a decay factor.

The equation was generated by ChatGPT but looked like a normal sinusoidal function to me:

var y1 = Math.sin(2 * Math.PI * x / wavelength - 2 * Math.PI * time / period);

This is what the wonky graph looks like:

My suspicion is that Chart.JS makes use of points to form the curve so animating so many points at one go put too much demand on the app.

I then asked ChatGPT to suggest a different library. It then proceeded to make a new app with Plotly.JS, which works much better with moving graphs. This impressed me. I am learning so much with this new workflow. The final interactive graph can be found here:

I decided to add more functions after the first page was ready. While it took me about an hour to get the first page right with about 15 iterations mainly due to the wrong javascript library used, adding in more sliders to make the interactive more complex with variable wavelengths, periods and amplitudes took less than 10 minutes.

I shall just share the prompts that were given after I realised that plotly.js is the way to go.

Prompts for the index page:

1. Create a graph using plotly.js with a vertical axis for displacement of wave particles and a horizontal axis for distance moved by a wave. .
2. Draw the curve of an infinitely long transverse wave moving along the horizontal axis.
3. Create another infinitely long transverse wave of the same wavelength moving in the opposite direction along the same horizontal axis. Represent them in different colours.
4. Use a slider to change the period of oscillation of both waves and another slider to change the wavelength of the waves.
5. Each wave should have the same wavelength.
6. Revised prompt: Keep the vertical axis fixed in height, equal to the maximum possible amplitude of the third wave.
7. Revised prompt: Keeep the legend of the chart to the bottom so that the horizontal axis length is fixed at 640 pixels

Prompts for the second page:

1. Have separate sliders for the amplitudes, periods and wavelengths of wave 1 and wave 2.
2. Display the values of the sliders next to them.