Heart :: Lab :: Carter Ogunsola

Taubin's implicit heart surface, solved into a point cloud and spun on canvas. Grab it and it coasts on its own momentum, the outer points trailing elastically, tone carried by a monochrome halftone.

Dependencies

GSAPCore :: ticker

A textbook figure with a pulse

There’s a famous equation that draws a heart in 3D: Taubin’s surface, the one calculus tools trot out to show off implicit graphing. As a wireframe it’s correct and completely cold: a diagram of a heart with no heart in it. This is the same equation. Grab it and it spins, coasts, and trails after your hand. The interaction is the pulse.

Solving a shape instead of drawing it

You can’t just plot an implicit surface F(x,y,z) = 0; there’s no list of points to draw. So we find them. The equation only ever uses y², so for each (x, z) cell of a grid we treat it as “how thick is the heart here?” and solve for y: step outward until F flips sign, then bisect ~22 times onto the crossing. Take the root, mirror it to ±y, and that column contributes two points. Do that across a 100×120 grid and the equation becomes a ~12k-point cloud, computed once, on load. Each point also gets a normal straight from the analytic gradient ∇F, which is what lets it catch light and hide its back.

After that every frame is cheap: rotate the baked points, project them through a perspective camera (focal 1500) onto the canvas, draw a dot.

The feel is in the trailing

w += dx * 0.05;            // your drag becomes angular velocity
w *= Math.exp(-dt / 2);    // which bleeds off — it coasts, half-life ~1.4s
yaw += w * dt;

A flick sets the whole thing spinning and it keeps going on momentum, slowing on its own. The nice part happens around that. The points don’t rotate rigidly. Each radial ring lags toward the current spin at a rate that falls off with distance from the axis (1/(0.72 − 0.38·r)), so the outer shell smears elastically behind the core. The cloud breathes as it turns instead of moving like one solid thing.

Tone is a halftone: a back-face cull drops every point facing away, and a Lambert term against a fixed light sorts the rest into three opacity tiers. Dot size only ever tracks depth, never brightness, so the shading reads through density and opacity the way a printed halftone does. All monochrome, drawn in --ink on the stage’s own surface; flip the site theme and it re-inks.

Make it yours

SPIN_GAIN / FRICTION_TAU — how hard a drag throws it, and how long it coasts. Lower τ and it stops sooner.
NX / NZ — grid resolution, the point count. Denser is lusher and heavier; ~12k is the sweet spot for canvas 2D at 60fps.
The Lambert thresholds (0.26 / 0.62) — where the three tone tiers split. Widen the middle band for a flatter read.
FOCAL — smaller exaggerates the perspective; the heart bulges toward you.

No interaction, no heart

It’s just math until someone touches it. That’s the whole experiment. The equation was always a heart; it only feels like one once it answers you.

Credits

Tolis C :: tol.is/heart

Setup

1
<!-- GSAP (from CDN) -->
2
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
3

4
<!-- Site tokens the styles use — swap freely -->
5
<style>
6
  :root {
7
    --paper: #d6d6d5;
8
    --ink: #1e1e1e;
9
  }
10
</style>
11

12
<!-- Sized stage — the script fills it -->
13
<div class="stage" style="position: relative; height: 100vh; background: var(--paper);"></div>
14

