Select objects of similar size in Inkscape

For the AlgoMech 2019 festival in June I created a new performative drawing piece, A Perfect Circle. The piece is about how we interface with computers that analyse our activities. It consists of a video and accompanying plotter drawings.

Making A Perfect Circle presented me with a few challenges. The make the video element I hacked together a couple of Processing scripts that did basic motion tracking by following a user-specified colour. It would draw these lines, creating new lines (instead of adding to an existing line) at each major turn and giving them a unique colour.

The next stage was to export those drawn lines to SVGs (or PDFs) so that I could export them to Inkscape and then a plotter. Fortunately Processing already has functions for exporting to SVGs. Unfortunately for me if I were to implement this as is suggested in the help file it would export both the drawn line and the background video as a still frame. I produced a very hacky workaround (with help from Ben Neal) which “works” but produces a few unwanted artefacts.

Before I go on I should probably explain what a plotter is as the unwanted artefacts relate to it. For this I will copy from the Wikipedia article on plotters:

The plotter is a computer printer for printing vector graphics. Plotters draw pictures on paper using a pen. In the past, plotters were used in applications such as computer-aided design, as they were able to produce line drawings much faster and of a higher quality than contemporary conventional printers, and small desktop plotters were often used for business graphics.

At home I have a Silhouette Cameo 2 vinyl cutter. When using this great Inkscape plugin I can bypass Silhouette’s proprietary software and send artwork directly to the cutter from Inkscape. Thanks to a pen holder adaptor I can replace the vinyl cutting blades with a pen and turn the vinyl cutter into a plotter 🙂

Back to the Processing sketch. The hacky code that I made produced the desired lines but also it had lots of additional single-node paths/dots at the start of each line.

Removing these wouldn’t be very easy. Using Edit > Select Same > Fill and Stroke or Fill Color or any of the other options wouldn’t work as it would also end up selecting the lines. I then had the bright idea to select objects based on their size. All of the dots had a dimension of 4.057×4.000px, so in theory there would be an option like Edit > Select Same > Size. However, this is not so.

After a discussion on the Inkscape forum I opened a feature request on the Inkscape bug tracker to select objects of similar size. One thing I added to this was the idea of a threshold. Using this you could select objects that were within n% of the size of the selected object. If you’ve ever used GIMP you would have seen a similar function in its fuzzy selection tool This could definitely be useful if you trace bitmaps and it produces a lot of speckles. I also added a mockup to show how it could be applied to other options in the Edit > Select Same menu options.

Anyway, at the moment this exists as a feature request. I think Inkscape is concentrating on delivering version 1.0 of the software so I don’t expect to see this implemented any time soon. As with anything in the land of open source, if you’ve got the skills to do this please contribute!

In the end I used fablabnbg’s Inkscape extension to chain all (or most) of the paths into one big path. This made selecting the dots easier as I could just hide the big path(s) once they were chained together.

After that it was a simple case of sending it to the plotter!

Extrude in Inkscape

To design the poster image for The People VS The Machine I revisited an old technique that wrote about in 2009. The technique used the Extrude extension in Inkscape, combined with the Color > Randomize extension to create what could be described as a stained-glass effect for text.

TPVTM outline

I wanted to do the same and create an extrusion between each letter of the title text. This, however, presented a few challenges. In versions of Inkscape up to 0.49 the extrude extension would only work on two selected objects. Even if you highlighted more than two objects the extension would only choose two of them to apply the extrusion to (I’m still not sure how it decides which two to choose). I could do this manually with each pair of letters, but this would take a long time and could easily get confusing!

Pairing

I took my concerns to the Inkscape bug tracker. I explaind what I expected to see when I ran the extension on two or more objects:

Two objects – one extrusion

If you select two objects it should create one extrusion. Simple enough!
Two objects

Four objects – six extrusions

If you select four objects it creates six extrusions. A bit more complicated…
Four objects

Six objects – fifteen extrusions

If you select six objects it creates fifteen extrusions. Now it gets more complicated!
Six objects

As you can imagine doing all of that by hand would take some time and would be hard to keep track of. In fact, for all of the letters I would have to run the Extrude extension 220 times!

I argued my case to the developers of Inkscape on their bug tracker. After a bit of discussion around the intended purpose of the extension it has now been updated to work on all selected objects. The updated extension should be in Inkscape 0.49. Thanks to ~suv and to Alvin Penner for updating the extension!

New deviantART ID

I’ve been a part of the deviantART community for a lot longer than I have had a blog or website. I used to be very active but then drifted slightly away ’cause of the whole blogging thing though recently found myself at one of the devMeets. It’s a great way to meet other amateur, hobbyist and even professional artists, photographers and creative types. In an attempt to get back into the swing of things I created myself a new ID image:

