Update src/streamlit_app.py

src/streamlit_app.py

@@ -1,40 +1,558 @@
-import altair as alt
-import numpy as np
-import pandas as pd
 import streamlit as st
+import numpy as np
+import matplotlib.pyplot as plt
+from kinematics_visualizer import Motion1D, Motion2D, KinematicsVisualizer
 
-"""
-# Welcome to Streamlit!
-
-Edit `/streamlit_app.py` to customize this app to your heart's desire :heart:.
-If you have any questions, checkout our [documentation](https://docs.streamlit.io) and [community
-forums](https://discuss.streamlit.io).
+# Configure Streamlit page
+st.set_page_config(
+    page_title="Physics Tutorial: Kinematics",
+    page_icon="🚀",
+    layout="wide",
+    initial_sidebar_state="expanded"
+)
 
-In the meantime, below is an example of what you can do with just a few lines of code:
-"""
+# Custom CSS for better styling
+st.markdown("""
+<style>
+    .main-header {
+        font-size: 2.5rem;
+        font-weight: bold;
+        color: #1f77b4;
+        text-align: center;
+        margin-bottom: 2rem;
+    }
+    .section-header {
+        font-size: 1.5rem;
+        font-weight: bold;
+        color: #2e7d32;
+        margin-top: 2rem;
+        margin-bottom: 1rem;
+    }
+    .physics-equation {
+        background-color: #2e2e2e;
+        color: white;
+        padding: 1rem;
+        border-radius: 10px;
+        border-left: 5px solid #1f77b4;
+        margin: 1rem 0;
+    }
+    .physics-equation h4 {
+        color: #87ceeb;
+        margin-bottom: 1rem;
+    }
+    .physics-equation ul {
+        color: white;
+    }
+    .physics-equation li {
+        margin-bottom: 0.5rem;
+    }
+    .physics-equation strong {
+        color: #ffd700;
+    }
+    .parameter-box {
+        background-color: #fff3e0;
+        padding: 1rem;
+        border-radius: 10px;
+        margin: 1rem 0;
+    }
+</style>
+""", unsafe_allow_html=True)
 
-num_points = st.slider("Number of points in spiral", 1, 10000, 1100)
-num_turns = st.slider("Number of turns in spiral", 1, 300, 31)
+def main():
+    st.markdown('<div class="main-header">🚀 Physics Tutorial: Kinematics</div>', unsafe_allow_html=True)
+    
+    # Sidebar for navigation
+    st.sidebar.title("📚 Select Tutorial")
+    tutorial_type = st.sidebar.radio(
+        "Choose a physics concept:",
+        ["1D Motion", "2D Projectile Motion", "Compare Motions"]
+    )
+    
+    if tutorial_type == "1D Motion":
+        show_1d_motion()
+    elif tutorial_type == "2D Projectile Motion":
+        show_2d_motion()
+    elif tutorial_type == "Compare Motions":
+        show_motion_comparison()
 
