Documenting images effects : blur, shadow, glow

[passenger94]

No description provided.

[passenger94]

Should we create a new paragraph specially for image effects at the end of the Image page or keep the dictionary layout of that part of the manual and add blur, shadow, glow methods ?

[ccoupe]

I'd be tempted to do a special paragraph or two at the end with some simple examples ' run this' That shadow example is great. @passenger94 , thanks for working this unknown area of Shoes.

[passenger94]

thanks to you !!! @ccoupe :-))
we might mention the transparency option by means of :fill => rgb(red,green,blue, alpha) for the shadow and glow effects

[ccoupe]

@passenger94 - are you going to do the manual changes? If so please assign yourself. I'm not up to speed on any of these transforms or what one parameter setting means vs another. The only doc is samples/simple-spere.rb and I don't understand what it does either.

I will say I'm very happy this old half working code _why left us with is back to working. It makes me very happy to see Shoes come alive again with help from you and @backorder, Shoes is not only back, it's better than ever.

[passenger94]

Please, you are enjoying all the goodness your efforts summoned !!!

I'll try to get a working draft, but again English is not my mother tongue, i will need your help

[passenger94]

when combining several effects, order is important

Shoes.app :width => 350, :height => 200, :resizable => true do
    image :top => 20, :left => 20 do
        fill "#127"
        nostroke
        oval 80, 40, 200, 50
        blur 3
        glow 10, inner: true, fill: rgb(0.8, 0.4, 0, 0.9)
        glow 10, fill: rgb(0.8, 0.4, 0, 0.9)
        shadow radius: 20, fill: rgb(0, 0, 0, 0.75), displace_left: -20, displace_top: 30
    end
end

but if shadow is before glow

i think it as to do with Cairo's compositing operators : http://cairographics.org/operators/ used for glow and shadow (CAIRO_OPERATOR_IN, CAIRO_OPERATOR_DEST_OVER, CAIRO_OPERATOR_OUT, CAIRO_OPERATOR_ATOP)

if shadow is last everything works on all variations i've tested so far

[IanTrudel]

Thanks, @ccoupe. I also share your feelings. We are all pulling our weight and the results are showing in Shoes. @passenger94 you are doing a great job — fixing problems, code samples, screenshots, documentation. Keep it up guys!

[ccoupe]

@passenger94 , once we know what you want to say we can fix any problems with how it's said.

[passenger94]

== Image-Effects on image blocks ==

You already know how to combine shapes into an image block (See [[Rules]] >> Image and Shape Blocks), using the same technique you can add some effects to those image blocks, namely : blur, shadow and glow, with the help of corresponding methods.
Just wrap a shape or an image into an image block and add effects inside the block - effects apply to your inside images or shapes - 

{{{
#!ruby
Shoes.app :width => 400, :height => 450, :resizable => true do
    image :top => 20, :left => 20 do
        fill "#127"
        nostroke
        oval 80, 40, 200, 50
        blur 3
        glow 10, fill: rgb(0.8, 0.4, 0, 0.9)
        glow 10, inner: true, fill: rgb(0.8, 0.4, 0, 0.9)
        shadow radius: 20, fill: rgb(0, 0, 0, 0.75), displace_left: -20, displace_top: 30
    end

    image :width => 700, :height => 500, :top => 180, :left => 20 do
        image "./static/app-icon.png", :top => 40, :left => 60
        glow 10, inner: true, fill: yellow
        shadow radius: 10, fill: rgb(0, 0, 0, 0.75), displace_left: -10, displace_top: 10
    end
end
}}}

Pay attention to some rules :

 * Effects are using the alpha channel of your image if any.
 * Shadow effect must be the last one applied to be predictable.
 * For effects to work correctly you can mix shapes with shapes and images with images but not shapes with images !
 * If you experience some artifacts or glitches, that's certainly because your effect doesn't have enough "room" to work correctly ! Try to make your image block bigger and/or move your inside shape/image towards the center of the image block (the idea is to make room for your effect to expand nicely), ultimately you can also decrease the "strength" of the effect (meaning decrease the radius attribute value).

=== blur(radius: a number)  ===
Blurs the image or shape by `radius` amount.

=== glow(radius: a number, :inner  false or true)  ===
Adds a glow to your image or shape, either outer glow (default) or inner glow (set optional `:inner` style to true), amount of glow is set by `radius` attribute.

Note that you can control the color of the effect with the `:fill` style and the transparency of the effect with the alpha component of the color, ie : rgb(red, green, blue, '''alpha''').

=== shadow(distance: a number, radius: a number)  ===
Adds a shadow to your image or shape, `distance` sets the placement of the shadow along a line going from top-left corner to bottom-right corner, the biggest the attribute the more distant the shadow, blurriness of the shadow is controlled by the `radius` attribute.

If you need more precise placement, the method offers two styles for that : `:displace_left` and `:displace_top`, if used they take precedence over the `distance` attribute.

Note that you can control the color of the effect with the `:fill` style and the transparency of the effect with the alpha component of the color, ie : rgb(red, green, blue, '''alpha''').

Added a new page "Image-Effects on image blocks" just after Image Element, so link in left side index is Image-Effects

adding a pull request with needed changes to effects.c for example to work !

[passenger94]

i can add this example too if needed (shows effects in action with multiple shapes/images)

Shoes.app :width => 400, :height => 450, :resizable => true do
    image :top => 20, :left => 20 do
        fill "#127"
        nostroke
        oval 80, 40, 200, 50
        rect 90, 60, 100, 50
        blur 3
        glow 10, fill: rgb(0.8, 0.4, 0, 0.9)
        glow 10, inner: true, fill: rgb(0.8, 0.4, 0, 0.9)
        shadow radius: 20, fill: rgb(0, 0, 0, 0.75), displace_left: -20, displace_top: 30
    end

    image :width => 700, :height => 500, :top => 180, :left => 20 do
        image "./static/app-icon.png", :top => 40, :left => 60
        image "./static/app-icon.png", :top => 60, :left => 80
        #blur 10
        glow 10, inner: true, fill: yellow
        shadow radius: 10, fill: rgb(0, 0, 0, 0.75), displace_left: -20, displace_top: 30
    end
end

[passenger94]

ooops
removing "effects apply to your inside images or shapes"! Not relevant !!, sorry
also removing all occurrences of "image or shape" in methods description

humm
blur effect acts as a whole on the image block, but glow and shadow are working on the combined shapes/images inside the image block then blended into the image block (eventually blurred afterwards, if asked)

what's the more clear/concise way to express that ?

[passenger94]

as a new chapter inside Image Element, probably better !

[ccoupe]

@passenger94 - your English quite good - don't apologize. I might change a word or two to be more colloquial someday - when I have nothing to do.