Building Analog with SwiftUI
We just released a major new feature in Hipstamatic X-5 called Passport. It’s a retro-inspired take on a photo journal where you can earn ‘stamps’ and ‘stickers’ for shooting photos under various conditions with Hipstamatic. As part of our broader effort to increase the joy of photography without relying on social ‘likes’ our goal was to make it personal, authentic, and fun.
There’s a lot more to say about photo wellness, but this is a technical post about how I used SwiftUI to build something in about a month that would have taken much longer, and might not even have been tenable, using UIKit.
Does it Blend?
In the spirit of Hipstamatic, Passport is all analog. Inspired by vintage passports from around the world it’s a lovingly crafted simulation of the joy of travel, shooting photos, and recording your journey. How do you make analog in a world of pixels and RGB? It’s all about the Blend Modes baby, and SwiftUI adds some serious tools in this department.
In the days when UIKit was king, we had alpha for basic transparency effects. That worked well for many applications but sometimes we needed more. That meant dropping into the lower level Core Graphics API to unlock the sweet, sweet sheeba of kCGBlendModeMultiply or kCGBlendModeScreen, and that wasn’t a fun adventure. It involved offscreen drawing and a whole lot of extra boilerplate code. Now with a simple view modifier, .blendMode(.multiply) we instantly have the beautiful compositing required to create the authentic feel of stamped ink on paper stock (and it’s animatable!).
And that’s great for artwork coming out of Photoshop that already has been retro-ified and just needs placement on the page. But what about content that is rendered in real time, such as the date or location that is included on most of the stamps in Passport? Printed ink isn’t perfectly crisp like the 3x Retina precision typography we’ve become accustomed to. It usually has a subtle bleed into the paper that softens the edges around the glyphs. Again SwiftUI handles this perfectly with the .blur(radius:) modifier. By applying a ¼ point blur radius to live type it perfectly blends into the paper like ink.
The paper itself is also worth considering. With a real stamp you’d see texture and subtle variance with the content printed on top. Applying a paper texture with a Screen blend mode over the top of the entire page achieves this effect perfectly, and it’s something that’s simple to do in SwiftUI but would have been a hugely complicated challenge with UIKit.
Chaos for Fun and Profit
Another key element that has played a role since the very beginning with Hipstamatic is randomization. A big part of the joy and authenticity of analog is its unpredictability, and since the first model of Hipstamatic 10 years ago we’ve made this a cornerstone of the app’s filters and effects. This has been built into Passport as well so that each time a stamp is applied to your book it looks completely different and unique.
We apply randomization to the opacity to simulate stamp pressure, rotation+translation to simulate different hand placement, and even the registration in stickers to simulate imperfect results coming from the printing press. On top of all of this is a concept called prestige, which controls the degree of randomization. This separates stamps that are easy to earn every day from challenging achievements like shooting a photo-a-day for a month. More prestigious stamps are applied with more care to your book and thus have tighter thresholds of randomization.
switch stampPrestige {case .mundane:
opacityMin = 65
opacityMax = 90
angleVariance = 6
placementVariance = 5
registrationVariance = 2case .normal:
opacityMin = 75
opacityMax = 100
angleVariance = 4
placementVariance = 3
registrationVariance = 1case .special:
opacityMin = 85
opacityMax = 100
angleVariance = 2
placementVariance = 1
registrationVariance = 0}
While it would seem straightforward to just apply this randomization anew each time a stamp is rendered in Passport, we go one step further and store these randomization properties with each stamp you earn. Every time you view that stamp later it looks the same, just the way a real stamp doesn’t move around when you turn the page. This information is even backed up privately to iCloud with the rest of your Passport. These are the details that I think make the difference and really show the detail and craft that went into building this product.
Odds and Ends
There is so much care that went into the production of Passport that it’s hard to mention all the little details. Some stamps have a different ink color depending on the day of the week you earn them. Stickers that can be earned repeatedly are hue-shifted to increase the visual variety of your passport from the 1st to 31st of any given month. The registration (and color) of each page of your passport subtly shifts with each page you turn throughout the course of the year.
So get out there, shoot some photos, and earn some stamps!
Hipstamatic X-5 is a free download, available exclusively on iPhone.
