Repolode
Enviar
enpts

enpts/sho

Um mecanismo de caligrafia com pincel executado no navegador, que desenha traços a partir de listas de pontos e simula cerdas, tinta e efeitos de pincel seco.

Ver no GitHub
Estrelas
12
Forks
0
Issues abertas
0
Último commit
anteontem

O que é?

sho.js é um mecanismo de caligrafia com pincel em JavaScript que roda no navegador. Você descreve cada traço como uma lista de pontos, em que cada ponto pode definir posição, pressão, ângulo do pincel, velocidade e pausa; o mecanismo os desenha em uma tela com textura de papel, um traço por vez.

O mecanismo simula o comportamento físico de um pincel: cerdas individuais, a tinta acabando ao longo do traço, marcas de pincel seco em velocidades mais altas, acúmulo de tinta onde o pincel fica parado e a tinta se espalhando quando está diluída. Técnicas como ganchos e varreduras surgem da maneira como os pontos são posicionados, sem depender de presets separados. A renderização é determinística: os mesmos dados e configurações sempre produzem a mesma imagem.

O mecanismo foi projetado para receber dados incrementalmente, permitindo que a saída de um LLM seja desenhada linha por linha à medida que é gerada. O pacote consiste em um único script e uma imagem de papel, sem dependências, e é carregado como um objeto global chamado Sho. O pacote inclui uma página de demonstração e exemplos de prompts de sistema.

Recursos principais

  • 01Os traços são definidos como listas de pontos com pressão, ângulo, velocidade e pausa.
  • 02Simula cerdas, tinta acabando, marcas de pincel seco e acúmulo de tinta.
  • 03Dois estilos de espalhamento para tinta diluída: capilar e em anel.
  • 04Renderização determinística a partir das coordenadas dos traços, animada ou instantânea.
  • 05Suporte a streaming por meio do StreamParser para saída de LLM.
  • 06Sem dependências: um script e uma imagem de papel.

Casos de uso

  • Animar caligrafia manuscrita em uma página web ou demonstração.
  • Deixar um LLM escrever caracteres ou palavras com um pincel como experimento visual.
  • Gerar imagens determinísticas de caligrafia para exportar como PNG.
  • Estudar como aproximar a física de um pincel com código de canvas.

Início rápido

  1. 1

    Copie sho.js e paper.webp para a mesma pasta

  2. 2

    Carregue o script na sua página HTML

    <script src="sho.js"></script>
  3. 3

    Crie um mecanismo em um canvas e enfileire um traço

    const engine = new Sho.Engine(document.getElementById('paper'), { pxPerUnit: 1 });

Antes de usar

  • Não há pacote npm nem build como módulo ES; ele é carregado como um script comum.
  • Testado apenas no Chrome e requer um navegador com suporte a canvas e DOM.
  • Projeto em estágio inicial, com poucas estrelas (9) e uma comunidade pequena.

Tópicos

#calligraphy#canvas#javascript#generative-art#brush-simulation#llm-streaming

Perguntas frequentes

O que é sho?
Um mecanismo de caligrafia com pincel executado no navegador, que desenha traços a partir de listas de pontos e simula cerdas, tinta e efeitos de pincel seco. sho.js é um mecanismo de caligrafia com pincel em JavaScript que roda no navegador. Você descreve cada traço como uma lista de pontos, em que cada ponto pode definir posição, pressão, ângulo do pincel, velocidade e pausa; o mecanismo os desenha em uma tela com textura de papel, um traço por vez.
sho é gratuito? Qual é a licença?
sho é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
sho ainda é mantido?
Manutenção ativa. O último commit de sho foi em 5 de nov. de 2026.
Para que posso usar sho?
Animar caligrafia manuscrita em uma página web ou demonstração. Deixar um LLM escrever caracteres ou palavras com um pincel como experimento visual. Gerar imagens determinísticas de caligrafia para exportar como PNG. Estudar como aproximar a física de um pincel com código de canvas.
Como instalar sho?
Copie sho.js e paper.webp para a mesma pasta Carregue o script na sua página HTML: <script src="sho.js"></script> Crie um mecanismo em um canvas e enfileire um traço: const engine = new Sho.Engine(document.getElementById('paper'), { pxPerUnit: 1 });
Onde consigo sho?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/enpts/sho

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados