Difference between revisions of "Capturing Handwriting"

From Evil Mad Scientist Wiki
Jump to: navigation, search
(add big jsignature)
 
(6 intermediate revisions by the same user not shown)
Line 8: Line 8:
 
== Capturing a signature with jSignature ==
 
== Capturing a signature with jSignature ==
  
For very small amounts of text — for example a single signature — a convenient software tool is [https://willowsystems.github.io/jSignature/#/demo/ jSignature]. jSignature can create and save an SVG file which can be opened in Inkscape. jSignature can be used from your computer, smartphone, or tablet.
+
For very small amounts of text — for example a single signature — a convenient software tool is [https://willowsystems.github.io/jSignature/#/demo/ jSignature]. jSignature can create and save an SVG file which can be opened in Inkscape. jSignature can be used from your computer, smartphone, or tablet.  You'll often get the best results using a stylus that you hold like a pen, rather than your finger.
  
 
To use it from your computer, sign your signature, and then select "SVG" from the "Extract signature data as" pop-up menu.  It should then display your signature as an image below that pop-up menu. Right-click on the image, and select from the menu there "Save image as..." (the exact wording of this option will vary depending on your browser), and save the result with a name like "signature.svg". You can then open up this SVG file from within Inkscape and print to the AxiDraw. For other platforms (smartphone and tablet), you'll need to send the signature to your desktop computer, by a means such as e-mail, before proceeding.
 
To use it from your computer, sign your signature, and then select "SVG" from the "Extract signature data as" pop-up menu.  It should then display your signature as an image below that pop-up menu. Right-click on the image, and select from the menu there "Save image as..." (the exact wording of this option will vary depending on your browser), and save the result with a name like "signature.svg". You can then open up this SVG file from within Inkscape and print to the AxiDraw. For other platforms (smartphone and tablet), you'll need to send the signature to your desktop computer, by a means such as e-mail, before proceeding.
 +
 +
If you need to start with a printed signature, this method can still be used. Print out the signature, place it on your phone (or other touch surface) and trace along it, just as you would if you were signing for the first time.
 +
 +
If you would like a version of jSignature with a larger writing area, we have a version available [https://evil-mad.github.io/jSignature/ here].
  
 
== Using a graphics tablet for direct capture==
 
== Using a graphics tablet for direct capture==
Line 16: Line 20:
 
=== Capturing with a simple graphics tablet ===
 
=== Capturing with a simple graphics tablet ===
  
One solution for capturing writing is to use a dedicated graphics tablet such as a [https://www.amazon.com/Wacom-Bamboo-CTL471-Tablet-Black/dp/B00EVOXM3S/ Wacom Bamboo] or [https://www.amazon.com/Wacom-CTL490DB-Digital-Drawing-Graphics/dp/B010LHRFWW/ Wacom Intuos Draw]. These are relatively inexpensive (< $100) input devices with a stylus. You can use the stylus just like a pen, within almost any application that supports drawing and creating vector graphics. (Be sure to use a ''vector graphics'' application such as Inkscape or Adobe Illustrator, and not a bitmap graphics application such as Photoshop.)
+
One solution for capturing writing is to use a dedicated graphics tablet such as the [https://www.amazon.com/dp/B07PPQH867 Wacom Intuos Draw]. These are relatively inexpensive (< $100) input devices with a stylus. You can use the stylus just like a pen, within almost any application that supports drawing and creating vector graphics. (Be sure to use a ''vector graphics'' application such as Inkscape or Adobe Illustrator, and not a bitmap graphics application such as Photoshop.)
  
 
While you can certainly write freehand on a tablet like this while watching your screen alone, another approach is to trace existing writing or artwork on a piece of paper. You can attach a piece of paper to the top of your graphics tablet and use the stylus on top of that, to trace handwriting or other artwork.  
 
While you can certainly write freehand on a tablet like this while watching your screen alone, another approach is to trace existing writing or artwork on a piece of paper. You can attach a piece of paper to the top of your graphics tablet and use the stylus on top of that, to trace handwriting or other artwork.  
  
 
If you are tracing something small (for example a signature), it is sometimes helpful to start with an extra large version of your signature (perhaps, the full size of your tablet's input area), and shrink the result down when you are done. This helps to minimize any artifacts from your tracing.
 
If you are tracing something small (for example a signature), it is sometimes helpful to start with an extra large version of your signature (perhaps, the full size of your tablet's input area), and shrink the result down when you are done. This helps to minimize any artifacts from your tracing.
 +
  
 
=== Capturing with a hybrid graphics tablet/monitor ===
 
=== Capturing with a hybrid graphics tablet/monitor ===
  
There are also high end graphics tablets that are more aptly described as computer monitors which accept stylus input.  A good example is the [https://www.amazon.com/Wacom-Cintiq-21-Inch-Display-DTK2200/dp/B008HB5K5O/ Wacom Cintiq], available in various sizes. These tend to be considerably more expensive than a stand-alone tablet, and you may wish to consider a general-purpose tablet computer (e.g., iPad) as an alternative. (Hints on using a tablet computer are in the section below.)
+
There are also high end graphics tablets that are more aptly described as computer monitors which accept stylus input.  A good example is the [https://www.amazon.com/dp/B07L77GTTY Wacom Cintiq], available in various sizes. These tend to be considerably more expensive than a stand-alone tablet, and you may wish to consider a general-purpose tablet computer (e.g., iPad) as an alternative. (Hints on using a tablet computer are in the section below.)
  
 
A graphics tablet with a display is excellent for freehand writing since it provides instant feedback. However it requires a different approach if you wish to trace existing writing or artwork. Use a scan or photograph of the handwriting or artwork that you wish to follow, and display it in the background of the area where you are tracing.
 
A graphics tablet with a display is excellent for freehand writing since it provides instant feedback. However it requires a different approach if you wish to trace existing writing or artwork. Use a scan or photograph of the handwriting or artwork that you wish to follow, and display it in the background of the area where you are tracing.
Line 33: Line 38:
 
Several commercial software utilities now exist that allow you to use your existing touchscreen tablet computer (such as an iPad or sometimes even smartphones) as an external graphics tablet and monitor for your Mac or Windows computer. This, combined with the addition of a stylus (an included or third-party touchscreen stylus, or the Apple Pencil on the iPad Pro) can make a very effective graphics tablet -- and at relatively low cost if you already own such a tablet.  
 
Several commercial software utilities now exist that allow you to use your existing touchscreen tablet computer (such as an iPad or sometimes even smartphones) as an external graphics tablet and monitor for your Mac or Windows computer. This, combined with the addition of a stylus (an included or third-party touchscreen stylus, or the Apple Pencil on the iPad Pro) can make a very effective graphics tablet -- and at relatively low cost if you already own such a tablet.  
  
[https://www.duetdisplay.com Duet] and [http://astropad.com AstroPad] are two solutions for using an iPad as a graphics tablet. Duet is available for both Mac and Windows and supports both iPad and iPhone. AstroPad is for Mac and iPad only. Both offer different levels of service at different costs. You can read a comparative review of them [https://www.imore.com/astropad-vs-duet-display-which-second-screen-drawing-tablet-ipad-pro-reigns-supreme here]. (We have tried Duet with an iPad Pro and found that it works quite well.)
+
[https://www.duetdisplay.com Duet] and [http://astropad.com AstroPad] are two solutions for using an iPad as a graphics tablet. Duet is available for both Mac and Windows and supports both iPad and iPhone. AstroPad is for Mac and iPad only. Both offer different levels of service at different costs. You can read a comparative review of them [https://www.imore.com/astropad-vs-duet-display-which-second-screen-drawing-tablet-ipad-pro-reigns-supreme here]. (We have tried Duet with an iPad Pro and found that it works quite well.) If you have a recent-generation Mac running MacOS Catalina or newer with a compatible iPad and Apple Pencil, you may also be able to use Apple's [https://support.apple.com/en-us/HT210380 sidecar] feature, built into the operating system, without purchasing separate software.
  
 
While not quite at the same level of polish, the free [http://www.sunnysidesoft.com/virtualtablet/supported-devices/ VirtualTablet] software allows a similar functionality with certain Android or Microsoft Surface tablets.
 
While not quite at the same level of polish, the free [http://www.sunnysidesoft.com/virtualtablet/supported-devices/ VirtualTablet] software allows a similar functionality with certain Android or Microsoft Surface tablets.
Line 66: Line 71:
  
  
==== Tracing bitmaps ====
+
==== Bitmap Tracing ====
  
 
When you scan or take a picture of vector artwork, or convert vector artwork into a bitmap format (for example by saving as a JPG file), you are ''removing the directional information from the artwork''. You are removing the data that says where each stroke starts and stops, and replacing it with a grid of color values.  
 
When you scan or take a picture of vector artwork, or convert vector artwork into a bitmap format (for example by saving as a JPG file), you are ''removing the directional information from the artwork''. You are removing the data that says where each stroke starts and stops, and replacing it with a grid of color values.  
  
To convert back from that grid of colored pixels into a list of strokes and directions is a complex problem that does not always have a clear solution. A simplistic approach is to draw vector contours around brightness levels -- this the type of "outline tracing" that Inkscape's Trace Bitmap tool uses.  
+
To convert back from that grid of colored pixels into a list of strokes and directions is a complex problem that does not always have a clear solution. A simplistic approach is to draw vector contours around brightness levels -- this the type of automatic "outline tracing" that Inkscape's Trace Bitmap tool uses. You can find this tool in the menu as Path > Trace Bitmap.  This type of tracing tool is well suited to simple outline shapes that do not have complex internal structure.  
  
 
This type of tracing usually results in plotting "double" lines around each stroke, since it is showing the outlines, and that can result in plotted letters that look hollow. In some cases a broad-nibbed fountain pen (or Sharpie) has a width that is sufficient to hide the fact. You can help a little bit by using an inset operation (In Illustrator, Effect > Path > Offset path), to make the width smaller. You might also consider using a smaller nibbed pen, but filling the text in the usual way so that it is not hollow.
 
This type of tracing usually results in plotting "double" lines around each stroke, since it is showing the outlines, and that can result in plotted letters that look hollow. In some cases a broad-nibbed fountain pen (or Sharpie) has a width that is sufficient to hide the fact. You can help a little bit by using an inset operation (In Illustrator, Effect > Path > Offset path), to make the width smaller. You might also consider using a smaller nibbed pen, but filling the text in the usual way so that it is not hollow.
  
  
==== Center tracing ====
+
==== Centerline Tracing ====
  
A slightly more advanced type of bitmap tracing tries to draw centerlines through these contours, in order to estimate where the initial lines were located. This is called "center" or "centerline" tracing. And, while it sounds like a good idea in practice, the results are rarely good enough to pass for human handwriting, since the tracing tool has no intuition about how the lines should connect together, or appear when they overlap.
+
A slightly more advanced type of bitmap tracing tries to draw centerlines through these contours, in order to estimate where the initial lines were located. This is called "center" or "centerline" tracing. And, while it sounds like a good idea in practice, the results of automated centerline tracing software are rarely good enough to pass for human handwriting, since the tracing tool has no intuition about how the lines should connect together, or appear when they overlap.
  
 
Here is an online program that can take your scanned text and convert it by center tracing to an SVG file that can opened in Inkscape: http://online.rapidresizer.com/tracer.php   
 
Here is an online program that can take your scanned text and convert it by center tracing to an SVG file that can opened in Inkscape: http://online.rapidresizer.com/tracer.php   
Line 86: Line 91:
  
 
''Aside:'' Going several steps further, automatically interpreting from a scanned image to determine not where the lines are, but instead the human's intent and drawing method is a decades-old, challenging problem in computer vision and AI, called "stroke extraction." In the context of handwriting, this problem is called "handwriting trajectory recovery." It is a specialized application, and not one that we advertise as a capability. Very little commercially (or freely) available software currently exists that can perform that task to an appreciable degree of satisfaction.
 
''Aside:'' Going several steps further, automatically interpreting from a scanned image to determine not where the lines are, but instead the human's intent and drawing method is a decades-old, challenging problem in computer vision and AI, called "stroke extraction." In the context of handwriting, this problem is called "handwriting trajectory recovery." It is a specialized application, and not one that we advertise as a capability. Very little commercially (or freely) available software currently exists that can perform that task to an appreciable degree of satisfaction.
 +
 +
 +
==== Manual Tracing ====
 +
 +
Aside from using automatic tracing software, you can also ''manually'' trace a scan, in order to produce AxiDraw compatible vector curves. This process is labor intensive, but can also produce extremely high quality output. It is a good method when you need to reproduce ''short'' samples (short notes or a signature) of someone's existing handwriting.
 +
 +
As an example, suppose that you need to trace an existing (historical) signature, so that it can be printed as a single vector path. You might start with a photograph or scan of the signature. After importing the graphic into Inkscape, use the “pencil” tool to trace along the strokes, and use the additional path editing tools within Inkscape to adjust the strokes until they look proper.  (You can use similar tools and methods within other vector graphics such as Adobe Illustrator or Corel Draw, just as well.)  If you are using Inkscape to do this kind of manual tracing, see "Inkscape settings for handwriting capture" above for some settings that might be helpful.
 +
 +
With a little practice, this can become quite quick and effective.
  
  
Line 93: Line 107:
  
 
Here are a few possible starting points:
 
Here are a few possible starting points:
* If your goal is to to exactly copy a small number of handwritten notes a great number of times, then take your scan into Illustrator or Inkscape, and manually trace along the strokes with the pen tool, ideally using a graphics tablet. With a little practice, this can be quite quick. (Additional notes on the topic of direct handwriting capture can be found further up this page.)
+
* If your goal is to to exactly copy a small number of handwritten notes, a great number of times, and you need to start with a photograph or scan, then consider manually tracing the file, as described above.
 
* If your goal is to generate a great many notes that look reasonably "hand written" but do not need to match someone's exact style, then use regular computer fonts or Hershey-style single-stroke fonts.
 
* If your goal is to generate a great many notes that look reasonably "hand written" but do not need to match someone's exact style, then use regular computer fonts or Hershey-style single-stroke fonts.
 
* If your goal is to digitize signatures, or other very small amounts of text, and do not have to start with scans, then use the jSignature tool discussed earlier or trace the text/signature with a graphics tablet.
 
* If your goal is to digitize signatures, or other very small amounts of text, and do not have to start with scans, then use the jSignature tool discussed earlier or trace the text/signature with a graphics tablet.
 
* If your goal is to reproduce complex artwork that starts as a bitmap image, then you may have no choice but to try and use some kind of bitmap tracing tool.
 
* If your goal is to reproduce complex artwork that starts as a bitmap image, then you may have no choice but to try and use some kind of bitmap tracing tool.

Latest revision as of 12:20, 6 June 2022

  This wiki page is part of our AxiDraw documentation

Please click here to return to the AxiDraw overview.

The best way to transform some handwritten text into something that the AxiDraw can plot is to use direct handwriting capture, or what you might refer to as "real-time" capture. In direct capture, you use your computer to record each stroke as it is written, and then save the resulting set of paths as a vector artwork file. This method can also be used when replicating handwriting. For example when replicating historical signatures, it is necessary to trace along the strokes of existing writing and to capture those strokes as you trace them.

This page discusses some approaches to direct capture (including tracing with a stylus), as well as some alternatives. Naturally, these same approaches can be used for capturing sketching and other non-handwriting types of artwork as well.


Capturing a signature with jSignature[edit]

For very small amounts of text — for example a single signature — a convenient software tool is jSignature. jSignature can create and save an SVG file which can be opened in Inkscape. jSignature can be used from your computer, smartphone, or tablet. You'll often get the best results using a stylus that you hold like a pen, rather than your finger.

To use it from your computer, sign your signature, and then select "SVG" from the "Extract signature data as" pop-up menu. It should then display your signature as an image below that pop-up menu. Right-click on the image, and select from the menu there "Save image as..." (the exact wording of this option will vary depending on your browser), and save the result with a name like "signature.svg". You can then open up this SVG file from within Inkscape and print to the AxiDraw. For other platforms (smartphone and tablet), you'll need to send the signature to your desktop computer, by a means such as e-mail, before proceeding.

If you need to start with a printed signature, this method can still be used. Print out the signature, place it on your phone (or other touch surface) and trace along it, just as you would if you were signing for the first time.

If you would like a version of jSignature with a larger writing area, we have a version available here.

Using a graphics tablet for direct capture[edit]

Capturing with a simple graphics tablet[edit]

One solution for capturing writing is to use a dedicated graphics tablet such as the Wacom Intuos Draw. These are relatively inexpensive (< $100) input devices with a stylus. You can use the stylus just like a pen, within almost any application that supports drawing and creating vector graphics. (Be sure to use a vector graphics application such as Inkscape or Adobe Illustrator, and not a bitmap graphics application such as Photoshop.)

While you can certainly write freehand on a tablet like this while watching your screen alone, another approach is to trace existing writing or artwork on a piece of paper. You can attach a piece of paper to the top of your graphics tablet and use the stylus on top of that, to trace handwriting or other artwork.

If you are tracing something small (for example a signature), it is sometimes helpful to start with an extra large version of your signature (perhaps, the full size of your tablet's input area), and shrink the result down when you are done. This helps to minimize any artifacts from your tracing.


Capturing with a hybrid graphics tablet/monitor[edit]

There are also high end graphics tablets that are more aptly described as computer monitors which accept stylus input. A good example is the Wacom Cintiq, available in various sizes. These tend to be considerably more expensive than a stand-alone tablet, and you may wish to consider a general-purpose tablet computer (e.g., iPad) as an alternative. (Hints on using a tablet computer are in the section below.)

A graphics tablet with a display is excellent for freehand writing since it provides instant feedback. However it requires a different approach if you wish to trace existing writing or artwork. Use a scan or photograph of the handwriting or artwork that you wish to follow, and display it in the background of the area where you are tracing.


Capturing with a tablet computer or smartphone[edit]

Several commercial software utilities now exist that allow you to use your existing touchscreen tablet computer (such as an iPad or sometimes even smartphones) as an external graphics tablet and monitor for your Mac or Windows computer. This, combined with the addition of a stylus (an included or third-party touchscreen stylus, or the Apple Pencil on the iPad Pro) can make a very effective graphics tablet -- and at relatively low cost if you already own such a tablet.

Duet and AstroPad are two solutions for using an iPad as a graphics tablet. Duet is available for both Mac and Windows and supports both iPad and iPhone. AstroPad is for Mac and iPad only. Both offer different levels of service at different costs. You can read a comparative review of them here. (We have tried Duet with an iPad Pro and found that it works quite well.) If you have a recent-generation Mac running MacOS Catalina or newer with a compatible iPad and Apple Pencil, you may also be able to use Apple's sidecar feature, built into the operating system, without purchasing separate software.

While not quite at the same level of polish, the free VirtualTablet software allows a similar functionality with certain Android or Microsoft Surface tablets.


Inkscape settings for handwriting capture[edit]

If you are using a graphics tablet to capture handwriting or other artwork directly within Inkscape, we have some suggestions that may help you to get started:

  • Use the "Pencil" tool (labeled as "Draw Freehand Lines") from the toolbar to trace over your image. You can select this tool with F6 as well.
  • There are two "Mode" options available for this tool. Select the default value, "Create regular Bezier path."
  • The "Smoothing" parameter controls the amount of automatic smoothing applied to the input as each stroke is drawn. We typically use a value of 30. If the smoothing is too aggressive, feel free to lower this value.
  • Set the "Shape" parameter to None. (Other values allow you to apply a width effect to the path, but these only affect how it is drawn on the screen, not how it will plot.)


Alternatives to real-time capture[edit]

In some circumstances, there is no alternative but to start from a scan or image of artwork or text and to attempt to automatically convert it into a vector format by using a tracing program. (Note that we are referring to a computer program that attempts to trace a scan here, rather than the process of tracing strokes with a stylus, as discussed earlier on this page.)

While there are a number of approaches to this, a good rule of thumb is that automatic tracing rarely yields results of particularly high quality. Even approaches such as automatic centerline tracing rarely approximate the quality and character of real human handwriting. If at all possible, avoid automatic tracing and either start with fonts, vector artwork, or one of the methods described in the previous sections; these will almost always yield results superior to those obtained by tracing bitmaps.


Vectors and tracing raster artwork (Or, why this is hard)[edit]

Vectors artwork vs Raster artwork[edit]

AxiDraw is designed to plot vector artwork, that is, the kinds of writing and/or drawing that consist of various strokes like the kind that you can make while using a single pen on a sheet of paper. Vector artwork represents each pen stroke as a continuous path from where the pen is lowered until the place where it is lifted. The data representing the stroke contains information about the direction of the stroke, in addition to its location.

By contrast, raster, or bitmap artwork consists of a series of colored pixels on a regular grid. JPEG, PNG, GIF, and BMP are examples of common raster graphics formats. Raster graphics do not contain paths or directions that a plotter can follow, since they only consist of colors.


Bitmap Tracing[edit]

When you scan or take a picture of vector artwork, or convert vector artwork into a bitmap format (for example by saving as a JPG file), you are removing the directional information from the artwork. You are removing the data that says where each stroke starts and stops, and replacing it with a grid of color values.

To convert back from that grid of colored pixels into a list of strokes and directions is a complex problem that does not always have a clear solution. A simplistic approach is to draw vector contours around brightness levels -- this the type of automatic "outline tracing" that Inkscape's Trace Bitmap tool uses. You can find this tool in the menu as Path > Trace Bitmap. This type of tracing tool is well suited to simple outline shapes that do not have complex internal structure.

This type of tracing usually results in plotting "double" lines around each stroke, since it is showing the outlines, and that can result in plotted letters that look hollow. In some cases a broad-nibbed fountain pen (or Sharpie) has a width that is sufficient to hide the fact. You can help a little bit by using an inset operation (In Illustrator, Effect > Path > Offset path), to make the width smaller. You might also consider using a smaller nibbed pen, but filling the text in the usual way so that it is not hollow.


Centerline Tracing[edit]

A slightly more advanced type of bitmap tracing tries to draw centerlines through these contours, in order to estimate where the initial lines were located. This is called "center" or "centerline" tracing. And, while it sounds like a good idea in practice, the results of automated centerline tracing software are rarely good enough to pass for human handwriting, since the tracing tool has no intuition about how the lines should connect together, or appear when they overlap.

Here is an online program that can take your scanned text and convert it by center tracing to an SVG file that can opened in Inkscape: http://online.rapidresizer.com/tracer.php If you use this, be sure to select the "centerline" option and SVG output.

If you happen to have Adobe Illustrator, it has a built-in tracing routine, capable of doing both outline and centerline traces. Select your image and choose the Window > Image Trace option. In the resulting window, open the "Advanced" pane, and then choose stroke (centerline) or fill (outline) or both.


Aside: Going several steps further, automatically interpreting from a scanned image to determine not where the lines are, but instead the human's intent and drawing method is a decades-old, challenging problem in computer vision and AI, called "stroke extraction." In the context of handwriting, this problem is called "handwriting trajectory recovery." It is a specialized application, and not one that we advertise as a capability. Very little commercially (or freely) available software currently exists that can perform that task to an appreciable degree of satisfaction.


Manual Tracing[edit]

Aside from using automatic tracing software, you can also manually trace a scan, in order to produce AxiDraw compatible vector curves. This process is labor intensive, but can also produce extremely high quality output. It is a good method when you need to reproduce short samples (short notes or a signature) of someone's existing handwriting.

As an example, suppose that you need to trace an existing (historical) signature, so that it can be printed as a single vector path. You might start with a photograph or scan of the signature. After importing the graphic into Inkscape, use the “pencil” tool to trace along the strokes, and use the additional path editing tools within Inkscape to adjust the strokes until they look proper. (You can use similar tools and methods within other vector graphics such as Adobe Illustrator or Corel Draw, just as well.) If you are using Inkscape to do this kind of manual tracing, see "Inkscape settings for handwriting capture" above for some settings that might be helpful.

With a little practice, this can become quite quick and effective.


Consider alternatives to tracing bitmaps[edit]

With those things in mind, there are a great many different approaches that you might take towards your particular goal. The best approach for you will depend entirely on what your actual application is.

Here are a few possible starting points:

  • If your goal is to to exactly copy a small number of handwritten notes, a great number of times, and you need to start with a photograph or scan, then consider manually tracing the file, as described above.
  • If your goal is to generate a great many notes that look reasonably "hand written" but do not need to match someone's exact style, then use regular computer fonts or Hershey-style single-stroke fonts.
  • If your goal is to digitize signatures, or other very small amounts of text, and do not have to start with scans, then use the jSignature tool discussed earlier or trace the text/signature with a graphics tablet.
  • If your goal is to reproduce complex artwork that starts as a bitmap image, then you may have no choice but to try and use some kind of bitmap tracing tool.