Update src/streamlit_app.py

src/streamlit_app.py

@@ -1,8 +1,8 @@
 import streamlit as st
 import numpy as np
-import matplotlib.pyplot as plt
 import plotly.graph_objects as go
 import plotly.express as px
+from plotly.subplots import make_subplots
 from kinematics_visualizer import Motion1D, Motion2D, KinematicsVisualizer
 
 # Configure Streamlit page
@@ -70,13 +70,6 @@ def main():
         ["1D Motion", "2D Projectile Motion", "Compare Motions"]
     )
     
-    # Clear matplotlib figures when switching tabs to prevent cross-contamination
-    if 'current_tab' not in st.session_state:
-        st.session_state.current_tab = tutorial_type
-    elif st.session_state.current_tab != tutorial_type:
-        plt.close('all')  # Clear all figures when switching tabs
-        st.session_state.current_tab = tutorial_type
-    
     if tutorial_type == "1D Motion":
         show_1d_motion()
     elif tutorial_type == "2D Projectile Motion":
@@ -84,6 +77,135 @@ def main():
     elif tutorial_type == "Compare Motions":
         show_motion_comparison()
 
+def create_1d_motion_plot(motion: Motion1D, duration: float, title: str):
+    """Create 1D motion plots using Plotly"""
+    # Generate time arrays
+    t, x, v, a = motion.time_arrays(duration, dt=0.01)
+    
+    # Create subplots
+    fig = make_subplots(
+        rows=3, cols=1,
+        subplot_titles=('Position vs Time', 'Velocity vs Time', 'Acceleration vs Time'),
+        vertical_spacing=0.08,
+        shared_xaxes=True
+    )
+    
+    # Position plot
+    fig.add_trace(
+        go.Scatter(x=t, y=x, mode='lines', name='Position', 
+                  line=dict(color='blue', width=3),
+                  hovertemplate='Time: %{x:.1f} s<br>Position: %{y:.1f} m<extra></extra>'),
+        row=1, col=1
+    )
+    
+    # Velocity plot
+    fig.add_trace(
+        go.Scatter(x=t, y=v, mode='lines', name='Velocity', 
+                  line=dict(color='red', width=3),
+                  hovertemplate='Time: %{x:.1f} s<br>Velocity: %{y:.1f} m/s<extra></extra>'),
+        row=2, col=1
+    )
+    
+    # Acceleration plot
+    fig.add_trace(
+        go.Scatter(x=t, y=a, mode='lines', name='Acceleration', 
+                  line=dict(color='green', width=3),
+                  hovertemplate='Time: %{x:.1f} s<br>Acceleration: %{y:.1f} m/s²<extra></extra>'),
+        row=3, col=1
+    )
+    
+    # Update layout
+    fig.update_layout(
+        title=dict(text=title, font=dict(size=18)),
+        showlegend=False,
+        height=800,
+        template='plotly_white'
+    )
+    
+    # Update y-axis labels
+    fig.update_yaxes(title_text="Position (m)", row=1, col=1)
+    fig.update_yaxes(title_text="Velocity (m/s)", row=2, col=1)
+    fig.update_yaxes(title_text="Acceleration (m/s²)", row=3, col=1)
+    fig.update_xaxes(title_text="Time (s)", row=3, col=1)
+    
+    # Add grid
+    fig.update_xaxes(showgrid=True, gridwidth=1, gridcolor='rgba(128,128,128,0.3)')
+    fig.update_yaxes(showgrid=True, gridwidth=1, gridcolor='rgba(128,128,128,0.3)')
+    
+    return fig
+
+def create_2d_trajectory_plot(motion: Motion2D, title: str):
+    """Create 2D trajectory plot using Plotly"""
+    flight_time = motion.calculate_flight_time()
+    data = motion.trajectory_data(flight_time)
+    
+    fig = go.Figure()
+    
+    # Add trajectory line
+    fig.add_trace(go.Scatter(
+        x=data['x'], 
+        y=data['y'],
+        mode='lines',
+        name='Trajectory',
+        line=dict(color='blue', width=4),
+        hovertemplate='X: %{x:.1f} m<br>Y: %{y:.1f} m<extra></extra>'
+    ))
+    
+    # Add launch point
+    fig.add_trace(go.Scatter(
+        x=[motion.launch_x],
+        y=[motion.launch_height],
+        mode='markers',
+        name='Launch Point',
+        marker=dict(color='green', size=12, symbol='circle'),
+        hovertemplate='Launch<br>X: %{x:.1f} m<br>Y: %{y:.1f} m<extra></extra>'
+    ))
+    
+    # Add landing point
+    if len(data['x']) > 0:
+        fig.add_trace(go.Scatter(
+            x=[data['x'][-1]],
+            y=[data['y'][-1]],
+            mode='markers',
+            name='Landing Point',
+            marker=dict(color='red', size=12, symbol='square'),
+            hovertemplate='Landing<br>X: %{x:.1f} m<br>Y: %{y:.1f} m<extra></extra>'
+        ))
+    
+    # Add maximum height point
+    max_height_idx = np.argmax(data['y'])
+    if max_height_idx > 0:
+        fig.add_trace(go.Scatter(
+            x=[data['x'][max_height_idx]],
+            y=[data['y'][max_height_idx]],
+            mode='markers',
+            name='Max Height',
+            marker=dict(color='orange', size=10, symbol='triangle-up'),
+            hovertemplate='Max Height<br>X: %{x:.1f} m<br>Y: %{y:.1f} m<extra></extra>'
+        ))
+    
+    # Update layout
+    fig.update_layout(
+        title=dict(text=title, font=dict(size=18)),
+        xaxis_title="Horizontal Position (m)",
+        yaxis_title="Vertical Position (m)",
+        showlegend=True,
+        hovermode='closest',
+        template='plotly_white',
+        height=600,
+        margin=dict(l=50, r=50, t=80, b=50)
+    )
+    
+    # Set axis ranges
+    fig.update_xaxes(range=[0, max(data['x']) * 1.1 if len(data['x']) > 0 else 10])
+    fig.update_yaxes(range=[0, max(data['y']) * 1.2 if len(data['y']) > 0 else 10])
+    
+    # Add grid
+    fig.update_xaxes(showgrid=True, gridwidth=1, gridcolor='rgba(128,128,128,0.3)')
+    fig.update_yaxes(showgrid=True, gridwidth=1, gridcolor='rgba(128,128,128,0.3)')
+    
+    return fig
+
 def show_1d_motion():
     st.markdown('<div class="section-header">📏 One-Dimensional Motion</div>', unsafe_allow_html=True)
     
