We closed this forum 18 June 2010. It has served us well since 2005 as the ALPHA forum did before it from 2002 to 2005. New discussions are ongoing at the new URL http://forum.processing.org. You'll need to sign up and get a new user account. We're sorry about that inconvenience, but we think it's better in the long run. The content on this forum will remain online.
IndexProgramming Questions & HelpPrograms › antialiasing fonts
Page Index Toggle Pages: 1
antialiasing fonts (Read 600 times)
antialiasing fonts
Jan 26th, 2009, 12:38am
 
surprisingly, i couldn't find any answers to this with a site search....

how can i make a font appear antialiased?

either with createFont or loadFont, but preferably loadFont, so i can take advantage of the Tools>Create Font... goodness.

thanks!
Re: antialiasing fonts
Reply #1 - Jan 26th, 2009, 12:40am
 
alternatively, is there a way, again preferably via the processing editor, to create a nice, readable-at-small-size, aliased pixel font?
Re: antialiasing fonts
Reply #2 - Jan 26th, 2009, 10:55am
 
The fonts created by the tool looks already anti-aliased for me, at least for TrueType fonts, on Windows XP.

The second question seems to contradict the first...
Anyway, you can find on the Web lot of bitmap fonts (search the term in Google, one of the first hits seems interesting: Pixel Fonts, Screen Fonts, Bitmap Font, LED Fonts). Lot of them are designed to have maximum readability at nominal size.
But they need a little more work to use them.

[EDIT] Out of curiosity, I downloaded and installed the Silkscreen is a small free font for your Web graphics font, which is a TrueType font but designed to be displayed at 8 points (or multiples).
I used the tool to export the font (size 8, smooth disabled).
I wrote a quick sketch to test that:
Code:
String textToDisplay =
"Basic examples introduce the primary elements of computer programming and the fundamental elements of drawing with Processing. If you are new to programming, these examples can be a part of the learning process, but they are not detailed or descriptive enough to be used alone. If you have prior experience, they will show you how to apply what you know to using Processing.\n" +
"Topic examples build on the basics; they demonstate code for animation, drawing, interaction, interface, motion, simulation, file i/o, cellular automata, fractals, and l-systems.\n" +
"3D examples show the basics of drawing in 3D. Processing has two 3D renderers that can draw 3D shapes on screen and control lighting and camera parameters. The P3D renderer is an optimized software renderer and the OPENGL renderer uses JOGL to access OpenGL accelerated graphics cards (this creates an enormous speed improvement on computers with supported graphics cards.)" +
"Libraries examples demonstrate how to use some of Processing's many libraries. The libraries enable Processing to capture and play video, import SVG files, export PDF files, communicate using the Internet and RS-232 protocols, create and play sound files, and more... ";

void setup()
{
size(500, 800);
// smooth();
noLoop();
background(#AAFFEE);

PFont f = loadFont("Silkscreen-8.vlw");
textFont(f);
textAlign(CENTER);

fill(#000055);
text(textToDisplay, 10, 10, width - 10, height - 10);
}

And it was displayed as designed, in non-anti-aliased letters of right height (5 pixels). (Very) small, yet readable.
Re: antialiasing fonts
Reply #3 - Jan 26th, 2009, 7:05pm
 
ah, apologies, it's been quite a while since i've worked with typography in processing and that part of my brain seems to have evaporated.  forgot that any TT/OT font can be used in processing via Create Font (or createFont()), in much much earlier versions font use was a lot more restricted.

thanks for the silkscreen link.  very handy.

in regards to my first question, perhaps i'm just misunderstanding how processing creates / uses fonts.  in this example

Code:

PFont font;

void setup() {
size(200, 200);
background(204);
font = loadFont("Courier-14.vlw");
textFont(font, 14);
}

void draw() {
fill(0);
text("blobby", 30, 60);
}


i used Tools>Create Font... to make a smoothed version of Courier at 14 point, and i end up with an ugly blob of text that looks like this:

http://transmote.com/share/blobby.gif

i get the same results if i create the font with smoothing turned off.  where am i going wrong?

oh, this Courier is TrueType, i'm on OSX 10.5.  doesn't seem like platform should make a difference.  but not sure...?
Re: antialiasing fonts
Reply #4 - Jan 26th, 2009, 11:55pm
 
You are not the first to get this ugly look... The issue is that you (probably) use text() in draw() without calling background() first: Processing draw over and over the font at the same place, and the transparent anti-aliasing pixels get blocky.
Re: antialiasing fonts
Reply #5 - Jan 27th, 2009, 6:55am
 
oh.  right.  whoops!
nice catch.  don't i feel silly.
Page Index Toggle Pages: 1