I’m not an illustrator but this would be cool poster on a brick wall. The idea is to mimic the hand drawings programmatically.
The key is drawing an imperfect circle. Faces you see here are combination of many imperfect circles. There is almost no linear path but combination of segmented, circles. I used Two.js(I’m a big fan of Three.js too.) to draw curvy paths. It’s an awesome little JS gem.
Here is the code that draw circles:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
var randomize = function(value,rand) { return value += Math.random()*rand - (rand*0.5); } var getCurveyCircle = function(startAngle,endAngle,radiusX,radiusY,segments,rand) { var anchors = []; for(var i=0; i<=segments; i++) { var step = startAngle + (i * (endAngle-startAngle)/segments); var px = Math.cos(step/180*Math.PI)*radiusX + randomize(0,rand); var py = Math.sin(step/180*Math.PI)*radiusY + randomize(0,rand); anchors.push(new Two.Anchor(px, py)); } return two.makeCurve(anchors,true); } |
First we create segmented circle. Then we randomise positions of these segment points a little. And finally we make curvy path using these points.
|
1 |
var circle = getCurveyCircle(0,360,100,100,20,5); |
Result:
To mimic hand draw we draw two rounds of circles on top of each other:
|
1 |
var circle = getCurveyCircle(0,720,100,100,20,5); |
Result:
As you can see this looks like a hand drawn two rounds of circles. Head, eyes, ears, eyebrows and mouth are all combinations of the same technique and yet every face is unique and sketchy.