-indices = np.linspace(0, 1, num_points)
-theta = 2 * np.pi * num_turns * indices
-radius = indices
+def show_1d_motion():
+    st.markdown('<div class="section-header">📏 One-Dimensional Motion</div>', unsafe_allow_html=True)
+    
+    # Physics equations display
+    with st.expander("📖 Physics Equations (Click to expand)", expanded=False):
+        st.markdown("""
+        <div class="physics-equation">
+        <h4>Kinematic Equations for Constant Acceleration:</h4>
+        <ul>
+            <li><strong>Position:</strong> x(t) = x₀ + v₀t + ½at²</li>
+            <li><strong>Velocity:</strong> v(t) = v₀ + at</li>
+            <li><strong>Acceleration:</strong> a(t) = constant</li>
+        </ul>
+        <p><strong>Where:</strong></p>
+        <ul>
+            <li>x₀ = initial position (m)</li>
+            <li>v₀ = initial velocity (m/s)</li>
+            <li>a = acceleration (m/s²)</li>
+            <li>t = time (s)</li>
+        </ul>
+        </div>
+        """, unsafe_allow_html=True)
+    
+    # Create two columns for controls and results
+    col1, col2 = st.columns([1, 2])
+    
+    with col1:
+        st.markdown('<div class="section-header">🎛️ Control Parameters</div>', unsafe_allow_html=True)
+        
+        # Parameter sliders
+        initial_pos = st.slider(
+            "Initial Position (m)", 
+            min_value=-50.0, max_value=50.0, value=0.0, step=1.0,
+            help="Starting position of the object"
+        )
+        
+        initial_vel = st.slider(
+            "Initial Velocity (m/s)", 
+            min_value=-30.0, max_value=30.0, value=5.0, step=1.0,
+            help="Starting velocity of the object"
+        )
+        
+        acceleration = st.slider(
+            "Acceleration (m/s²)", 
+            min_value=-15.0, max_value=15.0, value=2.0, step=0.5,
+            help="Constant acceleration (positive = speeding up in positive direction)"
+        )
+        
+        duration = st.slider(
+            "Simulation Duration (s)", 
+            min_value=1.0, max_value=20.0, value=10.0, step=0.5,
+            help="How long to run the simulation"
+        )
+        
+        # Display current parameters
+        st.markdown('<div class="parameter-box">', unsafe_allow_html=True)
+        st.markdown("**Current Parameters:**")
+        st.write(f"• Initial Position: {initial_pos:.1f} m")
+        st.write(f"• Initial Velocity: {initial_vel:.1f} m/s")
+        st.write(f"• Acceleration: {acceleration:.1f} m/s²")
+        st.write(f"• Duration: {duration:.1f} s")
+        
+        # Calculate final values
+        final_pos = initial_pos + initial_vel * duration + 0.5 * acceleration * duration**2
+        final_vel = initial_vel + acceleration * duration
+        
+        st.markdown("**Final Values:**")
+        st.write(f"• Final Position: {final_pos:.1f} m")
+        st.write(f"• Final Velocity: {final_vel:.1f} m/s")
+        st.markdown('</div>', unsafe_allow_html=True)
+    
+    with col2:
+        # Create and display motion
+        motion = Motion1D(
+            initial_position=initial_pos,
+            initial_velocity=initial_vel,
+            acceleration=acceleration
+        )
+        
+        # Generate title based on motion type
+        if acceleration > 0:
+            motion_type = "Accelerating Motion"
+        elif acceleration < 0:
+            motion_type = "Decelerating Motion"
+        else:
+            motion_type = "Constant Velocity Motion"
+        
+        visualizer = KinematicsVisualizer()
+        fig = visualizer.plot_1d_motion(motion, duration, motion_type)
+        
+        st.pyplot(fig)
+        plt.close()
 
