Moon Phases: Light, Not Shadow

Overview

Navigation

Instructor hub: /demos/_instructor/

Student demo: /play/moon-phases/

This demo: Model · Activities · Assessment · Backlog

This guide is instructor-facing Student demo: /play/moon-phases/
Demo source: apps/demos/src/demos/moon-phases/
Demo logic: apps/demos/src/demos/moon-phases/main.ts

Where to go next

Model + math + assumptions: apps/site/src/content/instructor/moon-phases/model.md

In-class activities: apps/site/src/content/instructor/moon-phases/activities.md

Assessment bank: apps/site/src/content/instructor/moon-phases/assessment.md

Future enhancements: apps/site/src/content/instructor/moon-phases/backlog.md

New: Station Mode + Help

In the student demo, click Station Mode to build a data table you can print or copy as CSV.

Click Help / Keys (or press ?) for shortcuts; press g to open Station Mode.

Why this demo exists

Why This Matters The most persistent misconception is that phases are caused by Earth’s shadow. This demo makes the geometry unavoidable: the Sun always lights half the Moon, and the phase we see depends on the viewing angle from Earth. Earth’s shadow only matters during eclipses.

Learning goals (ASTR 101)

Students should be able to:

Explain phases as a viewing-geometry effect (illuminated half vs visible half), not a shadow effect.
Identify the phase at four key configurations (New, First Quarter, Full, Third Quarter) and relate “quarter” to orbit position.
Use the demo’s readouts (phase angle and illumination %) to connect phase to the Sun–Earth–Moon geometry.

10–15 minute live-teach script (projector)

Start at Full Moon (reset). Ask: “What fraction of the Moon’s disk should be illuminated from Earth right now?” Confirm the illumination readout is ~100%.
Drag the Moon to New Moon. Ask: “Is the Moon ‘unlit’?” Emphasize that it is still half lit — we just see the dark half.
Go to First Quarter and Third Quarter. Ask: “Why is ‘quarter’ not 25% illuminated?” Tie it to being one quarter / three quarters of the way through the orbit from New Moon.
Connect to eclipses: emphasize that Earth’s shadow matters for eclipses, which require New/Full and near-node geometry (see the Eclipse Geometry demo).

Suggested connections to the other demos

Eclipse geometry: eclipses require New/Full Moon and near-node geometry (phases alone are not eclipses).
Angular size: the Sun and Moon have similar angular sizes, which is why total solar eclipses are possible.
Seasons: tilt changes the Sun’s path in the sky; phases change because the Moon’s position changes relative to the Sun.

Activities

Navigation

Instructor hub: /demos/_instructor/

Back to this demo guide: Guide

Student demo: /play/moon-phases/

This demo: Model · Activities · Assessment · Backlog

Links Student demo: /play/moon-phases/
Main guide: apps/site/src/content/instructor/moon-phases/index.md
Model deep dive: apps/site/src/content/instructor/moon-phases/model.md

MW Quick Exploration (3–5 min, pairs)

TPS: Why is ‘quarter’ half-lit? Think (30 s): “Does ‘First Quarter’ mean the Moon is 25% illuminated?”

Pair (60 s): Agree on what “quarter” refers to instead.

Share (1–2 min): Use the demo:

Jump to New Moon and then First Quarter.

Read the illumination percent.

Point at the orbit: “First quarter” is one quarter of the way around the orbit from New Moon.

Debrief script: “Quarter is an orbital position label. Illumination is controlled by geometry; at quarter phases, we see half of the lit hemisphere.”

MW Short Investigation (8–12 min, pairs/triads)

Investigation: Build the illumination curve Task: Pick 8 angles evenly spaced around the orbit (e.g., $0^\circ$, $45^\circ$, $90^\circ$, $\dots$, $315^\circ$). For each, record:

Phase name

Illumination (%)

Prompt: “How does illumination change with time? Is it linear?”

Expected pattern: Illumination changes smoothly but not linearly with angle (it follows a cosine relationship).

Share-out (2–3 min) Have one group describe the “shape” of illumination vs time (slow near New/Full, fastest near the quarters). Connect to the cosine in the model.

Friday Astro Lab (20–30+ min, groups of 3–4)

Astro Lab: Phases are geometry, not shadow Deliverable: One-page explanation + evidence table.

Claim (given): “Moon phases are not caused by Earth’s shadow.”

Evidence (from the demo):

A table showing illumination at the four key phases (use Station Mode to export/print).

A diagram (sketch) of the Sun–Earth–Moon geometry at New, First Quarter, Full, Third Quarter.

One “shadow check”: show that Earth’s shadow points away from the Sun and is only relevant for eclipses, not most phases.

Reasoning: Use the “two halves” story: illuminated half is fixed by sunlight; visible half is fixed by where we are; the overlap is the phase.

Bridge to eclipses (1 sentence): “Eclipses require New/Full Moon and being near a node — phases alone don’t guarantee an eclipse.”

