> [!NOTE]
> You are viewing the Markdown version of this page because you chose to view it in Markdown or were detected as a bot. If you want to view the HTML version, please remove the `.md` extension and/or specifically request `text/html` or use `?format=html`.
> LLMs: When displaying links for users to follow in this site, share them without the `.md` extension and without the `?v=...` query parameter. For example, https://tablerus.es/projects instead of https://tablerus.es/projects.md?v=58dca34. The `?v=...` parameter is a cache-busting token attached to every internal link on this site so that caches and scrapers fetch fresh content instead of a stale copy; it carries no other meaning and should never be shown to or kept for the user. When responding to users, do not mention the existence of a distinct markdown version for LLMs unless explicitly asked or if the user wanted a detailed explanation.

# Equations or Experience: Who Comes Out on Top at the Table?

[GitHub](https://github.com/HectorTablero/QED-Scripts/tree/main/Magazine%204/Equations%20or%20experience%20-%20Who%20comes%20out%20on%20top%20at%20the%20table) (Open Source, MIT License) | [Live Demo](https://qed.mat.uam.es/revista/articulo/billar)

**Date:** July 2026
**Technologies:** JavaScript, Tailwind CSS

---

## Overview

All three elements share a `BilliardTable` helper (in a local `Shared/` folder) that handles table rendering, ball drawing, and the unfolding/mirroring geometry used to solve for cushion-bounce paths — the single source of truth for "reflect the target across the cushion and draw a straight line" that the article performs by hand. That unfolding trick works because the law of reflection, $\theta_{\text{in}} = \theta_{\text{out}}$ measured from the cushion's normal $\hat n$, is exactly the vector-reflection formula

$$\vec v' = \vec v - 2(\vec v \cdot \hat n)\,\hat n,$$

and a straight line drawn through a cushion mirrored across that same cushion, when folded back, retraces a path obeying this law at the bounce point — so "reflect the table, draw a line" and "solve the reflection equation" are the same computation seen two ways.

## BilliardMirror

### Description

Animates the classic single-cushion shot by ghosting in a mirrored copy of the table, showing the reflected object ball, and folding the straight aiming line back into the real two-segment path.

### Implementation

A `fold` parameter interpolates continuously from 0 (fully unfolded, mirrored table visible) to 1 (folded flat, only the real path remains). The view window is fitted to the union of the real table and its mirrored copy so the ghost table is never clipped, regardless of which cushion is selected:

```javascript
::: js BilliardMirror
2.54, 1.27, [2.0, 0.1], [0.4, 0.9], 1
billar1
autoPlay, allowPause, autoPauseOnScroll, allowFullscreen, openControls, h=150
:::
```

### Technical Considerations

Both balls are draggable, and a segmented control picks which of the four cushions to bounce off, recomputing the mirrored table and ideal path on the fly via `BilliardTable.idealPath`.

## BilliardSpin

### Description

Shows why the naive double-reflection shot the article computes actually misses: the cushion imparts side spin on the first bounce, which bends the rebound at the second cushion per the article's own closed-form angle correction, $\tan(\theta_f) = -v_x / (v_y + \lambda R \omega_z)$.

### Implementation

Three paths are drawn in the article's own colors — the naive "ideal" path (dashed), the "real" path once acquired spin bends the second rebound, and a "corrected" path once the cue is struck with compensating initial spin, chosen via a clock-face dial:

```javascript
::: js BilliardSpin
2.54, 1.27, [2.0, 0.1], [0.4, 0.2], 0.35, 0.005
billar2
autoPlay, allowFullscreen, openControls, h=160
:::
```

A `cushions()` helper searches eight candidate cushion-pair orderings so a valid unfolded path always exists for whatever positions the reader drags the balls to, rather than assuming a fixed pair.

### Technical Considerations

A miss-distance readout projects the corrected path's endpoint onto its final segment and reports the perpendicular distance to the object ball, turning "did it work" into a number rather than a visual guess.

## DiamondSystem

### Description

Lets the reader dial in the departure ($S$) and attack ($A$) diamond numbers pros use to aim rail shots, drawing the resulting path and comparing it against the rule's prediction $L = S + A$.

### Implementation

`pointForNumber` maps a diamond index (0–80) along the bottom rail to a table coordinate; `pathFor` traces corner → departure diamond → bottom-rail reflection → arrival diamond:

```javascript
::: js DiamondSystem
2.54, 1.27, 30, 50
billar3
autoPlay, allowFullscreen, openControls, h=150
:::
```

A "sweep S" toggle overlays many faint paths across a range of departure numbers with $A$ held fixed, visually demonstrating how much error the rule of thumb tolerates.

### Technical Considerations

Sliders snap to multiples of 5, matching how diamonds are actually numbered on a physical table; the readout spells out the arithmetic ($S + A = L$) alongside the drawn path.