parts/Overlays.tex

   1 \chapter{Overlays}%
   2 \label{cha:overlays}
   3
   4 The purpose of the Overlay Modes is to control the foreground and background stacking and use blending to reshape image object boundaries.  It normally makes use of a binary type alpha blending system for all in or all out.  To use the available operations in \CGG{}, follow these steps:
   5
   6 \begin{enumerate}
   7     \item In the main window, look at the Patchbay on the far left.
   8     \item Click on the small arrow that points to the right, inside the panel to see it expand.
   9     \item A down arrow shows up with a tooltip of \textit{overlay mode}.
  10     \item Use the down arrow to get to the popup menu and choose the desired effect from the 30 possibilities.  \textit{Normal} is the default.
  11 \end{enumerate}
  12
  13 Figure~\ref{fig:overlay-01} shows the pulldown in the patchbay and the tool tip \textit{Overlay mode} which provides access to 4 types of overlays.  Each will expand further as shown in the screenshots below for \textit{PorterDuffs} and \textit{graphic art}.
  14
  15 \begin{figure}[htpb]
  16     \centering
  17     \includegraphics[width=0.99\linewidth]{overlay-01.png}
  18     \caption{Patchbay pulldown with Porter Duff and Graphic Art overlays expanded}
  19     \label{fig:overlay-01}
  20 \end{figure}
  21
  22 Porter-Duff is the industry standard for alpha blending operations.  Only a short explanation follows here, but there is much more information to be found on the internet with complete descriptions and examples.  Every pixel has 3 color channels (like RGB), and may have 1 alpha channel value.  If there is no alpha defined for a color model, the alpha value is assumed to be 1.  Regions of the image are created with the alpha image map.  These regions are manipulated using the blending operations described below.  Alpha blending is the process of combining a foreground color with a background color which produces a new blended color.  The \textit{alpha} channel describes how much opacity is present in a pixel.  It may be completely transparent, completely opaque, or any range of translucency.
  23
  24 Conceptually, when the foreground color is completely opaque, the resulting blended color will be the foreground color.  If it is transparent, the blended color will be the color of the background.  When the value of the alpha channel is $1$, the image is all there, if it is $0$, there is no image at all, otherwise it is only partially there.  In other words, the alpha value goes from $0$ to $1$, where full transparency is $0$ and opaque is represented by $1$.  Alpha blending models opacity.
  25
  26 When blending source and destination shapes (Dst and Src), the shape boundaries can be changed with the alpha blending effects.  There are a total of 10 standard Porter-Duff operators, but there are 30 possible overlay modes used in \CGG{}.  Each is characterized by its value in the four regions: source, destination and both, with the \textit{neither} region always being blank.  The source and destination regions can either be blank or filled with the source or destination colors.  A specific compositing math formula is used to calculate effect.  This is only applicable to RGB; some effort has been made to accommodate YUV, but the effects are not as predictable, and may not be useful.
  27
  28 Below, in figure~\ref{fig:normal}, are the results of utilizing the 30 available operations within \CGG{} as listed on a following page.  Src is the solid green rectangle and Dst is the solid red rectangle.  There are better illustrations of what alpha blending can do, however for consistency sake, these are the results when using standards.
  29
  30 \begin{figure}[htpb]
  31     \centering
  32     \includegraphics[width=0.84\linewidth]{normal.png}
  33     \caption{Normal and Arithmetic overlays}
  34     \label{fig:normal}
  35 \end{figure}
  36
  37 \begin{figure}[htpb]
  38     \centering
  39     \includegraphics[width=0.84\linewidth]{porter-duff.png}
  40     \caption{Porter Duff overlays}
  41 \end{figure}
  42
  43 \begin{figure}[htpb]
  44     \centering
  45     \includegraphics[width=0.84\linewidth]{logical.png}
  46     \caption{Logical overlays}
  47 \end{figure}
  48
  49 \begin{figure}[htpb]
  50     \centering
  51     \includegraphics[width=0.84\linewidth]{graphic-art.png}
  52     \caption{Graphic Art overlays}
  53 \end{figure}
  54
  55 \section{Math algorithms}%
  56 \label{sec:math_algorithms}
  57
  58 The implementation math forms are subsequently listed, where:
  59
  60 \vspace{2ex}
  61 \begin{lstlisting}[style=sh]
  62 Legend:
  63 D = Destination
  64 S = Source
  65 a = alpha
  66 c = chroma (color)
  67 || = OR (logical operator);
  68 ? : = if (true/false) ... then (conditional ternary operator)
  69 \end{lstlisting}
  70
  71 Each line describes a pair with the left one for alpha and the right one for chroma.
  72
  73 \subsection*{Normal}%
  74 \label{sub:normal}
  75
  76 \begin{description}
  77     \item[NORMAL:] $[Sa + Da \times (1 - Sa), Sc \times Sa + Dc \times(1 - Sa)])$
  78 \end{description}
  79
  80 \subsection*{Arithmetic:}%
  81 \label{sub:arithmetic}
  82
  83 \begin{description}
  84     \item[ADDITION:] $[(Sa + Da), (Sc + Dc)]$
  85     \item[SUBTRACT:] $[(Sa - Da), (Sc - Dc)]$
  86     \item[MULTIPLY:] $[Sa + Da - Sa \times Da, Sc\times(1 - Da) + Dc\times (1 - Sa) + Sc \times Dc]$
  87     \item[DIVIDE:] $[Sa + Da - Sa \times Da, Sc\times(1 - Da) + Dc \times (1 - Sa) + Sc/Dc]$
  88     \item[REPLACE:] $[Sa, Sc]$ (fade = 1)
  89 \end{description}
  90
  91 \subsection*{Porter-Duff}%
  92 \label{sub:porter-duff}
  93
  94 \begin{description}
  95     \item[DST:] $[Da, Dc]$
  96     \item[DST\_ATOP:] $[Sa, Sc \times (1 - Da) + Dc \times Sa]$
  97     \item[DST\_IN:] $[Da \times Sa, Dc \times Sa]$
  98     \item[DST\_OUT:] $[Da \times (1 - Sa), Dc \times (1 - Sa)]$
  99     \item[DST\_OVER:] $[Sa + Da - Sa \times Da, Sc \times (1 - Da) + Dc]$
 100     \item[SRC:] $[Sa, Sc]$
 101     \item[SRC\_ATOP:] $[Da, Sc \times Da + Dc \times (1 - Sa)]$
 102     \item[SRC\_IN] $[Sa \times Da, Sc \times Da]$
 103     \item[SRC\_OUT:] $[Sa \times (1 - Da), Sc \times (1 - Da)]$
 104     \item[SRC\_OVER:] $[Sa + Da - Sa \times Da, Sc + (1 - Sa) \times Dc]$
 105 \end{description}
 106
 107 \subsection*{Logical}%
 108 \label{sub:logical}
 109
 110 \begin{description}
 111     \item[MIN:] $[min(Sa, Da), MIN(Sc, Dc)]$
 112     \item[MAX:] $[max(Sa, Da), MAX(Sc, Dc)]$
 113     \item[LIGHTEN:] $[Sa + Da - Sa \times Da, Sc \times (1 - Da) + Dc \times (1 - Sa) + max(Sc \times Da, Dc \times Sa)]$
 114     \item[DARKEN:] $[Sa + Da - Sa \times Da, Sc \times (1 - Da) + Dc \times (1 - Sa) + min(Sc \times Da, Dc \times Sa)]$
 115     \item[AND:] $[Sa \times Da, Sc \times Dc]$
 116     \item[OR:] $[Sa + Da - Sa \times Da, Sc + Dc - Sc \times Dc]$
 117     \item[XOR:] $[Sa + Da - 2 \times Sa \times Da, Sc \times (1 - Da) + Dc \times (1 - Sa)]$
 118 \end{description}
 119
 120 \subsection*{Graphical Art}%
 121 \label{sub:graphical_art}
 122
 123 \begin{description}
 124     \item[OVERLAY:] $[Sa + Da - Sa \times Da, Sc \times (1 - Da) + Dc \times (1 - Sa) + 2 \times Dc < Da \quad ? \quad 2 \times Sc \times Dc : Sa \times Da -   2 \times s (Da-Dc) \times (Sa-Sc) ]$
 125     \item[SCREEN:] $[Sa + Da - Sa \times Da, Sc + Dc - (Sc \times Dc)]$ (same as OR)
 126     \item[BURN:] $[Sa + Da - Sa \times Da, Sc \times (1 - Da) + Dc \times (1 - Sa) + Sc \leqslant 0 \parallel Sc \times Da + Dc \times Sa \leqslant Sa \times Da \quad ? \quad  0 : (Sc \times Da + Dc \times Sa - Sa \times Da) \times Sa/Sc]$
 127     \item[DODGE:] $[Sa + Da - Sa \times Da, Sc \times (1 - Da) + Dc \times (1 - Sa) + Sa \leqslant Sc \parallel Sc \times Da + Dc \times Sa \geqslant Sa \times Da \quad ? \quad        Sa \times Da : Dc \times Sa / (1 - Sc/Sa)]$
 128     \item[DIFFERENCE:]~\\ $[Sa + Da - Sa \times Da,  Sc \times (1 - Da) + Dc \times (1 - Sa) + abs{(Sc \times Da - Dc \times Sa)}]$
 129     \item[HARDLIGHT:] $[Sa + Da - Sa \times Da, Sc \times (1 - Da) + Dc \times (1 - Sa) + 2 \times Sc < Sa \quad ? \quad 2 \times Sc \times Dc : Sa \times Da -         2 \times (Da - Dc) \times (Sa - Sc)]$
 130     \item[SOFTLIGHT:] $[Sa + Da - Sa \times Da, Sc \times (1 - Da) + Dc \times (1 - Sa) + Da > 0 \quad ? \quad (Dc \times Sa + 2 \times Sc \times (Da -         Dc))/Da : 0]$
 131 \end{description}
 132
 133 \section{Description}%
 134 \label{sec:description}
 135
 136 The previous math forms are the only truly accurate description of each blending operation, but short descriptions are below where \textit{Source} is the output from the next track and \textit{Destination} is the output from the lower track stacking.  Blending starts with new Source and combines it with the previous render stack output, which is referred to as Destination.  The new output becomes the next Destination and the next up stack level becomes the new Source.  Source is above; Destination is below.
 137
 138 Note: the Graphic Art group operates principally on color, and the others operate principally on alpha.
 139
 140 \subsection*{Normal}%
 141 \label{sub:normal2}
 142
 143 \begin{description}
 144     \item[Normal:] Normal mode is the default layer mode.  The result color is the source color.  The layer on top covers the layers below it.  If you want to see anything below the top layer when you use this mode, the layer must have some transparent areas.  It is \textit{stacked on top}.  Math formula used is different than that used by Gimp; there is no SVG equivalent.
 145 \end{description}
 146
 147 \subsection*{Arithmetic Group:}%
 148 \label{sub:arithmetic_group}
 149
 150 Standard numerical operations.
 151
 152 \begin{description}
 153     \item[Addition:] The source is added to the destination and replaces the destination.  Addition mode is very simple - the pixel values of the upper and lower layers are added to each other.  The resulting image is normally brighter.  The equation can result in color values greater than $255$, so some of the light colors may be clipped to the maximum value of $255$.  Math formula is the same as that used by SVG but different than Gimp.
 154     \item[Subtract:] Subtract mode reduces the pixel values of the upper layer by the pixel values of the lower layer.  The resulting image is normally darker.  You might get a lot of black or near-black in the resulting image.  The equation can result in negative color values, so some of the dark colors may be clipped to the minimum value of $0$.  Math formula used is different than that used by Gimp; there is no SVG equivalent.
 155     \item[Multiply:] The source color is multiplied by the destination color and replaces the destination.  The resulting color is always at least as dark as either the source or destination color.  Multiplying any color with black results in black.  Multiplying any color with white preserves the original color.  Math formula is the same as used by SVG and Gimp.
 156     \item[Divide:] Divides source color by destination color.  If the source color is white, the result color is the underlying color.  The resulting image is often lighter.  Math formula used is different than that used by Gimp; there is no SVG equivalent.
 157     \item[Replace:] Replace mode will cause any existing destination to be replaced by the source media.  Mathematical formula used is the same as used by Gimp; there is no SVG equivalent.
 158 \end{description}
 159
 160 \subsection*{Porter-Duff Group}%
 161 \label{sub:porter-duff_group}
 162
 163 Industry standard compositing operators.
 164
 165 \begin{description}
 166     \item[DST:] The destination is left untouched.  Only the destination will be present in the output.  Math formula is the same as that used by Porter-Duff and SVG; there is no Gimp equivalent.
 167     \item[DST\_ATOP:] The part of the destination lying inside of the source is composited over the source.  The destination outside the source is dropped.  You will see the existing canvas is only kept where the shapes overlap.  Math formula is the same as that used by Porter-Duff and SVG; there is no Gimp equivalent.
 168     \item[DST\_IN:] The part of the destination lying inside of the source is displayed.  This effectively allows for cutting out the background using the current layer/feature as a mask.  You will see the new shape is drawn only where both the source and the destination overlap.  Math formula is the same as that used by Porter-Duff and SVG; there is no Gimp equivalent.
 169     \item[DST\_OUT:] The part of the destination lying outside of the source is displayed.  This is basically a reverse mask, compared to destination-in.  You will see the existing content is kept where it doesn't overlap the source.  Math formula is the same as that used by Porter-Duff and SVG; there is no Gimp equivalent.
 170     \item[DST\_OVER:] The destination is composited over the source.  Math formula is the same as that used by Porter-Duff and SVG; there is no Gimp equivalent.
 171     \item[SRC:] The source is copied.  The destination is not used as input.  Only the source will be present in the output.  Math formula is the same as that used by Porter-Duff \& SVG; there is no Gimp equivalent.
 172     \item[SRC\_ATOP:] The part of the source lying inside of the destination is composited over the destination. The source outside the destination is dropped.  You will see the existing canvas is only kept where the shapes overlap.  Math formula is the same as that used by Porter-Duff and SVG; no Gimp equivalent.
 173     \item[SRC\_IN:] The part of the source lying inside of the destination is displayed.  This effectively allows the destination to act as a mask for the layer/feature being shown.  You will see the new shape is drawn only where both the source and the destination canvas overlap.  Math formula is the same as that used by Porter-Duff and SVG; there is no Gimp equivalent.
 174     \item[SRC\_OUT:] The part of the source lying outside of the destination is displayed.  This is basically a reverse mask, compared to source-in.  You will see the new shape is drawn where it doesn't overlap the destination.  Math formula is the same as that used by Porter-Duff and SVG; there is no Gimp equivalent.
 175     \item[SRC\_OVER:] The source is composited over the destination.  Math formula is the same as that used by Porter-Duff and SVG; there is no Gimp equivalent.
 176 \end{description}
 177
 178 \subsection*{Logical Group}%
 179 \label{sub:logical_group}
 180
 181 \begin{description}
 182     \item[Min:] The output color is the component-wise minimum value of the source and destination colors.  There is no SVG or Gimp equivalent math formula.
 183     \item[Max:] The output color is the component-wise maximum value of the source and destination colors. There is no SVG or Gimp equivalent math formula.
 184     \item[Lighten:] Selects the lighter of the destination and source colors.  The destination is replaced with the source when the source is lighter, otherwise it is left unchanged.  Completely black layers have no effect on the final image and completely white layers result in a white image.  Math formula is the same as used by SVG and Gimp's \textit{lighten only}.
 185     \item[Darken:] Selects the darker of the destination and source colors. The destination is replaced with the source when the source is darker, otherwise it is left unchanged.  Completely white layers have no effect on the final image and completely black layers result in a black image.  Math formula is the same as used by SVG and Gimp's \textit{darken only}.
 186     \item[And:] This operation intersects source and destination.  If either image is not white, it down factors the other image.  Usually you will end up with a lot of darker areas.  There is no SVG or Gimp equivalent math formula.
 187     \item[Or] This operation is the union of the source and the destination.  If either image is not black, it adds to the other image.  Usually you will end up with a lot of lighter areas.  Math formula is the same as that used by “Screen” operation in SVG; there is no Gimp equivalent.
 188     \item[Xor:] The union of the source and destination with the intersection removed.  Results in black if they are equal.  Shapes are made transparent where both overlap, and drawn normal everywhere else.  Math formula used is that used by Porter-Duff; there is no Gimp equivalent and SVG formula differs.
 189 \end{description}
 190
 191 \subsection*{Graphical Art Group}%
 192 \label{sub:graphical_art_group}
 193
 194 Typical operations from popular \textit{paint} packages.
 195
 196 \begin{description}
 197     \item[Overlay:] Multiplies or screens the colors, dependent on the destination color. Source color overlay the destination while preserving its highlights and shadows.  The destination color is not replaced, but is mixed with the source color to reflect the lightness or darkness of the destination.  Dark parts on the base layer become darker, and light parts become lighter.  Math formula is same as SVG and Gimp.
 198     \item[Screen:] The source and destination are complemented and then multiplied and then replace the destination.  The resultant color is always at least as light as either of the two constituent colors.  Screening any color with white produces white.  Screening any color with black does not change the other layer.  Using the Screen mode is similar to projecting multiple photographic slides simultaneously onto a single screen.  A lighter picture is the result.  Math formula is the same as used by SVG and Gimp.  This is identical to \textit{OR}.
 199     \item[Burn:] Darkens the destination color to reflect the source color.  Burning with white produces no change.  In photography, burning is a technique used in a darkroom to increase the exposure in particular areas of the image.  This brings out details in the highlights.  Math formula is the same as used by SVG and Gimp.
 200     \item[Dodge:] Brightens the destination color to reflect the source color.  Dodging with black produces no change.  The result color is a lightening of the source color to reflect the underlying layer color by decreasing the contrast.  If the source color is pure black, the result color is the underlying color.  In photography, dodging is a technique used in a darkroom to decrease the exposure in particular areas of the image.  This brings out details in the shadows.  Math formula is the same as used by SVG and Gimp.
 201     \item[Difference:] Subtracts the darker of the two constituent colors from the lighter.  This is the same as \textit{Subtract} except that the absolute value is used.  \textit{Subtract} colors which would be black due to clipping become visible instead.  Differencing with white inverts the destination color.  Differencing with black produces no change.  Math formula is the same as used by SVG and Gimp.
 202     \item[Hardlight:] Multiplies or screens the colors, dependent on the source color value.  If the source color is lighter than $0.5$, the destination is lightened as if it were screened.  If the source color is darker than $0.5$, the destination is darkened, as if it were multiplied.  The degree of lightening or darkening is proportional to the difference between the source color and $0.5$.  If it is equal to $0.5$ the destination is unchanged.  Using pure black or white produces black or white.  The effect is similar to shining a harsh spotlight on the destination.  This mode is useful for creating the appearance of shadows on a layer.  You might use this mode to combine two photographs and obtain bright colors and sharp edges.  Math formula is the same as used by SVG and Gimp.
 203     \item[Softlight:] Darkens or lightens the colors, dependent on the source color value.  If the source color is lighter than 0.5, the destination is lightened. If the source color is darker than $0.5$, the destination is darkened, as if it were burned in.  The degree of darkening or lightening is proportional to the difference between the source color and $0.5$.  If it is equal to $0.5$, the destination is unchanged.  Using pure black or white produces a distinctly darker or lighter area, but does not result in pure black or white.  The effect is similar to shining a diffused spotlight on the destination.  A layer with pure black or white becomes markedly darker or lighter, but does not become pure black or white.  Soft light is not related to “Hard light” in anything but the name, but it does tend to make the edges softer and the colors not so bright.   Math formula is the same as used by Gimp; SVG formula differs.
 204 \end{description}
 205
 206
 207 %%% Local Variables:
 208 %%% mode: latex
 209 %%% TeX-master: "../CinelerraGG_Manual"
 210 %%% End: