Loading Custom Font

Question

Loading Custom Font

jltan89 opened this issue 5 years ago · comments

Hi Ling Dong!

I have successfully output-ed the json file and i am so lost on how to load my output with this project, despite after reading the custom font section as i have very little programming background

Lingdong Huang · Answer 1 · Sat Aug 17 2019 13:30:00 GMT+0800 (China Standard Time)

Hi there,

Thanks for checking out the project.

Assuming that the JSON file is generated from my chinese-hershey-font project, here're some detailed steps:

convert the JSON files to hershey format using tohershey.py (included in that repo), like so:

python tohershey.py path/to/input.json > path/to/output.hf.txt

Now that you have output.hf.txt, you have two options. Option 1 is simpler and let you test things out, but option 2 gives you more control and should be used if you're using the font as part of your project.

Option 1: the hacky way

With this method you're modifying my showcase/demo for chinese-hershey-font project by injecting your own font into it.

Go to index.html of the chinese-hershey-font project. Add your file to the list of file names near top of the file, like so:

var filenames = [
  //...,
  //...,
  //...,
  "path/to/my/output.hf.txt",  // <------add your file here
]

In teststrings.txt file, add your test strings. If your font happen to be Chinese, the default strings will probably do.
Now all you need to do is to set up a local server to view the page, like so:

cd path/to/chinese-hershey-font
python2 -m SimpleHTTPServer

or if you have python 3, like so:

python3 -m http.server

In your preferred browser (e.g. Chrome), go to localhost:8000. The page should load, and in the leftmost "drop-down" menu (i.e. "font"), select the last one which should be the one you just added.
That's it, feel free to play with other sliders and menus on the page to test out the font.

Option 2: the right way

Create a new folder and put your newly generated hershey font into it.
In that folder, create a plain text file in your preferred text editor, with the following contents, and name it index.html. Near the top of the file, change var txt to your test string, and var filename to relative path to the font file.

<!DOCTYPE html>  
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/LingDong-/p5-hershey-js@c01aec34849206262106d77e9cf2404695ced060/p5.hershey.js"></script>
<script>
var txt = "change me 改我"
var filename = "./path/to/my/font.hf.txt"
var file, font;

function preload(){
  file = loadStrings(filename)
}
function setup() {
  createCanvas(window.innerWidth, window.innerHeight);
  font = P5.hershey.parseFontString(file.join("\n"));
}

function draw() {
  background(255);
  var w = P5.hershey.estimateTextWidth(txt[0],{font:font,cmap:(x)=>(x)}) // guess width of single character
  var cpl = floor(width/w) // # of characters per line
  push();
  noFill(); stroke(0); strokeJoin(ROUND); strokeWeight(2);
  translate(0,w*0.5);
  for (var j = 0; j < txt.length; j+=cpl){
    P5.hershey.putText(txt.slice(j,j+cpl),{
      font:font,
      cmap:(x)=>(x),
    })
    translate(0,w*1.2);
  }
  pop();
}
</script>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
</html>

Now set up a local server to view the page, see last part of option 1 for details.

As a minimum example it simply displays the text in the right font, but you can add more features like font size, spacing, etc. See the doc of either projects or code for my demo.

Friendly Note

The chinese-hershey-font project uses computer vision to extract strokes from fonts, and is sensitive to stylistic properties (e.g. stroke width) of the original font. Therefore, it might be necessary to fine tune the parameters to get optimal result. See "Generating Stroke Files" section of the doc to see available parameters and how to tweak them.

Sorry my projects weren't more non-programmer friendly, but I hope the above steps are helpful.

jltan89 · Answer 2 · Tue Aug 20 2019 13:02:55 GMT+0800 (China Standard Time)

No problem. The steps you provided is very helpful. I could get option1 to work but not option2, but thats fine! I can work with option1, Thank you so much.

2 minor question tho,

How do you get to python char2stroke.py test with chinese characters? i've tried --corpus mychinesecharacters but it showed up as unreconized blocks. Im guessing it could be my windows is english and not chinese?
How does --first [FIRST] and --last [LAST] work? I tried --first 0 and --last 5 for example and nothing is generated. I also tried inputing some unicode and it did nothing

Lingdong Huang · Answer 3 · Sat Aug 24 2019 16:52:40 GMT+0800 (China Standard Time)

Hi there,

First question

The --corpus problem seems to be a python2/unicode issue, I just updated the code to fix it. Try pulling the newest code or simply apply the following change yourself:

In char2stroke.py, on line 291, find corpus = test_params.corpus if ... and change it to: corpus = test_params.corpus.decode('utf-8') if ....

Also, --corpus is an optional argument, so if you just leave it out the program will use some random Chinese text to test the characters (it works without the fix described above), which might be more convenient (depending on use case).

Sorry for the bug, and thanks for spotting it!

Second question

--first [FIRST] and --last [LAST] specifies unicode entry points. Unfortunately, unicode 0-5 are invisible control characters. Therefore, your result is invisible :)

Most used Chinese characters range from 19968 to 40959 (or 4E00 to 9FFF if you speak hex), but here are some more complete lists

So you can try for instance --first 19968 --last 19972 to test out the first five Chinese characters, namely 一丁丂七丄

Hope that helps!

jltan89 · Answer 4 · Mon Sep 02 2019 12:38:42 GMT+0800 (China Standard Time)

Awesome! I got the Second question solution working, but not for the first...
I tried using your lastest code and apply the change myself but i still get this error:

Lingdong Huang · Answer 5 · Tue Sep 03 2019 23:20:59 GMT+0800 (China Standard Time)

Hi there,

Sorry I couldn't reproduce the problem on my computer (maybe it's a windows problem?), but you might find a fix that works for you here:

https://stackoverflow.com/questions/27092833/unicodeencodeerror-charmap-codec-cant-encode-characters

Python2 + unicode always cause tons of headache, maybe I should port the project to python3 some day.

I think maybe one of the easiest things to try is to just delete that line which your error message complains about, print(ch), on line 298. It is merely for printing the character the program is currently processing to the terminal, and has no effect on the results. You'll just need to stare at a blank terminal window for a couple of seconds, then the result window should pop up.

Thanks for the update, and hope that helps!