Generate dynamic single-stroke text in Processing. Save to SVG for clean pen plotter input.
- Processing 4
- The ControlP5 library is required to run the Font Editor sketch.
1. Add the PlotterText class to your project
Copy the PlotterText.pde
file from the dist
folder into the folder for your Processing sketch.
2. Add the font files
Copy the entire astroTown
font folder into your sketch's data
folder.
If you want to create your own font, you'll need an SVG file for each character and a data.json
file to specify font coordinates. Use the Font Editor in the examples
folder to edit character positions and kerning pairs.
- Create an instance of the
PlotterText
class with the path to your font. - Use
drawText()
ordrawTextCentered()
to render text to the screen.
PlotterText pt;
void setup() {
size(300, 200);
pt = new PlotterText("fonts/astroTown/", 20);
}
void draw() {
background(255);
pt.drawText("Hello world!", 10, 10);
}
PlotterText new PlotterText( String fontPath, [ float size ] )
Create an instance of the PlotterText class.
fontPath
specifies the location of your font's folder (relative to your sketch's data
folder).
size
is the desired display size in pixels.
void drawText( String text, [ float x, float y ] )
Draw text to the screen.
x
and y
specify the position of the top left of the text.
void drawTextCentered( String text, [[ float x, float y ], float w ])
Draw text to the screen, horizontally centered.
x
and y
specify the position of the top center of the text.
w
specifies the width at which the text wraps to a new line.
float letterSpacing
The amount of additional space to add between each letter.
Expressed as a percentage of the character size.
float lineHeight
The amount of vertical space given to each line in multiline text.
Expressed as a percentage of the character size.
float spaceWidth
The width of a space character.
Expressed as a percentage of the character size.
void setSize( float size )
Set the display height of your font. Change this in between calls to drawText
to create text of different sizes.
float getStringWidth( String text )
Calculate the width of a string using your font at its current size without drawing to the screen.
Additional methods are available to modify font data and save it to disk.
Check PlotterText.pde
for details.
The SVG library makes it possible to write SVG files directly from Processing. Any PlotterText drawn to the screen while saving will be added to the exported SVG.
import processing.svg.*;
PlotterText pt;
void setup() {
size(400, 400);
pt = new PlotterText("fonts/astroTown", 12);
noLoop();
}
void draw() {
beginRecord(SVG, "filename.svg");
// draw some text
pt.drawText("Hello world", 10, 10);
// other vector drawing
line(0, 0, width/2, height);
endRecord();
}
For more examples, see the SVG Export page on the Processing site.
The build script for this project (build.sh
) simply copies the classes from src
into a single file in the dist
folder.
cd [plotter-text]
./build.sh
This is a personal project and is mostly unsupported, but I'm happy to hear feedback or answer questions.
This project is licensed under the Unlicense - see the LICENSE file for details.
👨🏻🦲❤️🛠