Find me on dA: hellocatfood.deviantart.com

You probably will recognise some of the styles used in there from previous tutorials that I’ve written. Well, they’ve finally been of use to me! Expect more stuff like this from me in the future.

If you’re on deviantART too why not stop by my page

Family Build Up

One of the most common questions I, and possibly any other digital artist gets when they present their work is how they do it. I occasionally reveal some of my methods in my tutorials but otherwise I like to show screenshots taken at various stages. I came across this build up script a few months back and have now finally got it to work! Here’s my previous family portrait being reconstructed:

This script isn’t a true reflection of how I drew it but gives a good idea about the amount of detail I go into with my work. The reason I didn’t finish it is that I had already had the script running for ten hours and it was only half finished! Luckily there’s options to resume, but at this rate I’ll be doing it until February!

I think I may do this a lot more with my work.

Family Portrait

After seeing some of my recent work I was asked to do a family portrait. The last time I did a portrait on such a large scale was in 2007 in Adobe Illustrator and the last time I did a realistic portrait was probably back in 2006 of an old photographer buddy. I’ve been using Inkscape for just over a year now and whilst I’ve been doing little bits and pieces I haven’t actually done a major illustration.

As always I started with the outline first and filled it in with basic colours. I used GIMP and a very useful cutout filter to help me visualise how I was going to layer the colours and shapes that I needed. From there it was a simple case of refining and perfecting! Have a look at some of the progress shots:

1 2 3 4

The finished product looks like so and is probably my favourite piece this year:

The finished family portrait

The finished family portrait

The finished result was printed onto a canvas and is mounted on their wall. Yay!

If you’re that kinda person you can have a look at the wireframe of the image:

wireframe 1 wireframe 2 wireframe 3 wireframe 4

Overall working in Inkscape was quite easy in terms of drawing. One bit of praise I often hear about it is its drawing and node editing tools, and it really did feel quite easy to draw this. However, there are two areas where I feel Inkscape hindered my creativity in creating this piece.

The first is how it implements brushes. Inkscape does this by using the Pattern Along Path Live Path Effect, which in some instances can be more useful than Illustrator’s brush tools. What I feel some users want is for the pattern to act as the stroke of a path and to still be able to edit the fill of a path. This would’ve been very useful for me when drawing the hair.

The second is it’s lack of extensive layer blending modes. Currently Inkscape has five layer blend modes, which includes normal/no blend and these can only be implemented on layers, not individual objects. As far as I know you were able to set the blend mode for each paths in 0.44, but it was removed for technical reasons. I achieved the effects in my earlier work by, at times, combining over ten different blend modes on individual objects. Take a look at this walkthrough by popular vector artist verucasalt82 and you’ll see why it can be quite handy. So, in the absence of blend modes for individual paths could we see a few more blend modes, overlay in particular?

With all of that said, you can see that Inkscape is still a very capable program. I overcame many of the problems I described by just doing things a little different than usual.

Ubuntu Bug Jam

Ubuntu Bug Jam

From Friday 2nd to Sunday many Ubuntu, Linux and Open Source enthusiasts descended upon the Linux Emporium to take part in the Ubuntu Bug Jam. In the words of an Ubuntu blogger, the Ubuntu Bug Jam is:

…a world-wide online and face-to-face event to get people together to fix Ubuntu bugs – we want to get as many people online fixing bugs, having a great time doing so, and putting their brick in the wall for free software. This is not only a great opportunity to really help Ubuntu, but to also get together with other Ubuntu fans to make a difference together, either via your LoCo team, your LUG, other free software group, or just getting people together in your house/apartment to fix bugs and have a great time.

This is the second time I’ve been to a bug jam. The first time I went I hadn’t even used Ubuntu, so only managed to report one bug and otherwise mostly focused on reporting stuff in Inkscape as I use it more often.

This time was a similar affair. Apart from testing out the beta of the next release of Ubuntu (the Karmic Koala) and asking for help in fixing bugs in my own system I mostly spent time testing bugs in Inkscape and suggesting features for future releases of Ubuntu.

Overall, I think reporting any bug in any package or program helps everyone and one thing I really like about open source is its transparency and honesty in its errors. That is, it’s not ashamed to admit that there are a few bugs here and there.

Making a Disco Ball using Blender and Inkscape

Awhile back I started doing a few experiments using Blender and Inkscape together. One of my creations from this was a ball.

Blender/Inkscape Sphere (by hellocatfood)

