# /// script # requires-python = ">=3.12" # dependencies = [ # "marimo>=0.23", # "pywidget>=0.1.0", # ] # /// import marimo __generated_with = "0.23.5" app = marimo.App(width="medium") @app.cell(hide_code=True) def _(mo): mo.md(r""" # Artemis II Eclipse — live astropy in your browser

Built with pywidget — pure-Python interactive widgets running in Pyodide/WASM. No JavaScript, no _esm, no kernel round-trips. astropy.coordinates.SkyCoord runs in your browser tab.

On **2026-04-07**, the Artemis II Orion capsule "Integrity" passed through the Moon's shadow about 10 000 km from the lunar surface. The crew saw the Sun fully occluded for roughly 54 minutes — far longer than any Earth-based total eclipse is ever capable of. This notebook reproduces the geometry of that event as an interactive widget. The slider drags through a 2-hour window around the eclipse; on every tick, `astropy.coordinates.SkyCoord.separation` runs **in the browser** to recompute the Sun–Moon angle and angular radii from Artemis II's viewpoint. ## How it's built, in two parts **1. Offline** — `prepare_data.py` queries JPL Horizons through sunpy for Artemis II, the Sun, and the Moon across the eclipse window, and writes a ~50 KB JSON file of ICRS vectors. This step needs network and a real Python environment, so it runs once on the author's machine. **2. In the browser** — the widget class below subclasses `pywidget.PyWidget`. Its `render` and `update` methods are Python, but they never execute in the Jupyter/marimo kernel. `pywidget` ships their source to the browser tab, where Pyodide runs them directly. That's how the `astropy` import you're about to see works without any backend round-trip. ## About the sizing From Earth, the Sun and Moon happen to span almost the same angle in the sky (~½°). Total eclipses exist because of that coincidence. From Artemis II, the coincidence is broken: the spacecraft was **close** to the Moon, so the Moon's disk looked enormous while the Sun stayed the same size it always does (the Earth–Sun distance barely changes). During the eclipse window the Moon's apparent radius was roughly 25–35× the Sun's, which is why totality lasted so long. Dragging the slider makes this visible in the right-hand panel — the Sun is a small yellow dot, the Moon is the giant dark disk. """) return @app.cell def _(): import marimo as mo import json import traitlets from pywidget import PyWidget return PyWidget, json, mo, traitlets @app.cell def _(json): with open("artemis_data.json") as f: artemis_data = json.load(f) artemis_data_json = json.dumps(artemis_data) return (artemis_data_json,) @app.cell(hide_code=True) def _(mo): mo.md(r""" ### What you're looking at **Left** — Artemis II's trajectory as seen in a frame centred on the Moon. The red segment marks the ~55-minute eclipse window. Arrows show which way Earth and the Sun sit relative to the frame. **Right** — the sky as seen from Artemis II at the selected time. Sun (yellow) and Moon (dark) are drawn at their real angular sizes. Every tick recomputes positions and radii with `astropy.SkyCoord`. The readout below shows the angular separation, the two radii, and whether the Sun is currently occluded. The `astropy version / cold load` badge at the bottom of the widget is your receipt that Pyodide is really running `astropy` in the browser tab. """) return @app.cell(hide_code=True) def _(PyWidget, artemis_data_json, create_proxy, mo, traitlets): class EclipseWidget(PyWidget): """ Two-panel view of the Artemis II eclipse on 2026-04-07: - left: matplotlib trajectory in an Earth-Moon-aligned frame - right: sky as seen from Artemis II, Sun and Moon drawn at their live astropy-computed positions and angular sizes The slider picks a timestamp from the precomputed ephemeris. Each tick re-runs the astropy geometry in the browser and redraws both panels. """ data_json = traitlets.Unicode("").tag(sync=True) time_index = traitlets.Int(120).tag(sync=True) astropy_ready = traitlets.Bool(False).tag(sync=True) _py_packages = ["astropy", "numpy", "matplotlib"] def render(self, el, model): import json import io import math import time import numpy as np # Loading placeholder -- astropy takes ~10-30s on cold load. el.innerHTML = """

Warming up astropy in your browser...

(one-time cold load; subsequent ticks are instant)

