p5 hershey js

P5.JS HERSHEY VECTOR FONT Library. (Demoção ao vivo)

As fontes Hershey são uma coleção de fontes vetoriais desenvolvidas c. 1967 pelo Dr. Allen Vincent Hershey no Laboratório de Armas Navais, originalmente projetado para ser renderizado usando vetores em exposições de tubo de raios catódicos. As fontes estão disponíveis ao público e têm poucas restrições de uso. As fontes vetoriais são facilmente dimensionadas e giradas em duas ou três dimensões; Consequentemente, as fontes Hershey têm sido amplamente utilizadas em gráficos de computadores, programas de design auxiliado por computador e, mais recentemente, também em aplicações de fabricação auxiliadas por computador, como gravação a laser. (Wikipedia)

Esta biblioteca P5.js renderiza as fontes Hershey no navegador. Ele pode analisar fontes Hershey fornecidas pelo usuário junto com o mapeamento de caracteres personalizado.

Conjuntos de caracteres suportados

romano	gótico	grego	Outro
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

Uso

Exemplo mínimo

No HTML, inclua a biblioteca e o arquivo de dados.

 < script src =" p5.hershey.js " > </ script >  
< script src =" p5.hershey.data.js " > </ script >  

E no JavaScript P5 Sketch, ligue para P5.hershey.putText

 push ( ) ;
translate ( 100 , 100 ) ;
noFill ( ) ;
stroke ( 0 ) ;
strokeWeight ( 1 ) ;
P5 . hershey . putText ( "Hello World!" ) ;
pop ( ) ;

Avançado

 P5 . hershey . putText ( "Hello World!" , {
	cmap :  FONT_HERSHEY . GOTHIC_GERMAN_TRIPLEX ,
	align : "center" ,
	noise : 0.5 ,
} ) ;

• cmap especifica o mapeamento de caracteres para usar, consulte Conjuntos de caracteres suportados para obter detalhes.
• align pode ser de left , center ou right .
• noise pode ser usado para adicionar efeitos especiais aos vértices. noise pode ser um dos seguintes tipos de dados:
  • Se noise for um número, um filtro randomGaussian padrão é aplicado para fornecer um efeito jiggly/nervoso usando noise como desvio padrão.
  • Se noise for um objeto do formulário {x: (x,y)=>(x_offset), y: (x,y)=>(y_offset)} , noise.x e noise.y serão chamados em cada vértice, e o valor de retorno for usado como deslocamento para o respectivo eixo.

Fontes personalizadas

Os usuários também podem fornecer suas próprias fontes e mapeamentos Hershey. Para analisar uma fonte Hershey formatada corretamente como uma corda, use:

 var font_data = P5 . hershey . parseFontString ( "   49 12LXRMRV RNOOPOSQTSTUSUPVO" ) ;

Também é necessário um mapeamento do ponto de entrada Unicode para o índice usado pela fonte Hershey. Se os índices forem idênticos, isso pode ser tão simples quanto:

 var cmap = ( x ) => ( x ) ;

Digamos que você tenha um mapeamento mais complicado, onde os personagens A , B , C , D serão mapeados para os índices 2,4,6,8 na fonte Hershey:

 var cmap = ( x ) => ( [ 2 , 4 , 6 , 8 ] [ x - 65 ] ) ;

Finalmente, alimente a fonte e o mapeamento para P5.hershey.putText :

 P5 . hershey . putText ( "Hello World!" , {
	font :  font_data ,
	cmap :  cmap ,
} ) ;

Outras ferramentas

• P5.hershey.estimateTextWidth(text, args) Retorna a largura em pixels do texto para que seja desenhado com argumentos args .
• P5.hershey.validateFont(font_data) Retorna uma Array contendo índices de todos os glifos inválidos em um objeto de fonte.

Exemplos

• Demonstração ao vivo, consulte index.html para obter detalhes.
• TTF2HERSHEY, uma ferramenta para converter fontes de tipo verdadeiro em fontes Hershey.

Visualização

Referências

• http://paulbourke.net/dataformats/hershey/