Background
In my daily coding drill, I found a library specialised to p5.js called scribble.js. This library allows to create lines with hand-draw effect. The below image is what you can draw with it.
As creating some creative sketch, the graphics tend to be digitalised by sharp lines or figures. Whereas the graphics influence people clean and cool impression, it is occasionally no passion and reminds a certain machine. Using hand-drawing gives people warms impression like a human’s heart. I suppose to try expressing such a feature using this library.
How to use Scribble
First of all I’m going to explain how to use this library. That is quite simple. Load the library via CDN or downloaded file, then call one of the drawing method.
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/p5@0.5.16/lib/p5.min.js" type="text/javascript"></script>
<script src="mySketch.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript" src="https://cdn.rawgit.com/generative-light/p5.scribble.js/master/p5.scribble.js"></script>
</head>
<body></body>
</html>function setup() {
const scribble = new Scribble()
scribble.scribbleRect( x, y, w, h );
}As the lines drawn in canvas are primitive of p5 object, you can efficiently change the colour and weight as well as hand-draw lines. If you would like to fill the figure with specific colour by lines like above image of example, use scribbleFilling method. The method requires a couple of specific points list that forms outline of the figure. You can also deform the figure to set some of properties, roughness, bowing or maxOffset, supported by this library. The following images are my experiments.
 |
 |
 |
 |
 |
 |
How to approach handwritten character
In this quick and dirty examples, you can start to describe hand-draw characters. The following list is the instruction.
- Load Scribe library with p5.js
- Load Font (which is mandatory to get point list from text font).
- Get point list of the each character
- Get rectangle and exact position of the each character
- Pass the point list that creates outline of the character to Scribe methods
- Move point list for rich interaction
Conclusion
The most significantly important part in above list is getting point list from text. Wonderfully p5.js supports to extract points from text with straightforward steps. See this tutorial. All you need is create font from font file and call textToPoints. Once getting the point list, I resolve the points into xCoords and yCoords in order to pass Scribble method.
 |
 |
 |
