> [!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.

# Pocket Math: A Brief Introduction to your Mobile Phone

[GitHub](https://github.com/HectorTablero/QED-Scripts/tree/main/Magazine%202/Pocket%20Math%20-%20A%20Brief%20Introduction%20to%20your%20Mobile%20Phone) (Open Source, MIT License) | [Live Demo](https://qed.mat.uam.es/revista/articulo/matematicas-movil)

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

---

## Overview

The article motivates public-key cryptography through the discrete logarithm problem (DLP) and its use in Diffie-Hellman key exchange, then explains why elliptic curves make a better cryptographic group than $\mathbb{F}_p^*$. Three elements make each stage concrete: the raw difficulty of the DLP as a scatter plot with two competing search algorithms racing across it, the Diffie-Hellman handshake itself with an eavesdropper counter, and the elliptic curve group law's chord-and-tangent construction. All three share a small local helper, `Shared/modArith.js`, which provides fast modular exponentiation, modular inverses via the extended Euclidean algorithm, primality testing, and generator search — utilities needed by every element that works over $\mathbb{F}_p$.

## DiscreteLogPlot

### Description

Plots the scatter of $g^m \bmod p$ against $m$ that the article describes as following "no discernible pattern," and races two search algorithms — brute force and baby-step giant-step — against a clicked target, counting operations for each so the $O(p)$ versus $O(\sqrt p)$ gap is measured live rather than asserted.

### Implementation

```javascript
// Example element configuration
::: js DiscreteLogPlot
1907, 2
logdiscreto1
autoPlay, allowPause, autoPauseOnScroll, allowFullscreen, openControls, h=200
:::
```

Parameters are `[p, g]`, defaulting to the article's own worked example ($p=1907$, $g=2$). Clicking anywhere on the plot picks a new target $k$ to search for.

### Search Algorithms

`run("brute")` steps through $g^1, g^2, \dots$ one at a time until it matches the target. `run("bsgs")` implements baby-step giant-step in two phases: a "baby" phase building a hash map of $g^0, \dots, g^{m-1}$ where $m = \lceil\sqrt{p-1}\rceil$, then a "giant" phase stepping by $g^{-m}$ from the target until a collision is found in the map, recovering the discrete log as $im + j$. Both run incrementally inside `main()` with a per-tick operation budget (60 for brute force, 8 for BSGS) so the animation stays visible rather than resolving instantly, and the plot overlays the baby-step strip and each giant stride as vertical lines as the search progresses.

### Technical Considerations

The operations readout directly compares the two counts against their theoretical bounds, $p-1$ and $\lceil 2\sqrt{p-1}\rceil$, printed side by side — turning the article's asymptotic claim into a number the reader watches accumulate.

## DiffieHellmanExchange

### Description

Animates the Diffie-Hellman handshake between "Alice" and "Bob" across three lanes (Alice, public channel, Bob), with an eavesdropping "Eve" attempting to recover the shared key from the public values alone, and a toggle that swaps the underlying group from $\mathbb{F}_p^*$ (multiplicative) to $\mathbb{Z}/n\mathbb{Z}$ (additive) — directly illustrating the article's own aside about why the additive group is cryptographically useless.

### Implementation

```javascript
// Example element configuration
::: js DiffieHellmanExchange
1907, 2, 271, 655
diffiehellman1
autoPlay, allowPause, autoPauseOnScroll, allowFullscreen, openControls, h=185
:::
```

Parameters are `[p, g, a, b]`: the prime, generator, and Alice's and Bob's private secrets.

### The Group Toggle

In the multiplicative mode, Eve's "let Eve try" button runs the same brute-force search as `DiscreteLogPlot` against Alice's public value, incrementing a try counter each tick until it cracks. In the additive mode, `main()` short-circuits: since the public key in $\mathbb{Z}/n\mathbb{Z}$ _is_ the private key, Eve "solves" it in exactly one try, with a dedicated label explaining why. This makes the article's point — that the security of Diffie-Hellman depends entirely on which cyclic group is chosen, not on the exchange protocol itself — something the reader watches fail instantly rather than reads as a caveat.

### Technical Considerations

Each of the two users' public values, and the shared key both independently derive, are drawn as labeled boxes connected across the three lanes, so the reader can visually confirm $k = (g^a)^b = (g^b)^a$ before Eve's counter even starts.

## EllipticCurveGroupLaw

### Description

Visualizes the chord-and-tangent group law on a Weierstrass elliptic curve $y^2 = x^3+Ax+B$, over both $\mathbb{R}$ and a finite field $\mathbb{F}_p$, addressing the three things the article states about the construction but does not draw: that the chord degenerates into the tangent line when $P=Q$, that the sum $P+Q$ is the reflection (not the raw third intersection point) of the line through $P$ and $Q$, and that the same algebraic construction still produces a group when the curve is just a scatter of points over $\mathbb{F}_p$.

### Implementation

```javascript
// Example element configuration
::: js EllipticCurveGroupLaw
-1, 0, "real", 97
curvaeliptica1
autoPlay, allowFullscreen, openControls, h=215
:::
```

Parameters are `[A, B, mode, p]`. In `"real"` mode, $P$ and $Q$ are draggable points constrained to stay on the curve (`snap()` recomputes $y$ from $x$ after a drag); in `"finite"` mode, dragging snaps to the nearest lattice point of $E(\mathbb{F}_p)$.

### Group Law Implementation

`addReal(P, Q)` implements the textbook chord/tangent formula, choosing the tangent slope $\lambda = (3x_1^2+A)/(2y_1)$ when $P=Q$ and the secant slope otherwise, then reflects the third intersection point across the x-axis to get $P+Q$ — drawn explicitly as a dashed segment from the (hollow) third-intersection dot to the (solid) result. `addMod(P, Q)` performs the identical construction over $\mathbb{F}_p$ using `ModArith.inv` for the modular division in the slope computation.

### Orbit Tracking

A "next point" button repeatedly adds $P$ to a running orbit `⟨P⟩`, coloring each successive point along a gradient from the base color to the accent color, and resets automatically on returning to the start — letting the reader watch the cyclic subgroup generated by $P$ close up, with its order displayed once the orbit returns to its starting point.

### Technical Considerations

`modPoints()` enumerates $E(\mathbb{F}_p)$ by building a lookup from each quadratic residue to its two square roots (via a precomputed `y*y mod p -> [y]` map) rather than testing every $(x,y)$ pair, keeping point enumeration to $O(p)$ instead of $O(p^2)$.