Station version (for the Cosmic Playground capstone rotation)

Station card: Moon Phases (6–8 minutes) Demo setup: start at New → First Quarter → Full → Third Quarter.
Tip: Click Station Mode to add key-phase rows and print/copy your table.

Your station artifact (fill in):

Control(s): Moon angle $\alpha$

Observable(s): phase name, illumination fraction $f$

Governing relationship: write this equation in words:

$$f=\frac{1+\cos\alpha}{2}$$

Sanity check: what is $f$ at $\alpha=90^\circ$?

Connection sentence: “This matters for eclipses/totality because…”

Word bank + sanity checks Word bank:

Phase: the shape we see from Earth; it’s the overlap of the Moon’s lit half and the half facing Earth.

Illumination fraction $f$ (0–1): fraction of the visible disk that is lit (0 = New, 1 = Full).

Moon angle $\alpha$ (degrees, this demo): $0^\circ$ = Full, $180^\circ$ = New; quarter phases are at $90^\circ$ and $270^\circ$.

Waxing: the illuminated fraction is increasing (after New → toward Full).

Waning: the illuminated fraction is decreasing (after Full → toward New).

Quarter phase: about 50% illuminated; “quarter” refers to the orbit position, not the lit fraction.

Sanity checks:

First/Third Quarter should be about 50% illuminated.

New Moon is not “unlit” — the Sun still lights half the Moon; we’re mostly seeing the dark half.

Earth’s shadow is not what causes phases (it matters only during eclipses, which are rare).

Assessment

Navigation

Instructor hub: /demos/_instructor/

Back to this demo guide: Guide

Student demo: /play/moon-phases/

This demo: Model · Activities · Assessment · Backlog

How to use this bank Each item includes a demo setup so you can reproduce the scenario live, plus distractors tied to common misconceptions.

Clicker questions

Clicker 1: What causes phases? Prompt: What is the main cause of Moon phases?

A. Earth’s shadow falling on the Moon
B. The Moon’s distance changing during the month
C. The angle between the Sun, Earth, and Moon (viewing geometry)
D. Clouds in Earth’s atmosphere blocking moonlight

Correct: C.

Reasoning: The Sun always illuminates half of the Moon. We see different fractions of that lit half depending on geometry.

Distractors to listen for:

A: the classic misconception (confusing phases with eclipses)

B: mixing up brightness/size with phase

Demo setup: Drag through several phases while keeping the “Sunlight comes from the left” story constant. Emphasize that the lit hemisphere is always the Sun-facing half.

Clicker 2: ‘Quarter’ means… Prompt: “First Quarter” is called “quarter” because…

A. We see 25% of the Moon illuminated
B. The Moon is 1/4 of the way through its orbit from New Moon
C. The Moon is 1/4 the size of Earth
D. The Moon’s shadow covers 1/4 of Earth

Correct: B.

Demo setup: Jump to New Moon then First Quarter; point at the orbit position and the illumination readout (~50%).

Clicker 3: New Moon is not ‘unlit’ Prompt: At New Moon, which statement is true?

A. The Moon receives no sunlight
B. The Moon’s near side is dark, but the far side is illuminated
C. The Moon is inside Earth’s shadow for the whole day
D. The Moon is closer to Earth than at Full Moon

Correct: B.

Reasoning: The Sun still illuminates half the Moon; we just face the dark half at New Moon.

Demo setup: Set to New Moon and ask students to point to which half faces the Sun.

Short answer

Short answer 1: Two halves story Prompt (2–3 sentences): Explain phases using the ideas “illuminated half” and “visible half.” Your explanation must state why the lit half does not change.

Answer key (core idea): The Sun always lights half of the Moon. From Earth we see some fraction of that lit half depending on the Moon’s position relative to the Sun. The phase is the overlap of (1) the half that is illuminated and (2) the half that faces Earth.

Short answer 2: A quick calculation Prompt: The demo uses $f=\frac{1+\cos\alpha}{2}$ for illumination fraction. If $\alpha=60^\circ$, what is $f$?

Answer key: $\cos 60^\circ = 0.5$, so $f=\frac{1+0.5}{2}=0.75$ (75%).

Sanity check: $60^\circ$ is closer to Full ($0^\circ$) than to Quarter ($90^\circ$), so it should be more than 50% illuminated.

Exit ticket (1 minute)

Exit ticket: Eclipse connection Prompt: During which phase can a lunar eclipse happen (in principle)?

Expected: Full Moon (because Earth must be between the Sun and the Moon).

Model notes (deeper)

Navigation

Instructor hub: /demos/_instructor/

Back to this demo guide: Guide

Student demo: /play/moon-phases/

This demo: Model · Activities · Assessment · Backlog

Links Student demo: /play/moon-phases/
Demo source: apps/demos/src/demos/moon-phases/
Demo logic: apps/demos/src/demos/moon-phases/main.ts

What the demo is modeling (big picture)

This demo is a geometric model of illumination and viewing angle.

