Repolode
Enviar
enpts

enpts/sho

Motor de caligrafía con pincel para navegador que dibuja trazos a partir de listas de puntos y simula cerdas, tinta y efectos de pincel seco.

Ver en GitHub
Estrellas
14
Forks
0
Issues abiertos
0
Último commit
hace 3 días

¿Qué es?

sho.js es un motor de caligrafía con pincel escrito en JavaScript que se ejecuta en el navegador. Cada trazo se define como una lista de puntos, donde cada punto puede establecer la posición, la presión, el ángulo del pincel, la velocidad y la pausa. El motor los dibuja en un lienzo con textura de papel, un trazo a la vez.

El motor simula el comportamiento físico de un pincel: las cerdas individuales, el agotamiento de la tinta a lo largo de un trazo, las vetas de pincel seco a mayor velocidad, la acumulación de tinta donde se apoya el pincel y el sangrado de la tinta diluida. Técnicas como los ganchos y los barridos dependen de cómo se colocan los puntos, no de ajustes predefinidos independientes. El resultado es determinista: los mismos datos y ajustes siempre producen la misma imagen.

Está diseñado para recibir datos de forma incremental, de modo que los trazos generados por un LLM puedan dibujarse línea por línea a medida que llegan. El paquete consta de un único script y una imagen de papel, no tiene dependencias y se carga como un objeto global Sho. Incluye una página de demostración y ejemplos de prompts de sistema.

Funciones clave

  • 01Los trazos se definen como listas de puntos con presión, ángulo, velocidad y pausa.
  • 02Simula las cerdas, el agotamiento de la tinta, las vetas de pincel seco y la acumulación de tinta.
  • 03Dos estilos de sangrado para la tinta diluida: capilar y en anillo.
  • 04Renderizado determinista a partir de las coordenadas de los trazos, animado o instantáneo.
  • 05Compatibilidad con streaming mediante StreamParser para la salida de LLM.
  • 06Sin dependencias: un script y una imagen de papel.

Casos de uso

  • Animar caligrafía manuscrita en una página web o una demostración.
  • Permitir que un LLM escriba caracteres o palabras con un pincel como experimento visual.
  • Generar imágenes de caligrafía deterministas para exportarlas como PNG.
  • Estudiar cómo aproximar la física de un pincel mediante código de canvas.

Inicio rápido

  1. 1

    Copia sho.js y paper.webp en la misma carpeta

  2. 2

    Carga el script en tu página HTML

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

    Crea un motor en un canvas y añade un trazo a la cola

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

Antes de usarlo

  • No hay paquete npm ni compilación como módulo ES; se carga como un script normal.
  • Solo se ha probado en Chrome y necesita un navegador compatible con canvas y DOM.
  • Es un proyecto en fase inicial, con pocas estrellas (9) y una comunidad pequeña.

Temas

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

Preguntas frecuentes

¿Qué es sho?
Motor de caligrafía con pincel para navegador que dibuja trazos a partir de listas de puntos y simula cerdas, tinta y efectos de pincel seco. sho.js es un motor de caligrafía con pincel escrito en JavaScript que se ejecuta en el navegador. Cada trazo se define como una lista de puntos, donde cada punto puede establecer la posición, la presión, el ángulo del pincel, la velocidad y la pausa. El motor los dibuja en un lienzo con textura de papel, un trazo a la vez.
¿sho es gratuito? ¿Qué licencia tiene?
sho es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿sho sigue mantenido?
Mantenimiento activo. El último commit de sho fue el 5 nov 2026.
¿Para qué puedo usar sho?
Animar caligrafía manuscrita en una página web o una demostración. Permitir que un LLM escriba caracteres o palabras con un pincel como experimento visual. Generar imágenes de caligrafía deterministas para exportarlas como PNG. Estudiar cómo aproximar la física de un pincel mediante código de canvas.
¿Cómo se instala sho?
Copia sho.js y paper.webp en la misma carpeta Carga el script en tu página HTML: <script src="sho.js"></script> Crea un motor en un canvas y añade un trazo a la cola: const engine = new Sho.Engine(document.getElementById('paper'), { pxPerUnit: 1 });
¿Dónde consigo sho?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/enpts/sho

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados