Sg2.9
Add hand-drawn look to a path
Recent RSS
Add hand-drawn look to a path
From:  bootsmaat
Date:  8. January 2013, 15:38

I am drawing a number of paths. Together, they form an image. I am trying to give the whole thing a hand-drawn look. I have a way to achieve this but I can't help there is an easier one. What I am doing:

1. Draw a path, e.g. an oval with Path.Oval()
2. Use Håkan Lundgren's divideEven() function to create an array with additional segments around the path
3. Delete the original path
4. Draw a new path with the segments created with divideEven()
5. Loop through the segments and nudge them randomly to make the shape less regular
6. Apply path.smooth() to create a nice round look

Is there an easier way to accomplish this? Or a way to put all of these steps into a function? The function would then be given the path's name and modify it accordingly.

In example B in the attached image you'll find another problem I am trying to tackle: Creating a "fill" for a path not with a solid color but with little scattered irregular paths. How can I achieve this?

Thanks in advance for helping me out.

PS: I read that the development of scriptographer is discontinued. Would it be wise to develop in paper.js then? Can I save vector files to the hard drive from paper.js?

Re: Add hand-drawn look to a path
Date:  8. January 2013, 19:41

Hi, yes what you've heard is true, Scriptographer is unfortunately discontinued and I guess most people will turn to PaperJS as it is practically the same. From what I understand it is (or at least will be) possible to export your PaperJS-work as SVG.

What you describe seems like a fairly good way to go about it and putting it all into a function wouldn't be all that hard either.

As for the sprinkles, a Halton Sequence-function might do the trick.

Good luck!

Re: Add hand-drawn look to a path
From:  ken frederick
Date:  14. January 2013, 20:25

a colleague of mine released a "sketchy" library for use with html5 canvas

http://canvas.dennisschaaf.com/post/16124838974/hand-canvas-sketch-with-resizable-behavior

with a little digging into the source code, you could either integrate it into paperjs or dig out the pertinent bits and make them work in scriptographer

http://static.dennisschaaf.com/hand-canvas-pre-release.js

Ken

Re: Add hand-drawn look to a path
From:  bootsmaat
Date:  15. January 2013, 11:23

Thank you, I'll look into it!

Scripts
08.08.14, 15:24
15.05.14, 14:23
02.03.14, 19:16
18.11.13, 14:48
22.03.13, 03:05
22.02.13, 15:45
Posts
10.01.17, 16:37
19.02.16, 06:03
19.02.16, 06:00
17.01.16, 11:00
12.01.16, 13:10
25.11.15, 08:19
Script of the Moment
Shape Contours V2 26.04.12