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

# Fixed-Point Theorems

[GitHub](https://github.com/HectorTablero/QED-Scripts/tree/main/Magazine%205/Cowlicks,%20a%20Flat%20Tire,%20and%20Too%20Many%20Coincidences) (Open Source, MIT License) | [Live Demo](https://qed.mat.uam.es/revista/articulo/bola-de-pelo)

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

---

## Overview

Two elements built on a shared iteration/plotting core illustrate the article's chain of fixed-point results: the Banach contraction principle (and its Newton's-method corollary) via cobweb diagrams, and the one-dimensional Brouwer theorem via a drawing exercise where the reader supplies the continuous function themselves.

## FixedPointIteration

### Description

A single class covering two modes over one animation engine. In `"cobweb"` mode it iterates $F(x) = p + c\sin(x - p)$, whose fixed point is exactly $p$ and whose derivative there is exactly the contraction constant $c$ from the slider — so pushing $c$ past 1 makes the staircase visibly spiral outward, showing precisely where the hypothesis $0 < c < 1$ breaks down. In `"newton"` mode, Newton's method is drawn as tangent lines descending to a root, with a faint side panel showing that the very same iteration is a cobweb on $F(x) = x - f(x)/f'(x)$ — the article states this equivalence in one sentence and never illustrates it; here the two pictures are visibly the same object.

```javascript
::: js FixedPointIteration
"cobweb", 0.7, 0.6, 25
banach1
autoPlay, allowPause, autoPauseOnScroll, allowFullscreen, openControls, h=140
:::
```

```javascript
::: js FixedPointIteration
"newton", 0, 2.2, 25
newton1
autoPlay, allowPause, autoPauseOnScroll, allowFullscreen, openControls, h=140
:::
```

### Implementation

The main panel renders $y=x$, the curve $y=F(x)$, and a staircase built from the stored orbit, one new point appended every `ticksPorPaso` ticks. Clicking anywhere in the plot picks a new $x_0$ and restarts the orbit. In cobweb mode, a side inset tracks $|x_n - p|$ against the article's own geometric bound $\frac{d(x_1,x_0)}{1-c}c^n$, so the theorem's estimate and the observed distance can be compared directly rather than taken on faith.

In Newton mode, the main panel instead plots $f(x) = x^3 - 2x - 2$ with tangent lines connecting each iterate to the next, and shades the region where $|F'(x)| \leq \tfrac{1}{2}$ — the exact contraction bound proven in the article's Newton's-method theorem — computed by numerical differentiation of $F$ at each sample point.

### Technical Considerations

Both modes share `drawCobweb`, parameterized by which function `F` and window bounds to use; the Newton root is recovered independently via 60 iterations of Newton's method from a safe starting point, decoupling the display root-finding from the animated iteration so the two never drift apart even at extreme parameter values.

## BrouwerJourney

### Description

Demonstrates the one-dimensional Brouwer fixed-point theorem — as used in the article's "same place, same time" story about a return road trip — by having the reader draw an arbitrary continuous curve from the left edge of the plot to the right edge. A fixed point (an intersection with the diagonal $y=x$) is marked every single time, without exception.

```javascript
::: js BrouwerJourney
200, 1
brouwer1
autoPlay, allowFullscreen, saveStates, noStop, h=140
:::
```

### Implementation

Continuity is enforced by construction rather than checked after the fact: the drawn path stores one $y$ value per pixel column in a `Float64Array`, and any pointer movement that skips columns (fast scribbling) is linearly interpolated across the gap, so no input sequence can produce a discontinuous jump. Once every column has a value, the element scans for sign changes of $g(x) = \text{drawn}(x) - x$ to find all crossings of the diagonal, marking each with a pulsing dot.

### Technical Considerations

The axes are framed exactly as the article's narrative: $x$ is position on the outbound leg of the trip, $y$ is position on the return leg at the same time of day, so the diagonal literally represents "same place, same time" and every completed drawing empirically confirms the theorem's guarantee of at least one such coincidence. Attempt counts persist through `saveState`/`savedState`.