Create your own font the hard way!

Posted on October 16, 2013 in Learning • Tagged with Captcha, Programming, Design, Glyphs, Learning, Font • 9 min read

Last major update on 23.10.2013

Preface

As promised previously in my last article, I will guide you through the creation process of a rudimentary font. I will use the glyphs of my font to draw captchas and incorportate the implementation in my brand new captcha plugin for wordpress. There are already quite a few captcha plugins out there, some of them are better than mine (RECAPTCHAfor instance translates books and thus solves two problems at the same time), others are worse, because the math equations can simply be parsed (As far as I can judge without inspecting the code further).

In this article however, I will center the focus entirely on the font and abstract from it's future usage in the captcha.

Technical background of fonts

A logical start of font creation is to answer the question what type of font we are going to create. But lets first introduce some concepts that are of importance when it comes to font design.

In short: A font is a collection of glyphs. Each glyph has a shape and there are various ways of describing that shape. You can imagine a glyph as a instanteation of a character. Whereas …


Continue reading

Plotting Bézier curves directly and with De Casteljau's algorithm

Posted on October 06, 2013 in Learning • Tagged with Font, Captcha, Programming, Mathematics, Learning, Bézier • 13 min read

Last major Update: 21.10.2013

Github repo that contains the presented code in this post.

Introduction

In this article I will present you a very simple and in no sense optimized algorithm written in Python 3 that plots quadratic and cubic Bézier curves. I'll implement several variants of Bézier rasterization algorithms. Let's call the first version the direct approach, since it computes the corresponding x and y coordinates directly by evaluation of the equation that describes such Bézier curvatures.

The other possibility is De Casteljau's algorithm, a recursive implementation. The general principle is illustrated here. But the summarize the idea very briefly: In order to compute the points of the Bézier curve, you subdivide the lines of the outer hull that are given from the n+1 control points [Where n denotes the dimension of the Bézier curve) at a ratio t (t goes from 0 to 1 in a loop). If you connect the interpolation points, you'll obtain n-1 connected lines. Then you apply the exactly same principle to these newly obtained lines as before (recursive step), until you finally get one line remaining. Consider again the point at the ratio t on this single line left and …


Continue reading