I just posted Sticky Scribbles to Glitch as a Glitch Jam entry for August 2024. The prompt got me thinking about some old web art projects that have come and gone, so I picked one up, dusted it off, dropped it on the floor, stepped on it, cut myself on the pieces, bought expensive raw goods from the store, and rebuilt a nearly unrecognizable new version that does the same thing.

I thought I’d post the write-up on my blog, as well.

Sticky Scribbles

1. Type some text and choose a font.
2. Maybe scribble on the sticky note a little.
3. Copy-paste the Output SVG into a file of your own choosing.
4. Open it in your pen plotter software and plot it, I guess!

Need to erase? A page refresh will clear all scribbling.

The fonts are vector strokes suitable for plotting. They’re called Hershey fonts and their story is pretty interesting!

You can also find the full source and history on GitHub.

Why

Inspired by the August 2024 Glitch Jams prompt of “#justdraw”, I remembered an old project from 2011.

Back then I worked for MakerBot Industries and, at the urging of my friend Matt Griffin, had started a descent into madnes- pen plotting. For me, that meant using the MakerBot Unicorn a tool for the MakerBot Cupcake CNC that replaced the plastic extruder to turn a 3D printer into a loosey-goosey pen plotter.

As with most DIY 3D printers of the day, the Cupcake CNC was driven by G-Code - short instructions sent over a serial port to tell it how to move its motors, etc. When I started playing around, the process for going from some vector artwork to G-Code was pretty labor intensive and required multiple tools.

The work area for the Cupcake CNC is 10cm square, which is just a little bit bigger than a pad of 3"x3" name brand sticky notes. So, these easily becamie a target for my madnes making.

In February of that year I particpated in “Thing-a-Day” on Posterous (RIP), and worked on several projects to try and boost the ease of use of this whole ecosystem.

A timeline you didn’t ask for

Unicorn G-Code extension for Inkscape

Mashing up some example Python code from the Unicorn release, and the Inkscape driver for Evil Mad Scientist Laboratories’ EggBot, this extension let you save (simple) drawings as G-Code that you could plot using a Cupcake CNC + Unicorn.

• 2011-02-01 - Announced the Unicorn G-Code extension for Inkscape.
  • GitHub repository (archived 2018)
  • Thingiverse
• 2011-02-02 - Added a pen registration step and homing support
• 2011-02-03 - Added support for multiple copies and continuous plotting
• 2011-02-04 - Added support for pausing to change pens

While I made this Inkscape extension to serve a very niche machine, I ended up continuing to improve it here and there. I was surprised to see it adopted by some DIY CNC projects from all over the world!

Unfortunately, I never made much of a habit out of using my own extension, so when the extension interfaces changed for Inkscape 0.91.x, I ended up marking it read-only.

There are over 100 forks, though, so maybe somebody picked it back up!

Hershey fonts

Matt introduced me to Hershey fonts, a set of vector fonts designed for the U.S. government for use on CNC machines for plotting or engraving. These were in a somewhat legible format, so I became a little obsessed with using them for plotter projects.

• 2011-02-06 Announced conversions of the Hershey fonts to SVG
  • Hershey fonts in SVG on Thingiverse
  • Windell of Evil Mad Scientist Laboratories was motivated by this to make an Inkscape extenstion for rendering Hershey text. That extension became part of Inkscape and after time and improvements it’s still there!
• 2011-02-08 - Hershey font rendering as SVG with JavaScript with Raphaël.js. A little proof of concept that would eventually become this little proof-of-concept.
• 2011-02-16 - Live demo using jQuery and Raphaël.js
• 2011-02-17 - Added line wrapping to the demo
• 2011-02-20 - Replaced Raphaël.js with canvas
• 2011-02-21 - Auto-scale text to fit a box
• 2011-02-22 - Added the cursed sticky note backdrop
• 2011-02-23 - Replaced canvas with Keith Wood’s jQuery SVG plugin
• 2011-02-24 - Sized everything for plotting on a sticky note via Unicorn
• 2011-02-25 - Added terrible scribbling. Insisting on having lines visually line up with the sticky note background but come out correctly aligned in the resulting SVG was really biting me here.
• 2011-02-26 - “Improved” the terrible scribbling. (Note: this did not fix the alignment issues. Why was I trying to do all the math myself?)

I’d love to share gratuitous details about rewriting bits of this little tool. Unfortunately, I worked on it live on my site that entire time without any version control. 😭

(Where was Glitch in 2011?? lol)

Misc (un)related projects

• 2011-02-05 - Graffiti Markup Language to Unicorn G-Code
• 2011-02-14 - An SVG template for tweets

This version

While you can find the entire history on the sticky-scribbles GitHub, I had a good time figuring out how I left this ~13 year old project and choosing ways to “modernize” or at least “make it less bad to my eyes”.

Fixed the cursed sticky note projection

The drawing canvas markup can be summarized like this:

• outer <svg> with background image of the stick note
  • inner <g>roup with a painstakingly trial-and-errored transform that made rendered Hershey text look “mostly right”
    • <g>roup for the actual rendered Hershey text
    • <g>roup for the scribbles

When we scribble onto the canvas, the pointer coordinates don’t account for that transform, so if we save them as-is, they’ll be skewed from where they appear on the sticky note preview.

Previously, I tried to do a bunch of math on my own, which worked out really badly.

Since then, I realized that if I have an existing transform, I can:

1. get that transform as a matrix (thx StackOverflow)
2. invert that matrix
3. apply that matrix to the pointer coordinate

When we add the transformed coordinate to our scribble, it now visually lines up with the preview on the sticky note! Miracle.

SVG building

The 2011 version of this demo used Jeff Wood’s jQuery SVG plugin to rebuild pretty much the entire contents of the <svg> any time something changed.

However, the main structure of the SVG described above doesn’t change at all! So I moved the <g>roups that contain the transform to make things line up with the sticky note, and its inner <g>roups for the rendered Hershey text and pointer scribbles into the markup on the page.

There were still a couple of useful utilities for creating <g>roup and <path> elements in the jQuery SVG plugin, so I made my own version in a little ES module svg helper

Going vanilla

There were lots of jQuery-isms that I vanilla-ized and in many cases modernized.

• replace instances of $('#someid') with a single document.querySelector and a variable
• replace $(someArray).each(...) with for (const item of someArray)
• update the hershey.js font parsing and rendering helper as an ES module.
  • Made use of async and Promises to get rid of some messy setTimeout calls around font loading.
• replace all var declarations with let and const

“Web Component” for scribbling

One of the biggest changes was extracting the handling of events and (re-)rendering out of a big spaghetti ball and into self-contained bits. I did these as web components that don’t actually manage any child HTML. Instead, their attributes tell them which elements on the page they should hook into for events or render onto.

The <svg-scribbler> component is interesting because I have it lean more into using the DOM as new scribbles are added.

Previously: as the user draws a new scribble, they’re pushed into an array, and on every change we basically call a “render” function that throws out the SVG contents and re-creates it.

The new component simply creates a new <path> element when the user starts drawing and updates the d attribute as the user draws. When they stop drawing, the <path> is already in the page and done. When the user starts drawing again, we a new <path> element is created without disturbing any existing <path>s from previous scribbles.

Take a look at js/svg-scribbler.js for details.

“Web Component” for Hershey text

Similarly, the <svg-hersheytext> component takes care of listening for changes as you type in the <textarea> and re-rendering the <path>s for the text contents.

One wrinkle here is that we have a <select> dropdown to let you select a different Hershey font. Previously, a jQuery change handler on the <select> for choosing a Hershey font would load the newly selected font and then call what amounted to a top-level “render” function to draw all Hershey text and scribbles again.

The updated version uses a simpler event handler that emits a custom HersheyFont:updated event. <svg-hersheytext> elements listen for that custom events on the window object, and re-renders.

If you haven’t used them, I think Chris Ferdinandi does a great job explaining the how and why of custom events.

MutationObserver for SVG output area

Wrapped up in the previous spaghetti of “render-everything” style calls was a stop to generate an SVG string and slap it in a <textarea>.

Now that the most of the SVG stays around in the page, I’ve replaced that with a MutationObserver that kicks off whenever elements are added or changed down in the SVG tree. I love this!

Known Issues

Naive pointer* events handling does unexpected things on multi-touch devices

For example, this two-finger drag makes kind of a zig-zaggy filled-in area instead of two distinct lines:

