This note provides an interactive, visual simulation of the 1D Heat Equation (Diffusion Equation) using the finite difference method. The simulation allows you to draw initial temperature profiles and observe how heat diffuses, smooths out, and reaches equilibrium under different boundary conditions.

The heat equation is solved using an explicit finite difference scheme, which discretizes the rod into 200 points and updates the temperature at each point based on its neighbors. Unlike the wave equation, the heat equation is parabolic (first order in time), meaning heat diffuses rather than propagates. The simulation uses a stability parameter r = α·dt/dx² ≤ 0.5 to ensure numerical stability. The time step is automatically adjusted when you change the thermal diffusivity α.

You can interact with the simulation in two modes: Drawing mode (initial state) and Simulating mode. In Drawing mode, click and drag on the top half of the canvas to draw the initial temperature profile. The drawn temperature distribution is automatically smoothed using a 3-point moving average to prevent high-frequency numerical noise. Once you click Play, the temperature diffuses according to the heat equation, and you can observe how heat spreads, smooths out sharp gradients, and approaches equilibrium.

The simulation supports three different boundary conditions that can be changed in real-time: Fixed Temperature (Dirichlet) boundaries hold the ends at constant temperature (typically 0), Insulated (Neumann) boundaries prevent heat flow at the ends, and Periodic boundaries wrap the rod into a ring. You can also adjust the thermal diffusivity (α) to control how fast heat spreads, and the simulation speed to observe the diffusion at different rates.

NOTE : The simulation uses the finite difference method with explicit time stepping. The stability parameter r = α·dt/dx² is kept at 0.2, which satisfies the strict stability condition r ≤ 0.5 for the parabolic heat equation. The temperature is visualized with a neon orange line graph in the top half and a color gradient heat map in the bottom half, where blue represents cool temperatures and red/white represents hot temperatures.

Math behind the Simulation

The 1D heat equation (diffusion equation) describes how temperature diffuses through a material:

∂u/∂t = α · ∂²u/∂x²

where u(x,t) is the temperature at position x and time t, and α is the thermal diffusivity. The simulation uses the finite difference method to discretize this equation. The rod is divided into N = 200 points with spacing dx = L/(N-1), and time is discretized with step dt.

The explicit finite difference scheme updates each interior point using:

u_iⁿ⁺¹ = u_iⁿ + r · (u_i+1ⁿ - 2u_iⁿ + u_i-1ⁿ)

where r = α·dt/dx² is the stability parameter (set to 0.2 for stability), and superscripts denote time steps. This scheme requires r ≤ 0.5 for numerical stability (stricter than the wave equation). Unlike the wave equation, the heat equation only needs the current state to predict the next state (no u_prev array). Boundary conditions are applied after updating interior points to enforce the desired behavior at the rod ends.

 

Usage Example

Follow these steps to explore heat diffusion and temperature evolution:

1. Initial State: When you first load the simulation, you're in Drawing mode. The canvas shows a line graph in the top half and a color gradient heat map in the bottom half. Both are at zero temperature (blue/black).
2. Draw or Select a Temperature Profile:
   • To draw custom: In "User Defined" mode, click and drag on the top half of the canvas to set initial temperatures. Higher positions = higher temperature (red/white), lower positions = lower temperature (blue/black).
   • To use predefined: Select a temperature profile (Gaussian Pulse, Step Function, Hot Center, etc.) from the dropdown. The profile appears immediately in both the line graph and heat map.
3. Start the Simulation: Click the "Play" button to start heat diffusion. Watch how the temperature evolves:
   • In the line graph: The temperature profile smooths out and spreads
   • In the heat map: Colors change from hot (red/white) to cool (blue/black) as heat diffuses
   • Sharp temperature gradients instantly become smooth curves due to diffusion
