Feeling pretty empowered by understanding more of the nuts-and-bolts of working with SVGs. Inspires me to work on improving my design skills and sensibilities.

This post used to be on Posterous. I rescued my posts before Posterous shut down and am now sharing them here.

I played with the mouse coordinate handling a bit to try and compensate for the rotation, but it's still not great. For some reason, up-and-down movements seem to track well, but left-right movement causes the drawing point to move up and down relative to the cursor.

My guess is that I am just being bad at "the maths" and that I'll get it figured out later. :)

This post used to be on Posterous. I rescued my posts before Posterous shut down and am now sharing them here.

Added some scribbling to my little JavaScript app, which also gets saved to the SVG.

It's not great (my insistence on making these things map to the sticky note image means they don't line up right with the mouse), but it works!

This post used to be on Posterous. I rescued my posts before Posterous shut down and am now sharing them here.

I really wanted to get SVG manipulation going in this demo, so I have ported the rendering (once again), this time using the jQuery SVG lib, which is really nice and easy to use: http://keith-wood.name/svg.html

Files

hershey_svg.zip

149280 bytes. Updated February 6, 2011.

hershey.zip

107203 bytes. Updated February 6, 2011.

astrology.svg

32309 bytes. Updated February 6, 2011.

cursive.svg

20791 bytes. Updated February 6, 2011.

cyrilc_1.svg

22660 bytes. Updated February 6, 2011.

cyrillic.svg

23636 bytes. Updated February 6, 2011.

futural.svg

15480 bytes. Updated February 6, 2011.

futuram.svg

22512 bytes. Updated February 6, 2011.

gothgbt.svg

35125 bytes. Updated February 6, 2011.

gothgrt.svg

36666 bytes. Updated February 6, 2011.

gothiceng.svg

35041 bytes. Updated February 6, 2011.

gothicger.svg

36582 bytes. Updated February 6, 2011.

gothicita.svg

30219 bytes. Updated February 6, 2011.

gothitt.svg

30303 bytes. Updated February 6, 2011.

greek.svg

16383 bytes. Updated February 6, 2011.

greekc.svg

21662 bytes. Updated February 6, 2011.

greeks.svg

15541 bytes. Updated February 6, 2011.

japanese.svg

55942 bytes. Updated February 6, 2011.

markers.svg

5566 bytes. Updated February 6, 2011.

mathlow.svg

16193 bytes. Updated February 6, 2011.

mathupp.svg

15783 bytes. Updated February 6, 2011.

meteorology.svg

16078 bytes. Updated February 6, 2011.

music.svg

26086 bytes. Updated February 6, 2011.

rowmand.svg

23433 bytes. Updated February 6, 2011.

rowmans.svg

15379 bytes. Updated February 6, 2011.

rowmant.svg

31035 bytes. Updated February 6, 2011.

scriptc.svg

25598 bytes. Updated February 6, 2011.

scripts.svg

22608 bytes. Updated February 6, 2011.

symbolic.svg

19740 bytes. Updated February 6, 2011.

timesg.svg

22309 bytes. Updated February 6, 2011.

timesi.svg

23030 bytes. Updated February 6, 2011.

timesib.svg

30928 bytes. Updated February 6, 2011.

timesr.svg

21818 bytes. Updated February 6, 2011.

timesrb.svg

30830 bytes. Updated February 6, 2011.

math-drawing.svg

8619 bytes. Updated February 6, 2011.

This work is licensed Public Domain.

Description

Making text for Unicorn or EggBot plots isn’t always a fun process. Most tools require you to convert text into paths, and even then you get the outlines of shapes, which can often turn messy at small sizes.

mifga pointed me towards the Hershey fonts[1]. They’re a set of fonts for vector plotters named after creator Dr. A. V. Hershey who made them for the National Bureau of Standards.

These files are in a weird, weird, format. But after some normalizing, wailing, and gnashing of teeth, I was able to write some code to parse them and spit them back out as SVG! Now you can use these fonts in your Unicorn drawings.

