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:
- 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.txtNow 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.htmlof 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.txtfile, 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 SimpleHTTPServeror 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, changevar txtto your test string, andvar filenameto 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
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