@@ -171,11 +293,9 @@ def show_1d_motion():
         else:
             motion_type = "Constant Velocity Motion"
         
-        visualizer = KinematicsVisualizer()
-        fig = visualizer.plot_1d_motion(motion, duration, motion_type)
-        
-        st.pyplot(fig)
-        plt.close()
+        # Create and display Plotly chart
+        fig = create_1d_motion_plot(motion, duration, motion_type)
+        st.plotly_chart(fig, use_container_width=True)
 
 def show_2d_motion():
     st.markdown('<div class="section-header">🎯 Two-Dimensional Projectile Motion</div>', unsafe_allow_html=True)
@@ -309,9 +429,6 @@ def show_2d_motion():
         
         st.markdown("---")
         
-        # Launch parameter presets and sliders (same as before)
-        # ... [include all the existing preset and slider code] ...
-        
         # Initialize default values
         default_speed = 25.0
         default_angle = 45.0
@@ -435,26 +552,31 @@ def show_2d_motion():
     
     with col2:
         # Create and display trajectory with model info
-        visualizer = KinematicsVisualizer()
-        
         model_info = f"({'Sphere' if is_sphere else 'Point Mass'})"
         air_info = " (with Air Resistance)" if air_resistance_enabled else " (No Air Resistance)"
         trajectory_title = f"Projectile Motion - {launch_angle:.0f}° Launch {model_info}{air_info}"
         
