Music Meets the Stars on iOS

Ahh the life of a developer. Some days, I’m the docent at an inspiring museum. Other days, I might be working at a fast food burger joint. It’s true that to really accomplish the goals of your clients, you must get your hands dirty and learn their business. That’s why for the last three months, I’ve been an astronomer. This post is intended to give a high-level overview of the AstroCantus development process.

The Idea

Get AstroCantus in the App Store AstroCantus, or star songs, is an extraordinary idea that translates the sky above you into a divinely-scored musical masterpiece that runs on your iOS device. The idea is this: extend a line from the core of the earth, straight through your body to the sky directly above you. That is your zenith. Now, draw a line in the sky from that point to the southerly horizon. That is your meridian. When stars cross your meridian, AstroCantus will play a tone on a set scale from one of the available sound sets based on the brightness, or magnitude of the star. The brighter the star, the lower the tone’s pitch. Conversely, the fainter the star, the higher the tone’s pitch. The result is a beautiful, never-ending musical piece that is unique to your location at that exact time of year. Pretty sweet, huh?

The Build

You can bet that when Rocky Alvey of DavidsonDean, LLC. first pitched to us his idea and played for us his proof-of-concept of The Pleiades, we were hooked. Indeed, there isn’t much cooler than space. But how to build this? Obviously I had a lot of studying to do. There are a few planetarium apps out there, but building one that allows you to accurately watch and hear tens-of-thousands of stars pass over you in real-time while providing pan, zoom, and selection support is a new mountain to climb. The big challenge here is not going to be re-creating the heavens; rather, the challenge will be making it fast and good-looking. To help my brain grasp the scope of this project I divided the work into four milestones:

Learn the Material, Gather the Data, and Define the Formulas

I’m not an astronomer, not even close. To complicate things further, it was probably 6th grade or so the last time I actually studied anything about space. When was Pluto demoted from planet?! My first task was to take a crash course on positional astronomy and build the necessary formulas to figure out where the user is and which stars are near them. Using some newly learned terms like julian day, sidereal time, right ascension, and declination, the first thing I built was an Objective-C math library that housed the mathematical logic I needed to calculate stellar positions. I’ve provided some links in the final section of this post with some of the invaluable resources I used.

Plan the Code Design

To make this app as well performing as possible, I had to really dig deep into the guts of what iOS has to offer. The one technology that introduced the most complexity in the app is Grand Central Dispatch. Anytime you introduce substantial multi-threading into an application, it increases the headache value of your app exponentially in order to avoid the often hard-to-debug concurrency woes. Unfortunately, to calculate stellar positions, fetch data, play music, and draw to the screen all at the same time while still maintaining a high framerate, multi-threading is inevitable. Planning how I would tie all of these different pieces together and keep things as decoupled as possible was the most time consuming and stressful part of the entire project.

Get the Audio Playing

Now that I know which stars are around me and when they’ll cross my meridian, I can begin to write the code for the audio portion of the app. Using Core Data and Grand Central Dispatch, I was able to write a process that fetches nearby stars and schedules an AVAudioPlayer to play the appropriate tone at the exact time it passes over your meridian. Pretty straight-forward stuff.

Draw the Star Canvas

Generating the universe, AstroCantus.When deciding how to draw the star objects, I tried several different paths. I began drawing the objects in Quartz 2D. That was terribly slow and consumed way too much memory. Then, I tried rendering the sky objects into a CATiledLayer and displaying it using a UIScrollView. This behaved sort of like the Photos app when you’re zooming and panning around on a large photo. That was really fast; however, zooming was terrible because Core Animation actually rasterizes the layer prior to zooming and then scales it up or down. The result was a pixelated image that could only be redrawn after the user released the zoom gesture. Obviously, this is not what you’d expect from any type of panetarium-esque software. Reluctantly, I stepped down to OpenGL ES to render the stars on screen.

OpenGL is a low-level C API for talking directly to the graphics processor. It’s pretty intimidating because all the documentation scattered throughout the web is either very basic, very technical, or use parts of the API that aren’t available on iOS. One thing to remember is that you’re trading abstraction for control. OpenGL is very powerful, but it takes a lot of code to do some of the most simple things. For instance, drawing text on the screen involves creating an image of each possible letter, creating a quad (or square) on screen, and overlaying the image of the letter on top. That’s why I first tried every path I could that didn’t involve OpenGL. In the end, however, it was the right choice for performance and future flexibility.

The Result

21,161 lines of code and several coffee-filled nights later, the idea of turning the sky into a song was realized. We’re super proud of AstroCantus and hope you’ll enjoy it too. Get it in the app store for only $1.99.

Resources

Here is a list of resources I found invaluable when building AstroCantus.

7 comments

@joshmiller7 Nice article and great work. Love the app! Thu, Oct 6, 2011 11:38am
@xthomasx Awesome idea, awesome app! Thu, Oct 6, 2011 11:43am
@hannahparamore The music of the stars. Paramore's latest iPhone app thanks to @bunchjesse Thu, Oct 6, 2011 1:02pm
@BenWilkins A beautiful mesh of art and science. Well done, @bunchjesse and @joshmiller7! Thu, Oct 6, 2011 2:27pm
@amandad1228 Fantastic! So inspiring! Thu, Oct 6, 2011 5:36pm
@jonathanwkelly Fact: any less of a man could not have pulled this off. Sat, Oct 15, 2011 11:39pm
@rachaelewaldeck Amazing work! So proud of y'all for making this app come to life! Thu, Oct 27, 2011 4:05pm

Share your thoughts

Comments are closed for this entry.

IE 6

We're sorry...

The browser you're using is not supported, and we strongly suggest that you upgrade.

We recommend using Firefox or Chrome.