Chance of Rainbow

Chance of Rainbow is a weather app that predicts how likely it is to see a rainbow using real forecast data from Dark Sky. The likelihood of seeing a rainbow is calculated using a combination of precipitation, cloud cover, and the angle of the sun.

Prediction

Creating an algorithm to predict rainbows involved a combination of functions. The main predictor would be the combination of precipitation and cloud cover. The ideal conditions would be 100% rain and 100% sunshine (if that is possible). However, if you had 100% rain and 0% sunshine, or 0% rain and 100% sunshine, then that should result in 0% chance of rainbow. Here is the graph of this relationship from Academo 3D Surface Plotter. The x and y axes are precipitation and the inverse of cloud cover (sun). The z axis is the rainbow probability.

This is not all there is to it, because you can't see rainbows at night! Not only that, it is more likely to see a rainbow when the sun is at an angle. This was implemented with variations of a sin graph. The x axis is the time of day. 0 is sunrise and pi is sunset. The y axis is a multiplier for the rainbow percentage from the previous graph (the z axis). This way, there will always be 0% chance of rainbow at the begining and end of the day, and the peak times will be morning and afternoon. For x < 0 (before sunrise) and x > pi (after sunset), y is set to 0. For 0 <= x < pi/4 and 3pi/4 <= pi, the red graph is used, and for pi/4 <= x < 3pi/4, the blue graph is used. This way, the prediction for high noon won't be absolute 0.

Forecast Visual Representation

There are several visual elements to display a forecast in a way that is more interesting than labels with percentages.

Time of Day

The time of day is shown by the sun that makes an arc across the top of the app. Sunrise and sunset times are fetched from the day's forecast. The current time is then mapped from the range of sunrise-sunset to a range of 0-pi. The reason for this is because the sun's position in the app is based on a sin graph between the values 0-pi. This is how the arc is achieved. At night the sun goes offscreen and the background is set to dark colors.

Sunshine / Cloud Cover

The app shows forecast cloud cover as clouds in the background. The more cloud cover the forecast predicts, the more clouds you'll see in the background of the app. The clouds are a Core Animation layer with sublayers for background, midground, and foreground clouds. This way, a parallax effect could be created by moving the clouds in the foreground more than those in the midground and background.

Precipitation

For forecasts with a high chance of rain, a Core Animation particle emitter was used to simulate rain. The emitter is above the top of the screen, emitting raindrop-shaped particles with a downward velocity.

Chance of Rainbow

The three data points above are combined together as described in the Prediction section. This is the most important thing to show in the app, so it is represented in multiple ways. There is obviously the large number right in the middle. There is the arc over the large number that acts as a meter. A Core Animation shape layer was created to draw this, and its strokeEnd parameter is adjusted to represent the predicted chance of rainbow. The background also chances colors from blue (no chance of rainbow) to a multicolored gradient when there is a high chance of rainbow. This was done with a Core Animation gradient layer.

Transition Animations

Transitioning between each forecast page was a challenge because the UI elements for each forecast are not contained within their respective page. The sun transitions in an arc across the screen depending on the time of day, the rain particle emitter has to change the rate it is emitting particles based on the chance of rain, and so on. Instead of creating unique UI elements for each forecast page, all pages share the same UI elements. These elements are animated based on the user swiping between pages. EMPageViewController was used to get the transition progress between two pages that the user is swiping between. This progress is then used to interpolate between the data points of the two page forecasts that are being transitioned between. These interpolated values are then reflected in the UI as the sun position, the background colors, etc. Everything described in Forecast Visual Representation needed to be transitionable in a visually appealing way.