Equilateral Polygon Stacking - 0

I put some words below. TL;DR - I learned Bit Shifting, and started learning Processing. To me, It is an interesting and hilarious correlation that it is on my 128th post that I actually needed to spend a considerable amount of time learning about how to use Bitwise Operators to achieve the effects that I wanted in this GIF.

So I’ve been studying the work of Bees & Bombs for at least 3 months now, and every time they release a link to the source code of any of their Processing sketches, that’s a super special treat to me. Recently, I started noticing some motion blur applied to their GIFs made in Processing, and I was a bit shocked by that, because Processing doesn’t come with that feature out of the box. I messaged Dave Bees to ask him how he was doing it, and he replied with his super clever multi-sampling algorithm, which kinda blew my mind.

Seeing that Motion Blur was now possible in Processing, I said “Okay, that’s it - I’m diving into Processing full force if I can write code to make GIFs as complex and beautiful as the ones that Bees & Bombs are making.” - and so I tried. Not there yet, but I’ll get there. Knowing a bit of Java from a small game I’m developing with a few friends, I decided I was going to take the more advanced path for developing Processing sketches, and actually utilize a full-fledged IDE to develop and debug these applets. I’m using JetBrains’ wonderful IntelliJ IDEA ultimate edition, because I already use that for everything else I create in all of the other languages that I write. I must admit, setting everything up before I could start working was a bit more complex than I thought it would be, but when I had finally figured it out, MAN that sure felt like a major victory. Breakpoints and realtime variable and method modification and injection in a Processing sketch? Yes please!

So here I was, all ready to go to town on coding some sketches using Dave’s Motion Blur. I had designed a rather pretty looking stack of hexagons and exported a folder full of frames for the animation ready to GIF, but that’s when I got stuck for 2 days because the images were blank. Empty. Completely void of content. WHAT? WHY? NOOOO!!!

What I eventually learned is this: I had been trying to use Processing’s P2D and P3D rendering engines for their support of the Additive transfer mode, but Bees & Bombs have only been using the default Java2D rendering engine in their motion blurred GIFs. P2D and P3D work in 32 bit color mode by default (Alpha, Red, Green, Blue), where the Java2D engine works only in 24 bit (RGB), and Dave’s math was only for the 24 bit workflow. What was happening is that Dave’s math was working correctly on the last 3 channels of colors, but leaving the Alpha with a value of Zero, so the images didn’t display at all.

So I fixed the maths to work in 32 bit mode for the P2D and P3D rendering engines and I am happy now. You can find the source code for this GIF here. If you read the source, you may notice an “obList” and an additional object class named “Hexicle” and an extra update loop. This is a pattern of scene content management that I’ve been using in my games and toys written in other contexts, and it made sense to use it here, and in a few of the GIFs I’ll be writing that have multiple objects that will need to interact with each other.

I have a lot more ideas for GIFs I want to make in Processing, so keep an eye out for those. I also want to give a huge shout out to Dave Bees of Bees & Bombs - I wouldn’t have been half as interested in getting into Processing without his design inspiration and openness. Thanks Dave!