p5-single-line-font-resources/autocad_sxh_fonts/p5_autocad_shx_fonts/sketch.js at main · golanlevin/p5-single-line-font-resources · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
// p5 viewer for JSON generated by shx_batch_decode.py.

const currentFontName = "ROMANT";

/*
// Choose one of the following font names (without .json extension) to load:
ARCHITXT
BVFONT
Cdm
CIBT____
CIMPLEX
COBT____
DIN
DINS
exthalf2
extslim2
g12f13
gbeitc
GENISO
HAND
HANDLETR
HANDLTR
hbold
HELV
ISO
ISO8
isocp
isoct
ISOEQ
ISOS
ITENCIL
KXT
LANDLET
MICRO
monotxt
MSIMPLEX
romanc
romand
romans
ROMANS8
ROMANT
SCRIPTS8
simpfrac
simplex
STENCIL
TICRO
TIMESBD
txt 2
txt
UNIVCL
X-HAND1F
*/

let shxJson;
let glyphsByChar = {};

const SAMPLE_TEXT = [
  "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
  "abcdefghijklmnopqrstuvwxyz",
  "0123456789 Hello World",
  ".,:;!?\"'#$%&@+-=*/<>_()[]{}\u2264\u221e\u2205"
].join("\n");

function preload() {
  shxJson = loadJSON("json/" + currentFontName + ".json");
}

function setup() {
  createCanvas(1600, 480);
  pixelDensity(3);
  glyphsByChar = buildGlyphMap(shxJson);
}

function draw() {
  background(0);
  stroke(255);
  strokeWeight(1.0);
  strokeJoin(ROUND);
  strokeCap(ROUND);
  noFill();
  drawString(SAMPLE_TEXT, 90,136, 52, 1.0, 1.6);
}

function keyPressed() {
  if (key === "s" || key === "S") {
    saveCanvas("autocad_shx_font_" + currentFontName, "png");
  }
}


//--------------------------------------------------
function buildGlyphMap(data) {
  const map = {};
  for (const glyph of data.glyphs || []) {
    if (glyph.unicode) {
      map[glyph.unicode] = glyph;
    }
  }
  return map;
}

function drawString(str, x, y, size, spacing = 1.0, lineHeight = 1.35) {
  const capHeight = shxJson.metrics?.normalized_cap_height || 21;
  const fontScale = shxJson.scale || shxJson.metrics?.normalized_scale || 1;
  const sca = size / capHeight * fontScale;
  let cx = x;
  let cy = y;
  for (const ch of Array.from(str)) {
    if (ch === "\n") {
      cx = x;
      cy += size * lineHeight;
      continue;
    }
    const glyph = glyphsByChar[ch];
    if (glyph) {
      drawGlyph(glyph, cx, cy, sca);
      cx += (glyph.advance_width || 19) * sca * spacing;
    } else {
      cx += 19 * sca * spacing;
    }
  }
}

function drawGlyph(glyph, gx, gy, sca) {
  for (const path of glyph.decoded_stroke_geometry || []) {
    if (!path.length) continue;
    beginShape();
    for (const cmd of path) {
      if (cmd.type === "M" || cmd.type === "L") {
        vertex(gx + cmd.x * sca, gy - cmd.y * sca);
      } else if (cmd.type === "C") {
        bezierVertex(
          gx + cmd.x1 * sca, gy - cmd.y1 * sca,
          gx + cmd.x2 * sca, gy - cmd.y2 * sca,
          gx + cmd.x * sca, gy - cmd.y * sca
        );
      }
    }
    endShape();
  }
}