-x = radius * np.cos(theta)
-y = radius * np.sin(theta)
+def show_2d_motion():
+    st.markdown('<div class="section-header">🎯 Two-Dimensional Projectile Motion</div>', unsafe_allow_html=True)
+    
+    # Physics equations display (updated to include sphere physics)
+    with st.expander("📖 Physics Equations (Click to expand)", expanded=False):
+        st.markdown("""
+        <div class="physics-equation">
+        <h4>Projectile Motion Equations:</h4>
+        <p><strong>Point Mass Model:</strong></p>
+        <ul>
+            <li><strong>No Air Resistance:</strong> Standard kinematic equations</li>
+            <li><strong>With Air Resistance:</strong> Linear drag model (drag ∝ velocity)</li>
+        </ul>
+        <p><strong>Sphere Model (more realistic):</strong></p>
+        <ul>
+            <li><strong>Mass:</strong> m = ρ × (4/3)π × r³</li>
+            <li><strong>Cross-sectional Area:</strong> A = π × r²</li>
+            <li><strong>Drag Force:</strong> F<sub>drag</sub> = ½ρ<sub>air</sub>C<sub>d</sub>Av²</li>
+            <li><strong>Terminal Velocity:</strong> v<sub>t</sub> = √(2mg / ρ<sub>air</sub>C<sub>d</sub>A)</li>
+        </ul>
+        <p><strong>Where:</strong></p>
+        <ul>
+            <li>ρ = sphere density (kg/m³)</li>
+            <li>r = sphere radius (m)</li>
+            <li>C<sub>d</sub> = aerodynamic drag coefficient</li>
+            <li>ρ<sub>air</sub> = air density (~1.225 kg/m³)</li>
+        </ul>
+        </div>
+        """, unsafe_allow_html=True)
+    
+    # Create two columns
+    col1, col2 = st.columns([1, 2])
+    
+    with col1:
+        st.markdown('<div class="section-header">🎛️ Launch Parameters</div>', unsafe_allow_html=True)
+        
+        # Projectile Model Toggle
+        st.markdown("### 🎯 Projectile Model")
+        is_sphere = st.toggle(
+            "Model as Sphere",
+            value=False,
+            help="Toggle between point mass and realistic sphere with physical dimensions"
+        )
+        
+        # Sphere properties (only show when sphere model is enabled)
+        sphere_radius = 0.037  # Default baseball
+        sphere_density = 700
+        sphere_drag_coeff = 0.47
+        
+        if is_sphere:
+            # Sphere presets
+            st.markdown("**Quick Sphere Presets:**")
+            presets = Motion2D.get_sphere_presets()
+            preset_cols = st.columns(3)
+            
+            selected_preset = None
+            for i, (key, preset) in enumerate(presets.items()):
+                with preset_cols[i % 3]:
+                    if st.button(preset['name'], key=f"sphere_{key}"):
+                        selected_preset = preset
+            
+            # Apply preset if selected
+            if selected_preset:
+                sphere_radius = selected_preset['radius']
+                sphere_density = selected_preset['density']
+                sphere_drag_coeff = selected_preset['drag_coeff']
+            
+            st.markdown("**Custom Sphere Properties:**")
+            
+            # Sphere radius slider
+            sphere_radius = st.slider(
+                "Sphere Radius (mm)", 
+                min_value=10.0, max_value=150.0, 
+                value=sphere_radius*1000, step=1.0,
+                help="Radius of the sphere in millimeters"
+            ) / 1000  # Convert back to meters
+            
+            # Sphere density slider
+            sphere_density = st.slider(
+                "Sphere Density (kg/m³)", 
+                min_value=50, max_value=2000, 
+                value=int(sphere_density), step=10,
+                help="Material density - affects mass and terminal velocity"
+            )
+            
+            # Drag coefficient slider
+            sphere_drag_coeff = st.slider(
+                "Aerodynamic Drag Coefficient", 
+                min_value=0.1, max_value=1.0, 
+                value=sphere_drag_coeff, step=0.01,
+                help="0.24 (golf ball), 0.35 (baseball), 0.47 (smooth sphere), 0.51 (tennis ball)"
+            )
+            
+            # Display calculated properties
+            temp_motion = Motion2D(
+                launch_speed=25, launch_angle=45, 
+                is_sphere=True, sphere_radius=sphere_radius,
+                sphere_density=sphere_density, sphere_drag_coeff=sphere_drag_coeff
+            )
+            sphere_info = temp_motion.get_sphere_info()
+            
+            st.info(f"""
+            **Calculated Properties:**
+            • Diameter: {sphere_info['diameter_mm']:.1f} mm
+            • Mass: {sphere_info['mass_g']:.1f} g
+            • Cross-section: {sphere_info['cross_section_cm2']:.1f} cm²
+            • Volume: {sphere_info['volume_cm3']:.1f} cm³
+            """)
+        
+        # Air Resistance Toggle
+        st.markdown("### 🌬️ Air Resistance")
+        air_resistance_enabled = st.toggle(
+            "Enable Air Resistance",
+            value=False,
+            help="Toggle air resistance on/off to see the difference in trajectory"
+        )
+        
+        # Show drag info based on model
+        if air_resistance_enabled and not is_sphere:
+            drag_coeff = st.slider(
+                "Point Mass Drag Coefficient", 
+                min_value=0.01, max_value=0.5, value=0.1, step=0.01,
+                help="Simple linear drag coefficient for point mass model"
+            )
+        elif air_resistance_enabled and is_sphere:
+            st.info("🌬️ **Sphere Model**: Air resistance calculated from physical properties!")
+            drag_coeff = 0.1  # Not used for sphere model
+        else:
+            drag_coeff = 0.1
+        
+        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
+        default_height = 0.0
+        default_gravity = 9.81
+        
+        # Handle preset button clicks
+        st.markdown("### 🎯 Launch Presets")
+        preset_buttons_col1, preset_buttons_col2 = st.columns(2)
+        with preset_buttons_col1:
+            if st.button("🏀 Basketball Shot"):
+                st.session_state.speed_preset = 15.0
+                st.session_state.angle_preset = 50.0
+                st.session_state.height_preset = 2.0
+                st.session_state.gravity_preset = 9.81
+        
+        with preset_buttons_col2:
+            if st.button("🚀 Rocket Launch"):
+                st.session_state.speed_preset = 40.0
+                st.session_state.angle_preset = 75.0
+                st.session_state.height_preset = 0.0
+                st.session_state.gravity_preset = 9.81
+        
+        # Use preset values if they exist, otherwise use defaults
+        speed_value = st.session_state.get('speed_preset', default_speed)
+        angle_value = st.session_state.get('angle_preset', default_angle)
+        height_value = st.session_state.get('height_preset', default_height)
+        gravity_value = st.session_state.get('gravity_preset', default_gravity)
+        
+        st.markdown("### ⚙️ Physics Parameters")
+        
+        # Parameter sliders
+        launch_speed = st.slider(
+            "Launch Speed (m/s)", 
+            min_value=5.0, max_value=50.0, value=speed_value, step=1.0,
+            help="Initial speed of the projectile"
+        )
+        
+        launch_angle = st.slider(
+            "Launch Angle (degrees)", 
+            min_value=0.0, max_value=90.0, value=angle_value, step=5.0,
+            help="Angle above horizontal"
+        )
+        
+        launch_height = st.slider(
+            "Launch Height (m)", 
+            min_value=0.0, max_value=50.0, value=height_value, step=1.0,
+            help="Height above ground level"
+        )
+        
+        gravity = st.slider(
+            "Gravity (m/s²)", 
+            min_value=1.0, max_value=20.0, value=gravity_value, step=0.1,
+            help="Acceleration due to gravity (Earth = 9.81 m/s²)"
+        )
+        
+        # Clear preset values when sliders are moved
+        if (launch_speed != speed_value or launch_angle != angle_value or 
+            launch_height != height_value or gravity != gravity_value):
+            for key in ['speed_preset', 'angle_preset', 'height_preset', 'gravity_preset']:
+                if key in st.session_state:
+                    del st.session_state[key]
+        
+        # Create motion object with all parameters
+        motion = Motion2D(
+            launch_speed=launch_speed,
+            launch_angle=launch_angle,
+            launch_height=launch_height,
+            gravity=gravity,
+            air_resistance=air_resistance_enabled,
+            drag_coefficient=drag_coeff,
+            is_sphere=is_sphere,
+            sphere_radius=sphere_radius,
+            sphere_density=sphere_density,
+            sphere_drag_coeff=sphere_drag_coeff
+        )
+        
+        info = motion.get_launch_info()
+        
+        # Display comprehensive analysis
+        st.markdown('<div class="parameter-box">', unsafe_allow_html=True)
+        st.markdown("**Launch Analysis:**")
+        st.write(f"• Model: {'Sphere' if is_sphere else 'Point Mass'}")
+        st.write(f"• Launch Speed: {info['launch_speed']:.1f} m/s")
+        st.write(f"• Launch Angle: {info['launch_angle']:.1f}°")
+        st.write(f"• Initial Vₓ: {info['initial_velocity_x']:.1f} m/s")
+        st.write(f"• Initial Vᵧ: {info['initial_velocity_y']:.1f} m/s")
+        
+        if is_sphere and 'mass_g' in info:
+            st.write(f"• Mass: {info['mass_g']:.1f} g")
+            st.write(f"• Diameter: {info['diameter_mm']:.1f} mm")
+            if air_resistance_enabled and 'terminal_velocity' in info:
+                st.write(f"• Terminal Velocity: {info['terminal_velocity']:.1f} m/s")
+        
+        st.markdown("**Trajectory Results:**")
+        st.write(f"• Flight Time: {info['flight_time']:.2f} s")
+        st.write(f"• Range: {info['range']:.1f} m")
+        st.write(f"• Max Height: {info['max_height']:.1f} m")
+        
+        # Physics insights
+        if is_sphere and air_resistance_enabled and 'mass_g' in info:
+            st.markdown("**Physics Insights:**")
+            if info['mass_g'] > 200:
+                st.write("🔹 Heavy object: Less affected by air resistance")
+            elif info['mass_g'] < 50:
+                st.write("🔹 Light object: Significantly affected by air resistance")
+            
+            if info['diameter_mm'] > 100:
+                st.write("🔹 Large cross-section: More air resistance")
+            elif info['diameter_mm'] < 50:
+                st.write("🔹 Small cross-section: Less air resistance")
+        
+        st.markdown('</div>', unsafe_allow_html=True)
+        
+        # Reset button
+        if st.button("🔄 Reset to Defaults"):
+            for key in ['speed_preset', 'angle_preset', 'height_preset', 'gravity_preset']:
+                if key in st.session_state:
+                    del st.session_state[key]
+            st.rerun()
+    
+    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()
+        
+        # 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))
+            
+            # 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)
+            
+            # Plot equivalent point mass
+            motion_point = Motion2D(
+                launch_speed=launch_speed, launch_angle=launch_angle, 
+                launch_height=launch_height, gravity=gravity, 
+                air_resistance=air_resistance_enabled, drag_coefficient=drag_coeff,
+                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)
+            
+            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)
+            
+            st.pyplot(fig_comp)
+            plt.close()
 
