---
title: "Desmi · generative art"
description: "Circles that cannot let go of each other. Generative art plate #35 by Theodore Vorillas, drawn live in your browser from its code."
url: "https://vorillaz.com/lab/desmi"
---

![](https://vorillaz.com/_astro/desmi.CpIrc0q-_ZydWem.webp)

fig. #35 · rendered live in your browser from the code below

# #35 desmi

Circles that cannot let go of each other.

- date

  2026.10.13

- tags

  generative-art · javascript · webgl

The Hopf fibration matches every point on a sphere with a circle in space, and any two of those circles are linked once, like two links of a chain. Here a few circles on the sphere are picked at random, and the circles over their points are drawn as families: hairlines that lace through one another, wound around tori that never touch. One to three circles in each family are heavy ribbons twisting along part of their length, one of them signal orange. The circle over the far pole runs off to infinity in both directions, so it is drawn as a straight line through everything.

Play it and it turns. Every so often the bundle unwinds and another is wound. Switch the ground to paper to draw it in black on white.

## The fibre

```javascript title="desmi.js"
// over the point (θ, φ) on the sphere: a circle on the 3-sphere,
// (cos(θ/2)·e^{it}, sin(θ/2)·e^{i(t+φ)}), projected stereographically into space
function fibre(theta, phi, t) {
  const c = cos(theta / 2), s = sin(theta / 2);
  const k = 1 / (1 - s * sin(t + phi));
  return [c * cos(t) * k, c * sin(t) * k, s * cos(t + phi) * k];
}
```

## The families

```javascript title="desmi.js"
// the fibres over a circle on the sphere, centred at (θc, φc), radius ρ, cover a torus;
// families are kept short of the pole, where the circles swell toward infinity
const rho = random(0.15, min(0.9, LIMIT - thetaCentre));
for (let j = 0; j < count; j++) {
  const [theta, phi] = around(thetaCentre, phiCentre, rho, phase + (j / count) * TAU * arc);
  hairline((t) => fibre(theta, phi, t));
}
```

## References

- [Hopf fibration](https://en.wikipedia.org/wiki/Hopf_fibration)
- [Stereographic projection](https://en.wikipedia.org/wiki/Stereographic_projection)
- [Villarceau circles](https://en.wikipedia.org/wiki/Villarceau_circles), the circles a torus can be cut into
- [Hopf fibration](https://nilesjohnson.net/hopf.html), the visualisation by Niles Johnson
- [Parallel transport frames](https://github.com/thi-ng/geom/blob/feature/no-org/src/thi/ng/geom/ptf.cljc), from thi.ng/geom, carrying the ribbons along their circles