Font Decoration by Automatic Mesh Fitting1

Cameron Browne

Canon Information Systems Research Australia (CISRA), Sydney, Australia

Abstract: Glorious Fonts, a new graphically-based font type, allow interesting effects to be applied to existing character sets. The difficulties of automating this process are examined in the context of applying Celtic knotwork designs to plain text characters. An analysis of knotwork construction techniques shows how complete designs may be described by an expanded tile set. This paper also presents an algorithm for automatically fitting a flexible mesh to arbitrary character outlines, based on a semi-regular distribution of internal points and their Delaunay triangulation. This mesh is of particular interest as it is composed of well-formed quadrilateral elements, with few supporting triangular elements, upon which the knotwork design may be realised.

1 Introduction

1.1 Glorious Fonts

Glorious Fonts are the native font type supported by OpenPage, a script-based graphics and image processing language developed at CISRA [17]. They draw on a rich supply of graphics capabilities to allow a variety of effects not available in traditional fonts. Glorious Fonts are parameterised, allowing the font designer to give the user a measure of control over the font's appearance at render time.

With an overabundance of typefaces available today our attention has turned to the creation of decorated character sets derived from existing fonts, a task well suited to Glorious Fonts. One aspect of CISRA’s Glorious Font project is the development of an authoring tool that automatically applies parameterised effects to existing typefaces to produce aesthetically pleasing (and readable) results. This paper is the summary of one such effect.

1.2 Automatic Font Decoration

Designing a complete font by hand is time consuming and prohibitively expensive. Automatic font generation is preferable although it is difficult to define the relevant parameters, provide a suitably expressive interface, and achieve artistically acceptable results. It is necessary to analyse the artist’s approach to the problem, and apply their innate aesthetic rules as much as possible. Figure 1 illustrates this process in the context of applying a style of artwork known as Celtic knotwork to the outline shape of a plain text character.

Figure 1a illustrates a naive approach to this problem. The knotwork is applied to a low-resolution grid composed of square cells that roughly correspond to the character’s shape. This is the approach used by most knotwork generation

