The [Computer] Science of the Transition

Everyone appreciates a good transition. Even the simplest of transitions, be it a fade or a slide, can add a lot a composition. As simple as a fade is, it takes a fair amount of background action to get it to do what is intended.

Any transition from image to image requires a few basic things. Each pixel of Image 1 has to be iterated through and replaced by each pixel of Image 2. This is accomplished using a bunch of nested for loops. The cool stuff, like fades, twirls, and slides, happen within these for loops. While the transition is happening, the place of the pixel is being messed with and math’d with. 

           

      

            for(int sx = 0; sx < width; sx++){

                       for(int sy = 0; sy < height; sy++){

                             double dx = sx - x0;

                             double dy = sy - y0;

                             double r = Math.sqrt(dx*dx + dy*dy);

                             double angle = Math.PI / 256 * r;

                             int tx = (int) (+dx * Math.cos(angle) - dy * Math.sin(angle) + x0);

                             int ty = (int) (+dx * Math.sin(angle) + dy * Math.cos(angle) + y0);

...

Transitions like these don't take a lot of code to make, but can make a big impact. An image transition in Java can be written in just a few lines. As long as the pixels end up in the proper position at the end, you’ve got yourself a transition.