4. Observe Boundary Effects: Try different boundary conditions and watch how they affect the final equilibrium:
   • Fixed Temperature: Heat flows toward the cold boundaries (temperature = 0). Eventually, all temperature approaches zero. This simulates a rod connected to ice baths at both ends.
   • Insulated: No heat flows at the boundaries. The total heat is conserved, and eventually the temperature becomes uniform (equal to the average initial temperature). This simulates perfectly insulated ends.
   • Periodic: Heat flows continuously around the ring. This creates different equilibrium patterns depending on the initial conditions.
5. Experiment with Thermal Diffusivity: Adjust the "Diffusivity (α)" slider. Higher values (0.3-0.5) make heat spread faster, while lower values (0.01-0.05) make heat spread slowly. Notice how the stability parameter (r) display updates automatically. Watch how different diffusivity values affect how quickly the temperature profile smooths out and reaches equilibrium.
6. Compare Different Initial Profiles: Try different predefined temperature profiles:
   • Gaussian Pulse: A hot spot that spreads outward symmetrically
   • Step Function: A sharp temperature jump that instantly smooths out
   • Hot Center: Hot in the middle, cool at ends - shows how heat flows toward boundaries
   • Hot Left: Temperature gradient from left to right - demonstrates directional heat flow
7. Watch the Smoothing Effect: One of the key features of the heat equation is its smoothing property. Notice how:
   • Any sharp spikes or jumps immediately become smooth curves
   • The heat equation acts like a blur filter on the temperature profile
   • High-frequency variations are quickly eliminated
   This is fundamentally different from the wave equation, which preserves wave shapes.
8. Observe Equilibrium: Let the simulation run long enough to reach equilibrium. With Fixed boundaries, temperature approaches zero everywhere. With Insulated boundaries, temperature becomes uniform. The heat map will show a single color (blue for fixed, or a uniform color for insulated) when equilibrium is reached.
9. Adjust Simulation Speed: Use the "Speed" slider to control how many simulation steps run per frame. Higher values (5x-10x) let you reach equilibrium quickly, while lower values (1x) show detailed diffusion processes. This is useful for studying how heat spreads step by step.
10. Reset and Compare: Click "Reset" to clear the temperature and try different scenarios. Compare how the same initial temperature profile evolves with different boundary conditions. Notice how boundary conditions determine the final equilibrium state.

Tip: The key insight is to observe how the heat equation naturally smooths and diffuses temperature. Unlike waves that preserve shape and bounce, heat simply spreads and fades. The color gradient heat map makes it easy to see temperature distribution at a glance - watch how hot regions (red/white) shrink and cool regions (blue/black) expand as heat diffuses. Pay attention to how boundary conditions determine the final equilibrium: fixed boundaries drive temperature to zero, while insulated boundaries preserve total heat and create uniform temperature.

Parameters

Followings are short descriptions on each parameters

• Thermal Diffusivity (α): Controls the thermal diffusivity parameter α in the heat equation. This determines how fast heat spreads through the material. Higher values (up to 0.5) make heat diffuse faster, while lower values (down to 0.01) make heat diffuse slower. When the diffusivity changes, the time step dt is automatically adjusted to maintain a constant stability parameter (r = 0.2) for numerical stability. Default is 0.1. The stability parameter r is displayed in the control panel and updates in real-time as you adjust this parameter.
• Boundary Condition: Selects how heat behaves at the left and right boundaries of the rod. Three options are available:
  • Fixed Temperature (Dirichlet): The rod ends are held at constant temperature (u = 0 at boundaries). Heat flows from hot regions toward the cold boundaries, eventually reaching equilibrium at zero temperature. This simulates a rod connected to an ice bath at both ends.
  • Insulated (Neumann): The rod ends are perfectly insulated (du/dx = 0 at boundaries). No heat flows in or out at the boundaries, so the total heat in the rod is conserved. Heat will diffuse and smooth out, eventually reaching a uniform temperature equal to the average initial temperature.
  • Periodic: The rod wraps around, connecting the left and right ends. This simulates a ring of metal where heat can flow continuously around the loop.
  The boundary condition can be changed in real-time during simulation to observe different behaviors.