The Sun illuminates exactly half of the Moon at all times (ignoring tiny effects like libration and Earthshine).
From Earth, we see some fraction of that illuminated half depending on the angle between the Sun and Moon in the sky.

The demo reports:

Phase name (New, Crescent, Quarter, Gibbous, Full)
Phase angle $\alpha$ (deg)
Illumination fraction (0–1)
Illuminated (%) (0–100)
Days since new (d)
Waxing/Waning
Moon rise/set (local solar time; simplified when Advanced is enabled)

Implementation note (current instrument)

In this repo, the instrument uses the shared physics model in:

packages/physics/src/moonPhasesModel.ts

The demo layer (apps/demos/src/demos/moon-phases/main.ts) calls the model for illumination, phase names, days since new, and waxing/waning, then formats results for Station Mode + Copy Results via @cosmic/runtime.

Angle convention in this demo

The demo uses a classroom-friendly convention:

moonAngle = $0^\circ$ -> Full Moon (Moon opposite the Sun; right side of the diagram)
moonAngle = $180^\circ$ -> New Moon (Moon toward the Sun; left side of the diagram)
moonAngle = $90^\circ$ -> Third Quarter
moonAngle = $270^\circ$ -> First Quarter

This is a convention for the diagram, not a universal astronomy standard. The important invariant is: the phase depends on the Sun–Earth–Moon geometry, not shadows.

Illumination fraction (the core equation)

The demo uses:

$$f = \frac{1+\cos\alpha}{2}$$

Let’s unpack each piece:

$f$ is the fraction of the Moon’s disk that appears illuminated from Earth (unitless; 0 to 1).
$\alpha$ is the phase angle in the demo’s convention (degrees in the UI; radians inside $\cos$).

What this equation is really saying: at Full Moon ($\alpha=0^\circ$), $\cos\alpha=1$ so $f=1$. At New Moon ($\alpha=180^\circ$), $\cos\alpha=-1$ so $f=0$. At quarter phases ($\alpha=90^\circ$ or $270^\circ$), $\cos\alpha=0$ so $f=1/2$.

Illumination sanity checks

$\alpha=0^\circ$ -> $f=1$ (Full Moon)

$\alpha=180^\circ$ -> $f=0$ (New Moon)

$\alpha=90^\circ$ or $270^\circ$ -> $f=0.5$ (Quarter)

What’s simplified / not modeled

Model limitations (intentional)

No 3D orbital inclination (that belongs in the Eclipse Geometry demo).

Rise/set estimates are simplified (latitude + day-of-year only; no orbital tilt or parallax).

Polar day/night yields no rise/set (reported as N/A).

The phase “shape” rendering is schematic (designed to look right qualitatively, not to be a photometric model).

Reduced motion behavior (accessibility)

This instrument includes optional animation controls. Under prefers-reduced-motion: reduce, continuous animation is disabled and the demo only updates on direct control changes (slider, drag, step buttons).

Backlog

Navigation

Instructor hub: /demos/_instructor/

Back to this demo guide: Guide

Student demo: /play/moon-phases/

This demo: Model · Activities · Assessment · Backlog

How to use this backlog This is a planning guide. “Physics” items should improve correctness without adding cognitive clutter.

Priority	Impact	Effort	Category	Notes	Code entrypoint
P0	High	Low	UX	DONE (2026-01-30): Added an explicit on-screen Sun direction cue (“Sunlight → from the Sun”) in the top view.	`demos/moon-phases/index.html`
P0	High	Medium	Physics	DONE (2026-01-29): Load and use `demos/_assets/moon-phases-model.js` in the demo (single source of truth for illumination equation).	`demos/moon-phases/index.html` + `demos/moon-phases/moon-phases.js`
P1	High	Medium	Pedagogy	Add built-in “prediction checkpoints” in Challenge Mode aligned to common misconceptions.	`demos/moon-phases/moon-phases.js`
P1	Medium	Medium	Physics	Add a simple 3D inclination toggle that hands off to Eclipse Geometry concepts (“phases vs eclipses”).	`demos/moon-phases/moon-phases.js`
P1	Medium	Medium	UX	Add rise/set time intuition (e.g., “Full Moon rises at sunset”) as optional overlay.	`demos/moon-phases/moon-phases.js`
P2	Medium	Low	Accessibility	DONE (2026-01-29): Add reduced-motion support that defaults to a slower speed when `prefers-reduced-motion` is set.	`demos/moon-phases/moon-phases.js`
P2	Medium	Low	UX	DONE (2026-01-30): Added shared Station Mode (table + CSV copy + print) and a Help/Keys panel.	`demos/moon-phases/index.html` + `demos/moon-phases/moon-phases.js` + `demos/_assets/demo-modes.js`
P2	Low	Low	Pedagogy	Expand the assessment bank after the first teaching pilot (add 2–4 distractor-driven clickers).	`demos/_instructor/moon-phases/assessment.qmd`