Welcome to the Sleepytime Compositions Gallery!

Creating Your Own Sleepytime Compositions

Because Sleepytime compositions are actually specially prepared Quartz Compositions, they are really easy to create (even for someone who has zero programming knowledge) as long as you have a bit of free time to tinker in Quartz Composer (which is a free tool, by the way). Continue reading if you're interested!

Step 1 — Obtain the Tools

First, you'll want to obtain and install Xcode from the Mac App Store. Xcode is a free software development kit for Mac OS X and is made by Apple. The Xcode install contains the tool that we need to create Sleepytime compositions: Quartz Composer.

Once Xcode is installed, you'll find Quartz Composer in the "/Developer/Applications/Quartz Composer" folder in the root of your hard drive. If you can't find it, just search for it in Spotlight and open it from there.

You'll see various templates in Quartz Composer; feel free to explore them and see what does what. The most important elements in the editor window are the Patch Library, the Patch Inspector and the Parameters panels, which are all shown in the second screenshot below. Try to tinker with the settings and see the effect of your changes!

Quartz Composer Templates Compositions Editor

Step 2 — Learn A Bit About Quartz Composer

In order to better understand how Quartz Composer works, I recommend that you read or at least skim over the Quartz Composer User Guide by Apple. You'll get a better idea of how Quartz composition work afterwards. If you're feeling impatient though you could try directly jumping to the heart of the matter and...

Step 3 — Make a Sleepytime-compatible Quartz Composition

The rest of this tutorial will be a quick overview of one of Sleepytime's built-in compositions, "Color Waves", which can be downloaded below. If you're using Safari, you may need to right-click the download link and choose "Download Linked File" to download the composition. Simply double-click the downloaded ".qtz" file to open it in Quartz Composer.

Click here to download the example composition

Example Composition

If you've done your homework (remember step two?), you'll notice that the example composition contains a bunch of interconnected patches which produce some visuals and, most importantly for Sleepytime support, published inputs (the inputs with green dots, as highlighted in the picture below) — inputs always being on the left of a patch and outputs being on the right.

Published Inputs

By publishing an input with a specific name, you enable Sleepytime to set its value. In the screenshot above, the "String" input of both patches were published as "Subtitle" and "Status". Sleepytime expects to find published inputs with those names when it loads a composition.

Say you were to start from scratch. You would add a new "Image With String" patch by dragging it from the Library onto the editor canvas, connect it to a new "Sprite" patch in the same way as the example composition (and the image below) by dragging from the small output dots of the "Image With String" patch to the input dots of the "Sprite" patch, then you would publish its "String" input by right-clicking the patch and selecting "Publish Inputs" then "String" and setting a name for the input. The name that you use must correspond to one of the names Sleepytime expects (see Table 1 below). Make sure to capitalize the names exactly as specified here.

Published Inputs

Published Input NameTypeDescription
"Title"String (text)The title of the current track or any other string that describes the state of Sleepytime, for example "iTunes is not running".
"Subtitle"String (text)The artist of the current track or any other string that describes the state of Sleepytime. The subtitle should always be located below the title in your composition.
"Status"String (text)The app's status text, for example "Welcome to Sleepytime!".

Table 1 - Published Input Names Expected by Sleepytime

You are free to publish all of the above inputs, or not; you could create a composition that displays no track or app status information at all by not publishing any inputs with those names. Note that I won't be adding your composition to the Compositions Gallery if you do not display at least the title, subtitle and status.

Step 4 — Let Your Imagination Go Wild!

In the end, all that's really required to make a Quartz composition work with Sleepytime is to publish some patch inputs and give them the names that Sleepytime expects, as listed in Table 1. When the composition is loaded by Sleepytime, it sets the values of those named inputs to the current track's title, artist, etc.

You have no limitation other than that. So let your imagination go wild and have fun!

Oh and don't forget to tell me about it so that it can be included in the Sleepytime Compositions Gallery for others to enjoy!