Signing app

By Andreas Borgen

Description

Tags

1. canvas
2. signature
3. quadratic bézier
4. quadraticcurveto

Comments

1. 

   Blake Bowen (@osublake) on March 12, 2016

   Hi Andreas,

   Love your work!

   Your path smoothing looks really good. I'm familiar with the anti-grain geometry stuff, but I've never seen the code you are using from Stackoverflow. Is that based on a certain technique/method? I'd like to learn more about how that works.

   If you're interested in this type of stuff, here's a really good site that shows how to create a bunch of different types of splines.

   http://owl3d.com/svg/Splines/Splines_to_SVG.html

   http://owl3d.com/svg/Splines/Splines_to_SVG2.html

   1 Love
2. 

   Andreas Borgen (@Sphinxxxx) on March 12, 2016

   @osublake Thanks a lot!

   If you're referring to the code in drawQuadSingle()/drawCubSingle(), I'm afraid I don't have any more info than the link to the PDF from the stackoverflow question: http://www.tinaja.com/glib/nubz4pts1.pdf

   The reason I tested that algorithm was to reduce the number of Bezier curves, i.e. using one curve for every three points instead of one curve for every single point. However, you'd still have to find a way to make the curve joins look smooth. Also, what I'm actually trying to do is approximate a good-enough path through all points, rather than an exact interpolation (like the "Simplify" feature in Inkscape or paper.js), which calls for a different solution anyway.

   Thanks for the links! I have previously read about spline approximation (http://www.cs.mtu.edu/~shene/COURSES/cs3621/NOTES/INT-APP/CURVE-APP-global.html), but I don't understand how to convert that into Bezier curves. Maybe your info is the missing link :)

   Love
3. 

   Blake Bowen (@osublake) on March 14, 2016

   I think paper.js and Inkscape use a version of the isoBase spline from the second link I sent, which is based on the algorithm from here (source).

   I've been exploring different ways to create curves for a while now, and I think the best way to create a perfect, continuous curve is to use a Euler/Cornu/clothoid spiral. This is what is used in rail/highway engineering to create the transitions between the different curves. Spiro is the best tool I've come across that can do these types of curves. The only problem I've come across using Spiro is that it can be unpredictable at times because it works like a 3-point circle, so it's very easy for a curve to flip around on itself.

   Here's a better repo of the Spiro code (C, Python). As you can see, there is no JavaScript version, however, I've been working on that in my free time here and there. It's far from being finished, but you can check out an earlier version that does G4 curves. Just click to add a point and then you can drag them around. Right-click on a point to remove it.

   You can also test Spiro out in Inkscape as a live effect or in FontForge. The Inkscape version is somewhat limited as it can only do G2 curves, and doesn't handle errors too well, resulting in a bunch of crazy artifacts being drawn.

   1 Love
4. 

   Andreas Borgen (@Sphinxxxx) on March 15, 2016

   @osublake Cool! I tried your pen and Spiros in Inkscape. They were difficult to get right, but fun to play with. It's definitely a nice tool to know about.

   As for this pen, I'm just going to use paper.js for the approximation. It's part of a long-term plan to create a simple SVG path editor. Kind of like this pen with better editing/simplification features, plus SVG import and maybe very simple bitmap tracing.

   1 Love
5. 

   Blake Bowen (@osublake) on March 15, 2016

   @Sphinxxxx Yeah, the Inkscape version isn't too good as it doesn't use all the different point and curve types. If they were available, you'd be able to edit it more like this.

   Another interesting tool I'd like to convert over to JavaScript is Cornucopia. It's for sketching and uses clothoid spirals just like Spiro. Check out the video on that page and play around with the Windows binary. That is by far the best hand drawing tool I've ever seen. I don't know why nobody is using it, especially Adobe, as their name appears on the video.

   But what you have so far looks really good! Your long-term plan is pretty close to mine, although I'm doing it more for motion paths and easing. Are you going to put your project up on GitHub? I'd like to see if you do. Also, bitmap tracing sounds pretty interesting. I've never looked into that. Do you know of good resources for that?

   1 Love
6. 

   Andreas Borgen (@Sphinxxxx) on March 16, 2016

   @osublake I see. That would be a good option if you wanted a more clean/professional look on your sketches.

   The project would certainly be completely open-source, so yeah, I might as well put it on GitHub. I haven't done any research into tracing, but I have an idea that at least sounds simple:

   • Draw an image onto a canvas and let the user select a threshold to make it black and white.
   • Collect coordinates for all black pixels that lie next to a white pixel.
   • Use those coordinates as input points to what this pen does (i.e. the pathPoints array).

   That should be a helpful starting point to trace simple shapes (logos for example), not having to do everything by hand.

   1 Love
7. 

   Andreas Borgen (@Sphinxxxx) on March 21, 2016

   @osublake By the way, I read about this new "WebAssembly" thing a few days ago. Porting those libraries you mention may soon(ish) be a lot easier:

   https://medium.com/javascript-scene/why-we-need-webassembly-an-interview-with-brendan-eich-7fb2a60b0723#.114rtc513

   Love

Leave a Comment Markdown supported. Double-click names to add to comment.