Upload app.py

app.py

@@ -11,6 +11,7 @@ identically on a laptop, a phone browser, or a Hugging Face Space.
 
 from __future__ import annotations
 
+import io
 import math
 
 import gradio as gr
@@ -18,6 +19,8 @@ import matplotlib
 matplotlib.use("Agg")
 import matplotlib.pyplot as plt
 import numpy as np
+from matplotlib.patches import Circle
+from PIL import Image
 
 from pendulum_physics import (
     PLANETS,
@@ -53,6 +56,96 @@ except ImportError:
 # ---------------------------------------------------------------------------
 
 
+def plot_pendulum_animation(length_cm: float, amplitude_deg: float, gravity: float, damping: float):
+    """Render pendulum visualization with camera view, theta(t), and phase space."""
+    L = length_cm / 100.0
+    theta0 = math.radians(amplitude_deg)
+    res = simulate(theta0, gravity, L, damping=damping, t_max=3.0, dt=0.01)
+
+    fig, axes = plt.subplots(1, 3, figsize=(16, 5))
+
+    # --- Subplot 1: Pendulum Camera View ---
+    ax1 = axes[0]
+    ax1.set_xlim(-0.5, 0.5)
+    ax1.set_ylim(-0.4, 0.1)
+    ax1.set_aspect('equal')
+    ax1.invert_yaxis()
+    ax1.set_facecolor('#e6d5cc')
+    ax1.set_title('Camera Feed (Vision Tracker)', fontsize=12, fontweight='bold')
+
+    # Draw pivot
+    ax1.plot(0, 0, 'ro', markersize=12, label='Pivot')
+
+    # Draw string and bob at current position
+    theta_current = res["theta"][-1]
+    x = L * np.sin(theta_current)
+    y = L * np.cos(theta_current)
+    ax1.plot([0, x], [0, y], 'b-', linewidth=2)
+
+    # Draw bob
+    bob = Circle((x, y), 0.03, color='white', ec='blue', linewidth=2)
+    ax1.add_patch(bob)
+
+    # Draw reference line
+    ax1.axvline(0, color='red', linestyle='--', alpha=0.5, linewidth=1)
+
+    # Add angle annotation
+    if abs(theta_current) > 0.01:
+        angle_arc = np.linspace(0, theta_current, 30)
+        arc_r = 0.1
+        ax1.plot(arc_r * np.sin(angle_arc), arc_r * np.cos(angle_arc), 'g--', linewidth=1)
+        ax1.text(0.15, -0.05, f'θ = {np.degrees(theta_current):.1f}°', fontsize=10, color='green')
+
+    ax1.legend(loc='upper right', fontsize=9)
+    ax1.set_xlabel('X (m)', fontsize=10)
+    ax1.set_ylabel('Y (m)', fontsize=10)
+    ax1.grid(True, alpha=0.3)
+
+    # --- Subplot 2: θ(t) vs Time ---
+    ax2 = axes[1]
+    ax2.plot(res["t"], np.degrees(res["theta"]), 'b-', linewidth=2, label='Exact (RK4)')
+    ax2.plot(res["t"], np.degrees(res["theta_small_angle"]), '--', color='#dc2626', linewidth=1.5, label='Small-angle (SHM)')
+    ax2.set_xlabel('Time (s)', fontsize=10)
+    ax2.set_ylabel('Angle θ (degrees)', fontsize=10)
+    ax2.set_title('Angular Position', fontsize=12, fontweight='bold')
+    ax2.grid(True, alpha=0.3)
+    ax2.legend(fontsize=9)
+
+    # --- Subplot 3: Phase Space (θ vs ω) ---
+    ax3 = axes[2]
+    ax3.plot(np.degrees(res["theta"]), res["omega"], 'r-', linewidth=2, alpha=0.7)
+    ax3.set_xlabel('Angle θ (degrees)', fontsize=10)
+    ax3.set_ylabel('Angular Velocity ω (rad/s)', fontsize=10)
+    ax3.set_title('Phase Space', fontsize=12, fontweight='bold')
+    ax3.grid(True, alpha=0.3)
+
+    plt.tight_layout()
+
+    # Convert to image
+    buf = io.BytesIO()
+    plt.savefig(buf, format='png', dpi=100, bbox_inches='tight')
+    buf.seek(0)
+    img = Image.open(buf)
+    plt.close()
+
+    # Compute summary
+    T0 = period_small_angle(gravity, L)
+    Tex = period_exact(theta0, gravity, L)
+    diff_pct = (Tex / T0 - 1.0) * 100
+
+    summary = (
+        f"**T (small-angle) = {T0:.5f} s** — **T (exact) = {Tex:.5f} s** "
+        f"— الفرق / difference: **{diff_pct:+.3f}%**\n\n"
+        f"عند سعة {amplitude_deg:.1f}°، خطأ تقريب الزاوية الصغيرة "
+        f"(SHM) هو {diff_pct:+.3f}% — هذا بالضبط سبب تحديد تجربة الكاميرا الحقيقية "
+        f"(`vision_lab/`) لزاوية إطلاق لا تتجاوز 15°.\n\n"
+        f"At {amplitude_deg:.1f}° amplitude, the small-angle (SHM) approximation error is "
+        f"{diff_pct:+.3f}% — exactly why the real camera experiment (`vision_lab/`) "
+        f"restricts the release angle to <= 15°."
+    )
+    return img, summary
+
+
 def plot_motion(length_cm: float, amplitude_deg: float, gravity: float, damping: float, duration_s: float):
     L = length_cm / 100.0
     theta0 = math.radians(amplitude_deg)
@@ -169,6 +262,28 @@ with gr.Blocks(title="مختبر البندول التفاعلي | Interactive P
         "*exact* nonlinear pendulum equation (RK4) and compares it against the small-angle approximation."
     )
 
+    with gr.Tab("رسم البندول | Pendulum Animation"):
+        gr.Markdown(
+            "شاهد رسماً بصرياً للبندول مع مسار حركته وفضاء الطور.\n\n"
+            "Watch a visual rendering of the pendulum with its trajectory and phase portrait."
+        )
+        with gr.Row():
+            with gr.Column(scale=1):
+                length_cm_anim = gr.Slider(5, 150, value=30, step=1, label="طول الخيط L (cm) | String length")
+                amplitude_deg_anim = gr.Slider(1, 170, value=15, step=1, label="زاوية الإطلاق θ₀ (deg) | Release angle")
+                planet_anim = gr.Dropdown(list(PLANETS.keys()), value="Earth / الأرض", label="الجاذبية | Gravity (planet)")
+                damping_anim = gr.Slider(0.0, 3.0, value=0.0, step=0.05, label="التخامد b | Damping coefficient")
+                run_btn_anim = gr.Button("شغّل | Run", variant="primary")
+            with gr.Column(scale=2):
+                plot_out_anim = gr.Image(label="Camera Feed & Analysis")
+                text_out_anim = gr.Markdown()
+
+        def _run_anim(l, a, p, d):
+            return plot_pendulum_animation(l, a, PLANETS[p], d)
+
+        run_btn_anim.click(_run_anim, [length_cm_anim, amplitude_deg_anim, planet_anim, damping_anim], [plot_out_anim, text_out_anim])
+        demo.load(_run_anim, [length_cm_anim, amplitude_deg_anim, planet_anim, damping_anim], [plot_out_anim, text_out_anim])
+
     with gr.Tab("المحاكاة الحية | Live Simulation"):
         with gr.Row():
             with gr.Column(scale=1):