"Rectangle of Doom" for penplotting

I added a small feature to my Pen Plotting tools called the "Rectangle of Doom". There's not much to it, and yet at the same time, it's something I'm the most excited about, hence the blog post. You can see it in action in the 20-second video below.

For those that can't see the video, it's essentially me moving a rectangle area around, over the top of SVG being generated for sending to a pen plotter.

Now the reason why I'm excited about this is, envelopes!

💌 💌 💌

Some people will know that aside from Pen plotting, another great love that I have is sending letters and post to people. I've been doing this for a couple of years now, I even make my own envelopes from scratch and often decorate them by hand.

I also enjoy calligraphy, both on the envelope and in letters.

So there's been something of a convergence going on with my pen plotting, and handwriting, where eventually I want to get to the point where I'm using decorative elements both machine and hand created — me working alongside the plotter to create lovely things.

💌 💌 💌

Which is where the whole idea of a "Rectangle of Doom" comes from. A space I can create in a plot which allows me to write an address in, it's that simple. I'm sure I'll find other uses for it, such as putting smaller plots inside larger plots, but for the moment it's envelope time.

Although, even though I say it's simple, on the slightly more technical side there's a bit more to it than that. Watching the video it looks as easy as drawing a solid rectangle over the design, which is pretty much what you'd do.

However, with pen plotting, the pen plotter draws all the lines, in this case, it would draw all the lines "under" the rectangle, and then draw the rectangle outline "on top". But of course, the rectangle in pen plotting SVG world isn't solid white. It's just an outline.

What's going on here is the rectangle is removing all the lines from within it. Hence "Rectangle of Doom", no lines can survive inside it, they are destroyed.

The code to do that is also not the most straight forwards. You have to do all sorts of stuff with intersections, working out if points are "inside" or "outside" of other shapes and then keeping them, throwing them away or cutting them in half.

Which is why it's taken me so long to get round to doing the oh-so-simple rectangle. If you go back to the video and watch it, but this time instead of seeing a white rectangle over the rest of the design, visualise javascript code under the hood doing thousands of calculations for each frame 😄😭

I'm very very, very very pleased I finally got round to doing it, so glad in fact that I've been moved to write a blog post about it!

💌 💌 💌