Vector illustration basics for Android developers — Part 3: Boolean Operations

Still easy!

This article is Part 3 in a series. Read Part 1 and Part 2 first. And after reading this one, read Part 4. Also, Part 5. Also, the bonus part. It’s for you own good. It’s for the neighborhood.

Here’s a… thing I just created

What is it? Beats me. However, you can probably tell that it used to be a circle. But wait! It looks like a half-star-shaped piece at the top and an elliptical-shaped piece at the bottom are missing!

That’s because they are. In my vector illustration software, I subtracted those shapes from the circle and that’s what I was left with.

Subtraction is one of the four main boolean operations offered by most vector graphics software. Let’s see how to perform subtraction and the other three operations.

Subtraction

To perform subtraction, make sure that two (or more) shapes overlap. Then select all the shapes you want to perform the boolean operation on by holding down “Shift” and clicking on them.

In Gravit Designer, you’ll find the boolean operations drop down on the top toolbar. It looks like this:

Tap the icon and select Subtract from the drop-down. This will remove the part of the top shape that overlaps with the bottom shape from the bottom shape.

I haven’t explained z-ordering yet but this is what you need to know right now: the shape that you drew first sits a level below the shape that you drew second. In this case, the square was drawn first and the circle second so the circle sits on top of the square. There is a way to change this order but that’s a lesson for tomorrow.

Intersection

Again, same thing. Multi-select the overlapping shapes by holding down Shift and clicking on them. Then select Intersect from the boolean operations dropdown.

This will keep the intersecting parts of the objects and remove everything else.

Difference

After multiselecting the overlapping shapes, select Difference.

Difference is the opposite of intersection. It will remove the parts that are overlapping and keep the parts that are not.

Which raises the question: what happens if you perform the Difference operation on two shapes that are not overlapping?

In 2016, researchers at the CERN institute tried to do just that. The result was a barely-containable black hole that threatened to bring about the gravitational collapse of the Earth. Thankfully, they were able to avert the disaster with the help of Peter Higgs(who was, at the time, Skyping instructions from the toilet) and some WD-40.

Just be careful.

Union

Come on, guys. You know what this does.

Yep. It unites the shapes.

Although it may not seem that way, boolean operations are a great way to create complex shapes out of simple ones. You just need to recognise the cases in which it is beneficial to apply them.

After all, acclaimed author HP Lovecraft said it best in his seminal 1934 designer-oriented horror tome “Drop Shadow Over Innsmouth”

…and as is the nature of this wretched town, the slithering horrors that lie beneath its accursed streets are not formed by a single entity but rather by a union of seemingly mundane beasts transformed into non-euclidian forms of eldritch blasphemy.

Today’s exercise

Create a crescent shape by using two circles and the correct boolean operation and post it in the comments. First person that does it wins a copy of my book “Android Development for Gifted Primates”.

I’ll see you back tomorrow.

HOLY UPDATE, BATMAN!

Due to the overwhelmingly positive reaction to this series and the requests of various readers (thank you, your messages made my day!), I have started working on a book version of this series, with expanded content and various exercises that will get you started quickly and efficiently.

The book will be released mid-March but you can pre-order it now by going to my BuyMeACoffee page (link below) and donating any amount over $3 (including $3, obviously). Donating $6 or $9 will also get you e-mail support from me while you’re working on the exercises! Stuck? Shoot me an e-mail and I’ll respond at breakneck speed.

After its release, the book will go to its regular price of $15 and stay there forever (or at least until Michael Bay makes a good movie, which is practically forever), so if you enjoyed these articles and want a gorgeous-looking version with expanded content and more awful jokes, you know what to do! (hint: click the link below)

IMPORTANT: Leave me a message with your email address when you donate so I can contact you and send you the book as soon as it’s released!

Buy Antonis Tsagaris a Coffee - BuyMeACoffee.com_I'm an Android developer and designer with a love for beautiful UIs!_www.buymeacoffee.com