Share

Snow Day: The Making of the December 2014 Interactive Cover

Even people who hate the cold and inconvenience that come with snow enjoy the first snowfall of the season. Thanks to our December 2014 cover, you can experience that moment regardless of where you live. 

Our initial inspiration was a photo shot by Julien Coquentin in wintry Montreal. While we loved the mood of that piece, it couldn't be animated for our cover. Instead, we asked Erik Johansson to create an original photo illustration that felt similar but bore his unique stamp.

 

LOOKING FOR SNOW

 

Erik lives in Berlin, which was snow-free in November when we began the process. He headed to northern Sweden to shoot several of the elements as separate photos, including the person, the street, a light post, and a car. “The car was almost the hardest thing to find,” he remembers. Because it had been dry for a few days, Erik had to search for a car that still had a mantle of snow. For the building in the background, he returned to Berlin.

The final Adobe Photoshop CC composite contains 66 layers, plus a few smart objects with yet more layers. That’s not an unusually high number for Erik, who likes the control this approach gives him. “I’m used to clients asking me to move things around,” he says. To keep from being overwhelmed by all those layers, Erik gives them logical names and locations in the layer stack.

Erik’s photo-editing skills are excellent (read more about those in a previous article). However, careful planning before he even turns on a camera is just as crucial to the final image’s success.  “Looking for locations is a big part of it,” he says. He always considers the light and perspective at each location; he knows that viewers want even impossible images to look “right.” “Sometimes you have to fake the light. Faking perspective is harder.”

 

ADDING MOVEMENT

 

Once Erik and Adobe creative director Kashka Pregowska-Czerw worked out the details of the photo illustration, it was time to exploit the interactive potential of Adobe Digital Publishing Suite. “Sometimes an amazing still image is not enough,” says James Begera, executive creative director at Wrecking Ball Media Group. And so for the tablet edition of the magazine—where the snow changes direction depending on how you move the tablet—James worked with Grant Skinner.

Grant runs a team of 20 developers and designers who work on interactive projects for Google, Microsoft, Adobe, and other heavy hitters. But adding the falling snow was Grant’s personal project.

“I got into simulating natural systems six or seven years ago,” Grant says. When it came to animating our December cover, he didn’t want to retread old ground. “Taking something I built in Flash and porting it over to HTML5 wouldn’t be a challenge. The fun is in the unknown, not the paths you’ve already walked.”

To study how snow moves, he only had to look outside his window—November snow in Edmonton is not hard to find. “One of the things you see when you watch snow is micro gusts,” he says. “Not all snow moves consistently left or right. Parts will go left, right, up, down.”

To model that behavior, Grant created a 2D flow field, which he describes as a “map of localized wind using overlapping sine waves.” You can see the flow field in action on Grant's website.

He built clouds of 150 snowflakes that varied in size and opacity. “Then it took careful choreography for those clouds to blend together well,” he remembers.  

As Grant noted, the technological core of the interactive snow is HTML5. On top of that is CreateJS, a suite of open source libraries built by Grant and his team.

 

SIMPLE? IF YOU SAY SO

 

Both Erik and Grant humbly downplay their talents, but this cover demanded technical mastery combined with a deep understanding of the natural world. The end results speak for themselves.