15
<!-- Then the Script, inside <script> (CodePen's JS panel does this for you) -->

Style

1
.heart {
2
  position: absolute;
3
  inset: 0;
4
  overflow: hidden;
5
  cursor: grab;
6
  touch-action: none;
7
}
8

9
.heart.is-drag {
10
  cursor: grabbing;
11
}
12

13
.heart canvas {
14
  position: absolute;
15
  inset: 0;
16
  display: block;
17
  width: 100%;
18
  height: 100%;
19
}

Script

1
const clamp = (v, lo, hi) => Math.max(lo, Math.min(hi, v));
2
const A = 2.25;
3
const B = 0.1125;
4
const surf = (x, t, z) => {
5
  const Q = x * x + A * t + z * z - 1;
6
  return Q * Q * Q - z * z * z * (x * x + B * t);
7
};
8
const MAX_SCALE = 1.7;
9
const SPIN_CLAMP = 18;
10
const DEFAULTS = {
11
  spin: 0.05,
12

13
  coast: 2,
14

15
  focal: 1500
16

17
};
18
const LIGHT = (() => {
19
  const l = [-0.35, 0.5, 0.74];
20
  const n = Math.hypot(l[0], l[1], l[2]);
21
  return [l[0] / n, l[1] / n, l[2] / n];
22
})();
23
const BANDS = 24;
24
const STYLE_ID = "exp-heart-style";
25
const CSS = `
26
.heart {
27
  position: absolute;
28
  inset: 0;
29
  overflow: hidden;
30
  cursor: grab;
31
  touch-action: none;
32
}
33

34
.heart.is-drag {
35
  cursor: grabbing;
36
}
37

38
.heart canvas {
39
  position: absolute;
40
  inset: 0;
41
  display: block;
42
  width: 100%;
43
  height: 100%;
44
}
45
`;
46
function injectStyle() {
47
  if (document.getElementById(STYLE_ID)) return;
48
  const el = document.createElement("style");
49
  el.id = STYLE_ID;
50
  el.textContent = CSS;
51
  document.head.appendChild(el);
52
}
53
const experiment = {
54
  mount(root) {
55
    injectStyle();
56
    const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
57
    const CFG = { ...DEFAULTS };
58
    const wrap = document.createElement("div");
59
    wrap.className = "heart";
60
    const canvas = document.createElement("canvas");
61
    wrap.appendChild(canvas);
62
    root.appendChild(wrap);
63
    const ctx = canvas.getContext("2d");
64
    let ink = "30,30,30";
65
    const resolveInk = () => {
66
      const probe = document.createElement("span");
67
      probe.style.cssText = "color:var(--ink);position:absolute;visibility:hidden";
68
      wrap.appendChild(probe);
69
      const m = getComputedStyle(probe).color.match(/\d+/g);
70
      probe.remove();
71
      if (m) ink = `${m[0]},${m[1]},${m[2]}`;
72
    };
73
    resolveInk();
74
    const themeObs = new MutationObserver(resolveInk);
75
    themeObs.observe(document.documentElement, {
76
      attributes: true,
77
      attributeFilter: ["data-theme", "class"]
78
    });
79
    const mobile = Math.min(window.innerWidth, window.innerHeight) < 1024;
80
    const NX = mobile ? 70 : 100;
81
    const NZ = mobile ? 84 : 120;
82
    const X0 = -1.35;
83
    const X1 = 1.35;
84
    const Z0 = -1.15;
85
    const Z1 = 1.45;
86
    const px = [];
87
    const py = [];
88
    const pz = [];
89
    const nxA = [];
90
    const nyA = [];
91
    const nzA = [];
92
    for (let i = 0; i < NX; i++) {
93
      const x = X0 + (X1 - X0) * i / (NX - 1);
94
      for (let j = 0; j < NZ; j++) {
95
        const z = Z0 + (Z1 - Z0) * j / (NZ - 1);
96
        if (surf(x, 0, z) >= 0) continue;
97
        let a = 0;
98
        let b = 0;
99
        let found = false;
100
        for (let s = 1; s <= 150; s++) {
101
          const t2 = s / 150;
102
          if (surf(x, t2, z) >= 0) {
103
            a = (s - 1) / 150;
104
            b = t2;
105
            found = true;
106
            break;
107
          }
108
        }
109
        if (!found) continue;
110
        for (let k = 0; k < 22; k++) {
111
          const m = (a + b) / 2;
112
          if (surf(x, m, z) < 0) a = m;
113
          else b = m;
114
        }
115
        const t = (a + b) / 2;
116
        const y = Math.sqrt(t);
117
        const Q = x * x + A * t + z * z - 1;
118
        const Q2 = Q * Q;
119
        const gx = 2 * x * (3 * Q2 - z * z * z);
120
        const gz = 6 * z * Q2 - 3 * z * z * (x * x + B * t);
121
        const gy = y * (13.5 * Q2 - 0.225 * z * z * z);
122
        for (const sign of [1, -1]) {
123
          px.push(x);
124
          py.push(z);
125
          pz.push(sign * y);
126
          nxA.push(gx);
127
          nyA.push(gz);
128
          nzA.push(sign * gy);
129
        }
130
      }
131
    }
132
    const COUNT = px.length;
133
    let cx0 = 0;
134
    let cy0 = 0;
135
    let cz0 = 0;
136
    for (let k = 0; k < COUNT; k++) {
137
      cx0 += px[k];
138
      cy0 += py[k];
139
      cz0 += pz[k];
140
    }
141
    cx0 /= COUNT;
142
    cy0 /= COUNT;
143
    cz0 /= COUNT;
144
    let ext = 1e-6;
145
    let maxR = 1e-6;
146
    for (let k = 0; k < COUNT; k++) {
147
      px[k] -= cx0;
148
      py[k] -= cy0;
149
      pz[k] -= cz0;
150
      ext = Math.max(ext, Math.abs(px[k]), Math.abs(py[k]), Math.abs(pz[k]));
151
      maxR = Math.max(maxR, Math.hypot(px[k], pz[k]));
152
    }
153
    const P = new Float32Array(COUNT * 3);
154
    const NRM = new Float32Array(COUNT * 3);
155
    const band = new Uint8Array(COUNT);
156
    for (let k = 0; k < COUNT; k++) {
157
      P[k * 3] = px[k] / ext;
158
      P[k * 3 + 1] = py[k] / ext;
159
      P[k * 3 + 2] = pz[k] / ext;
160
      const nl = Math.hypot(nxA[k], nyA[k], nzA[k]) || 1;
161
      NRM[k * 3] = nxA[k] / nl;
162
      NRM[k * 3 + 1] = nyA[k] / nl;
163
      NRM[k * 3 + 2] = nzA[k] / nl;
164
      const rNorm = Math.hypot(px[k], pz[k]) / maxR;
165
      band[k] = Math.min(BANDS - 1, rNorm * BANDS | 0);
166
    }
167
    let W = 0;
168
    let H = 0;
169
    let fit = 200;
170
    let cx = 0;
171
    let cy = 0;
172
    const measure = () => {
173
      W = wrap.clientWidth;
174
      H = wrap.clientHeight;
175
      const dpr = Math.min(window.devicePixelRatio || 1, 2);
176
      canvas.width = W * dpr;
177
      canvas.height = H * dpr;
178
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
179
      fit = Math.min(W * 0.4, H * 0.46);
180
      cx = W / 2;
181
      cy = H / 2;
182
    };
183
    let w = reduced ? 0 : 0.35;
184
    let yaw = 0;
185
    let pitch = 0.14;
186
    const bandK = new Float64Array(BANDS);
187
    const bandRate = new Float64Array(BANDS);
188
    for (let bI = 0; bI < BANDS; bI++) bandRate[bI] = 1 / (0.72 - 0.38 * (bI / BANDS));
189
    const cosK = new Float64Array(BANDS);
190
    const sinK = new Float64Array(BANDS);
191
    const ac = new AbortController();
192
    const { signal } = ac;
193
    let dragging = false;
194
    let lastX = 0;
195
    wrap.addEventListener(
196
      "pointerdown",
197
      (e) => {
198
        dragging = true;
199
        lastX = e.clientX;
200
        wrap.classList.add("is-drag");
201
        wrap.setPointerCapture?.(e.pointerId);
202
      },
203
      { signal }
204
    );
205
    wrap.addEventListener(
206
      "pointermove",
207
      (e) => {
208
        if (!dragging) return;
209
        w = clamp(w + (e.clientX - lastX) * CFG.spin, -SPIN_CLAMP, SPIN_CLAMP);
210
        lastX = e.clientX;
211
      },
212
      { signal }
213
    );
214
    const end = () => {
215
      dragging = false;
216
      wrap.classList.remove("is-drag");
217
    };
218
    wrap.addEventListener("pointerup", end, { signal });
219
    wrap.addEventListener("pointercancel", end, { signal });
220
    const [lx, ly, lz] = LIGHT;
221
    const tick = (time, dtMs) => {
222
      const dt = Math.min(dtMs, 40) / 1e3 || 0.016;
223
      if (!reduced) {
224
        w *= Math.exp(-dt / CFG.coast);
225
        yaw += w * dt;
226
        pitch += (0.14 + 0.05 * Math.sin(time * 1e-4) - pitch) * Math.min(1, dt * 4);
227
      } else {
228
        yaw += w * dt;
229
      }
230
      const cp = Math.cos(pitch);
231
      const sp = Math.sin(pitch);
232
      for (let bI = 0; bI < BANDS; bI++) {
233
        if (reduced) bandK[bI] = yaw;
234
        else bandK[bI] += (yaw - bandK[bI]) * Math.min(1, dt * bandRate[bI]);
235
        cosK[bI] = Math.cos(bandK[bI]);
236
        sinK[bI] = Math.sin(bandK[bI]);
237
      }
238
      ctx.clearRect(0, 0, W, H);
239
      ctx.fillStyle = `rgb(${ink})`;
240
      for (let k = 0; k < COUNT; k++) {
241
        const b = band[k];
242
        const ck = cosK[b];
243
        const sk = sinK[b];
244
        const X = P[k * 3];
245
        const Y = P[k * 3 + 1];
246
        const Z = P[k * 3 + 2];
247
        const xr = X * ck + Z * sk;
248
        const zr = -X * sk + Z * ck;
249
        const yr2 = Y * cp - zr * sp;
250
        const zr2 = Y * sp + zr * cp;
251
        const nX = NRM[k * 3];
252
        const nY = NRM[k * 3 + 1];
253
        const nZ = NRM[k * 3 + 2];
254
        const nxr = nX * ck + nZ * sk;
255
        const nzr = -nX * sk + nZ * ck;
256
        const nzr2 = nY * sp + nzr * cp;
257
        if (nzr2 < 0.02) continue;
258
        const nyr2 = nY * cp - nzr * sp;
259
        const depth = zr2 * fit;
260
        const scale = Math.min(MAX_SCALE, CFG.focal / (CFG.focal - depth));
261
        const sx = cx + xr * fit * scale;
262
        const sy = cy - yr2 * fit * scale;
263
        const zd = clamp(0.5 + zr2 * 0.5, 0, 1);
264
        const rad = Math.min(1.6, scale) * (0.2 + zd);
265
        if (rad < 0.3) continue;
266
        const lam = 0.32 + 0.6 * Math.max(0, nxr * lx + nyr2 * ly + nzr2 * lz);
267
        const tier = lam < 0.26 ? 0.42 : lam > 0.62 ? 1 : 0.68;
268
        ctx.globalAlpha = Math.min(0.5, tier * (0.4 + 0.6 * zd));
269
        ctx.beginPath();
270
        ctx.arc(sx, sy, rad, 0, Math.PI * 2);
271
        ctx.fill();
272
      }
273
      ctx.globalAlpha = 1;
274
    };
275
    measure();
276
    const ro = new ResizeObserver(measure);
277
    ro.observe(wrap);
278
    gsap.ticker.add(tick);
279
    const set = (key, value) => {
280
      if (key in CFG) CFG[key] = Number(value);
281
    };
282
    const destroy = () => {
283
      ac.abort();
284
      ro.disconnect();
285
      themeObs.disconnect();
286
      gsap.ticker.remove(tick);
287
      wrap.remove();
288
    };
289
    return { destroy, set };
290
  }
291
};
292
experiment.mount(document.querySelector(".stage"));

Heart

CanvasNew

Experiment coming soonLoading experiment

Heart — Lab experiment