Simulando el dibujo de la mano en lienzo

Question

¿Existe una biblioteca JavaScript que simula el elemento de lona pero en lugar de crear líneas rectas, las líneas creadas se ven 'forma libre' o 'dibujada a mano'?

Esto sería genial si existiera y parece que alguien ya debería haberlo hecho. Además, si hay artículos sobre las matemáticas involucradas en esto, estaría interesado porque entonces podría intentar implementar esta biblioteca yo mismo.

Answer 1

Recuerdo haber leído algo sobre hacer esto hace un par de años. Por cierto, ese artículo lo estaba haciendo en JavaScript en lienzo. Básicamente, la idea era dibujar las líneas usted mismo píxel por píxel usando algo como el algoritmo de dibujo de línea de Bresenham, pero modificarlo para agregar algunas desviaciones/pertubaciones aleatorias en la línea.

No estoy seguro de si esta era la página que estaba leyendo en ese momento, pero esto es lo que Google mencionó hoy: http://29a.ch/2010/2/10/hand-drawn-lines-algorithm-javascript-canvas-html5

Answer 2

Basado en el artículo Mencioné, creé una biblioteca de dibujo JS de estilo de dibujos animados para lienzos SVG y HTML5. Funciona como complemento para Raphael.js, D3.js o SVG.js o como lib para Canvas. Se llama comic.js y se puede encontrar en github.

Esto es lo que puede producir: