New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Documenting images effects : blur, shadow, glow #83

Closed
passenger94 opened this Issue Mar 11, 2015 · 13 comments

Comments

Projects
None yet
3 participants
@passenger94
Contributor

passenger94 commented Mar 11, 2015

No description provided.

@passenger94

This comment has been minimized.

Show comment
Hide comment
@passenger94

passenger94 Mar 11, 2015

Contributor

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 ?

Contributor

passenger94 commented Mar 11, 2015

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

This comment has been minimized.

Show comment
Hide comment
@ccoupe

ccoupe Mar 11, 2015

Contributor

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.

Contributor

ccoupe commented Mar 11, 2015

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

This comment has been minimized.

Show comment
Hide comment
@passenger94

passenger94 Mar 11, 2015

Contributor

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

Contributor

passenger94 commented Mar 11, 2015

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 ccoupe added Normal and removed Enhancement labels Mar 12, 2015

@ccoupe

This comment has been minimized.

Show comment
Hide comment
@ccoupe

ccoupe Mar 12, 2015

Contributor

@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.

Contributor

ccoupe commented Mar 12, 2015

@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

This comment has been minimized.

Show comment
Hide comment
@passenger94

passenger94 Mar 12, 2015

Contributor

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

Contributor

passenger94 commented Mar 12, 2015

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 passenger94 self-assigned this Mar 12, 2015

@passenger94

This comment has been minimized.

Show comment
Hide comment
@passenger94

passenger94 Mar 12, 2015

Contributor

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

shadow5

but if shadow is before glow
shadow6

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

Contributor

passenger94 commented Mar 12, 2015

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

shadow5

but if shadow is before glow
shadow6

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

@BackOrder

This comment has been minimized.

Show comment
Hide comment
@BackOrder

BackOrder Mar 13, 2015

Collaborator

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!

Collaborator

BackOrder commented Mar 13, 2015

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

This comment has been minimized.

Show comment
Hide comment
@ccoupe

ccoupe Mar 13, 2015

Contributor

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

Contributor

ccoupe commented Mar 13, 2015

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

@passenger94

This comment has been minimized.

Show comment
Hide comment
@passenger94

passenger94 Mar 13, 2015

Contributor
== 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''').

imageeffect

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 !

Contributor

passenger94 commented Mar 13, 2015

== 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''').

imageeffect

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

This comment has been minimized.

Show comment
Hide comment
@passenger94

passenger94 Mar 13, 2015

Contributor

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

imageeffects2

Contributor

passenger94 commented Mar 13, 2015

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

imageeffects2

@passenger94

This comment has been minimized.

Show comment
Hide comment
@passenger94

passenger94 Mar 13, 2015

Contributor

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 ?

Contributor

passenger94 commented Mar 13, 2015

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

This comment has been minimized.

Show comment
Hide comment
@passenger94

passenger94 Mar 13, 2015

Contributor

as a new chapter inside Image Element, probably better !

imageeffectb

Contributor

passenger94 commented Mar 13, 2015

as a new chapter inside Image Element, probably better !

imageeffectb

@ccoupe

This comment has been minimized.

Show comment
Hide comment
@ccoupe

ccoupe Mar 14, 2015

Contributor

@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.

Contributor

ccoupe commented Mar 14, 2015

@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.

@ccoupe ccoupe added this to the 3.2.22 milestone Mar 26, 2015

@ccoupe ccoupe closed this Mar 27, 2015

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment