Gradient example: would it be a) possible to add a variant with colours and b) with transition-effects?

[rubyFeedback]

Hello Andy,

Please do not invest too much time into this issue request.

I just tested:

samples/cairo/gradient.rb

Worked on the first try. \o/ (On my linux box ... one day I shall get gtk to work on windows too, though!)

I have two suggestions to make, the first one being smaller I think:

a) would it be possible to show the same example, but with some light colouring in use, and add it to the example? Ideally perhaps where the user can simply specify a colour in the given .rb file, and have that variant be rendered (I assume this taps into cairo and I think one can use colours via cairo, as the other examples show)

b) is it possible to redraw? For instance, a gradient transition effect from colour A to colour B? like lightblue to darkblue or something like that? If this is too much effort please just disregard.

On a slightly meta-note, I guess that is a use case or rationale for your gem perfect_shape - it is all coming together! :D

[AndyObtiva]

a - Yes, the colors are specified in the pat.add_color_stop_rgba(*) method calls.

For example, if we extract the color1 and color2 variables from them (keeping color2 as white), then you can put anything in color1 and it would produce the same gradient, but with a different color. Below is a green version of the gradient:

require 'glimmer-dsl-gtk'

include Glimmer

window {
  title 'Gradient'
  default_size 256, 256

  drawing_area {
    paint 242.25, 242.25, 242.25

    color1 = [0/255.0,   128/255.0, 0/255.0,   1]
    color2 = [255/255.0, 255/255.0, 255/255.0, 1]

    # Create the Linear Pattern
    rectangle(0, 0, 256, 256) {
      pat = Cairo::LinearPattern.new(0.0, 0.0,  0.0, 256.0)
      pat.add_color_stop_rgba(1, *color1)
      pat.add_color_stop_rgba(0, *color2)

      fill pat
    }

    # Create the radial pattern
    arc(128.0, 128.0, 76.8, 0, 2 * Math::PI) {
      pat = Cairo::RadialPattern.new(115.2, 102.4, 25.6,
                                         102.4,  102.4, 128.0)
      pat.add_color_stop_rgba(0, *color2)
      pat.add_color_stop_rgba(1, *color1)

      fill pat
    }
  }
}.show

b - Yes, it is possible to redraw. You just use the drawing_area.queue_draw method. You can see an example of it in Tetris where a Tetris block drawing_area gets redrawn after the colors of its nested shapes have been modified (just search for queue_draw).

Otherwise, you can certainly use two colors in the gradient by building up on the previous example above. Now, instead of just changing color1, also change color2 to something other than white. I did an example below using lightblue and darkblue just as you inquired:

require 'glimmer-dsl-gtk'

include Glimmer

window {
  title 'Gradient'
  default_size 256, 256

  drawing_area {
    paint 242.25, 242.25, 242.25

    color1 = [200/255.0, 200/255.0, 255/255.0, 1]
    color2 = [0/255.0, 0/255.0, 255/255.0, 1]

    # Create the Linear Pattern
    rectangle(0, 0, 256, 256) {
      pat = Cairo::LinearPattern.new(0.0, 0.0,  0.0, 256.0)
      pat.add_color_stop_rgba(1, *color1)
      pat.add_color_stop_rgba(0, *color2)

      fill pat
    }

    # Create the radial pattern
    arc(128.0, 128.0, 76.8, 0, 2 * Math::PI) {
      pat = Cairo::RadialPattern.new(115.2, 102.4, 25.6,
                                         102.4,  102.4, 128.0)
      pat.add_color_stop_rgba(0, *color1)
      pat.add_color_stop_rgba(1, *color2)

      fill pat
    }
  }
}.show

I believe I addressed both your questions sufficiently enough to close this issue. Let me know if you have any more questions even if this was closed or open another issue. Cheers!