The second in my exciting series of notes on writing code to do very very basic things with images (with the intention that combining those basic things will result in something more than the sum of it’s parts).

The image cycle module. What this does is pick a random image from a pool and fade it in and out as part of a stack of images. That’s it. In the test app I hit a key to load a random image, there’s a maximum of 5 images on screen at a time, any over that will drop the oldest off the bottom.

There’s two blend mode options, normal (which probably has a more technical name but I’m going to call it ‘normal’) and multiply. Multiply looks better but gives a far darker overall image (which is fixable). 

I hit an issue with the multiply blend mode, due to the method of applying it in OpenFrameworks you need to apply a colour to the image with an opacity, if the colour you apply is white (as it needs to be at 100% opacity) when you are at zero opacity you get an odd cutout version, like this:

Which is not ideal. As you can see in this video when the image first appears it’s at zero opacity but causes a whiteout on the screen.

Having dug around a bit various people had the same issue and had fixed it by doing incredibly clever things involving custom OpenGL shaders and custom blend mode algorithms. I’m far too stupid to understand any of that so I just changed the initial colour to fade from black to white in line with the opacity. Here’s the same combination of images again, this time with the colour set to black when the opacity is zero, as you may see (or not) you now can’t see the overlaying image (which is intentional).

Here’s it fading in with the colour set to change with the opacity:

EXCITING.

In case it helps anyone, here’s the code:

ofBackground(255);
ofEnableBlendMode(OF_BLENDMODE_MULTIPLY);
ofSetColor(alpha,alpha);
ofDisableBlendMode();

Where alpha is a float between 0 and 255, as this equates to both the colour range from black to white and the opacity from invisible to opaque you can use the same variable, or not if you prefer not to.

I’m currently pondering if this should be a single app or a bunch of little distributed apps, it doesn’t make much difference in the scheme of things, ultimately I like the idea of various component module apps I can switch out but I’m also concerned I’m giving more opportunities for things to go wrong.

Here’s the video of the image cycle with the blend mode issue fixed:

Come back soon for more dramatic creative coding tension.