https://github.com/geraintluff/canvas-sketch
Transform an image into a pencil-sketch
https://github.com/geraintluff/canvas-sketch
Last synced: about 1 year ago
JSON representation
Transform an image into a pencil-sketch
- Host: GitHub
- URL: https://github.com/geraintluff/canvas-sketch
- Owner: geraintluff
- Created: 2013-10-24T10:45:56.000Z (over 12 years ago)
- Default Branch: master
- Last Pushed: 2014-08-17T01:44:52.000Z (almost 12 years ago)
- Last Synced: 2024-10-31T15:52:57.319Z (over 1 year ago)
- Language: JavaScript
- Size: 8.66 MB
- Stars: 123
- Watchers: 13
- Forks: 28
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
canvas-sketch
=============
Transform an image into a pencil-sketch, using the `` element.
The implemenation is not exactly efficient, so when you check out the [demo page](http://geraintluff.github.io/canvas-sketch/), try starting with a small image (a couple of hundred pixels across).
## The algorithm
The principle is fairly simple. At each point in the image, the hue is converted into an angle of shading (so blue and yellow are at right-angles to each other). The saturation is converted into *consistency* of shading angles (so grey will be cross-hatched, grey-blue will be a bit rough-looking, and pure blue will be completely in line). Brightness is obviously represented by density of lines.
The actual method is a bit of a hack - we create image-size pencil textures (using randomly drawn pencil lines with a specified thickness, length and density) for a few different RGB values. The spacing of these values is determined by the "Level steps" control (so, 2 means that it will cover `(0, 0, 0)`, `(1, 0, 0)` and so on - 3 means it will cover `(0, 0, 0)`, `(0.5, 0, 0)` and so on).
Then, we simply composite these textures together (fading between them), and add some basic edge-detection to simulate outlines.
## Batch processing
I hacked together a batch-processing system as a PHP script. It downloads one image at a time, processes it, and POSTs it back to the server.
The config is in `batch-animation.json`. Note the `lineAlphaVariation` and `edgeAmountVariation` properties, which randomise their corresponding parameters, resulting in a more or less coarse image.
The goal is to replicate the effect of tracing video frames using pencil sketches, where each frame will not turn out completely consistently:
## License
The code is available as "public domain", meaning that it is completely free to use, without any restrictions at all (including re-licensing under your own terms). Read the full license [here](http://geraintluff.github.com/tv4/LICENSE.txt).
It's also available under an [MIT license](http://jsonary.com/LICENSE.txt).