p5 hershey js
1.0.0
P5.JS Hershey Vector Fontライブラリ。 （ライブデモ）
ハーシーフォントは、開発されたベクトルフォントのコレクションですc。 1967年、海軍兵器研究所のアレン・ビンセント・ハーシー博士は、もともと初期のカソードレイチューブディスプレイのベクトルを使用してレンダリングするように設計されています。フォントは公開されており、使用制限はほとんどありません。ベクトルフォントは、2つまたは3つの次元で簡単にスケーリングおよび回転します。その結果、ハーシーフォントは、コンピューターグラフィックス、コンピューター支援設計プログラム、そして最近ではレーザー彫刻などのコンピューター支援の製造アプリケーションで広く使用されています。 （ウィキペディア）
このP5.JSライブラリは、ブラウザのハーシーフォントをレンダリングします。カスタム文字マッピングとともに、ユーザーが提供するHersheyフォントを解析できます。
| ローマ | ゴシック | ギリシャ語 | 他の |
|---|---|---|---|
COMPLEX | GOTHIC_ENGLISH_TRIPLEX | GREEK_COMPLEX | ITALIC_COMPLEX |
COMPLEX_SMALL | GOTHIC_GERMAN_TRIPLEX | GREEK_COMPLEX_SMALL | ITALIC_COMPLEX_SMALL |
DUPLEX | GOTHIC_ITALIAN_TRIPLEX | GREEK_PLAIN | ITALIC_TRIPLEX |
PLAIN | GREEK_SIMPLEX | SCRIPT_COMPLEX | |
SIMPLEX | SCRIPT_SIMPLEX | ||
TRIPLEX | CYRILLIC_COMPLEX |
HTMLには、ライブラリとデータファイルを含めます。
< script src =" p5.hershey.js " > </ script >
< script src =" p5.hershey.data.js " > </ script > P5 Sketch JavaScriptで、 P5.hershey.putTextに電話してください
push ( ) ;
translate ( 100 , 100 ) ;
noFill ( ) ;
stroke ( 0 ) ;
strokeWeight ( 1 ) ;
P5 . hershey . putText ( "Hello World!" ) ;
pop ( ) ; P5 . hershey . putText ( "Hello World!" , {
cmap : FONT_HERSHEY . GOTHIC_GERMAN_TRIPLEX ,
align : "center" ,
noise : 0.5 ,
} ) ;cmap使用する文字マッピングを指定します。詳細については、サポートされている文字セットを参照してください。align 、 left 、 center 、またはrightの1つにすることができます。noiseを使用して、頂点に特殊効果を追加できます。 noise 、次のデータ型のいずれかのいずれかです。noiseが数である場合、デフォルトのrandomGaussianフィルターが適用され、標準偏差としてnoiseを使用して揺れ動/神経効果が得られます。noiseがフォームのオブジェクトである場合{x: (x,y)=>(x_offset), y: (x,y)=>(y_offset)} 、 noise.x 、およびnoise.yが各頂点で呼び出され、戻り値はそれぞれの軸のオフセットとして使用されます。ユーザーは、独自のハーシーフォントやマッピングを提供することもできます。正しくフォーマットされたHersheyフォントを文字列として解析するには、以下を使用してください。
var font_data = P5 . hershey . parseFontString ( " 49 12LXRMRV RNOOPOSQTSTUSUPVO" ) ;UnicodeエントリポイントからHersheyフォントで使用されるインデックスへのマッピングも必要です。インデックスが同一の場合、これは次のように簡単になります。
var cmap = ( x ) => ( x ) ;より複雑なマッピングがあり、文字A 、 B 、 C 、 Dハーシーフォントのインデックス2,4,6,8にマッピングされるとします。
var cmap = ( x ) => ( [ 2 , 4 , 6 , 8 ] [ x - 65 ] ) ;最後に、フォントとマッピングをP5.hershey.putTextに送ります：
P5 . hershey . putText ( "Hello World!" , {
font : font_data ,
cmap : cmap ,
} ) ;P5.hershey.estimateTextWidth(text, args) arguments argsで描画される場合は、テキストのピクセルの幅を返します。P5.hershey.validateFont(font_data)フォントオブジェクト内のすべての無効なグリフのインデックスを含むArrayを返します。 index.html参照してください。