-        fig = visualizer.plot_2d_trajectory(motion, title=trajectory_title)
-        st.pyplot(fig)
-        plt.close()
+        # Create and display main trajectory plot
+        fig = create_2d_trajectory_plot(motion, trajectory_title)
+        st.plotly_chart(fig, use_container_width=True)
         
         # Show model comparison if using sphere
         if is_sphere and 'mass_g' in info:
             st.markdown("### 📊 Sphere vs Point Mass Comparison")
             
-            fig_comp, ax = plt.subplots(figsize=(12, 6))
+            # Create comparison plot
+            fig_comp = go.Figure()
             
             # Plot sphere model
             data_sphere = motion.trajectory_data(motion.calculate_flight_time())
-            ax.plot(data_sphere['x'], data_sphere['y'], 
-                   'r-', linewidth=3, label=f'Sphere Model ({info["mass_g"]:.0f}g)', alpha=0.8)
+            fig_comp.add_trace(go.Scatter(
+                x=data_sphere['x'], 
+                y=data_sphere['y'],
+                mode='lines',
+                name=f'Sphere Model ({info["mass_g"]:.0f}g)',
+                line=dict(color='red', width=3),
+                hovertemplate='<b>Sphere</b><br>X: %{x:.1f} m<br>Y: %{y:.1f} m<extra></extra>'
+            ))
             
             # Plot equivalent point mass
             motion_point = Motion2D(
@@ -464,22 +586,30 @@ def show_2d_motion():
                 is_sphere=False
             )
             data_point = motion_point.trajectory_data(motion_point.calculate_flight_time())
-            ax.plot(data_point['x'], data_point['y'], 
-                   'b--', linewidth=2, label='Point Mass Model', alpha=0.7)
+            fig_comp.add_trace(go.Scatter(
+                x=data_point['x'], 
+                y=data_point['y'],
+                mode='lines',
+                name='Point Mass Model',
+                line=dict(color='blue', width=2, dash='dash'),
+                hovertemplate='<b>Point Mass</b><br>X: %{x:.1f} m<br>Y: %{y:.1f} m<extra></extra>'
+            ))
             
-            ax.set_xlabel('Horizontal Position (m)')
-            ax.set_ylabel('Vertical Position (m)')
-            ax.set_title('Sphere Model vs Point Mass Model')
-            ax.grid(True, alpha=0.3)
-            ax.legend()
-            ax.set_ylim(bottom=0)
+            # Update layout for comparison plot
+            fig_comp.update_layout(
+                title="Sphere Model vs Point Mass Model",
+                xaxis_title="Horizontal Position (m)",
+                yaxis_title="Vertical Position (m)",
+                showlegend=True,
+                template='plotly_white',
+                height=400
+            )
             
-            st.pyplot(fig_comp)
-            plt.close()
-
-# Add this import at the top
-import plotly.graph_objects as go
-import plotly.express as px
+            fig_comp.update_yaxes(range=[0, None])
+            fig_comp.update_xaxes(showgrid=True, gridwidth=1, gridcolor='rgba(128,128,128,0.3)')
+            fig_comp.update_yaxes(showgrid=True, gridwidth=1, gridcolor='rgba(128,128,128,0.3)')
+            
+            st.plotly_chart(fig_comp, use_container_width=True)
 
 def show_motion_comparison():
     st.markdown('<div class="section-header">📊 Compare Different Trajectories</div>', unsafe_allow_html=True)
@@ -575,6 +705,10 @@ def show_motion_comparison():
         fig.update_xaxes(range=[0, None])
         fig.update_yaxes(range=[0, None])
         
+        # Add grid
+        fig.update_xaxes(showgrid=True, gridwidth=1, gridcolor='rgba(128,128,128,0.3)')
+        fig.update_yaxes(showgrid=True, gridwidth=1, gridcolor='rgba(128,128,128,0.3)')
+        
         return fig, trajectories_data
     
     # Create cached comparison data