GMU:Wild Type/Part1

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.

Screenshot

to be done

Source Code

Here is the source for our little "J" example. You can also find it 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

to be done

Homework

1. Pick a letter from the alphabet and create your own parametric letter
2. Put the source code and a screen shot onto your user page for this course

Links

• Wild Type Class Room