On The Second Day...

My goal was to create a sky that would shift its colours vividly as the day progressed. I needed a solution that didn’t rely on time-based animations; what if a user opened the app during the middle of a sunset? What if I wanted to enable time-lapse effects, or if I wanted to move time backwards? I needed my sky to render a vivid colour backdrop given a single input value: the current time within a single day in seconds.

There are two transition periods in a day cycle, each with a start and end point. The sunrise time of day is defined as the point where the body of the sun becomes visible at the horizon. The sunset time of day is defined as the point where the body of the sun ceases to be visible. Given those times I can create a threshold for when to start manipulating the colours and by how much.

On my first run at things I’d used to mock up the sky layer relied on multiple quads (one for each phase of the cycle, each with its own colour) and manipulating the alpha channel on each one. I was dubious of this method even before I wrote a single line of code, and my instincts were proven right; the effect looked washed out, and drawing four full-screen layers was a performance bottleneck, particularly on retina devices.

Manipulating Color Components

It did occur to me that it’d be a far better solution to have a single quad for the sky and manipulate the colours at each vertex. Doing this in RGB would be like eating glass. It’s unfortunate that most developers, especially web developers, are raised to live in an RGB world. Enter HSV: Hue, Saturation, and Value.

(or HSL, pick your flavour.)

After some self-education on colour models, I had an elegant solution: by manipulating the Hue (H) of each vertex I can transition from blue along the spectrum towards a nice brilliant yellow and include purple, red, and orange - this gives me the ability to have a rich sunrise effect. By manipulating the Value (V) of each vertex, I can shift from night (black) to day (blue). The transitions themselves are smooth, and the colours remain vivid. Both H and V can be manipulated with a simple equation based on a single input value: the current time of day in seconds.


Remember the part where I said most developers were raised on RGB? Cocos2d relies on RGB currently, so I wrote some colour model translation code as a category over UIColor - its posted on my github. There are various other implementations out there, most either in c or tend to return structs; I stuck to UIColor/CGColor conventions and used reference parameters.