Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Glyph Analysis #4

Open
prepare opened this issue Apr 7, 2017 · 15 comments
Open

Glyph Analysis #4

prepare opened this issue Apr 7, 2017 · 15 comments

Comments

@prepare
Copy link
Member

prepare commented Apr 7, 2017 •
edited
Loading

Now, You can imagine "How to implement Font Variation" (LayoutFarm/Typography#37).

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

:)
@prepare
Copy link
Member Author

prepare commented Apr 7, 2017 •
edited
Loading

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
Copy link
Member Author

prepare commented Apr 16, 2017 •
edited
Loading

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)

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

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

  3. 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 prepare mentioned this issue Apr 17, 2017
Open
@prepare
Copy link
Member Author

prepare commented Apr 17, 2017 •
edited
Loading

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

@PaintLab PaintLab locked and limited conversation to collaborators Apr 17, 2017
@prepare
Copy link
Member Author

prepare commented Apr 18, 2017 •
edited
Loading

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
Copy link
Member Author

prepare commented Apr 21, 2017 •
edited
Loading

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
Copy link
Member Author

prepare commented Apr 26, 2017 •
edited
Loading

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
Copy link
Member Author

prepare commented Apr 26, 2017 •
edited
Loading

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
Copy link
Member Author

prepare commented May 1, 2017 •
edited
Loading

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
Copy link
Member Author

prepare commented May 1, 2017 •
edited
Loading

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
Copy link
Member Author

prepare commented May 7, 2017 •
edited
Loading

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
Copy link
Member Author

prepare commented May 11, 2017 •
edited
Loading

sharp edges

autofit

pic 1: autofit, gray scale,Tahoma 8 pts

@prepare
Copy link
Member Author

prepare commented May 11, 2017 •
edited
Loading

autofit_a

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

@prepare
Copy link
Member Author

prepare commented Nov 10, 2018 •
edited
Loading

hint vs no hint problem

some glyphs have problems ...

tt_hint
pic 1: Tahoma, 8pt

tt_hint1_zoom
pic 1: zoom

@prepare
Copy link
Member Author

prepare commented Jul 15, 2019

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

2019-07-15_08-46-16

glyph_bone_settings

@prepare
Copy link
Member Author

prepare commented Jul 16, 2019

July 2019, Glyph analysis note, 'DynamicOutline'

2019-07-16_21-20-40

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@prepare