Recently one Inkscape user created a tutorial describing how to make a disco ball directly in Inkscape. Looking back at that ball that I made it kinda resembles a disco ball, so I decided to write a tutorial on how I did it.

This tutorial assumes that you know at least something about Blender and Inkscape. If not, go look at these tutorials for Inkscape and these tutorials for Blender. As with any program, the more you use it, the better you get at it.

We’re going to need three things before we begin. First install Blender. It’s available for Mac, Windows, Linux and probably any other system you can think of. Did I mention that it’s completely free? Next, install the VRM plugin for Blender. This is a free Blender plugin that allows you to export your Blender objects as an SVG (the file format that Inkscape uses by default). I’ve discussed the usefulness of this plugin before. Lastly, install Inkscape, if you don’t have it already. I’ll be using a beta build of 0.47, which should be officially coming out within the next two weeks. If not, just grab a beta build as it’s pretty stable.

Once you’ve installed these programs open up Blender and you’ll see the cube on screen.

The cube is usually the first thing you see.

The cube is usually the first thing you see.

Depending on how best you work you may want to switch to Camera view. You can do this by either clicking on View > Camera or pressing Num0 (the 0 key on the keypad). What we now see is what the camera sees. If you were to export this as a jpg or SVG this is the angle that you’d see it from.

oooh, shiny 3D!

oooh, shiny 3D!

We need remove this cube and add a UVsphere to the screen. Right-click on the cube and press X or Del to delete it.

Bye bye cube!

Bye bye cube!

To add a UVSphere, in the main window press the Spacebar and then go to Add > Mesh > UVSphere.

Add a UVsphere

Add a UVsphere

You’ll now see another dialogue box asking you to specify the rings and segments. This is important as it’ll define how many tiles there are in your disco ball. Think of these options in this way. The segments option is like the segments of an orange and cuts through the sphere vertically. The rings option cuts through it horizontally. These diagrams might explain it better:

Segments go vertically

Segments go vertically

Rings go horizontally

Rings go horizontally

Put the two together...

Put the two together...

The default is for both to be 32, but, if you want more tiles increase the value and if you want less decrease it. Once you’ve chosen press ok and your sphere should be on screen.

UVsphere

UVsphere

You can reposition, rotate or scale your sphere if needed. To reposition it, with the sphere selected (right-click it if it isn’t selected) press the G key. This grabs the object that’s selected and allows you to move it freely. Try moving your mouse about. This can be useful, but we’re working in a 3D environment which…er.. has three dimensions that you can move along. To move it along a set axis you can either left-click the arrows coming out from the sphere or, after pressing the G key, press the key that corresponds to the axis that you want to move it along. For example, if I wanted to move the sphere along the X axis (the red line) I’d press the G key, the the X key. Now, no matter how I move the mouse the movements of the sphere are constrained to the X axis.

Similarly, to rotate the sphere press the R key and to scale it press the S key. The same rules about constraining it to a certain axis can still apply.

You can do things such as repositioning the camera other such trickery but for that you’ll need to learn more about Blender for that.

With your sphere now ready go to Render (at the top of the screen) and then press VRM.

The VRM options window

The VRM options window

I left the options as they are, but if you feel adventurous have a mess around. When you’re ready press the Render button and then choose the place on your computer to save it and what name to give it and finally press Save SVG. You’ll notice the egg timer appears in place of your mouse cursor to let you know that something’s happening but otherwise there’s a handy progress bar at the top of the screen.

Blender Screenshot

Open up the saved object in Inkscape and voila!

It's an SVG Sphere!

It's an SVG Sphere!

That’s the first part of this tutorial done! The next part draws upon some of my own experiments but is also taken from the original tutorial.

When you’ve opened up the sphere you’ll notice that it’s all one object. This is because all of the paths (the tiles) are grouped into one. You can ungroup it if you want but for this tutorial you don’t need to. Give your object a base a fill and stroke colour. You can do this using either the colour palette at the bottom of the screen or the Fill and Stroke dialogue (Object > Fill and Stroke or Ctrl + Shift + F).

Applying fill and stroke colour

Applying fill and stroke colour

The final step of this tutorial from me is the following. With the base colour selected we’re now going to randomise the colours but within that hue. To do this we’re going to use the randomise filter which is located in (in Inkscape 0.47) Extensions > Color > Randomise.

Leave the Hue option unchecked (unless you want a multicoloured sphere) and then press Apply.

Your finished disco ball!

Your finished disco ball!

There is of course more that you can do to make this disco ball look more realistic but take a look at the tutorial that inspired this one and come up with something of your own 😉

Click to download the SVG

Click to download the SVG