1Colour figures can be dowloaded from the Web (http://diwww.epfl.ch/w3lsp/ridt98.html).

programs available today. Although intricate, the design is regular and sterile, and devoid of much appeal. This result can be improved superficially by introducing some entropy into the system through random perturbation of the grid points (figure 1b), resulting in a less regular and slightly more interesting design.

(a) (b) (c) (d)

Fig. 1. Celtic knotwork automatically applied to a character outline: (a) regular square grid, (b) grid (perturbation = 0.3), (c) fitted 3,4-mesh, (d) 3,4-mesh (perturbation = 0.3).

A superior solution is achieved by understanding how artists visualise and implement this style of artwork. Instead of the shape and structure of the grid dictating the knotwork design, the design is first devised, and is then mapped to the character shape. As the shape of the outline must influence the grid topology to some extent, particularly for more complex characters, a compromise is made, and a flexible mesh is fitted to the character outline upon which the knotwork design is realised (figure 1c).

This mesh-fitting approach gives an attractive result with a ‘handmade’ feel, and is not noticeably improved by perturbing the mesh points (figure 1d). However, it is recognised that aesthetic preferences vary widely and the user is given the freedom to choose either approach (square or fitted grid).

1.3 Statement of the Problem

It is desired to fit a 2D mesh composed of 3-sided and 4-sided elements to an arbitrary character outline, such that the mesh boundary closely matches the character shape. Such a mesh will be called the 3,4-mesh of the outline shape.

Element edges should be approximately equal in length, and internal angles should be approximately 60° for triangular elements and 90° for quadrilateral elements. The mesh should be composed predominantly of quadrilaterals, with triangles only present to support the quadrilateral structure where necessary.

Once a satisfactory 3,4-mesh is determined, a knotwork design of hand-drawn quality is to be automatically generated and mapped to the mesh structure.

2 Celtic Knotwork

2.1 Historical Overview

Celtic knotwork is a distinctive style of art based on a woven plait, often fitted to an outline contour, in which cords are broken and rejoined in a systematic manner,

to create the effect of an intricate weave. It is a central device in much of Britain’s religious art heritage including illuminated manuscripts, stonework crosses and jewellery. Figure 2 demonstrates how typically ‘Celtic’ designs may be derived from a simple woven plait by the introduction of breaks at crossover points, where the cord is broken and adjacent cord ends rejoined. Allen [1] dates the transition from plaitwork (typically found in Roman, Greek and Egyptian decorative art) to knotwork sometime between 563AD and 744AD.

(a) (b) (c) (d)

Fig. 2. Knotwork designs based on the plait: (a) plain plait composed of 1 cord, (b) plait with angular tips, (c) 1 break (giving 2 cords), (d) 6 breaks (1 cord).

If the number of cells along adjacent sides of the recangular grid have a greatest common factor of 1, then the resulting plait is described by a single continuous path. Figure 2a shows a 3x7 grid described by a single continuous cord. Breaks may be carefully introduced so that the number of cords does not change (figure 2d). Cromwell [7] provides a detailed analysis of the plait-break approach to knotwork generation, and the symmetry and topology of the resulting patterns. He emphasises that the geometrical constraints imposed by this approach do not limit its creative potential.

George Bain’s [2] study of Celtic knotwork remains the definitive volume on knotwork construction techniques. Iain Bain [3] takes some steps to extending and formalising these techniques in a modern setting.

2.2 Knotwork Characteristics

Celtic knotwork generally demonstrates the following design features:

• Grid agreement: Cord paths are strongly diagonal, reflecting their derivation from the plaitwork grid.

• Continuity: Designs are composed of a single cord (or as few as possible) that follows a continuous path. The complexity that can be achieved with a single cord is a measure of the artist’s skill.

• Alternating weave: Starting from an arbitrary point, a cord alternately passes over and under the intersecting cord at each crossing, as it is followed around the design. Thurston [20] proves that an alternating weave can be applied to any set of closed curves if there exists: (i) no point at which three or more curves cross, and (ii) no point at which curves touch without then crossing. The observations of Iain Bain [3] indicate that these stipulations hold for traditional knotwork designs.

• Regularity: Cords are evenly spaced and uniformly dense across the pattern. Breaks are generally placed symmetrically and at regular intervals.

• Repetition: Knotwork units often form motifs that are repeated across the design, and connected continuously with neighbouring units. To fit the outline shape, motif units may vary in size uniformly, or through (possibly non-affine) transformations.

• Cord interlacement: Interlacement refers to the technique of replacing single cord paths with multiple parallel cord paths. Interlaced cords are topologically similar to their single-cord counterparts, and obey the alternating weave constraint. We use the term n-interlacement to refer to the replacement of single cords with n parallel cords.

See Iain Bain [3] for a more detailed analysis of knotwork characteristics.

2.3 Knotwork Tile Sets

A variety of alternative techniques exist for the realisation of knotwork designs (see [2], [3], [13], [14], [19]). Sloss [19] demonstrates the use of discrete tile sets decorated with knotwork segments. The tiles are combined on a simple rectangular grid, with rotation as required to maintain cord continuity, to create an overall knotwork design. The result is similar to figure 1a.

To successfully apply this technique to a non-regular 3,4-mesh, however, the tile set must be expanded to include triangular tiles that ‘fit’ with arbitrarily shaped quadrilateral tiles (derived from non-affine transformations applied to square tiles). An n-tile set is complete if it contains a tile for each possible entry/exit combination, for n edges. Figure 3 shows a minimal complete 3,4-tile set that can handle all cases that may occur in a 3,4-mesh.

(a) (b) (c) (d) (e) (f) (g) (h) (i) (j)

Fig. 3. A minimal complete 3,4-tile set.

Right-handed weave [3] is the convention used in this paper, therefore entry curves form overpasses at tile edges, and exit curves form underpasses at tile edges. The curves illustrated in figure 3 show the paired offsets (positive and negative) that are derived from director curves describing the cord paths.

Each tile contains at most one entry curve and one exit curve per edge, and edges with entry curves always have a corresponding exit curve. Entry and exit curves are open curves. Internal curves are closed curves that exist within the tile boundary without touching or crossing it at any point (figures 3f and 3j).

To maintain geometric continuity between neighbouring tiles, angles of entry and exit should agree (45° in this case), and the relative entry and exit positions should agree (0.5 for both unit triangle and unit square tiles).

Fig. 4. More complex complete 3,4-tile sets (‘angular tip’ and ‘angular twisted’).

Figure 4 demonstrates some more complex complete 3,4-tile sets. Any number of tiles from different tile sets may be combined to create interesting weave effects, provided that the resulting set is complete with respect to the target mesh. Complete 3-tile sets or complete 4-tile sets (subsets of the complete 3,4-tile sets) may be chosen to fit a 3-mesh or 4-mesh respectively.

2.4 Multiple Cord Interlacement

The alternating weave property of closed plane curves [20] can be exploited to automatically apply n-interlacement to tile sets. Cord paths describing the n-interlacement are obtained by offsetting the director (entry) curves to a specified cord spacing. The defining cord edges are then obtained by offsetting the n cord paths to a specified cord width in the positive and negative directions, relative to the cord paths (figure 5).

(a) (b) (c) (d)

Fig. 5. Derivation of a 2-interlaced tile: (a) director curves, (b) cord path offsets, (c) cord edge offsets, (d) final result with hidden underpasses.

Both the cord path and cord edge offsets are exact to within a given tolerance, but must be processed to ensure geometric continuity matching that of the original

curves. Offset curve ends are clipped or extended to snap end points as required, then clipped to the unit tile shape. Entry and exit points are adjusted along their respective edges to maintain constant cord width at tile edges.

The alternating weave pattern is visualised by hiding curve segments that correspond to underpasses. This is achieved by subdividing curves at intersection points, and marking every fourth crossing interval as ‘hidden’. Care must be taken to synchronise the crossing count for multiply interlaced curves (figure 6).

(a) (b) (c)

Fig. 6. N-interlacement: (a) single cord, (b) 2-interlacement, (c) 3-interlacement.

As the intersection points of positive and negative cord edge offset pairs must agree at overpasses and underpasses, invalid weaving patterns may occur for convoluted director curves or multiple interlacement, especially for wider cords. This problem is avoided through the use of adaptive variable offsetting as follows:

! apply constant offset! while invalid weave! ! reduce internal offset radius! ! apply variable offset

Figure 7 demonstrates adaptive variable offsetting for different cord widths, where re is the constant offset radius at entry/exit points, and ri is the variable radius offset at all other (internal) points. Note how the curve width at midpoints is effectively reduced to allow a valid weave, and larger re : ri ratios (such as that of figure 7c) require that the 45° entry/exit angle condition be relaxed for offsets.

(a) (b) (c)

Fig. 7. Adaptive variable offsetting: (a) constant offset re = ri = 0.075, (b) variable offset re = 0.15, ri = 0.1275, (c) variable offset re = 0.175, ri = 0.1264.

Note also that the offset radius at curve entry and exit points remains constant and independent of the internal offset radius, to ensure that curve ends correspond to those of neighbouring tiles. A simple heuristic is used to determine whether a weaving pattern is valid, based on the number of crossings for each cord offset. The offset radii are given in tile units, where each tile edge is 1.0 unit in length.

Hence the generation of n-interlaced tile sets has been parameterised, and a wide variety of patterns may be created simply by specifying:

1. a set of director curves, 2. the number of interlaced cords, 3. cord separation, and 4. cord width.

Once the knotwork tile set has been created, the next step is to generate the fitted 3,4-mesh upon which it is to be mapped.

3 Mesh Fitting to an Arbitrary Outline Shape

3.1 Background

The following mesh generation algorithm was inspired by the work of Lee & De Pennington [11]. They outline an algorithm for the generation of a finite-element mesh composed of quadrilateral and triangular elements, constructed from simple shapes with regularly distributed point sets that are merged using constructive solid geometry (CSG) rules. Their approach proved unsuitable for the current project for two main reasons:

• Shape complexity: Character outline shapes may be arbitrarily complex, and not amenable to regular point distributions. A method for generating an acceptable distribution of mesh points is central to the following algorithm.

• Directional bias: One of the strengths of the Lee & De Pennington algorithm is the efficient columnar traversal of mesh points. However, this introduces a strong left-right bias that is especially noticeable for irregular point distributions. For knotwork designs it is desirable that mesh elements be strongly fitted to the outline, and that any uncertainty occurs towards the centre of the shape. This is especially important for the generation of borders around knotwork shapes (for examples see figures 14, 15b and 18a).

The notation used by Lee & De Pennington [11] has been modified as follows:

• v-point: mesh point at an outline vertex,• e-point: mesh point on an outline edge that is not a vertex,• b-point: mesh point on the outline boundary (either an e-point or a v-point),• i-point: mesh point internal to the outline shape.

3.2 Generation of Mesh Points

The distribution of mesh points within an outline shape is achieved using a wavefront that moves in discrete steps. The front progresses from the outline towards the shape’s interior, until it is cancelled by an opposing wavefront, depositing equispaced points along its perimeter at regular intervals. The density of the mesh is determined by a density parameter (figure 8). A base length (Lb) is determined directly from the mesh density, which is the preferred length of mesh element edges and the default spacing for mesh points. Lb is inversely proportional to the density parameter.

(a) (b) (c)

Fig. 8. Effect of varying the density parameter: (a) density = 0.1, (b) density = 0.5, (c) density = 0.825 (colour image).

The minimum length (Lm) for element edges is given by Lm = Lb / √2. This puts a lower limit on mesh element size, ensuring some degree of regularity, and means that any mesh point P falling within the region described by a set of 3 or 4 reasonably spaced (Lb distant) mesh points Pr will be at most Lm distance from at least one member of Pr. This is critical in detecting interference along the wavefront and ensuring that the wavefront progression terminates.

(a) (b) (c)

Fig. 9. Mesh point generation: (a) initial seed points, (b) after 1 step of the wavefront, (c) final result (3 steps). Normal vectors are shown for wavefront points Pw. Squares

indicate v-points.The wavefront is initialised by the addition of v-points that correspond to

outline curve end points that do not exhibit first-degree geometric continuity across the join [4]. Intervals along the outline between successive v-points are seeded by e-points that are initially regularly spaced by a distance as close to Lb as possible. This regular spacing is modified by local outline curvature so that convex intervals are more densely packed and concave intervals are more sparsely spaced (see the arch of the ‘n’ in figure 9). This curvature-dependent spacing reflects the effect on point spacing observed when a regular mesh is subjected to torsion. The seeded e-points are also added to the initial wavefront (figure 9a).

A direction vector n is associated with each initial seed point, determined by the inward curve normal at the corresponding point on the outline (figure 9a). The seed b-points that comprise the initial wavefront are also added to the initial set of mesh points Pm. The wavefront progressively moves forward, adding new points to Pm until Pw is empty, as follows:

! Pm = Pw = initial seed points! while Pw not empty! ! for each P ∈ Pw

! ! generate Ppʼ! ! merge Ppʼ with Pm

! ! ! add surviving Ppʼ to Pw! ! ! remove P from Pw

where Pp’ is the projected point set derived from point P. Pp’ is comprised of three points (figure 10):

1. the forward projected point (Pf’) in the direction n,2. the left projected point (Pl’) in the direction 90° anticlockwise from n, and 3. the right projected point (Pr’) in the direction 90° clockwise from n.

P

Pf’

Pr’

Pl'

nn

Fig. 10. Projected point set Pp’. Each projected point is approximately Lb distance from P. The vector n indicates the wavefront normal at point P.

Projected points are ideally a distance Lb from P, but in practice best results are obtained by adjusting the projection distance to match the expected number of projection steps. Projected points that lie outside the outline shape are removed from Pp’. For 3-mesh generation, Pp’ consists of four projected points at 60° intervals.Each member of Pp’ is tested for proximity to existing Pm points, and point

pairs that are less than Lm distance apart are merged according to rules similar to those proposed by Lee & De Pennington [11]. Given two points to be merged (P1 and P2), the actions outlined in table 1 are taken.

P2 is v-point P2 is e-point P2 is i-pointP1 is v-point delete either delete P2 delete P2

P1 is e-point delete P1 delete either delete P2

P1 is i-point delete P1 delete P1 take average

Table 1. Rules for merging mesh points P1 and P2..

Taking the average of two i-points involves moving either of the points to the midpoint of the line segment P1P2 and deleting the other point. As this midpoint may itself violate the Lm space of existing Pm points, a postprocessing step merges invalid pairs within Pm. Point pair proximity is efficiently determined by a grid-based local neighbourhood search [5].

All points generated during the wavefront progression are i-points, so only the last row and last column of table 1 apply during this process. However, other cases may occur when generating the seed points with which the wavefront is initialised, for instance adjacent v-points that are less than Lm distance apart.

The wavefront is propagated to each successive step by the addition of Pp’ members that are not deleted during the merge operation (figure 9b). Each mesh point is given a timestamp that indicates at which wavefront iteration it was added to Pm. All members of Pp’ are merged when opposing wavefronts meet, effectively cancelling out the wavefront at those points (figure 9c). The relationship of length Lm to Lb previously mentioned ensures that wavefronts do not ‘pass through’ each other. The wavefront may split into separate pockets during its progression, in which case the set Pw is the union of member points of each pocket. Following wavefront cancellation, we have the complete set of mesh points Pm.

Note that the final distribution of points is quite regular around the outline as desired, but becomes more uncertain towards the shape’s centre (noticeable in the arch of the ‘n’ in figure 9c). Internal regularity is improved during the following steps of mesh element generation.

3.3 Delaunay Triangulation

A Delaunay triangulation (DT) is then applied to the set of mesh points generated in the previous step.

The Delaunay triangulation of a finite set of data points is the triangulation that satisfies the empty circumcircle property, that is, there exists no triangle within the DT whose circumcircle contains any data points [12] as illustrated in figure 11a. It is a robust and well-documented technique for which efficient algorithms exist. The current implementation is based on a C++ program by Lischinksi, which was derived from the algorithm by Green & Sibson [8].

(a) (b) (c)

Fig. 11. Delaunay Triangulation: (a) neighbouring triangles with empty circumcircles, (b) and (c) non-unique but valid triangulations for four cocircular points.

The algorithm can be summarised as follows: starting with an initial triangle known to contain all mesh points, each mesh point is added to the DT such that the empty circumcircle property holds. As each point is added to the DT new edges must be created to accommodate it, and existing edges may need to be ‘flipped’ between alternative point pairs to maintain the empty circumcircle property. Flipped edges may themselves require further edges to be flipped, though this process converges quickly in practice.

A drawback of Lischinski’s algorithm is that four or more cocircular points result in a non-unique DT (figures 11b and 11c). However, this problem is largely irrelevant to the process of 3,4-mesh generation as such degenerate cases are readily converted to equivalent quadrilateral mesh elements (ie. the triangles in figures 11b and 11c will resolve to the same quadrilateral element). In fact, the point generation algorithm encourages the formation of mesh points in squarely distributed groups of four.

3.4 Conversion to Mesh Elements

The final step in the generation of the 3,4-mesh is the conversion of DT triangles into triangular and quadrilateral mesh elements (figure 13). Each DT triangle is either:

1. discarded and takes no further part in the mesh generation process,2. added directly to the mesh as a triangular mesh element, or3. paired with a neighbouring DT triangle to create a quadrilateral mesh element.

This is achieved by maintaining a set of candidate triangles Ti from which mesh elements are derived. Firstly, internal triangles (DT triangles whose triangular midpoints lie within the outline shape) are identified and added to the

set Ti. Non-internal triangles are discarded, as are degenerate internal triangles (those triangles with area less than some threshold). Each member of Ti is given a timestamp that corresponds to the minimum timestamp of the mesh points that comprise its vertices.

(a) (b)

Fig. 12. (a) Optimal quadrilateral ABCD is obtained by removing edge AC common to triangles T1 and T2. (b) Good quadrilateral EFGH is obtained by removing edge EG

common to triangles T3 and T4 (if the evaluation holds).

Optimal quadrilateral elements that can be formed from the members of Ti are identified and added to the 3,4-mesh. An optimal quadrilateral occurs when the edge shared by two neighbouring triangles is the longest edge of each triangle, and is instantiated by the removal of the shared edge (figure 12a). The two component triangles are removed from Ti. To encourage an outward-in progression of optimal quadrilateral elements in discrete steps, an initial pass is made on Ti members with the same timestamp, and then another pass is made regardless of timestamp.

Good quadrilateral elements that can be formed from the remaining members of Ti are identified and added to the 3,4-mesh. A good quadrilateral occurs when the shared edge of neighbouring triangles is removed, and the resulting quadrilateral satisfies some conditions regarding shape and proportion (figure 12b). The evaluation function used in the current implementation is as follows:

where ai is the quadrilateral’s internal angle at the ith vertex, Li is the length of the ith edge, Lavg is the average edge length, and threshold is some value dictating the

B

C

D

T2

T1

H

G

HT3 T4

ae

Lef

af

Lfg

ag

Lgh

ah

Lhe

E

F

'goodness' of the resulting quadrilaterals. This evaluation favours quadrilateral elements with internal angles that are approximately right-angled, and with edges of approximately equal length.

The two component triangles used to create the good quadrilateral are removed from Ti. Again, an initial pass is made on Ti members with the same timestamp, and then another pass is made regardless of timestamp.

A quadrilateral is described as well-formed if it is either optimal or good.

(a) (b)

Fig. 13. Mesh derivation: (a) DT of mesh points (Ti shown), (b) the resulting 3,4-mesh composed of well-formed quadrilateral and triangular elements.

The remaining members of Ti are added to the 3,4-mesh directly as triangular mesh elements. The 3,4-mesh is now constructed, with all members of Ti being either converted into well-formed quadrilateral mesh elements, or added directly. Figure 13 demonstrates a completed 3,4-mesh derived from the DT. Note how mesh points lying in squarely distributed groups of four result in neighbouring DT triangles (figure 13a) that are readily converted to optimal quadrilaterals (figure 13b). This is the key to the success of the mesh generation algorithm.

The uniformity of mesh elements can be improved at this point by adjusting each mesh point so that it is as equidistant as possible from all other mesh points with which it shares a mesh element edge. This is evident in the improvement in regularity from figure 13a to figure 13b.

By contrast, mesh points may be perturbed by moving each mesh point a small amount in a random direction. This introduces entropy into the mesh and reduces the regularity evident in some automatically derived grids (see figure 1b).

3.5 Other Mesh Types

The 3-mesh for an arbitrary outline shape can be derived directly from the DT by following the above method, but avoiding the quadrilateral conversion steps. Figure 14 illustrates 3-meshes to which triangular tile sets have been applied.

(a) (b)

Fig. 14. Triangular tile sets applied to 3-meshes, border width = 1 in both cases. Note the underlying hexagonal lattice structure (colour image).

Notice that the underlying lattice structure of the 3-mesh is hexagonal in nature, reflecting its composition of approximately equilateral triangular elements (most obvious in figure 14b). This is established during the mesh point generation process by modifying the projected point set Pp' to consist of four projected points at 60° intervals, rather than three points at 90° intervals as per the 3,4-mesh.

The 4-mesh for an arbitrary outline shape cannot be derived from the DT using the above method, as Ti members remaining after the conversion to quadrilateral elements cannot be discarded without serious impact on the connectivity of the resulting mesh. Instead, the 4-mesh is obtained by sampling the filled outline shape on a regular grid, and converting each occupied grid cell directly to a quadrilateral mesh element (see figures 1a and 1b). This is analogous to pixelating the filled outline shape at a lower resolution.

4 Instantiating Tiles on the Mesh

4.1 Applying Knotwork Designs to the Mesh

Given a 3,4-mesh fitted to the outline shape, mesh elements are related so that neighbouring elements share a link across the common edge. This allows knotwork continuity across tile edges. Breaks are introduced into the design by severing the link between neighbouring elements (figure 15).

Dividing the knotwork into border and interior regions, a device common in Celtic knotwork, is readily achieved by introducing breaks between elements with timestamp less than or equal to the border width and those with timestamp greater than the border width (figure 15b).

Once the knotwork design has been decided and applied, a knotwork tile and its orientation is associated with each mesh element. For each mesh element E, the set of matching tiles Tm is determined, such that each tile T ∈ Tm has the same number of vertices as E, and the number and distribution of entry/exit curve pairs in T matches the number and distribution of unbroken links in E. A tile T ∈ Tm is chosen at random, and the orientation required to match T to E is recorded.

(a) (b)

Fig. 15. Introducing breaks to the pattern: (a) random breaks across a shape on a square grid, perturbation = 0.4, (b) 3,4-mesh with border width = 1 (colour image).

4.2 Mapping Tiles to Mesh Elements

The paths that describe the final knotwork are derived as follows: copies are made of the component curves of each mesh element’s associated tile. These tile curve copies are then mapped to fit the element’s position, orientation and shape. Only the control points that describe the curves are mapped.

Quadrilateral Interpolation

For quadrilateral mesh elements, the unit square tile curves are mapped using a standard non-affine bilinear warp [16]. The source coordinates are the vertices of the tile’s unit square, and the destination coordinates are the mesh element vertices. The associated orientation value is used to align source and destination vertices correctly.

Fig. 16. Barycentric coordinates: source point P in unit triangle UVW is to be mapped to target point P’ in destination triangle U’V’W’.

Triangular Interpolation

Triangular tiles are mapped to triangular mesh elements using an interpolation scheme based on barycentric coordinates. Each control point P of the unit tile triangle UVW is mapped to the corresponding point P’ in the destination triangle U’V’W’ as illustrated in figure 16.

U

V

W

P

U’

V’

W’

P’

u

w

v

w

v

u

v

w

u

v’u’

w’

u’

w’

v’

u’

v’

w’P

The barycentric coordinates u, v, w for source triangle UVW, and u’, v’, w’ for destination triangle U’V’W’, are subject to the constraints that u + v + w = 1 and u’ + v’ + w’ = 1 [9]. The coordinates u and u' can be evaluated as follows:where A is the area of the triangle UVW, Au is the area of the triangle PVW, A' is the area of the triangle P'V'W', and Au' is the area of the triangle P'V'W'. The area of triangle UVW, is given by:

for vertices in anticlockwise order [6]. This result will be negative for vertices in clockwise order.

We can take advantage of the fact that the barycentric coordinates for point P remain constant under transformation from triangle UVW to point P’ in triangle

U’V’W’ (ie. u = u') as follows:

Substituting the area equation for Au’ and rearranging, this expands to:Similarly for v = v’:This gives a system of two linear equations with two unknowns (Px’ and Py’)

which are solved to determine P’. This process is applied to each control point of

the component curves belonging to each triangular tile.After the tile set has been mapped to the mesh, the only step remaining is to

render the final result.

5 Rendering Glorious Fonts

All knotwork examples in this paper are Glorious Font characters rendered using OpenPage [17]. The character outlines were extracted from existing TrueType font outlines [15] and converted to Glorious Font characters by applying the algorithms presented.

Glorious Fonts do not replace traditional fonts; rather they augment them. They provide a mechanism for describing and reproducing characters with much more detail than is presently available with existing fonts.

The basic elements that make up a Glorious Font are graphics objects (gobs) and graphics contexts (GCs). A number of gob types are available:

• spline paths defining character shapes, • image data in the form of pixel maps, • compositing operators [18], • transform matrices, and • selection gobs for choosing amongst gob/GC combinations.

Complex gob trees may be built up through the composition of simpler gobs. A GC is associated with each spline path gob, and describes the characteristics with which the gob is rendered including:

• colour (flat or blended between two reference colours),• opacity (flat or blended between two reference opacities),• fill style for filled shapes,• pen style including stroke width, dash pattern, mitre limit, line join style, line

cap style, and• antialiasing during render.

Advanced GC features (for both colour and opacity) include:

• linear blends (smooth transition between two points), and• edge blends (smooth transition between two sets of path edges).

(a) (b)

Fig. 17. Composited knotwork meshes: (a) B & W overlay (note the close fit to the outline), (b) coloured overlay (colour image).

The GCs within a Glorious Font are fully paramaterised and may be adjusted by the user to obtain a variety of interesting effects from the same font without affecting characters' basic shapes, even after the font has been compiled.

To create more complex effects, knotwork path gobs may be composited with other gobs such as filled character shapes (figure 17a), or other knotwork designs generated at different mesh densities and with different GC settings (figure 17b).

There are three particular gob/GC combinations of interest:

1. Stroked edges: Visible curve segments are drawn as open curves using a stroked pen.

2. Edge blends: Visible curve segments are paired with their opposing offsets (ie. positive cord offsets are paired with their negative counterparts) and are drawn as open curves with an edge blend between them.

3. Filled shapes: Visible curve segments and their opposing offsets are closed and filled.

(a) (b)

Fig. 18. (a) Opacity edge blend with independent linear colour blend, (b) flat colour stroked 3-interlace (colour image).

Highlighting and shadow effects provide visual cues that emphasise the weave pattern. A passable depth effect is illustrated in figure 18a. This is achieved by compositing an edge-blended path that smoothly changes from fully opaque along its centre to fully transparent along its periphery, over a filled path in a darker colour that exactly matches its shape. The result is then composited over a filled background shape. The same path edges are used for all knotwork components in this example (not the background cross shape), increasing efficiency. The components of figure 18a also undergo a linear colour blend from bottom left to top right independently of each other, despite accessing the same path edges.

Figure 18b demonstrates 3-interlacement with differently coloured cords to clarify the weave pattern. An inexpensive highlighting effect is achieved by

stroking the curves with coloured pens while leaving the path centres white. Note how well the stem-arm connections are handled by the 3,4-mesh generation algorithm, but that the thin tapering at arm extremities leads to some problems – this is hard to avoid if the outline is to be fitted faithfully.

6 Performance

The algorithms presented in this paper were implemented on a Pentium Pro 200, in the language MS-Visual C++ 4.2. The code was compiled in ‘Debug’ mode and was not fully optimised.

Mesh PtsMesh Pts DTDT TITI 3,4-Mesh3,4-Mesh TotalDensity ms pts ms edge ms Tris ms elem ms

0.1 - 19 - 60 - 17 - 9 -

0.2 - 23 - 72 - 22 - 12 -

0.3 - 38 - 117 31 45 - 23 31

0.4 - 49 - 150 31 61 - 33 31

0.5 - 81 - 246 78 114 - 60 78

0.6 - 123 - 372 125 187 31 98 156

0.7 - 202 31 609 250 323 47 167 328

0.8 62 460 78 1386 828 795 94 410 1062

0.9 265 1759 344 5288 1688 2862 191 1435 2488

Table 2. Execution times (milliseconds) and number of primitives generated at different steps of the 3,4-mesh generation process.

Table 2 shows the execution times in milliseconds and number of primitives generated during different steps of the 3,4-mesh generation process. Time values of ‘-‘ milliseconds indicate that the event’s speed was beyond the precision of the timing mechanism used. Measurements were made on the character ‘h’ (Arial Black, Regular, 10 point) for mesh densities of 0.1 to 0.9.

1

10

100

1000

10000

0.1 0.2 0.3 0.4 0.5 0.6 0.7 0.8 0.9

Mill

isec

onds

/ El

emen

ts

Density

MillisecondsElementsNorth

Fig. 19. Total execution time (milliseconds) and total number of mesh elements as functions of mesh density.

The ‘pts’ column contains the total number of mesh points following mesh point generation, the ‘edge’ column contains the total number of DT edges generated, the ‘tris’ column contains the number of non-degenerate internal triangles extracted from the DT and added to the set of candidate triangular elements Ti, and the ‘elem’ column contains the total number of quadrilateral and triangular mesh elements after mesh generation is complete.

Figure 19 demonstrates these results graphically as a plot of total execution time (milliseconds) and total number of mesh elements versus mesh density. A logarithmic scale is used to aid interpretation.

These results point to an exponential increase in execution time and mesh element number as density increases. However, best knotwork results are usually achieved for mesh densities in the range 0.6 to 0.7, for which both time and resource consumption are within reasonable bounds.

7 Conclusion

This paper presents a technique for the automatic application of Celtic knotwork designs to arbitrary character shapes. An analysis of knotwork design techniques allows the description of complete designs by component tiles that may be generated automatically, though some care must be taken in synchronising the weave patterns of multiply interlaced cords. An expanded tile set including triangular tiles is presented.

An algorithm is described for fitting a flexible mesh comprised of well-formed quadrilateral elements and subsidiary triangular elements to an outline shape, based on a semi-regular distribution of internal points and their Delaunay triangulation. Methods for mapping the knotwork tiles to the flexible mesh are shown.

This approach proved successful in relation to the stated aims of the paper. The resulting characters are of reasonable artistic merit, defined by few parameters, and produced in a fraction of the time that it would take to derive similar characters by traditional techniques. In fact the automatic process occasionally surprised the author by providing unexpected solutions to difficult shape-fitting problems.

Possible improvements to the algorithms include: (i) making the mesh point distribution more sensitive to local topology, (ii) a more sophisticated conversion from DT to well-formed mesh elements, resulting in a more regular mesh, and (iii) incorporating end constraints at tile edges so neighbouring curves merge continuously in all cases.

Glorious Fonts (the native font type of CISRA's OpenPage graphics language) are briefly described. The rendering techniques used to realise the examples in this paper are outlined.

The usefulness of the mesh generation algorithm is not limited to knotwork decoration, and has a wide range of possible applications (including geometric tessellations, space-filling curves, Escher-like tilings) some of which are being investigated at CISRA. Future work includes a more rigorous definition of the

aesthetic rules that govern designs’ artistic merit, and investigating methods for detecting interesting combinations in the parameter space.8 Acknowledgments

I would like to thank CISRA for supporting this research, in particular Quentin Scott and Gerard Hill for guidance and advice on font-related matters, and proofreading. Also thanks to Michael Arnold for suggesting some editorial improvements.

9 References

1. Allen J. R. Celtic Art in Pagan and Christian Times, Methuen, 1904.2. Bain G. Celtic Art: The Methods of Construction, Constable, 1951.3. Bain I. Celtic Knotwork, Constable, 1986.4. Bartels R. H., Beatty J. C. & Barsky B. A. An Introduction to Splines for Use in

Computer Graphics & Geometric Modelling, Morgan Kaufmann, 1987.5. Bentley J. L., Weide B. W. & Yao A. C. "Optimal Expected-Time Algorithms for

Closest Point Problems", ACM Transactions on Mathematical Software, Vol. 6, No. 4, December 1980, 563-580.

6. Bowyer A. & Woodwark J. A Programmer’s Geometry, Butterworths, 1983.7. Cromwell P. "Celtic Knotwork: Mathematical Art", The Mathematical Intelligencer,

Vol. 15, No. 1, 1993, 36-47.8. Green P. J. & Sibson R. "Computing Dirichlet Tessellations in the Plane", The

Computer Journal, Vol. 21, No. 2., 1978, 168-173.9. Hoschek J. & Lasser D. Fundamentals of Computer Aided Geometric Design, Trans. L.

L. Schumaker, Peters, 1993.10. Kim M., Park E. & Lim S. "Approximation of Variable-Radius Offset Curves and Its

Application to Bezier Brush-Stroke Design", Computer-Aided Design, Vol. 25, No. 11, November 1993, 684-698.

11. Lee Y. T. & De Pennington A. "Automatic Finite-Element Mesh Generation from Geometric Models – A Point-Based Approach", ACM Transactions on Graphics, Vol. 3, No. 4, October 1984, 287-311.

12. Lischinski D. "Incremental Delaunay Triangulation", Graphics Gems IV (Ed. P. S. Heckbert), Academic Press, 1994, 47-59.

13. Meehan A. Celtic Design: Knotwork, Thames & Hudson, 1991.14. Merne J. G. A Handbook of Celtic Ornament, Mercier, 1974.15. Microsoft Corporation TrueType 1.0 Font Files: Technical Specification Revision 1.5,

Microsoft, 1994.16. Myler H. R. & Weeks A. R. The Pocket Handbook of Image Processing Algorithms in

C, Prentice Hall, 1993.17. Politis G., Long T., Metcalfe J. & Kawamura N. "New Image Composition Language -

OpenPage", IS&T’s 11th International Congress on Advances in Non-Impact Printing Technologies, IS&T, 1996, 157-170.

18. Porter T. & Duff T. "Compositing Digital Images", Computer Graphics, Vol. 18, No. 3, July 1984, 253-259.

19. Sloss A. How to Draw Celtic Knotwork: A Practical Handbook, Blandford, 1995.20. Thurston H. A. "Celtic Interlacing Patterns and Topology", Science News, 1954, 50-62.