diff --git a/docs/glue_tut.md b/docs/glue_tut.md index 3a6430b..7c35965 100644 --- a/docs/glue_tut.md +++ b/docs/glue_tut.md @@ -15,9 +15,7 @@ SVG features, as demonstrated in the below animation: * Drawing primitives: Circles, rectangles, lines, external images, paths, text. * Drawing attributes: Rotation, position, color, line-width. - * Filter effects: Blur and blob. - -TODO: Add advanced SVG features: blurs, blobs, etc. + * Filter effects: Blur and blob (merging shapes).
Toggle source code. diff --git a/examples/tut_glue_svg.hs b/examples/tut_glue_svg.hs index 7fba7bc..1179def 100755 --- a/examples/tut_glue_svg.hs +++ b/examples/tut_glue_svg.hs @@ -8,6 +8,9 @@ import Reanimate import Reanimate.Builtin.Images import Reanimate.Effect import Reanimate.Scene +import Graphics.SvgTree hiding (Text) +import Control.Lens +import Codec.Picture bgColor :: String bgColor = "white" @@ -20,9 +23,9 @@ transitionTime = 0.5 main :: IO () main = reanimate $ bg `parA` transitions fadeInE fadeOutE transitionTime - [comp1, comp2, comp3, comp4, comp5, setDuration transitionTime comp1] + [comp1, comp2, comp3, comp4, comp5, comp6, comp7, setDuration transitionTime comp1] where - bg = animate $ const $ mkBackground bgColor + bg = animate $ const $ mkBackgroundPixel $ PixelRGBA8 252 252 252 0xFF -- bgColor comp1 = svgComponent "Circles" (mkCircle 2) comp2 = svgComponent "Rects" (mkRect 4 3) comp3 = svgComponent "Lines" (mkLine (-2,0) (2,0)) @@ -31,6 +34,8 @@ main = reanimate $ bg `parA` transitions fadeInE fadeOutE transitionTime withFillOpacity 0 $ scale 8 $ withStrokeWidth (defaultStrokeWidth*0.3) $ center $ latex "$\\pi$" + comp6 = svgComponent "Blurs" mkBlur + comp7 = svgComponent "Blobs" mkBlob svgComponent :: Text -> SVG -> Animation svgComponent txt svg = mkAnimation framePause $ const $ @@ -41,3 +46,60 @@ svgComponent txt svg = mkAnimation framePause $ const $ , translate 0 3 $ withFillColor "black" $ scale 2 $ center $ latex txt ] + +mkBlur :: SVG +mkBlur = mkGroup + [ FilterTree $ mkFilter "blur" + [FEGaussianBlur $ defaultSvg + & gaussianBlurStdDeviationX .~ Num dev + & filterResult .~ Just "blur" + ] & filterWidth .~ pure (Percent 3) + & filterX .~ pure (Percent (-1)) + & filterHeight .~ pure (Percent 3) + & filterY .~ pure (Percent (-1)) + , circ + & filterRef .~ pure (Ref "blur") + ] + where + sharpness = 10 :: Integer + dev = 0.2 + radius = 2 + circ = mkCircle radius + +mkBlob :: SVG +mkBlob = + mkGroup + [ FilterTree $ mkFilter "goo" + [FEGaussianBlur $ defaultSvg + & gaussianBlurStdDeviationX .~ Num dev + & filterResult .~ Just "blur" + ,FEColorMatrix $ defaultSvg + & colorMatrixType .~ Matrix + & colorMatrixValues .~ "1 0 0 0 0 \ + \0 1 0 0 0 \ + \0 0 1 0 0 \ + \0 0 0 " ++ show (sharpness*2) ++ " -" ++ show sharpness + & filterResult .~ pure "goo" + ,FEComposite $ defaultSvg + & compositeIn .~ pure SourceGraphic + & compositeIn2 .~ pure (SourceRef "goo") + & compositeOperator .~ CompositeAtop + ] & filterWidth .~ pure (Percent 3) + & filterX .~ pure (Percent (-1)) + & filterHeight .~ pure (Percent 3) + & filterY .~ pure (Percent (-1)) + , withStrokeWidth 0 $ withFillColor "red" $ mkGroup + [ translate (0.9*(-radius)) 0 circ + , translate (0.9*radius) 0 circ + ] & filterRef .~ pure (Ref "goo") + ] + where + sharpness = 10 :: Integer + dev = 0.2 + radius = 2 + circ = mkCircle radius + + +mkFilter :: String -> [FilterElement] -> Filter +mkFilter ident fe = defaultSvg & filterChildren .~ fe & attrId .~ Just ident +