Sloganeer

I thought some more about the radiate effect, and I think for the moment it’s a no go, and here’s why. Radiate type things want to be round. Unfortunately, our text is not round, and so unavoidably there will be collisions and overlaps between letters, which will look clumsy. One solution to that would be to bend the text into a circle before radiating it. This would be relatively straightforward to do for a single line of text. For example, you could bend it into a circle keeping the center of the circle in the middle of the screen and it would actually be fairly clean and then once it’s in a circle of course radiating it is no problem. For two lines of text, it’s considerably harder, but still possible. However, for three lines of text it’s really out of the question, you’d have to do something special with the middle line like make it disappear or whatever and so the idea starts to break down. But while worrying about all of that, it occurred to me that there’s a muc...

I thought of another fun transition! We could call it Radiate. Or maybe there’s a better name. Anyway, the idea is that each letter would independently move away from the center and off the screen. Or the reverse, if transitioning in. The path each letter follows, those are a bit tricky to calculate. One end must be the center-most corner of the glyph. it should move in a straight line until the glyph is completely off screen. The letter with the longest distance to travel should go off screen at the end of the transition. The only thing I can’t quite figure out is what the angles should be. Intuitively I would think they want to be radial, but I’m not sure on what basis.

Pause, background color and draw color are all good additions. A palette option would be awesome. The parameter would be the path of a text file containing a list of colors in hexadecimal, which the app would randomly shuffle. A fancy idea: a CSV slogan file as an alternative to the text file. CSV would allow per-slogan specification of font, text color, and possibly other things. While you're at it, support markdown for bold and italic, and use \n for newlines, with escaping (\\ for backslash, \* for asterisk, etc.) What about shear? The text would erect itself from one or more horizontal lines. This probably requires a custom renderer. A custom renderer is a sizeable hurdle, but it would enable many ideas, starting with the melt effect: stroke the text in background color and increase the stroke width until the text disappears. The hardest part of this is normalizing it. The only reliable normalizing method is a calibration function that repeatedly draws a representative text...

I just got a cool idea for a transition! Don’t know if this is a thing that already exists or I have invented it. It’s a little tricky to explain, but here goes. Imagine a capital letter H. Now imagine a bounding box tight around that H. And imagine a vertical line extending up through the center of that box. The bottom of that center line is going to be a pivot. The center line is now going to slowly rotate 90° around that bottom pivot point, until it’s on top of the baseline, and as it rotates, the bounding box (and the H within it) shear and vertically squash as necessary for the centerline to remain centered in the bounding box. This will shear and vertically squash the H, and by the time we’ve gone 90°, the H will be infinitely flat and will have disappeared. It will look a bit like a building tipping over and collapsing. And of course, it’s reversible. I forgot to mention that in the case where there are multiple lines of text, I visualize each line collapsing towards its own ba...

I had one other idea for the slogan app. It would be awesome if it could randomize the text color. But I think that needs to be constrained, and the most obvious way to constrain it would be a palette parameter! The parameter would specify a file which would contain a list of colors in hexadecimal. That way you avoid fussing around with color models, and offload the design of the palette entirely onto the user, which, for an advanced user, will be ideal.

In order to show my curator some progress, I wanted to make a video of Sloganeer's output. Of course I could have just recorded it with my phone but that doesn't do justice to the app's nice smooth transitions. Yeah there are various freewares around that could work but they all have their downsides. So much better and more interesting to just roll my own capture. OK there went two days. It's actually pretty challenging to capture frames in Direct2D without stalling the GPU pipeline. And 1080p frames are big enough (8 MB) that it's a bad idea to write them to disk in the render thread. So that necessitates a thread-safe queue, and a thread pool of writer threads, each with their own WIC instance. OK better pack a lunch. But it all works now, and it's neatly wrapped in a class CD2DCapture. This test helps verify that each frame contains what it should: m_pD2DDeviceContext->Clear(m_clrBkgnd);//@@@ CString s; static int iFrame; s.Format(_T("%d"),...

Done: Scroll (LR, RL, TB, BT) Reveal (LR, TB) Fade Typewriter Scale (Horz, Vert, Both) Random Tiles Maybe: Incandescent Fade (white -> yellow -> red -> black) Melt (see below) Rotation (combined with Scale) Incandescent Fade in RGB: x = m_fTransProgress * 3; R = x; G = x - 1; B = x - 2; Hiccups between regions, unconvincing, try HLS instead? Melt varies the weight of the text by first filling it with the draw color, and then stroking it with the background color. The wider the stroke, the narrower the remaining filled text is. This requires writing a custom text renderer derived from IDWriteTextRenderer. Here's a MS article about that: link The effect would probably only work well with Bold or Black fonts, and it might be challenging to normalize it to the transition progress.

Welcome to the Sloganeer developer blog. I will occasionally post ideas, inspirations and ruminations here, having to do with the Sloganeer app, which I'm currently spending a lot of time developing as an art project. Sloganeer is a lightweight signage app that displays text with animated transitions. It's open source and freely available at GitHub. The target environment is a mini-PC running Windows, for a standalone kiosk type thing. Ideally it should run cool with little or no fan noise. To help that, I programmed it to sleep during the hold time, instead of pointlessly re-rendering the held text. This is cute because the longer the hold time, the more time the CPU has to idle and cool off. Here's some early benchmark data for a Geekcom IT11. Version: 0.0.00.000 Resolution: 1920 x 1080 Transition duration: 2 seconds (x 2) Hold duration: 10 seconds During transitions, CPU reaches 1% maximum and GPU reaches 5% maximum. During hold, both CPU and GPU are 0%. All four CP...