Heat capacity and an AI-generated simulation on thermal transfer

This Javascript app will be used in the coming weeks for my IP4 class to demonstrate the effect of heat capacity on the equilibrium temperature of two bodies in thermal contact. When two objects with different temperatures come into contact, heat flows from the hotter object to the cooler one until thermal equilibrium is reached. The heat capacity, which is the amount of heat required to change the temperature of an object per unit change in temperature, plays a crucial role in determining the final equilibrium temperature. Objects with higher heat capacities can absorb more heat without a significant change in temperature, while those with lower heat capacities experience larger temperature changes for the same amount of heat absorbed or released. Thus, the final equilibrium temperature is closer to the initial temperature of the object with the higher heat capacity.

For example, consider a small piece of metal and a large body of water initially at different temperatures. When placed in thermal contact, the metal, with its lower heat capacity, will quickly change temperature as it transfers heat to or absorbs heat from the water. Meanwhile, the water, with its much higher heat capacity, will undergo a relatively smaller temperature change. As a result, the equilibrium temperature will be much closer to the initial temperature of the water.

Prompts given to ChatGPT 4o to create this simulation:

1. Make a javascript simulation showing transfer of heat energy from one body to another. Put all the codes in one file.
2. Show it in a canvas with a height of 100 px and width of 580 px. The first body is hot at first, represented by a red colour body. The second body is cold, represented by blue. The colour of the body should be a function of the temperature. If the temperatures of the two bodies are the same, they should have the same temperature.
3. Use a bold arrow to show the direction of heat transfer.
4. Using plotly.js, create a graph below the canvas that shows the variation of temperature for each body (using red and blue lines) with time.
5. Initialise the graph such that the time axis starts at zero and ends at 5 seconds.
6. Create sliders that can change the heat capacity of each object with a range from 20 to 200 J per degree celsius.