When drawing a text along a path, the letter is always perpendicular to the tangent on that curve. (for the circle case, it’s directed toward the center)
Then it depends how your curve/line is constructed, either with beginShape and vertex() or curveVertex() (it might be difficult to sample points on it) or with bezier curves where you can find the tangent on a curve with bezierTangent() (check the second example in the docs).
Yes, you need to divide the length of your curve by the number of characters to display, then adapt the font size so it matches the right step.
Hi Perry, many thanks for your reply and sorry for the delay !
The code is really interesting! I tried to activate the section where to set a background image but it doesn’t work: why?
Because I would like to use the background image as a guideline to draw by the text. In relation with this aspect, do you think that it should be possible the entire text to fit exactly the background guidelines not manually but automatically? And, with some code, the sketch recognize the number of characters of the text in order that the text was not repeated after ending?
Thanks Joseph, sorry for the delay. As I wrote to Perry, I would like to use a background path line, distribute automatically the text by optimizing it on that path (in size and distance from character to character) and, than, cancel the original path line in order that it only remains the text as the line path.
Than, save this as a image.
float x = path.getVertexX(i);
float y = path.getVertexY(i);
PVector curr = new PVector(x, y);
x = path.getVertexX(i+1);
y = path.getVertexY(i+1);
PVector next = new PVector(x, y);
float angle = atan2(next.copy().sub(curr).y, // Need to copy() otherwise it modifies next
next.copy().sub(curr).x); // Same as above
Using the sine wave example from the PShape tutorial to create vertices to use for text:
The bottom two sine waves were spaced along the curve.
That block of code is commented out, but I assume that it’s not so in your .pde file. the selectInput requires a prompt string, which you have, but it also needs a callback function to handle the result, which you don’t have. If you feed loadImage() a file path from within draw(), you’ll get your image loaded.