Circle Secrets & Warning Points

Before asking a question on FontCreator look here for possible solutions and tutorials. Please do not post support requests here.
Post Reply
Dave Crosby
Typographer
Typographer
Posts: 784
Joined: Mon Feb 23, 2004 1:13 pm
Location: Enoch, Utah

Circle Secrets & Warning Points

Post by Dave Crosby » Sun May 30, 2004 4:04 pm

Circle Secrets
You can always drag a circle from the samples on the left side of the screen into a glyph editing window, but where is the fun in that? Edit Note: The new Circle tool in V5.5 is wonderswell!
There are so many possibilities when you know the variations you can get by making your circles from scratch.

1. Open a new Glyph Edit Window, 2. Select Insert Contour, then rough-draw a circle moving in a clockwise direction
(For Monitor Rasterizers and Printer Mappers to work properly, the points of outer contours must advance clockwise and inner contours counterclockwise) for the size you want.

3. You might start at the top center (12 O'clock position) at perhaps 500, 1000, with a left mouse click (for an on curve point), then two right clicks (for off curve points) at 750, 1000 and 1,000, 750, then an on point at 1,000, 500 and an off point at 1000, 250 to finish the right side.

Image

Finish the circle with the pattern of an on-point in the center of each side and an off-point in a straight line on each side of it, then click back on the first point you made to close the contour.

NOTES: The TEXT LINE below the glyph shows the location of your cursor and the number of points in the glyph.
If you select a point, it displays the contour # , the point #, and the x,y location.

Image

Use the mouse to select individual points and press Image F or N to change them to off or on contour points. The Image Q and W keys allow you to move back and forth from one point to another - or on complex glyphs, from contour to contour.

The Arrow Keys can be used for exact placement. Each stroke moves the point(s) 10 spaces. Hold down the Shift Key to move 100 spaces at a time or the Ctrl Key to slow it down to a single space per stroke to make your final adjustments.

Select a group of points or a contour and use the magnifying glass to zoom in. Image The box surrounded by arrows button zips you back out again.

Double clicking on the edit window will switch from point mode to contour mode and back.
Click inside the contour to turn the contour outline RED and grab a corner handle if you wish to make it larger or smaller.

Press the "H" key to Hide the lines, press the "Ctrl" key to lock it; press "H" again to release and return to normal.

Press the Image Dark Square/White Square button to fill the outlines ... or not.



:arrow: I. Point Placement
Where should we place our points to best suggest a Perfect Circle?

The fewer points in a contour, the better ... to a point. You CAN make "circle" glyphs with just 4 off contour points, BUT they are ALL "extreme off curve Warning Points" that create big time problems for your computer, printer and other applications trying to interpret them.

See Character position problem in Postscript

There are two choices for point placement: The corners, or the centers of the sides. Centers of the sides produces a small diamond shaped approximation of a circle. The corner loctions produces a boxy larger approximation. There will be more about these two approximations later in this tutorial.

Note the red warning points.[/b].
Edit 12 March 2008:
There are bounding boxes for each contour, anchored by on curve points.
Without them, the glyph shape can be mis-interpreted or interpreted in different ways by different software.

See The Bounding Box and Glyph Design Rules

Having an on-curve point between off-cirve points allows subtle curve manipulation that is otherwise not possible.

Image

Note the change produced by adding two more points in #3,#4 and #5, or four more as in #6 and #7.
On-contour tangent points produce far more roundness than off points, but either relieves the Red Warning Points.

Also note that the shapes of #4, #5, and #7 have not been altered from #2 by adding the extra points, but again the extra points have provided anchors and relieved the pressure (IF you are using Tools > Options > Global Detection) on the previous warning points.

8 points (4 on, 4 off as in #7) works well for ellipses, but tend to look boxy in circles unless you make them all off contour points and place them perfectly as in #8. Because of Pi this is as close as you will ever get! Note the red warning points which are easily mended (just select a point and press "A") by adding tangent on-contour points.
12 points (4 on, 8 off) work very well. It provides a Lot of Control if you want to alter it in any way, but the points should be kept in straight perpendicular or horizontal lines to avoid warning points.

Image

Some designers add a point here or there to identify their work, but the more points you use, the more time and effort will be required to make the circle look right. Feel free to make it as hard as you want, but just as with #2,#4, #5, and #7, it won't be any rounder.

Image
16 Points and 24 Points

Erwin Denissen provided this approximation formula:


d = Diameter
point1 = (1 - 1/2 X sqrt(2)) X d
= (1 - 0.70710678118654752440084436210485) X d
= 0.29289321881345247559915563789515 X d
point2 = d/2
point3 = (1/2 X sqrt(2)) X d

= 0.70710678118654752440084436210485 X d

So for d = 1600 we get these results:
p1 = 468.62915010152396095864902063224
p2 = 800
p3 = 1131.37
08498984760390413509793678

with the points being placed in straight lines from bottom to top and left to right with the X and Y axis being the bottom and left side of the circle. Needless to say, this still isn't a PERFECT circle, but it is a very good approximation.

Note that p1 + p3 ALWAYS adds up to the circle diameter. These are the locations used in #8 in the first example.

I’ll do the math for you and round off to the nearest whole number, as that is as close as you can place your points.

You may wish to save this chart (rev 6 Jan 2005) for Point Placement:

dia. p1 p2 p3
0 100 29 50 71 - (29.2832188134525 & 70.71067811865475)
0 200 59 100 141 - (58.5786437626904, & 141.4213562373096)
0 300 88 150 212 - (87.8679656440356 & 212.1320343559644)
0 400 117 200 283 - (117.1572875253808 & 282.8427124746192)
0 500 146 250 354 - (146.446609406726 & 353.553390593274)

0 600 176 300 424 - (175.7359312880712 & 424.2640687119288)
0 700 205 350 495 - (205.0252531694164 & 494.9747468305836)
0 800 234 400 566 - (234.3145750507616 & 565.6854249492384)
0 900 264 450 636 - (263.6038969321068 & 636.3961030678932)
1,000 293 500 707 - (292.893218813452 & 707.10678118654)

1,100 322 550 778 - (322.1825406947972 & 777.8174593052028)
1,200 351 600 849 - (351.4718625761424 & 848.5281374238576)
1,300 381 650 919 - (380.7611844574876 & 919.2388155425124)
1,400 410 700 990 - (410.0505063388328 & 989.9494936611672)
1,500 439 750 1061 - (439.339828220178 & 1,060.660171779822)
1,600 469 800 1131 - (468.629150101523 & 1131.3708498984760)

Of all the diameters listed in the chart, a circle of 700 units comes the closest to being perfect. 1,400 1,000 and 100 are close.

The least round are 1,200; 500 and 200.

-----------------------

The closest we can actually place points to make a circle 100 units in diameter (29, 50, 71) is shown below in red.
Note that the resulting circle is ever so slightly diamond shaped.

On top of it is another contour made by moving the off-points out just one position (28, 50, 72) shown in black.
Note this circle is slightly more box shaped.
The red X's show where points from one glyph are exactly on top of points from another glyph.

Image
A Perfect Circle is simple with paper and compass, but with computer graphics we are constrained to using whole numbers.
As pi is not a whole number, when circles increase or decrease in diameter they must cycle between these two shapes.

Moving a point here or there could be helpful to compensate for optical illusions resulting from nearby glyph elements.


Circle Secrets


:arrow: II. A Perfect Circle ISN’T Perfect!
Even if we could produce a perfect circle, the curve of the circle presents an optical contusion (sic) that the Top is lower, the bottom is higher, and the sides are narrower than other letters.
If placed Perfectly on the Base Line it appears to float above it.
To look right it needs to be about 1% lower (and taller) than other characters.

Compensating for this is known in the trade as overshoot.
Overshoot is also needed for the curves of a b c d e etc., and the points of v and w need even more, usually about 3-5%.

I have some fonts that use overshoot on every letter, thus defeating the whole purpose of the effect.

For "Hand Written Fonts" that are supposed to "be all over the place," none of this "overshoot"stuff matters.

Image
Oh’s and zero’s usually look better if the inner contour is closer to the outer contour at the top and bottom.
These adjustments are known as stress points. I think "stress areas" would be better terminology.

Circle Secrets

:arrow: III. Elipses Are easy!
Just go to the contour mode and select your circle. grab the center of a side and push it in or pull it out as much as you want!

If you want to rotate an elipse, just right-click inside the selected contour (an "X" will appear in the center of your glyph), grab a corner and spin it to the desired location.
Diagonal Guide lines are good for locating contours when slanting fonts, but usually not for off-point placement. This was used extensively in Old Style Fonts, but if you do this at outer contour boundaries it causes interpretation problems for your computer and printer.
FCP identifies these extreme off-points as Red Warning Points.

Image

Note the RED points. This is not good. Not good at all! We hates them! [Shudder]


Let not your heart be troubled.
They can be repaired by making a few adjustments ...

Image

Ah! All is well.

A single off-point works well in a tight corner as long as there are properly placed on-points nearby.

Circle Secrets

:arrow: IV. Tipping the Tilt.
You can create an optical illusion by sliding points horizontally or perpendicularly in the inside contour only and subtly make the entire glyph appear to tilt. Of course you can do the same with the outer contour.

Image

*Note that the upper right point of the third glyph is red.
It is an off-point because it is beyond the bounding box, and only Global Validation Detection is turned on.
The good news is that it does have a parallel on-point behind it. If that other point were lowered a single pixel then there would be two strikes against it.
If this were a single glyph [with no on-curve points to the left] the bottom left off-curve point would also be red.
To see all Validation problems go to Tools > Options > Validation > Off-curve extreme coordinates and change to Local Detection.


Circle Secrets

:arrow: IV. How could you make a circle into a letter?

One way is to open the glyph editing window, select the glyph contours and reverse them, then paste a circle over them.

Another is to to take a circle and add points at the places where you want to modify it. Select a point counter-clockwise from that position and press the A key three or four times to add points. Do the same on the other side of the glyph.

Move the new points to your desired positions, press the F or N keys to change their "persuasions" and you are done!

Image


Circle Secrets

:arrow: V. "Open Face" glyphs require four contours. An easy way to do this is to copy your original circle to the clipboard, paste it back on top of itself and move the new circle off to the right.

Grab the upper right corner and shrink it down as much as desired. Again copy it to the clipboard and paste it. Right-click inside the contour and reverse the direction, then move this incarnation inside the original circle.

Repeat as often as desired, then delete the right circle to finish.

Image

Circle Secrets

:arrow: VI. Bits And Pieces Rounding or other fancy stroke terminations, graceful curves, and maintaining line width on angular lines are easily solved with “Construction Contours” to quickly and accurately place your final glyph points. One of your most helpful tools is glyph $0011, the period, or “Full Stop.”

This could be the first character formed in making any font from scratch because it is so useful in forming the other characters. Even better, you may add a circle glyph 700 units in diameter strictly as a construction contour to be pasted and manipulated later on. [near] Perfect is good enough!
Copy and paste it into the “O” and “o” glyph edit windows, and stretch it to the cap or x-height. Paste in a new period, reverse contour direction and stretch it to your desired size for the center contour, and move it into place. “Box” the bottom line points and press the down arrow as required for overshoot. Do the same for top overshoot, make your adjustments for stress areas if you want on the inner contour, and you now have three glyphs finished!

Now copy “O” to the clipboard and paste it in C, D, and Q. Most of your work is already done on the “round letters.”
You could finish the modifications with hit or miss point removal and placement, OR you could re-copy $0011 to the clipboard and paste it as often as desired in each glyph edit window as Construction Contours. Move them to the locations you like for leg terminations.
Select all contours and the green button Get Union.

Note: If you have errors in the glyph, parts of it may disappear. Press the undo arrow, fix the problem, and try again.
Last edited by Dave Crosby on Sat Oct 25, 2008 10:57 am, edited 59 times in total.
Aut nunc aut nunquam

Dave Crosby
Typographer
Typographer
Posts: 784
Joined: Mon Feb 23, 2004 1:13 pm
Location: Enoch, Utah

Correction

Post by Dave Crosby » Wed Jan 05, 2005 6:47 pm

This morning I was making some minor corrections to this tutorial (replacing the final [b/] with the correct [/b] etc.) when I noticed a major error.

Point placement for the most nearly perfect circle occurs on the diameter of 700 units, NOT at 1,100 as I previously thought. There were errors in the math on the point placement chart that I have now corrected.

Sorry about that!
Aut nunc aut nunquam

gregor
Posts: 9
Joined: Tue Apr 05, 2005 2:17 pm

Making a circle

Post by gregor » Mon Apr 11, 2005 12:40 pm

My suggestion for a quick and dirty way of making a pretty good circle is the following:
Make an octagon (make a square either freehand (Shift drag helps a lot) and adjust the corners numerically to be exactly square) or pull the sample rectangular glyph onto the glyph editing area and adjust the height and width to the same value.
Copy the square and paste it in place.
You should have two identical squares in the same location.
Rotate one of the squares 45 degrees, center the rotation on the center of the glyph.
Get the Union of the two glyphs- This is an octagon
Switch to point edit mode, select ever-other point along the perimiter of the octagon.
'Add points' from the context menu (I usr the keybord key to get to the menu). These newly added points are going to be on the circumference of the circle so they should be on the centers of the top, bottom and extreme left and right sides of the octagon. If not, undo and select the other four points before you 'Add points'.
Ctrl+t to invert the selection (all points other than the extreme points should now be selected)
Make these points 'Off curve' either from the context menu or the position tab of the Transform tool dialog.
Voilá a pretty good circle- (it might even be perfect?)

Bhikkhu Pesala
Top Typographer
Top Typographer
Posts: 8165
Joined: Tue Oct 29, 2002 5:28 am
Location: Seven Kings, London UK
Contact:

Post by Bhikkhu Pesala » Mon Apr 11, 2005 4:00 pm

My suggestion for a quick and painless way to make a circle is to drag one from the Samples toolbar and resize it using the Transformation toolbar. :) Why reinvent the wheel? :lol:
My FontsReviews: MainTypeFont CreatorHelpFC12 Pro + MT8.0 @ Win10 1809 build 17763.504

Bhikkhu Pesala
Top Typographer
Top Typographer
Posts: 8165
Joined: Tue Oct 29, 2002 5:28 am
Location: Seven Kings, London UK
Contact:

Re: Making a circle

Post by Bhikkhu Pesala » Tue Apr 12, 2005 1:40 pm

gregor wrote:Get the Union of the two glyphs- This is an octagon
..
Voilá a pretty good circle- (it might even be perfect?)
Font Creator offers several different ways of working. It’s great to learn from the way that other people solve the same or a similar problem. By using the transform toolbar, and by copying and rotating regular shapes, one can produce geometric shapes. I found this invaluable when making a complex Dhammacakka Symbol. I carefully drew one spoke using guidelines to get it symmetrical. Then I duplicated it, mirrored the duplicate, and joined them to make a full diameter. Then I copied and rotated that by 90º to get a cross. Then I copied and rotated the cross by 45º to get eight spokes. Finally, I added a few circles to make the rim and the hub. Get union of contours makes this easy. Not quite as powerful as Corel Draw, but then this is not a vector graphics package.

Image

What you need to make an octagon from two squares is "Get intersection of contours," as "Get union of contours" produces an eight-pointed star.

Select all of the points of the octagon, add intermediate points, invert the selection, and make those points off-curve. Finally you can drag a square marquee to select the four superfluous on-curve points and delete them without changing the shape of the near perfect circle.

The final result has 12 nodes, 6 on curve, and 6 intermediate off curve points. In theory, the samples toolbar glyph, which has 16 nodes, with four on curve points and twelve off curve points, is a more perfect circle.

However, by doing this little exercise I discovered that the circle is misshapen. It is 1699 funits wide, but only 1697 units high. The rectangle should perhaps be a perfect square of the same size. An octagon, pentagon, and hexagon might be useful additions to the samples toolbar font.
My FontsReviews: MainTypeFont CreatorHelpFC12 Pro + MT8.0 @ Win10 1809 build 17763.504

Post Reply