{"id":259,"date":"2022-03-01T14:28:31","date_gmt":"2022-03-01T13:28:31","guid":{"rendered":"http:\/\/graphics32\/?page_id=259"},"modified":"2024-02-21T00:32:32","modified_gmt":"2024-02-20T23:32:32","slug":"color-gradients","status":"publish","type":"page","link":"https:\/\/melander.dk\/graphics32\/color-gradients\/","title":{"rendered":"Color Gradients"},"content":{"rendered":"\n

In computer graphics, a color gradient<\/a> (sometimes called a color ramp<\/em> or color progression<\/em>) specifies a range of position-dependent colors, usually used to fill a region. The colors produced by a gradient vary continuously with position, producing smooth color transitions.<\/p>\n\n\n\n

With version 2.0 of the Graphics32 library, color gradients are now possible in many different ways. There are hardly any limitations in the number of color stops or number of interpolation steps. Also for all gradients different wrap modes have been implemented (where possible). Furthermore several useful geometric distortions have been implemented such as linear, radial, conical, diamond, X, XY, and Squared(XY). Finally some sparse point color interpolators have been implemented that can be used for simple mesh gradients.<\/p>\n\n\n\n

Simple 2-Point Linear Gradients<\/h2>\n\n\n\n

Classic color gradients only use 2 colors with a linear transition from one color to the other color, as can be seen in Figure 1.<\/p>\n\n\n\n

\n
\n
\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n
Figure 1:<\/strong> Simple 2-point linear gradients<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n

The code, which is necessary to build the above gradients is very simple; A linear<\/em> gradient sampler is created and the values for each pixels are calculated:<\/p>\n\n\n

\nvar\n  X, Y: Integer;\n  Sampler: TLinearGradientSampler;\nbegin\n  Bitmap.SetSize(100, 100);\n \n  Sampler := TLinearGradientSampler.Create;\n  try\n\n    Sampler.SimpleGradient(FloatPoint(0, 0), clBlue32, FloatPoint(0, 100), clRed32);\n\n    Sampler.PrepareSampling;\n\n    for Y := 0 to Bitmap.Width - 1 do\n      for X := 0 to Bitmap.Height - 1 do\n        Bitmap.Pixel[X, Y] := Sampler.GetSampleInt(X, Y);\n\n  finally\n    Sampler.Free;\n  end;\nend;\n<\/pre><\/div>\n\n\n
Simple 2-Point Radial Gradients<\/h2>\n\n\n\n
Another classical color gradient supported by Graphics32 is the circular gradient. A circular gradient is specified as a circle that has one color and a focus (the center of the circle) that has another. Colors are calculated by linear interpolation based on distance from the focus. The distance from the focus is mapped using a radius property.<\/p>\n\n\n\n
\n
\n
\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n
Figure 2:<\/strong> Simple 2-point circular gradients<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n
The code, which is necessary to build the above gradients is also very simple; A radial<\/em> gradient sampler is created and the values for each pixels are calculated:<\/p>\n\n\n
\nvar\n  X, Y: Integer;\n  Sampler: TRadialGradientSampler;\nbegin\n  Bitmap.SetSize(100, 100);\n \n  Sampler := TRadialGradientSampler.Create;\n  try\n\n    Sampler.Center := FloatPoint(Bitmap.Width div 2, Bitmap.Height div 2);\n    Sampler.Radius := Bitmap.Width div 2;\n    Sampler.Gradient.StartColor := clBlue32;\n    Sampler.Gradient.EndColor := clRed32;\n\n    Sampler.PrepareSampling;\n\n    for Y := 0 to Bitmap.Width - 1 do\n      for X := 0 to Bitmap.Height - 1 do\n        Bitmap.Pixel[X, Y] := Sampler.GetSampleInt(X, Y);\n\n  finally\n    Sampler.Free;\n  end;\nend;  \n<\/pre><\/div>\n\n\n
Wrap Modes<\/h2>\n\n\n\n
As can be seen in Figure 2, the color outside the defined radius is clamped. While this might be desired and sufficient for typical cases, it is also possible to use other wrap modes. Figure 3 shows the differences between all the different wrap modes available:<\/p>\n\n\n\n
\n
\n
\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n
Figure 3:<\/strong> Different wrap modes: clamp, mirror, repeat<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n
Please note, that the repeat wrap mode may cause rough and pixelized edges rather than smooth transitions, when the color starts to repeat. This can be corrected either by super sampling the gradient sampler (if a sampler is used as opposed to a polygon filler) or by adding further color stops.<\/p>\n\n\n\n
\n
\n
\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n
Figure 4:<\/strong> Fixing rough edges with wrap mode=repeat.
On the left: supersampled. On the right: corrected using a 3-point gradient.<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n
More than 2 colors<\/h2>\n\n\n\n
So far, the presented figures only featured 2 colors, but as it has already been mentioned with Graphics32 there are hardly any limitations in the number of color stops. Further color stops can simply be added at any time using the AddColorStop() method. Or the gradient can be defined directly using the SetColors() method. Both are members of the TColor32Gradient class, which is responsible for managing the color stops.<\/p>\n\n\n\n
\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n<\/figure>\n","protected":false},"excerpt":{"rendered":"
In computer graphics, a color gradient (sometimes called a color ramp or color progression) specifies a range of position-dependent colors, usually used to fill a region. The colors produced by a gradient vary continuously with position, producing smooth color transitions.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-259","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/melander.dk\/graphics32\/wp-json\/wp\/v2\/pages\/259","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/melander.dk\/graphics32\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/melander.dk\/graphics32\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/melander.dk\/graphics32\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/melander.dk\/graphics32\/wp-json\/wp\/v2\/comments?post=259"}],"version-history":[{"count":9,"href":"https:\/\/melander.dk\/graphics32\/wp-json\/wp\/v2\/pages\/259\/revisions"}],"predecessor-version":[{"id":371,"href":"https:\/\/melander.dk\/graphics32\/wp-json\/wp\/v2\/pages\/259\/revisions\/371"}],"wp:attachment":[{"href":"https:\/\/melander.dk\/graphics32\/wp-json\/wp\/v2\/media?parent=259"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}