From Point to Line to Letter
Font Representation
Fonts can be represented as
- Raster Graphics or Pixel Graphics
- Vector-Graphics
- Outlines or Midlines
- Curves or Line Segments
- Circular Arcs or Bezier-Curves
What are the pros and cons of the various representations?
Parametric Letters
Letter J example
- This is an example of a parametric `J` for Processing 3.0.
- It uses midlines rather than the outlines to represent the letter
- `tweak` the sketch to play with the parameters.
Source Code
You can also find the source code here and in the Wild Type Class Room OpenProcessing.
////////////////////////////////////////////////////////
// //
// P A R A M E T R I C >> J << //
// //
////////////////////////////////////////////////////////
// This is a really simple example of parametric type design.
// HOMEWORK:
// Create your own parametric letter
void setup() {
size(400, 400);
noFill();
}
void draw() {
int gap = 60;
int pos = 250;
int maxheight = 320;
int thickness = 20;
int dx = 120;
int dy = 120;
background(0);
stroke(255);
strokeWeight(thickness);
line(pos, gap, pos, maxheight - gap);
arc(pos - dx/2, maxheight - gap, dx, dy, 0, PI);
}Examples
- Don Knuth's Metafont (TeX)
- MeekFM (Font Synthesizer)
- Prototypo (Open Source)
- Project Faces (Adobe)
Homework
- Pick a letter from the alphabet and create your own parametric letter
- Upload the sketch to OpenProcessing and add it to our class room
- Add a screen shot to your wild-type wiki user page for this course