""" t_load0 = time.time() import astropy from astropy.coordinates import SkyCoord from astropy import units as u t_astropy_ms = int((time.time() - t_load0) * 1000) import matplotlib matplotlib.use("agg") import matplotlib.pyplot as plt data = json.loads(model.get("data_json")) meta = data["meta"] n = meta["n_samples"] artemis = np.asarray(data["artemis_icrs_km"]) sun = np.asarray(data["sun_icrs_km"]) moon = np.asarray(data["moon_icrs_km"]) traj_xy = np.asarray(data["trajectory_xy_km"]) moon_xy = np.asarray(data["moon_xy_km"]) times = data["times_iso"] def format_time(iso): """'2026-04-07T00:30:00.000Z' -> '2026-04-07 00:30:00 UTC'.""" if "." in iso: iso = iso.split(".", 1)[0] iso = iso.rstrip("Z") date_part, time_part = iso.split("T") return f"{date_part} {time_part} UTC" r_sun_km = meta["sun_radius_km"] r_moon_km = meta["moon_radius_km"] ecl_a = meta["eclipse_start_index"] ecl_b = meta["eclipse_end_index"] TRAJ_COLOR = "#6b93c1" ECLIPSE_COLOR = "#e06666" # Build Moon-centered trajectory. traj_xy is Earth-centered in an # Earth->Moon-aligned frame; subtracting moon_xy puts the Moon at # the origin and reveals Artemis II's actual orbit around it. traj_moon_xy = traj_xy - moon_xy # (N, 2) km, Moon at origin # Frame the plot around the trajectory + the Moon, with padding. MOON_RADIUS_DRAW_KM = r_moon_km # real size of Moon's disk all_x = np.concatenate([traj_moon_xy[:, 0], [0]]) all_y = np.concatenate([traj_moon_xy[:, 1], [0]]) xr = (float(all_x.min()), float(all_x.max())) yr = (float(all_y.min()), float(all_y.max())) # Force the visible window to be square with equal aspect, so the # plot fills its figure rather than rendering as a narrow column. span = max(xr[1]-xr[0], yr[1]-yr[0]) * 1.35 cx = (xr[0] + xr[1]) / 2 cy = (yr[0] + yr[1]) / 2 xlim_k = ((cx - span/2)/1e3, (cx + span/2)/1e3) ylim_k = ((cy - span/2)/1e3, (cy + span/2)/1e3) def render_trajectory_svg(i): """Moon-centered view with Artemis II's orbit + current dot.""" fig, ax = plt.subplots(figsize=(4.5, 4.5)) # Moon as a filled disk at true scale (looks like a real body, # not a point marker). r_moon_km converted to thousand km. moon_disk = plt.Circle((0, 0), MOON_RADIUS_DRAW_KM/1e3, color="#cccccc", ec="#666666", lw=0.8, zorder=4) ax.add_patch(moon_disk) # Full trajectory + highlighted eclipse segment. ax.plot(traj_moon_xy[:, 0]/1e3, traj_moon_xy[:, 1]/1e3, color=TRAJ_COLOR, lw=1.6, zorder=2, label="Artemis II path") ax.plot(traj_moon_xy[ecl_a:ecl_b+1, 0]/1e3, traj_moon_xy[ecl_a:ecl_b+1, 1]/1e3, color=ECLIPSE_COLOR, lw=2.6, zorder=3, label="eclipse window") # Current spacecraft position. ax.scatter([traj_moon_xy[i, 0]/1e3], [traj_moon_xy[i, 1]/1e3], s=110, color="#f1c40f", edgecolors="black", linewidths=1.2, zorder=6, label="Artemis II") ax.set_xlim(xlim_k) ax.set_ylim(ylim_k) # Compass rose in the upper-right quadrant. The legend lives in # upper-left, the Moon sits in the lower-left, and the orbit # runs down the centre -- so the upper-right corner is the # one reliably empty region no matter which frame index we're # viewing. Drawing both directions from a single anchor point # makes it read as an unambiguous "these are directions, not # positions" cue. cx_ax, cy_ax = 0.87, 0.87 arm = 0.08 # Sun direction in the Moon-centred (x_hat, y_hat) basis. e2m_i = moon[i] x_hat_i = e2m_i / np.linalg.norm(e2m_i) z_i = np.cross(x_hat_i, artemis[i]) z_norm = np.linalg.norm(z_i) sun_angle = None if z_norm > 1e-9: z_hat_i = z_i / z_norm y_hat_i = np.cross(z_hat_i, x_hat_i) sun_rel_moon = sun[i] - moon[i] sx = float(np.dot(sun_rel_moon, x_hat_i)) sy = float(np.dot(sun_rel_moon, y_hat_i)) sun_angle = math.atan2(sy, sx) # A tiny dashed ring ties the two arrows together visually. compass = plt.Circle((cx_ax, cy_ax), arm * 0.18, transform=ax.transAxes, fill=False, ec="#888888", lw=0.6, ls=(0, (2, 2)), zorder=10) ax.add_patch(compass) # Earth is always in the -x_hat direction by construction. earth_angle = math.pi e_tip = (cx_ax + arm * math.cos(earth_angle), cy_ax + arm * math.sin(earth_angle)) ax.annotate("", xy=e_tip, xytext=(cx_ax, cy_ax), xycoords="axes fraction", arrowprops=dict(arrowstyle="->", color="#4a90e2", lw=1.5)) ax.text(e_tip[0] - 0.015, e_tip[1], "Earth", transform=ax.transAxes, fontsize=9, color="#4a90e2", ha="right", va="center") # Sun arrow + label on the opposite side of the compass. if sun_angle is not None: s_tip = (cx_ax + arm * math.cos(sun_angle), cy_ax + arm * math.sin(sun_angle)) ax.annotate("", xy=s_tip, xytext=(cx_ax, cy_ax), xycoords="axes fraction", arrowprops=dict(arrowstyle="->", color="#f1a500", lw=2.0)) # Nudge the label a bit further along the arrow vector. lbl = (cx_ax + (arm + 0.025) * math.cos(sun_angle), cy_ax + (arm + 0.025) * math.sin(sun_angle)) ax.text(lbl[0], lbl[1], "Sun", transform=ax.transAxes, fontsize=9, color="#f1a500", fontweight="bold", ha="center", va="center") ax.set_xlabel("x (thousand km, from Moon)") ax.set_ylabel("y (thousand km)") ax.set_title("Artemis II trajectory (Moon-centred)", fontsize=11, pad=10) ax.set_aspect("equal") ax.grid(alpha=0.25) ax.legend(loc="upper left", fontsize=9, framealpha=0.85) buf = io.StringIO() fig.savefig(buf, format="svg", bbox_inches="tight") plt.close(fig) return buf.getvalue() def sky_geometry(i): """LIVE astropy: Sun and Moon as seen from Artemis II.""" sun_rel = sun[i] - artemis[i] moon_rel = moon[i] - artemis[i] sun_sky = SkyCoord(x=sun_rel[0]*u.km, y=sun_rel[1]*u.km, z=sun_rel[2]*u.km, representation_type="cartesian", frame="icrs") moon_sky = SkyCoord(x=moon_rel[0]*u.km, y=moon_rel[1]*u.km, z=moon_rel[2]*u.km, representation_type="cartesian", frame="icrs") sep = sun_sky.separation(moon_sky) r_sun_ang = math.asin(r_sun_km / math.sqrt(float((sun_rel**2).sum()))) r_moon_ang = math.asin(r_moon_km / math.sqrt(float((moon_rel**2).sum()))) # Moon offset from Sun in (dlon*cos(lat), dlat), radians. # Note: SkyCoord with representation_type="cartesian" exposes # angles via .spherical.lon / .spherical.lat, not .ra / .dec. sun_ra = sun_sky.spherical.lon.rad sun_dec = sun_sky.spherical.lat.rad moon_ra = moon_sky.spherical.lon.rad moon_dec = moon_sky.spherical.lat.rad d_ra = (moon_ra - sun_ra) * math.cos(sun_dec) d_dec = (moon_dec - sun_dec) return { "sep_rad": float(sep.to(u.rad).value), "sep_arcmin": float(sep.to(u.arcmin).value), "r_sun_rad": float(r_sun_ang), "r_moon_rad": float(r_moon_ang), "r_sun_arcmin": math.degrees(r_sun_ang) * 60.0, "r_moon_arcmin": math.degrees(r_moon_ang) * 60.0, "dx": float(d_ra), "dy": float(d_dec), } def classify(g): sep = g["sep_rad"]; r_s = g["r_sun_rad"]; r_m = g["r_moon_rad"] if sep > r_s + r_m: return "no contact" if sep < abs(r_s - r_m): return "TOTALITY" if r_m > r_s else "annular" return "partial" SKY_BOX = 420 def render_sky_svg(g): # Auto-scale so the bigger of (Moon disk) or (sep + Sun disk) fits. margin = 1.25 rad_span = max(g["r_moon_rad"], g["r_sun_rad"] + g["sep_rad"]) * margin px_per_rad = (SKY_BOX / 2) / rad_span cx = cy = SKY_BOX / 2 sun_cx, sun_cy = cx, cy moon_cx = cx + g["dx"] * px_per_rad moon_cy = cy - g["dy"] * px_per_rad # flip for SVG y-down r_sun_px = g["r_sun_rad"] * px_per_rad r_moon_px = g["r_moon_rad"] * px_per_rad return f""" """ initial_i = model.get("time_index") g0 = sky_geometry(initial_i) state0 = classify(g0) traj_svg = render_trajectory_svg(initial_i) el.innerHTML = f"""

