Search code examples
cairoawesome-wm

Awesome WM: how does radial gradient work

Trying to make vignette-like gradient - from center of the screen to sides, from semi-transparent to black using radial pattern gradient.
Having widget of size of the screen with following bg:

bg = 'radial:960,540,10:0,0,10:0,#ff000000:0.5,#00ff0088:1,#0000ffff'

cannot figure out what are the "start/stop point of the pattern" and "the radii of the start / stop circle", which is basically :0,0,10: section from above string.

Solution

  • AwesomeWM is just "giving out" cairo's patterns here. From a quick look, I only found https://www.cairographics.org/tutorial/#L2preparesource and the API reference in https://www.cairographics.org/manual/cairo-cairo-pattern-t.html#cairo-pattern-create-radial and https://www.cairographics.org/manual/cairo-cairo-pattern-t.html#cairo-pattern-add-color-stop-rgb.

    'radial:960,540,10:0,0,10:0,#ff000000:0.5,#00ff0088:1,#0000ffff'

    This radial pattern is defined based on two circles. The first one has center 960, 540 and a radius of 10. The second circle has a center of 0, 0 and a radius of 10. These two circles can be assigned colors. 0#ff00000000 assigns a color at "relative position" 0, i.e. it assigns a color that should be used exactly where the first cycle is. The last color has a relative position of 1, meaning that the provided color is used for the second circle. The middle color has a relative position of 0.5, meaning it is used "half way" between the two circles.

    To make the above a bit easier to understand, here is a Lua program (with some comments) that produces the following image. The two circles are also drawn in black to make it more obvious where they are. Hopefully, this makes it clear how the color is interpolated between the two.

    pattern example

    local cairo = require("lgi").cairo
local img = cairo.ImageSurface.create(cairo.Format.RGB24, 200, 200)

local pattern = cairo.Pattern.create_radial(
    100, 100, 10, -- First cycle, center is center of the image, radius is 10
    150, 150, 120) -- Second cycle, it is offset a bit and it has a radius of 100

-- Now add some color stops
pattern:add_color_stop_rgb(0, -- "relative position 0", i.e. at the first circle
                           1, 0, 0) -- We assign the color 'red'
pattern:add_color_stop_rgb(1, -- "relative position 1", i.e. at the second circle
                           0, 0, 1) -- We assign the color 'blue'
pattern:add_color_stop_rgb(0.5, -- "relative position 0.5", i.e. 'in the middle' between both circles
                           0, 1, 0) -- We assign the color 'green'

-- Draw the pattern to the image surface
local cr = cairo.Context(img)
cr:set_source(pattern)
cr:paint()

-- Also draw the two circles in black to make it (hopefully) clearer what is
-- going on
cr:arc(100, 100, 10, 0, 2*math.pi)
cr:new_sub_path()
cr:arc(150, 150, 120, 0, 2*math.pi)

cr:set_source_rgb(0, 0, 0)
cr:stroke()

img:write_to_png("gradient.png")