hashirama/reanimate
Watch
1
0
Fork
You've already forked reanimate
 0
mirror of https://github.com/reanimate/reanimate.git synced 2026-09-10 23:52:22 +00:00
Code Issues Projects Releases Wiki Activity

Doc update.

Browse source 
Former-commit-id: 0ac513acaa1b81360df1acadf18cc5e07307a109
This commit is contained in:
David Himmelstrup 2019-12-02 16:27:46 +08:00
commit 34c516da7d
2 changed files with 65 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

4
docs/glue_tut.md
View file

@ -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).
<details>
<summary>Toggle source code.</summary>

66
examples/tut_glue_svg.hs
View file

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