Math for Font Design

It's pretty easy to draw letters using lines and curves.  But if you use fixed numbers, then every letter is a new problem.  That makes it difficult to write more than a couple words on the screen.

The trick to re-using your letters is to design them with relative numbers rather than absolute numbers, and then use variables and parameters to change the numbers and put letters in various places.

img1.gif

          img2.gif

img3.gif

Moving Down

In the same way, you can move the K down by adding the same number to all the y-coordinates.

Moving Anywhere

You can move the K to any position on the screen by adding one number, X , to all the x-coordinates,
and another number , Y , to all the Y coordinates.  For example, X = 350 and Y = 85 looks like this:

img4.gif

Of course, you don't want to do all these calculations yourself.  You want the COMPUTER to do the calculations automatically.  So you write a method that has two parameters, X and Y.  Then all the other locations are calculated using variables.  Then these variables can be used in the drawing.

The Java method looks like this.

  void letterK(int X, int Y)
{

    int left = 0 + X;
    int top  = 0 + Y;
    int bottom = 150 + Y;
    int middle = 75 + Y;
    int right = 100 + X;
    stroke(0);
    strokeWeight(20);
    line(left,top,left,bottom);
    line(left,middle,right,top);
    line(left,middle,right,bottom);
  }

or like this, without using variables (only parameters):

  void letterK(int X, int Y)
  {
     stroke(0);
     strokeWeight(20);
     line(0+X , 0+Y , 0+X   , 150+Y);
     line(0+X ,75+Y , 100+X , 0+Y);
     line(0+X ,75+Y , 100+X , 150+Y);
 }

Here is a program that prints   OKAY/HYAKO  using methods written as described above.
--------------------------------

void setup()

{
   size(500,400); 
}

void draw()
{ background(200);
  smooth();
  letterO(20,0);
  letterK(120,30);
  letterA(220,30);
  letterY(320,30);
  letterY(20,160);
  letterA(120,160);
  letterK(230,160);
  letterO(320,130);
}

void letterY(int X, int Y)
{
   line(0+X,0+Y,30+X,50+Y);  
   line(30+X,50+Y,60+X,0+Y);
   line(30+X,50+Y,30+X,100+Y);
}

void letterK(int X, int Y)
{
    int left = 0 + X;
    int top  = 0 + Y;
    int bottom = 100 + Y;
    int middle = 50 + Y;
    int right = 60 + X;
    stroke(0);
    strokeWeight(20);
    line(left,top,left,bottom);
    line(left,middle,right,top);
    line(left,middle,right,bottom);
}

void letterA(int X, int Y)
{
    stroke(0);
    strokeWeight(20);
    line(40+X,0+Y,X,100+Y);
    line(40+X,0+Y,80+X,100+Y);
    line(20+X,60+Y,60+X,60+Y);
}

void letterO(int X, int Y)
{
    fill(0);
    ellipse(30+X,80+Y,60,100);
    fill(200);
    ellipse(30+X,80+Y,50,80);
}

img5.gif

Notice that the X and Y work differently
if you are using ellipse, arc, or curve.

For practice with these programming ideas,
you should make a very simple font,
similar to the one shown here.  Stick to
straight lines if possible.

Make all letters a standard size - for example,
60 pixels wide and 100 pixels high. 

If you are using a large strokeWeight, keep
in mind that the fat lines may extend outside
the standard box.

== Practice ==

(1) Design 4 letters of your own. 
      Use letters that make a word.

(2) Write a program to put the letters
      on the screen (like OKAY).
      Write a method for each letter,
       and use X and Y parameters.

(3) Write the word backward beneath the
      first word, like OKAY/YAKO.

(4)  Make a grid of letters like this:
       O K A Y
      K A Y O
      A Y O K
      Y O K A

 

 

 == More Parameters ==

-- Colors --

Any numbers in a method can be changed/controlled by using parameters.  
For example, the fill and stroke values in the program above can be changed.
Normally, you use 3 numbers for Red, Green, and Blue, like this:

    stroke(250,100,50);

You can replace these with parameters R, G, B like this:

    void letterY(int X, int Y, int R, int G, int B)
    {

      stroke(R , G , B);
                line(0+X,0+Y,30+X,50+Y);  
                line(30+X,50+Y,60+X,0+Y);
                line(30+X,50+Y,30+X,100+Y);
    }

-- Size --

We used +X and +Y to move the letters around.  To change the size, you multiply
by a number.  For example, multiply by 2 to make the letter twices as big.
But don't use a number - use a parameter S (for size).  Like this:

Notice that the strokeWeight is also multiplied by S.  Otherwise, the larger letters
will have skinny lines, and smaller letters will have lines that are too fat.

When it's all finished, you can write a program like this (not that anyone would
actually want to make something this silly.)

img1.gif