{traj_svg}

view from Artemis II · live astropy geometry

{render_sky_svg(g0)}

{format_time(times[initial_i])}

                t = {initial_i} / {n-1}
                · step {meta["step_seconds"]}s
              

separation: {g0['sep_arcmin']:.2f}' r_sun: {g0['r_sun_arcmin']:.2f}' r_moon: {g0['r_moon_arcmin']:.2f}'

state: {state0}

astropy {astropy.__version__} in Pyodide · cold load {t_astropy_ms} ms

""" def update_for_index(i): g = sky_geometry(i) state = classify(g) el.querySelector("#ts").textContent = format_time(times[i]) el.querySelector("#idx").textContent = str(i) el.querySelector("#r-sep").textContent = f"{g['sep_arcmin']:.2f}'" el.querySelector("#r-sun").textContent = f"{g['r_sun_arcmin']:.2f}'" el.querySelector("#r-moon").textContent = f"{g['r_moon_arcmin']:.2f}'" st = el.querySelector("#state") st.textContent = state st.className = f"tag-{state.replace(' ', '-')}" el.querySelector("#sky-svg-container").innerHTML = render_sky_svg(g) el.querySelector("#traj-panel").innerHTML = render_trajectory_svg(i) slider = el.querySelector("#slider") if slider and int(slider.value) != i: slider.value = str(i) # ---------- playback state ---------- # Browser's setInterval returns a handle; we stash it in a closure # so the toggle handler can cancel it. One-element list makes the # assignment visible from nested closures without `nonlocal`. PLAY_STEP_MS = 80 # ~12.5 fps -- smooth but not CPU-heavy play_handle = [None] def set_play_icon(is_playing): btn = el.querySelector("#play-btn") icon = el.querySelector("#play-icon") if is_playing: btn.setAttribute("data-playing", "true") btn.setAttribute("aria-label", "Pause animation") icon.innerHTML = "■" # filled square else: btn.setAttribute("data-playing", "false") btn.setAttribute("aria-label", "Play animation") icon.innerHTML = "▶" # right-pointing triangle def stop_playback(): if play_handle[0] is not None: from js import clearInterval clearInterval(play_handle[0]) play_handle[0] = None set_play_icon(False) def advance_tick(): cur = int(el.querySelector("#slider").value) nxt = cur + 1 if nxt > n - 1: # Reached the end -- loop back to the start so the demo # can just keep playing in the background on stream. nxt = 0 model.set("time_index", nxt) model.save_changes() update_for_index(nxt) def start_playback(): from js import setInterval play_handle[0] = setInterval(create_proxy(advance_tick), PLAY_STEP_MS) set_play_icon(True) def on_play_click(event): if play_handle[0] is None: start_playback() else: stop_playback() def on_slider_input(event): # Manual drag always stops playback -- user is taking control. stop_playback() i = int(event.target.value) model.set("time_index", i) model.save_changes() update_for_index(i) el.querySelector("#slider").addEventListener( "input", create_proxy(on_slider_input)) el.querySelector("#play-btn").addEventListener( "click", create_proxy(on_play_click)) model.set("astropy_ready", True) model.save_changes() def update(self, el, model): # Re-render on kernel-driven trait changes. Most state flows # browser -> kernel, so this is rarely exercised. render(el, model) widget = mo.ui.anywidget(EclipseWidget(data_json=artemis_data_json)) widget return if __name__ == "__main__": app.run()