---
title: "Typoi · generative art"
description: "Textbook curves, made to share one room. Generative art plate #33 by Theodore Vorillas, drawn live in your browser from its code."
url: "https://vorillaz.com/lab/typoi"
---

![](https://vorillaz.com/_astro/typoi.CSqg69DG_ZB392k.webp)

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

# #33 typoi

Textbook curves, made to share one room.

- date

  2026.10.13

- tags

  generative-art · javascript · webgl

Five to seven curves from the back of a maths textbook: a torus knot, a Lissajous figure, Viviani’s curve, a trefoil, a rose, a spirograph, a rhumb line, a narrowing helix. Each one is fitted into the same ball, turned at random and nudged off the centre, so they keep passing through each other. Every formula is drawn whole as a hairline, and a heavy ribbon twists along part of it. One of them is signal orange. The label names the formulas on show.

Play it and it turns. Every so often the ribbons draw back along their curves and another set traces itself in. Switch the ground to paper to draw it in black on white.

## The formulas

```javascript title="typoi.js"
// a (p, q) torus knot: p times around the axis, q times through the hole
const knot = (t) => {
  const k = 1 + r * cos(q * t);
  return [k * cos(p * t), k * sin(p * t), r * sin(q * t)];
};
// three sines at whole-number frequencies
const lissajous = (t) => [sin(a * t + phase), sin(b * t), sin(c * t + shift)];
// where a sphere meets a cylinder through its centre
const viviani = (t) => [1 + cos(t), sin(t), 2 * sin(t / 2)];
```

## One room

```javascript title="typoi.js"
// fit each formula into a unit ball, then turn it, size it and push it off the centre
const place = (t) => shift + rotate(turn, curve(t) - centre) * (size / reach);
const turn = quaternion(sqrt(1 - u1) * sin(u2), sqrt(1 - u1) * cos(u2), sqrt(u1) * sin(u3), sqrt(u1) * cos(u3));
```

## References

- [Torus knot](https://en.wikipedia.org/wiki/Torus_knot)
- [Lissajous curve](https://en.wikipedia.org/wiki/Lissajous_curve)
- [Viviani’s curve](https://en.wikipedia.org/wiki/Viviani%27s_curve)
- [Trefoil knot](https://en.wikipedia.org/wiki/Trefoil_knot)
- [Rose](https://en.wikipedia.org/wiki/Rose_\(mathematics\)), r = cos(kθ)
- [Hypotrochoid](https://en.wikipedia.org/wiki/Hypotrochoid), the spirograph’s curve
- [Rhumb line](https://en.wikipedia.org/wiki/Rhumb_line), or loxodrome
- [Conical spiral](https://en.wikipedia.org/wiki/Conical_spiral)
- [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 curves