Seeking feedback: Charming Pretext extension for flowing text inside shapes

[pearmini]

Hi @chenglou!

Thank you so much for creating this brilliant library! It’s really exciting to see how text can flow with such expressive control and a concise, elegant API design. I’m a toolmaker interested in data visualization and generative art. To make it easier to create text-based visualizations and generative pieces, I built an extension on top of Pretext called Charming Pretext. Here’s a quick example:

import * as cm from "charmingjs";

const layout = cm.layoutTextInPath({
  text: "Hello, Charming Pretext! I love generative art!", // Filling the path with this text
  path: cm.pathCircle(160, 160, 150), // Built a circle path.
  fontSize: 12,
  fontFamily: "Inter",
});

context.font = `${layout.fontSize}px ${layout.fontFamily}`;
context.textAlign = "center";
context.textBaseline = "middle";

for (const t of layout.texts) {
  context.save();
  context.translate(t.x, t.y);
  context.rotate((t.angle * Math.PI) / 180);
  context.fillText(t.text, 0, 0);
  context.restore();
}

It essentially allows text to flow within arbitrary shapes defined by SVG paths. I’ve also created a few demos to explore its potential.

I’m not entirely sure if this is the best approach to implementing something like this, so I would really appreciate any feedback or suggestions you might have.

Thanks again for your inspiring work on this project!

[ddisisto]

Those demos are fantastic. I love the concept of showing increasing detail/context as you zoom in. The prose of Air Text is pretty interesting in its own right, but I can't figure out what it means to "Interact ... using your body" however. Can I use my mouse or something instead?

Looking for excuses to use something like this in my own pretext-adjacent project liminal somehow, would be curious if you have any ideas.

[pearmini]

@ddisisto Thanks for all the kind words!

I can't figure out what it means to "Interact ... using your body"

By any chance, did you enable your webcam? This piece is supposed to track your body using webcam and place text around you!

Looking for excuses to use something like this in my own pretext-adjacent project liminal somehow, would be curious if you have any ideas.

Liminal looks awesome! I really like the idea of progressively showing content for better attention capture—let me know if I got that wrong. I'm not quite sure how Charming Pretext fits into Liminal, since it seems pretty self-contained. Unless you're going for some fancy text-based art, it might be a bit of a distance, haha.