-
Notifications
You must be signed in to change notification settings - Fork 13
/
Copy pathindex.html
109 lines (94 loc) · 3.12 KB
/
index.html
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
<!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 src="https://cdn.jsdelivr.net/gh/LingDong-/p5-hershey-js@c01aec34849206262106d77e9cf2404695ced060/p5.hershey.data.js"></script>
<script>
var teststrings = []
var filenames = [
"dist/hershey/Heiti.hf.txt",
"dist/hershey/Heiti-small.hf.txt",
"dist/hershey/Kaiti.hf.txt",
"dist/hershey/Mingti-basic.hf.txt",
]
var files = [];
var fonts = [];
var renderCnt = 0;
function parseHershey(txt){
return P5.hershey.parseFontString(txt);
}
function preload(){
for (var i = 0; i < filenames.length; i++){
files[i] = loadStrings(filenames[i]);
}
teststrings = loadStrings("teststrings.txt")
}
function setup() {
createCanvas(window.innerWidth, 800);
for (var i = 0; i < files.length; i++){
fonts[i] = parseHershey(files[i].join("\n"));
document.getElementById("select0").innerHTML += "<option>"+filenames[i]+"</option>"
}
for (var i = 0; i < teststrings.length; i++){
document.getElementById("select1").innerHTML += "<option>"+teststrings[i].slice(0,10)+"...</option>"
}
document.getElementById("select0").oninput=render
document.getElementById("select1").oninput=render
document.getElementById("slider0").oninput=render
document.getElementById("slider1").oninput=render
document.getElementById("slider2").oninput=function(){
renderCnt = 1/0;
}
render()
}
function draw(){
if (renderCnt > 0){
render();
renderCnt -= 1;
if (document.getElementById("slider2").value == 0){
renderCnt = 0;
}
}
}
function render() {
background(255);
var font = fonts[document.getElementById("select0").selectedIndex]
var s = document.getElementById("slider0").value/100
var marg = 50
var txt = teststrings[document.getElementById("select1").selectedIndex];
var w = P5.hershey.estimateTextWidth("一",{font:font,cmap:(x)=>(x)})
var cpl = floor((width-marg*2)/s/w)
var ns = document.getElementById("slider2").value/100
push();
scale(s);
noFill();
stroke(0);
strokeJoin(ROUND);
strokeWeight(document.getElementById("slider1").value/100/s);
translate(marg,w*0.5+marg);
for (var j = 0; j < txt.length; j+=cpl){
P5.hershey.putText(txt.slice(j,j+cpl),{
font:font,
cmap:(x)=>(x),
noise:{x:(x,y)=>(map(noise(x*0.1,y*0.1,frameCount*0.1+j),0,1,-ns,ns)),
y:(x,y)=>(map(noise(frameCount*0.1+j,x*0.1,y*0.1),0,1,-ns,ns))}
})
translate(0,w*1.2);
}
pop();
}
</script>
<html>
<head>
<meta charset="UTF-8">
</head>
<body style="text-align:center; font-family:sans-serif;">
<h1>chinese-hershey-font</h1>
<div>
Font=<select id="select0"></select>
Text=<select id="select1"></select>
Size=<input id="slider0" type="range" min="20" max="200" value="100">
Thickness=<input id="slider1" type="range" min="50" max="600" value="200">
Noise=<input id="slider2" type="range" min="0" max="2000" value="0">
</div>
</body>
</html>