The Producteev Windows application uses some interesting techniques—some of the same ones employed by modern 3D video games—to render a lot of the visual elements. These elements were designed from scratch by our in-house designer and they’re a lot more resource-intensive than the bland native elements that the Windows API provides. In order to accommodate for the extra pressure they put on your computer, a lot of optimizing and tweaking was needed to get them to display smoothly.

Composition

Composition with Alpha blending

Composited images are several images laid on top of each other. Afterwards, special effects can be applied to alter the way the final image looks. This can be done by tweaking colors, drawing or distorting shapes, or blurring. It’s usually done with witchcraft, but I’m told some math may be involved as well. In order to blend colors for instance, a technique called alpha blending is used to find a weighted average between two colors you want to mix. This technique can be used to fade smoothly between two different images. In video games there’s too many examples of compositing to name, but you’ll likely see composited images as pieces on a heads-up display or as a decal on a wall.

How it’s used: This is used frequently in Producteev for Windows. You can consider the entire window a composition since there’s a lot of casual instances where multiple images will be overlaid. More specifically, I’ve used compositing to draw pieces of your task list in the background and then store these in memory (this is another technique called caching, since the application does the work ahead of time then stores it for later for quick access.) Subtle visual effects are then applied to give the application a smoother feel.

Culling

Objects within the green viewport are drawn, the rest are discarded.

Culling is the concept of selecting only what needs to be shown on the screen (as opposed to recklessly drawing everything.) While it may seem obvious to only draw the parts that will be shown, it is the application’s job to take care of this. Sometimes rather complex algorithms need to be used to determine what will be drawn, but it’s well worth it in the long run. In 3D games this is a vital technique because at any given moment you’ll only be drawing a small portion of the entire game world.

How it’s used: This technique is used in the filter and task areas of the application. If you have 1,000 tasks in your list, rather than drawing all 1,000, it will calculate which ones actually fit in the window (depending on the size of the Producteev window and number of tasks, this can account for as little as 1% of the tasks.) Only drawing the tasks that are visible prevents overdrawing, a situation that will slow the application to a crawl as the program senselessly overworks itself.

Partitioning and Indexing

(Some objects hidden) When you're working with thousands of objects, you can cut down on the number of decisions being made by organizing the data in a tree, and only going down paths where conditions are met. In this case, 9 calculations had to be made.

These terms describe a way to separate the data to make it easier for your computer to search through it. A simple analogy would be an old card catalog in a library. If you knew your book’s title started with the letter A, there’s no reason to search through B-Z in the catalog. Games work slightly differently, instead categorizing things spatially; that is, you can quickly determine if an object is in front of- or behind another one by logically looking at it’s index, rather than doing a bunch of mathematical calculations on every wall in the entire level.

How it’s used: In much the same way a card catalog works, it categorizes tasks, users, and other data by certain criteria. That way, when you want to search by the creator of the task, it takes an instant to look through a small set of tasks, rather than half a minute to look through all of them.

Anti-aliasing

This technique trades speed for visuals by making graphics look softer. Since your monitor is made out of a bunch of square dots called pixels, diagonal lines, circles, and round edges can appear to have sharp, jagged edges. In order to smooth these out, adjacent pixels work together to round off the harsh transition.

Demonstration of how the use of antialiasing smooths jagged lines on a screen.

Other techniques are in the works to squeeze some more performance out of the application, but that’s another blog post for now. Peace.