Summary

The article discusses the new features of SwiftUI 3.0, focusing on Canvas, color blending, and the implementation of Porter-Duff modes in iOS 15.

Abstract

The article delves into the advancements of SwiftUI 3.0, particularly the introduction of the Canvas View, which has brought renewed attention to color blending in app design. It highlights the importance of color not just for aesthetic appeal but also for accessibility. The author explores standard blending modes alongside the Porter-Duff compositing technique, providing examples and code snippets to illustrate how these can be used in SwiftUI. The piece also touches on the historical context of color space research and the evolution of blending techniques, emphasizing the practical application of these concepts through interactive examples and encourages readers to experiment with the new filters and blending options available in SwiftUI.

Opinions

The author acknowledges the critical role of color in app design, considering both visual appeal and accessibility.
There is an emphasis on the trial-and-error approach to finding effective color combinations, as the author notes that some blends simply do not work together.
The article suggests that the most useful aspect of filters is their ability to remove parts of an image based on interactions with other elements.
The author invites readers to engage with the new features, suggesting that hands-on experience is key to understanding and utilizing the full potential of SwiftUI's color blending and Porter-Duff modes.
By providing code examples and animated GIFs, the author conveys an enthusiasm for the creative possibilities that the new SwiftUI features enable.

Canvas, Colour, and Blending in SwiftUI With iOS 15

A look at the new Canvas View together with new shapes, colours, and blends

In the mid-1970s, a man called Alvy Ray Smith III co-invented the concept of the alpha channel together with making a major contribution to the creation of the HSV colour space at the Xerox PARC. A decade later that space had become a research area with a very notable contribution by two individuals Thomas Porter and Tom Duff who, working together at Lucasfilm [Star Wars fame], developed the Porter-Duff composing technique.

Today, blending colours, changing their saturation, luminosity and hue is a critical aspect of designing an app. A critical aspect not only from an appeal/lure point of view, but an accessibility one too.

And well with the launch of Canvas in SwiftUI 3.0 colour blending images has come under the spotlight again. In the WWDC talk about the subject, we’re told the number of static/standard colours in Swift UI has more than doubled as has direct support for the three main types of colour CGColors, NSColor and UIColor. Colour is a subject I wrote about last summer. You can read more below:

Colour, Hue, Saturation, and Brightness

Using color with SwiftUI

betterprogramming.pub

But wait. I don’t want to talk about colour so much; this article is all about blending. Blending using the standard modes with the new Canvas View together with an example of using the Port-Duff modes which come in their own set of blending modes. Join me to take a tour of the new options available.

I start with two blends that are surely a pair. The animated GIF you are looking at is a TimelineView around which I am cycling through some seventeen foreground colours for the text and blending said text against a gradient running from blue to red. Here is the basic code it is running through:

With the ContentView as shown below:

struct ContentView: View {
  var body: some View {
    BlendS()
      .foregroundColor(.white)
  }
}

Next up is another pair, which is interesting because it illustrates that some combinations just don’t work. I’d love to give you some rules, but unfortunately, it is very much a case of try and see.

The code to show this is identical to the piece already presented. Now some of the filters are so obvious as to their effect, so I am not going to present them as animated GIFs, but just list them here. You got filters like the following:

hue
saturation
luminosity
normal

The next pair I want to illustrate is colorBurn and colorDodge, which as you can see also work with some combinations, and not with others.

Porter-Duff Modes

Now on to Porter-Duff Modes blends, which almost need an article in their own right. These are filters that apply some math to the colours of the images to get a different colour entirely and/or make the overlapping section disappear.

To show these in action, I am going to use a Venn diagram of sorts with two circles: an orange and a blue circle on a white background. Again I will cycle through the options using a TimelineView to do so.

But before I show you the results, here is the code that is generating them. Note: I initially didn’t use any filter but applied the filter on the second image to get the results.

You can see all the filters below. The first circle you draw is considered the destination; the second is the source.

But wait — it isn’t quite that simple — because you can apply a second filter with the same shape to get a different result. Let’s look through these again.

No filter on circles. We draw the blue one first. Note: You get a different result if you draw the orange first.

.destinationOut filter on second circle [orange]

.sourceOut or .xor filter on second circle [orange]

.sourceIn or .sourceAtop filter on second circle [orange]

destinationAtop filter on second circle [orange]

.exclusion filter on second circle [orange]

.multiply filter on second circle [orange]

.destinationAtop on second circle [orange]

More than one filter

.sourceOut on orange, then second blue with .clear or .destinationOut

.sourceOut on orange, then second blue with .xor

.sourceAtop filter on orange, then second blue **BUT** drawn over the orange with .destinationOver filter

.destinationOut on orange, then second blue with .sourceOut

And it goes on, the most useful filters [combinations] are surely those that help you remove parts of your image based on their interactions with other parts — so, as in the blue shape you see above.

Now you have almost all the sets you could want, with one exception that I invite you to figure out: you don’t have an orange eye, like the blue one shown above. How can you make this set?

At which point I am going to bring this paper to an end. Take some time to play with the filters, and see if you can answer that last question I asked.

The code to do this is given below. I have changed rectA and rectB so that they are aligned on top of each other.

All of which brings me to the end of this piece. Have a go with filters, and work out how you can make them work for you.