• Speed: Controls how many simulation steps are performed per frame. Higher values (up to 10x) make the diffusion progress faster, while lower values (1x) show the diffusion at normal speed. This is useful for observing slow diffusion processes or speeding up to reach equilibrium faster. Default is 1x (realtime).
• Stability Parameter (r): A stability parameter defined as r = α·dt/dx², where α is the thermal diffusivity, dt is the time step, and dx is the spatial step. The simulation uses r = 0.2, which satisfies the strict stability condition r ≤ 0.5 for the parabolic heat equation. This ensures that the temperature diffuses correctly without numerical oscillations or instabilities. The stability parameter is displayed in the control panel for reference.
• Grid Resolution: The rod is discretized into 200 points (N = 200) for numerical computation. The spatial step size is dx = L/(N-1) where L = 1.0 is the length of the rod. Higher resolution would provide smoother temperature profiles but requires more computation.
• Temperature Profile: Selects the initial temperature distribution. Options include User Defined (draw with mouse), Gaussian Pulse, Step Function, Sine Wave, Hot Center, and Hot Left. Predefined profiles are automatically smoothed to prevent numerical instabilities.

Buttons and Controls

Followings are short descriptions on each control

• Play/Pause: Starts or pauses the heat diffusion simulation. When in Drawing mode, clicking Play initializes the simulation with the current drawn temperature profile. The button text changes to "Pause" during simulation, allowing you to pause and resume at any time. When paused, the mode changes to "Paused" and you can observe the current temperature distribution.
• Reset: Clears the current temperature profile, stops the simulation, and returns to Drawing mode. All temperature arrays are reset to zero, and you can draw a new initial condition or select a predefined profile. The mode display returns to "Drawing".

Interaction and Visualization

• Drawing Mode: The initial state of the simulation. Click and drag on the top half of the canvas to draw the initial temperature profile. The mouse position is converted to grid coordinates, and the temperature is set based on the vertical position (top = 0, center = 1). When you release the mouse, the temperature profile is automatically smoothed using a 3-point moving average to prevent high-frequency numerical noise that could cause instability.
• Canvas Visualization: The simulation uses a split-canvas visualization. The top half displays a line graph on a dark background (#1a1a1a) with a neon orange line (#ff8800) showing the temperature profile. A faint horizontal dashed line marks the zero temperature level. The bottom half displays a color gradient heat map where each point along the rod is colored according to its temperature: blue/black for cool temperatures (0) and yellow/red/white for hot temperatures (1). A separator line divides the two visualization areas.
• Real-time Updates: During simulation, the temperature updates in real-time using requestAnimationFrame for smooth animation. The number of simulation steps per frame is controlled by the Speed parameter. The mode display shows whether you're in Drawing, Simulating, or Paused mode.
• Heat Diffusion: The temperature diffuses according to the 1D heat equation using the finite difference method. Interior points are updated using the explicit scheme: u_next[i] = u[i] + r*(u[i+1] - 2*u[i] + u[i-1]). Unlike the wave equation, there is no "bouncing" or propagation - heat simply spreads and smooths out, eventually reaching equilibrium. Sharp temperature gradients instantly become smooth curves due to the diffusive nature of the equation.
• Boundary Effects: Different boundary conditions create distinct equilibrium states. Fixed temperature boundaries cause heat to flow toward the cold ends, eventually reaching zero temperature everywhere. Insulated boundaries conserve total heat, eventually reaching a uniform temperature equal to the average initial temperature. Periodic boundaries allow heat to flow continuously around the ring. You can change boundary conditions during simulation to observe the immediate effect.
• Initial Conditions: When you draw a temperature profile and click Play, the simulation starts with that initial distribution. Unlike the wave equation, there is no initial velocity - the heat equation only needs the initial temperature profile. The temperature then evolves according to the heat equation, diffusing and smoothing out over time.