search

PaintLab / PixelFarm

From Vectors to (sub) Pixels, C# 2D Rendering Library
Other
156 stars 21 forks source link

Glyph Analysis #4

Open prepare opened 7 years ago

prepare commented 7 years ago

Now, You can imagine "How to implement Font Variation" (https://github.com/LayoutFarm/Typography/issues/37).

This issue is designed for documentation project. If you want to comment, just create a new issue and link back.

:)

prepare commented 7 years ago

Glyph Analysis (DEPRECATED)

see new version below

analysis1

pic 1: Glyph analysis (deprecated)

analysis1 pic 2: shows grid (deprecated)

analysis2

pic 3: shows only glyph bones (hide centroid bones) (deprecated)

prepare commented 7 years ago

Glyph Analysis

glyph_analysis2

pic 1: triangulated original outlines

1) original glyph outlines, contours are triangulated (with PixelFarm.Triangulation lib). The triangulation lib generates triangles (blue outline).

2) we create a centroid on each triangle (small yellow dot) and link it together (red line).

Each triangle has 1 centroid point. A centrod line connects between 2 adjacent triangles via centroid point.

(a centroid line links 2 triangulation triangle together)

3) then create a mid point at contact surface of the pair of triangles. We create a joint at that point, and call it 'GlyphBoneJoint'

4) we link 2 GlyphBoneJoints together, this link is called 'GlyphBone' (deep pink line).

5) we create a line from GlyphBoneJoint to 'outside' edge of the glyph contour, and call it 'Rib' (white line with green end point). Some ribs are unnecessary, we will remove it later

glyph_analysis2

pic 2: triangulated triangles, remove some unnecessary ribs

glyph_analysis5_0

pic 3: hides centroid link lines

glyph_analysis5

pic 4: hides trianglulaton triangles

glyph_analysis7_0

pic 5: new generated controlling 'rib', red line[1], 50% of original length

glyph_analysis8_1

pic 6: new generated controlling 'rib', red line[1], 50% of original length

glyph_analysis9_0

pic 7: new generated controlling 'rib', red line[1], 50% of original length

glyph_analysis_22

pic 8: a secondary rib (white line), a perpendicular line from edge to bone

glyph_analysis_u_23

pic 9: show triangulated triangles and centroid line of pic 8

glyph_analysis_u_25

prepare commented 7 years ago

glyph_analysis4

pic 1: simplified bones, shows centroid link

glyph_analysis6_0

pic 2: simplified bones, shows triangulation results

glyph_analysis6_1

pic 3: simplified bones, shows perpendicular line (yellow) to shortest bone or joint

glyph_analysis7_1

pic 4: new generated controlling 'rib', red line, 50% of original length

glyph_analysis8_2

pic 5: new generated controlling 'rib', red line, 50% of original length

glyph_analysis9_1

pic 6: new generated controlling 'rib', red line, 50% of original length

glyph_analysis_21

pic 7: a secondary rib (white line), a perpendicular line from edge to bone

glyph_analysis_e_24

pic 8: show triangulated triangles and centroid line of pic 7

glyph_analysis_23

prepare commented 7 years ago

glyph_analysis_10

pic 1: glyph l, Tahoma, most basic triangulated form (2 triangles)

[1], [2] => triangulated triangle and its centroid

[3], [4]=> triangulated triangle and its centroid

centroid line (red) link 2 centroid of 2 adjacent triangles.

[5] => mid point of the 'INSIDE' 'contact' edge of the two triangle, this become 'GlyphBoneJoint'

[6], [7] => line link (blue) from centroid to 'tip' edge

prepare commented 7 years ago

glyph_analysis_26_o

pic 1: Tahoma, 620 pt, GlyphDynamicOutline, 150% stroke expansion from original. glyph_analysis_26_o_2

pic 2: Tahoma, 620 pt, GlyphDynamicOutline, 50% stroke expansion (shrink) from original.

glyph_analysis_26_o_4

pic 3: from pic1, remove triangulated triangles and centroid bones

glyph_analysis_26_o_3

pic 4: from pic2, remove triangulated triangles and centroid bones

prepare commented 7 years ago

glyph_analysis_num3_30

pic 1: Tahoma, 460 pts

glyph_analysis_num3_31

pic 2: from pic 1, no edge offset.

glyph_analysis_num3_32

pic 3: from pic 1, edge offset +10px from master outline

glyph_analysis_num3_33

pic 4: from pic 1, edge offset -10px from master outline, has some errs

glyph_analysis_num3_34

pic 5: from pic 4

prepare commented 7 years ago

Century font, A, 460pts

glyph_analysis_a_40 pic 1: master outline

glyph_analysis_a_46

pic 2: from 1

glyph_analysis_a_41 pic 3: from 1, master outline with edge offset -10px (thin)

glyph_analysis_a_47 pic 4: from 3

glyph_analysis_a_42 pic 5: from 1, master outline with edge offset +10px (thick)

glyph_analysis_a_45

pic 5: from 4

prepare commented 7 years ago

AutoFit Developing...

new GlyphBone (white line) is move to fit the grid(x,y).

Tahoma font

glyph_analysis_fit_a_20px

pic 1: grid size w,h (20px,20px)

glyph_analysis_fit_a_10px

pic 2: grid size w,h (10px,10px)

glyph_analysis_fit_e_10 pic 3: grid size w,h (10px,10px)

glyph_analysis_fit_e

pic 4: grid size w,h (10px,10px)

prepare commented 7 years ago

glyph_analysis_fit_e_21

pic 1: grid w,h (1px,10px)

glyph_analysis_fit_u_21 pic 2: grid w,h (1px,10px)

>>

prepare commented 7 years ago

Preview Latest AutoFit + SubPixelRendering

glyph_analysis_e_26

pic 1: Tahoma, 8 pt, (1) No AutoFit , (2) with AutoFit, Tahoma, 10pt, (3) No AutoFit, (4) with AutoFit

For this version, The AutoFit feature is nearly complete.

prepare commented 7 years ago

sharp edges

autofit

pic 1: autofit, gray scale,Tahoma 8 pts

prepare commented 7 years ago

autofit_a

pic 1: Tahoma, 8 pt, autofit + subpixel rendering with Typography

prepare commented 5 years ago

hint vs no hint problem

some glyphs have problems ...

tt_hint pic 1: Tahoma, 8pt

tt_hint1_zoom pic 1: zoom

prepare commented 5 years ago

July 2019, Glyph analysis note, How to show 'glyph bone'?

2019-07-15_08-46-16

glyph_bone_settings

prepare commented 5 years ago

July 2019, Glyph analysis note, 'DynamicOutline'

2019-07-16_21-20-40