I want to simulate an human drawing effect starting from a photo, using javascript.
I’ve been searching trough several js libraries that do image manipulation (mostly on canvas).
But seems that no one even attempted what I’m looking for.
I don’t think it’s impossible to achieve such effects with javascript. So I wonder why I can’t find anything already done.
On the native side there are several alternatives to photoshop to achieve such effects, as seen in several apps in the App Store:
Here’s other examples of possible result (from Artist’s Touch App):
2
Answers
Alright so I found a great explanation of the algorithm used here and adapted it to JS and canvas.
Live Demo
CodePen Demo with controls to mess with the effect
How it works is you average all the pixels around your center pixel, then you multiply that average by the intensity level you want, you then divide it by 255. Then you increment the r/g/b’s related to the intensity level. Then you check which intensity level was most common among the pixels neighbors, and assign the target pixel that intensity level.
edit worked on it a bit more and rewrote a lot of it, gained some really huge performance gains, works with decent sized images now pretty well.
Paste a demo of @Loktar’s answer here for someone looking for this algorithm.