-df = pd.DataFrame({
-    "x": x,
-    "y": y,
-    "idx": indices,
-    "rand": np.random.randn(num_points),
-})
+def show_motion_comparison():
+    st.markdown('<div class="section-header">📊 Compare Different Trajectories</div>', unsafe_allow_html=True)
+    
+    st.markdown("**Compare up to 3 different projectile motions side by side**")
+    
+    # Create tabs for different trajectories
+    tab1, tab2, tab3 = st.tabs(["🚀 Trajectory 1", "🎯 Trajectory 2", "⚽ Trajectory 3"])
+    
+    trajectories = []
+    
+    with tab1:
+        col1, col2 = st.columns(2)
+        with col1:
+            speed1 = st.slider("Speed 1 (m/s)", 5.0, 50.0, 20.0, key="speed1")
+            angle1 = st.slider("Angle 1 (°)", 0.0, 90.0, 30.0, key="angle1")
+        with col2:
+            height1 = st.slider("Height 1 (m)", 0.0, 30.0, 0.0, key="height1")
+            
+        motion1 = Motion2D(launch_speed=speed1, launch_angle=angle1, launch_height=height1)
+        trajectories.append(("Trajectory 1", motion1, 'blue'))
+    
+    with tab2:
+        col1, col2 = st.columns(2)
+        with col1:
+            speed2 = st.slider("Speed 2 (m/s)", 5.0, 50.0, 25.0, key="speed2")
+            angle2 = st.slider("Angle 2 (°)", 0.0, 90.0, 45.0, key="angle2")
+        with col2:
+            height2 = st.slider("Height 2 (m)", 0.0, 30.0, 0.0, key="height2")
+            
+        motion2 = Motion2D(launch_speed=speed2, launch_angle=angle2, launch_height=height2)
+        trajectories.append(("Trajectory 2", motion2, 'red'))
+    
+    with tab3:
+        col1, col2 = st.columns(2)
+        with col1:
+            speed3 = st.slider("Speed 3 (m/s)", 5.0, 50.0, 30.0, key="speed3")
+            angle3 = st.slider("Angle 3 (°)", 0.0, 90.0, 60.0, key="angle3")
+        with col2:
+            height3 = st.slider("Height 3 (m)", 0.0, 30.0, 5.0, key="height3")
+            
+        motion3 = Motion2D(launch_speed=speed3, launch_angle=angle3, launch_height=height3)
+        trajectories.append(("Trajectory 3", motion3, 'green'))
+    
+    # Create comparison plot
+    fig, ax = plt.subplots(figsize=(12, 8))
+    
+    max_range = 0
+    for name, motion, color in trajectories:
+        data = motion.trajectory_data(motion.calculate_flight_time())
+        ax.plot(data['x'], data['y'], linewidth=3, label=name, color=color)
+        
+        # Mark launch and landing points
+        ax.plot(motion.launch_x, motion.launch_height, 'o', markersize=8, color=color, alpha=0.7)
+        if len(data['x']) > 0:
+            ax.plot(data['x'][-1], data['y'][-1], 's', markersize=8, color=color, alpha=0.7)
+            max_range = max(max_range, data['x'][-1])
+    
+    ax.set_xlabel('Horizontal Position (m)', fontsize=12)
+    ax.set_ylabel('Vertical Position (m)', fontsize=12)
+    ax.set_title('Trajectory Comparison', fontsize=16, fontweight='bold')
+    ax.grid(True, alpha=0.3)
+    ax.legend(fontsize=12)
+    ax.set_ylim(bottom=0)
+    ax.set_xlim(0, max_range * 1.1)
+    
+    st.pyplot(fig)
+    plt.close()
+    
+    # Comparison table
+    st.markdown("### 📋 Trajectory Comparison Table")
+    
+    comparison_data = []
+    for name, motion, _ in trajectories:
+        info = motion.get_launch_info()
+        comparison_data.append({
+            "Trajectory": name,
+            "Speed (m/s)": f"{info['launch_speed']:.1f}",
+            "Angle (°)": f"{info['launch_angle']:.1f}",
+            "Height (m)": f"{info['launch_height']:.1f}",
+            "Flight Time (s)": f"{info['flight_time']:.2f}",
+            "Range (m)": f"{info['range']:.1f}",
+            "Max Height (m)": f"{info['max_height']:.1f}"
+        })
+    
+    st.table(comparison_data)
 
-st.altair_chart(alt.Chart(df, height=700, width=700)
-    .mark_point(filled=True)
-    .encode(
-        x=alt.X("x", axis=None),
-        y=alt.Y("y", axis=None),
-        color=alt.Color("idx", legend=None, scale=alt.Scale()),
-        size=alt.Size("rand", legend=None, scale=alt.Scale(range=[1, 150])),
-    ))
+if __name__ == "__main__":
+    main()