SwiftUI-BlendModeExamples [DRAFT]

This GitHub repository contains a comprehensive cheat sheet for blend modes, a crucial aspect of computer graphics. The cheat sheet provides a quick reference guide for each blend mode, detailing their function and characteristics and practical examples of their use.

Motivation

The documentation on blend modes is incomplete and fragmented across different sources. For instance, Apple’s documentation on Bitmap Images and Image Masks includes a section on using blend modes with images, but this information pertains to Quartz 2D rather than SwiftUI. Therefore, a comprehensive and up-to-date resource on blend modes specifically for SwiftUI is currently unavailable. And I want to fix it in this paper.

Test code

var body: some View {
    sfImage("mountain.2.fill", .accentColor)
        .overlay(overlay.blendMode(blendMode))
        .compositingGroup()
}

var overlay: some View {
    VStack {
        sfImage("sun.max.fill", .orange)
        HStack {
            sfImage("tree.fill", .black)
            Spacer()
            sfImage("tree.fill", .white)
        }
    }
}

func sfImage(_ systemName: String, _ color: Color) -> some View {
    Image(systemName: systemName)
        .resizable()
        .scaledToFit()
        .foregroundColor(color)
}

Example Usage

Default mode

Blend mode	Description	Result
.normal	Paints the source image samples over the background image samples.

Alpha clipping

Blend mode	Description	Result
.destinationOut	Makes the overlapping areas of the source and destination images transparent.
.sourceAtop	Draws the source image on top of the destination image, but only in the areas where they overlap.

Composing

Blend mode	Description	Result
.destinationOver	Draws the destination image on top of the source image.

Components multiplying

Blend mode	Description	Result
.multiply	Multiplies the source image samples with the background image samples. This results in colors that are at least as dark as either of the two contributing sample colors.
.screen	Multiplies the inverse of the source image samples with the inverse of the background image samples, resulting in colors that are at least as light as either of the two contributing sample colors.
.overlay	Combines Multiply and Screen blend modes, resulting in a combination of darker and lighter areas.
.hardLight	Combines Multiply and Screen blend modes, but with more intense effects.
.softLight	Darkens or lightens the destination image based on the colors of the source image.

Components selection by condition

Blend mode	Description	Result
.darken	Selects the darker of the source and destination pixels for each pixel in the output image. R = MIN(S, D)
.lighten	Selects the lighter of the source and destination pixels for each pixel in the output image. R = MAX(S, D)

Components adding and subtracting

Blend mode	Description	Result
.plusDarker	Adds the source and destination pixel values and subtracts 0.5, resulting in a darker image. R = MAX(0, 1 - ((1 - D) + (1 - S)))
.plusLighter	Adds the source and destination pixel values, resulting in a brighter image. R = MIN(1, S + D)
.difference	Subtracts either the source image sample color from the background image sample color, or the reverse, depending on which sample has the greater brightness value. Source image sample values that are black produce no change; white inverts the background color values.
.exclusion	Produces an effect similar to that produced by .difference, but with lower contrast. Source image sample values that are black don’t produce a change; white inverts the background color values.

Other

Blend mode	Description	Result
.color	Uses the luminance values of the background with the hue and saturation values of the source image. This mode preserves the gray levels in the image. You can use this mode to color monochrome images or to tint color images.
.luminosity	Uses the hue and saturation of the background with the luminance of the source image. This mode creates an effect that is inverse to the effect created by .color.
.saturation	Uses the luminance and hue values of the background with the saturation of the source image. Areas of the background that have no saturation (that is, pure gray areas) don’t produce a change.
.hue	Uses the luminance and saturation values of the background with the hue of the source image.
.colorDodge	Brightens the destination image based on the brightness of the source image.
.colorBurn	Darkens the destination image based on the darkness of the source image.