Writing a text message on a mobius strip

Lately I’ve been sending my friends very bespoke text messages as a kind of weird hobby. I recently sent a friend of mine a text message on a Mobius strip. Here’s what it looked like:

I liked the idea of writing on a Mobius strip because its single face allows a text to loop back on itself in 3D. The twist in the geometry is visually intriguing as well. I didn’t really have anything inspiring to say right then (I’m just screwing around after all) so I decided to offload the hard part of what to say to my poet friend Yuxi, who is much better with words than I am.

That left me with the comparatively easier task of just putting words on a Mobius strip. I started by copying the implementation of the Mobius strip using parametric geometry from the Three.js examples page, including the grid texture that they use on it to show how UVs are mapped. I added the grid texture on a plane so you can see how it would look normally.

With that working the next step was to get words on the Mobius strip. The simplest way to do that is to display the words on a canvas and then use the canvas as a texture on the Mobius strip. From there it’s a matter of mapping the UVs correctly.

The UVs above are squished, and if you write text on a canvas without changing the UVs the text will get squished, too. To make the text appear without distortion we need to change the UVs. The geometry of the surface of a Mobius strip is also just a plane but stretched in one direction. So that’s all we need to do: stretch the UVs along one axis.

const numSegments = 50;
const uvArray = [];
for (let i = 0; i <= numSegments; i++) {
  for (let j = 0; j <= numSegments; j++) {
    const u = i / (numSegments * 5);
    const v = j / numSegments;
    uvArray.push(u, v);
  }
}

Swapping in those UVs then produces this:

Looking at the Mobius strip compared to the original UV grid in the center you can see that the Mobius strip is now displaying the left 20% of the grid. Writing text in that left 20% of the canvas will appear in the Mobius strip with minimal distortion. From there it’s just a matter of putting text on a canvas and setting it as the texture for the Mobius strip. And that’s it!