I think this is fun and weird, actually.

inkscape-unicorn is deprecated!

Yeah so the tool this was designed to make drawings for isn’t really a going thing in 2024.

Um. Sorry? Enjoy your SVG scribbles anyway!

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

After a long lazy Sunday spent catching up with old friends, I found myself in bed at 11:30pm realizing I had not done anything for thing-a-day.

And that this is okay. :)

Today I spent my bus ride from Baltimore to NYC, and a bit more time this evening, finishing the audiobook for Cory Doctorow’s For the Win.

For the unfamiliar, For the Win is a story about gold farmers (players who exploit in-game resources to sell them for real-world money) around the world coming together to fight for reasonable working conditions and pay.

I enjoyed both of the other Doctorow books I’ve read - Little Brother, Down and Out in the Magic Kingdom, and Makers - but the synopsis put me off of this one a bit at first.  My actual knowledge of gold farming extends only about as far as World of Warcraft music videos, so I just wasn’t that excited about it.

However, the story definitely grew on me. As usual, Doctorow does a really nice job of blending technology that’s “not quite here yet” and putting it to work in his stories. I’m a sucker for the near-future scifi. I’m also a sucker for obscure familiarity, so the odd coincidence I know someone who once worked at Coca-Cola games, the megacorp behind these towering virtual economies in the novel, was another good hook for me as well.  Story arc wise, there are compelling good guys and they encounter harrowing challenges at the hands of a colorful host of bad guys, from the misguided to the downright cruel, and I always enjoy the suspense.

Beyond these hooks, I also enjoyed being made to think about a great many more things that I expected to.  From stories of factory girls in China, to union organizers forced to live outside the system under a stream of false identities, to confidence scams and how they are played out on the small scale and the global scale alike.

So, my thing for today is the review you have (hopefully) just read. I hope that you enjoyed it.

I must say that, despite missing a day, I am quite pleased that I have managed to stick so well to thing-a-day this February.  I definitely learned a lot!

I went in with a lot of grand ideas about being able to knock out one little piece of a bigger project every day, but quickly found that little pieces are a lot bigger than I expected. I often found myself without a plan for a given day, and would (grumpily) have to both come up with something to do and then do it.  Still, this approach worked well in the beginning.  A bit more time spent refining my larger projects into little deliverables over the month could have gone a long way towards making it easier to stick to the commitment and towards the completion of a bigger project.

Complications aside, I made some awesome stuff that I might have never found the time for otherwise!  It is always easy at the end of a day to say “Meh, I’ll do those things later.” Having the thing-a-day structure meant that I was almost always making progress on something, even if it was frivolous, and it is nice to recognize little accomplishments, sometimes.

Anyway, thanks to those who followed along.  Let’s keep making stuff!

–Marty

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 tweaked my little Hershey Fonts in JavaScript toy a bit. Now, the SVG data that it produces is at the right size and scale to plot on a sticky note on a MakerBot Unicorn.  Save the SVG content, load it in Inkscape, and save it as .gcode using my Inkscape extension for Unicorn.

At long last, after a bunch of little thing-a-days, I can write out a sticky-note:

And save it as G-Code for plotting on the Unicorn!

Matt Griffin was kind enough to plot it for me on one of the Thing-O-Matics at the BotCave:

... sorry for the Bel-Air... :)

You can play with it here: http://schmarty.net/hershey_js_demo/

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

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

Ok, this is more a kind of clever image arrangement than anything else, but it looks nice, I think.

You can play with it here: http://schmarty.net/hershey_js_demo/index.html

Until I change it again!

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

Ok, this is kind of fun, even though the code is very naive.

I've added a height-check at the end of my line-breaking code. If there are too many lines of text to fit within the allowed space, the algorithm will rescale everything and try again:

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

I haven't been making as much progress on my "draw things in the browser so a robot can draw them on the Unicorn" project, so I decided to take a stab at cleaning things up a little to make that easier.

Today I rewrote my little demo to use canvas 2D instead of Raphael.js.  It looks the same, for the most part:

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

Today I finished and assembled the awesome Cube Gears by Emmett from Thingiverse!

They are so much fun to turn. Printable working gears for the win!

http://www.thingiverse.com/thing:6073