BIT-101
Bill Gates touched my MacBook Pro
In the first post of this series, I showed some of the default renders of various 3d shapes. These were rendered with white lines on a black background. Here’s how that looked for a cylinder shape:
Not bad, but there’s more aliasing of the white lines than I’d like. To quote someone I used to work with, it looks “crunchy”. My libraries use CairoGraphics, which has a few settings for antialiasing. This is on the default. There’s also subpixel antialiasing and gray antialiasing (supposed to be good for black and white graphics). Neither of these makes it look much better for me. But let’s compare what happens when we turn antialiasing off completely:
Even worse, as expected. All of this is just a natural side effect of drawing very thin, very contrasting lines. But I developed a trick for making these kinds of graphics look pretty cool.
It goes like this:
This gives the graphics a very cool, very customizable glow effect. Step-by-step:
To me, this smooths things out nicely and gets rid of most of the “crunchiness”. It’s subtle here, but you now have three control values to change the effect: the original stroke size, the amount of blur, and the final stroke size. In this example I used an initial stroke of 2 pixels, a blur radius of 10 and a final stroke of 1.
In this example, I increased the initial stroke and blur radius quite a bit.
I’d actually consider the glow here to be too much, but it’s a tuneable effect, so it’s good to experiment and see what the parameters do.
Of course, there’s no need to have things always be white on black. We can do black on white:
And we can apply the same blur effect on that.
I really like this look. I find that when you switch from white on black to black on white, you need to tone down the blur a lot, or it looks muddy.
And of course, you can use any colors you want, not just black and white. Here I’m using the String object to display the hue value I’m using in an HSV color model. And a glow.
This one gives me a bit of a Blade Runner vibe. Our eyes see different hues differently, so some of the colors aren’t very visible on a black background - particularly the blues. You could compensate with wider lines, more glow, etc.
These are just some of the rendering tricks I’ve been using. They’re very applicable well beyond this particular library. So hopefully you can try them out on whatever system you’re using and get some fun results.
Comments? Best way to shout at me is on Mastodon