LingDong- / p5-hershey-js

p5.js Hershey Vector Font Library
MIT License
54 stars 5 forks source link

Loading Custom Font #1

Open jltan89 opened 5 years ago

jltan89 commented 5 years ago

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- commented 5 years ago

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:

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.

var filenames = [
  //...,
  //...,
  //...,
  "path/to/my/output.hf.txt",  // <------add your file here
]
cd path/to/chinese-hershey-font
python2 -m SimpleHTTPServer

or if you have python 3, like so:

python3 -m http.server

Option 2: the right way

<!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 commented 5 years ago

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,

LingDong- commented 5 years ago

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 commented 5 years ago

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: error

LingDong- commented 5 years ago

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!