Each SVG contains a layout of one of the Hershey fonts. The hershey_svg.zip file below contains all of the SVG files. The hershey.zip file contains the (cleaned up) original .jhf files. math-drawing.svg is just an example of using these glyphs, including scaling and stretching. I think the result is nice!

To use these in Unicorn plots, you’ll want to grab my Unicorn G-Code extension for Inkscape[2].

[1] Hershey fonts - http://emergent.unpythonic.net/software/hershey
[2] Unicorn output for Inkscape - http://www.thingiverse.com/thing:5986

Instructions

To use these fonts in your Unicorn plots:

1. Download the SVG file containing the font of your choice, or grab the whole hershey_svg.zip to get them all.
2. In your Inkscape drawing, use File | Import to load the font you want
3. Drag around and duplicate the characters that you want to use.
4. Delete the ones that you don’t.
5. Plot it!
   • (Unicorn users) Save your file and Save a Copy to get your .gcode!
   • (EggBot users) Plot directly from Inkscape. :)

While I know I should be finishing my MakerBot time-lapse camera series, I took some time for another project to play with some Processing. The above image was rendered in Processing, in real time in just couple of minutes!

Basically, I wanted to take a simple shape, defined by an SVG path, and fill it with images of 3D objects loaded from STL files. Specifically, many wonderful MakerBot-printable objects from Thingiverse!

After some Googling around, I found out that this problem is basically a space-filling problem, similar to an excellent Processing sketch named Scattered Letters by Algirdas Rascius, but with a twist.

The basic algorithm is:

• Load an SVG and render it to an off-screen buffer
• Set curr_size, the size that STLs should be rendered, to max_size
• Choose a random STL model, give it a random orientation, and render it at the current size to an off-screen buffer
• Try several times to place this model by giving it a random x,y position and checking it for a good fit:
  • Each non-background pixel of the model's off-screen image should fit within the non-background pixels of the SVG's off-screen image.
  • Each non-background pixel of the model's off-screen image should NOT overlap with any non-background pixel of the main display.
• If a fitting position is found, render the model to the display.
• Otherwise, shrink curr_size by a step and choose a new model.
• If we drop below min_size, we should stop.

You can find the code for my sketch, which I call ThingiverseCollage, on GitHub. To make it work, you’ll need to follow the installation instructions in the README to install my (very slightly) modified version of the unlekkerLib for STL loading and rendering. I modified it to allow rendering to a PGraphics object, since it originally only allowed rendering to the main PApplet.

A note on STL files: unlekkerLib only loads STL files in the binary format. It chokes dramatically on ASCII STL files, such as those exported from OpenSCAD. I was able to use Zaggo’s excellent Pleasant3D to load ASCII STLs and re-save them, which converts them to binary STLs. As a bonus, Pleasant3D also allows you to orient objects in a way that will make them look most interesting when they are rendered down to 2D in the final image.

An example M.svg, as well as several objects from Thingiverse are included with the code to get started. To use your own SVGs, I have had good luck using Inkscape to draw or import shapes, and save them as the native “Inkscape SVG” or “Plain SVG” formats. Some files might require hand-tweaking; for example, if the width and height header values are something like “100%" instead of a pixel value.

There is also some simple configuration in the sketch to allow the export of PDF files. This is nice because the resulting PDF has full vector data, making it easily rescaled to any size you wish. Unfortunately, the current PDF renderer for Processing renders each triangle of each STL model as a separate path, generating very complicated vector output, which tends to bring Inkscape to its knees. I have had some luck with importing those files, rastering them out to PNG at a high resolution (e.g. 600 dpi), and using Inkscape’s “Trace Bitmap” functionality to re-vectorize them, though this requires some cleanup by hand.

Anyway, this has been a fun little diversion for me for the last couple of days. I hope that you folks find it useful! Post your awesome pictures in the comments, here!