Finishing One Project As I Start Another

So while I'm starting my pseudo-presentation, I just managed to finish another project I've been working on for a while.

A while ago I downloaded a program called Top Draw, a background generation program that uses Javascript-like scripts to create backgrounds for OS X. At first I simply downloaded some of the shown-off scripts and had the program cycle between them.

After a while, though, I got kind of bored, and even a little irritated at some of the backgrounds that were being generated. While I thought it was cool that these scripts were responsible for creating my background, I also thought that there must be better options for scripts. I looked through the Top Draw project but only found the ones I already had. So it was either put up with the backgrounds I only partially liked (and even partially disliked), or find a way to get the backgrounds I wanted.

I went for the latter.

Knowing a bit of Javascript, and playing with the already-existing scripts to determine what certain unknown functions did (since some were non-standard and specific to the program), I started forming my own. I started playing with the Dashed script, which created dashed rings that were blurred out. Then I looked at the ColoredRect script, which simply made a nice gradient for a background, which I decided I could use as the backdrop of my own script. Then I took from another script the code to create a different, darker gradient behind the menu bar. The last script I looked at also happened to fill in the circles that were being drawn, which was apparently a separate command.

I guess you can say I drew some inspiration from the Focus Features snippet they insert at the beginning of their movies, except I wanted something a little bolder, and much more colourful. Going from blurred rings, incomplete circles, and gradients, I put together my own creation.

I started with the base, the background, which I turned from any 3 random colours (one for the bottom left, one for the top right, and another for both other corners) into 3 colours with a darkening filter applied.

Then the same thing for the menu bar, but with the third colour simply being in the middle.

Then came the arduous task of putting together the main body of the script, which managed to take a full month of tweaking and fine-tuning. Starting with the rings.

First I tried to eliminate the dash, which was one of the parts of the default scripts that I found a little annoying. It took a while to figure out which arbitrary command controlled it, but after some trial and error I managed to take it out and end up with a simple ring. Then I started playing with some of the variables, changing the range that the random number function could use until I got a comfortably sized ring radius and ring thickness.

Second, I altered the script to apply a weaker blur effect, but to apply it after every ring was drawn so that there would be a progressive blurriness. It takes a little longer to render, applying dozens of CoreImage Gaussian Blur filters, but the end result is much better than the single blur the original script offered. Also, with progressively more blurring it was harder to notice that the filter didn't blur the edges of the screen as much as the rest. While I was working on the blurriness I also tweaked the transparency of the colours so that they were mostly transparent, allowing me to see all the way down to the first ring.

Third, I had to figure out a way to fill the circles. It sounded easy enough, but unfortunately all the example scripts that had both a ring and a circle had the ring a few pixels into the ring, making it look almost like two rings. After a lot of playing around, I finally figured out that it had to do with the thickness of the ring, and that if I increased the radius of the ring by half its thickness I could get it right on the edge of the circle. Yeah, try figuring that out through trial and error when the thickness and radius are randomly generated every time a ring or circle rendered. Eventually I had the random number stored into a separate variable that I then had to pass on to the rendering function, where it would do a bit of math to get the ring and circle to align.

Then once everything else was almost done, I finely tuned some randomization ranges, changed some colour variation limits, and a few other settings here and there, and finished off the script. After hundreds of hit-and-misses, countless errors, and a few close-but-not-quite efforts, I finally got the script I set out to create.

It took a little longer to make than I thought it would, taking almost a month from start to finish (with enough breaks in between sessions), but I finally got the look I was going for.

Some sample images of the final product (click for full-size, 1920x1200):





I think it's payed off well. For now, anyway.