reanimate/playground/snippets.js
2020-08-23 12:39:27 +00:00

2 lines
3.6 KiB
JavaScript

const snippets = [{"title": "Hello World","url": "https://reanimate.clozecards.com/LMvAjyzwwRi/30.svg","code": "-- This is the interactive Reanimate Playground\n\n-- Here you can write Haskell code and have it\n-- render directly to your browser.\n\n-- There are more examples available if you click\n-- on the 'collections' icon to the far right\n\nanimation :: Animation\nanimation = docEnv drawBox\n"},{"title": "Composition","url": "https://reanimate.clozecards.com/ECv3cbsbuMV/150.svg","code": "animation :: Animation\nanimation = docEnv $ sceneAnimation $ do\n play $ drawBox `parA` drawCircle\n & label \"parA\"\n play $ drawBox `seqA` drawCircle\n & label \"seqA\"\n play $ drawBox `andThen` drawCircle\n & label \"andThen\"\n\nlabel txt = addStatic $\n withFillOpacity 1 $ withStrokeWidth 0 $\n withFillColor \"black\" $\n translate screenLeft (screenBottom+0.2) $\n latex txt\n"},{"title": "Color Maps","url": "https://reanimate.clozecards.com/Ezuf27J2YrF/60.svg","code": "animation :: Animation\nanimation = docEnv $ sceneAnimation $ do\n play $ staticFrame 1 (showColorMap parula)\n & label \"Parula\"\n play $ staticFrame 1 (showColorMap viridis)\n & label \"Viridis\"\n play $ staticFrame 1 (showColorMap turbo)\n & label \"Turbo\"\n play $ staticFrame 1 (showColorMap greyscale)\n & label \"Greyscale\"\n\nlabel txt = overlay $\n withFillOpacity 1 $ withStrokeWidth 0 $\n withFillColor \"white\" $\n translate screenLeft (screenBottom+0.2) $\n latex txt\n\noverlay svg ani = ani `parA` staticFrame (duration ani) svg\n"},{"title": "Try it live","url": "https://reanimate.clozecards.com/OwjMi4FCJ4Z/90.svg","code": "background = \"lightblue\"\n\nshape :: SVG\nshape = mkCircle 4\n--shape = mkRect 6 6\n--shape = mkLine (screenLeft, screenBottom) (screenRight, screenTop)\n\nanimation :: Animation\nanimation = docEnv $\n addStatic (mkBackground background) $\n playThenReverseA $\n signalA (curveS 2) $\n setDuration 3 $ animate $ \\t ->\n partialSvg t $ pathify shape\n"},{"title": "Basic Objects","url": "https://reanimate.clozecards.com/O0105YfECEH/90.svg","code": "env =\n addStatic (mkBackground \"white\") .\n mapA (withStrokeColor \"black\")\n\nanimation :: Animation\nanimation = env $\n sceneAnimation $ do\n circ <- newObject $ Circle 3\n oModify circ $\n oContext .~ withFillColor \"pink\"\n box <- newObject $ Rectangle 5 5\n oModify box $\n oContext .~ withFillColor \"lightblue\"\n \n oGrow circ 1; wait 1\n oTransform circ box 1; wait 1\n oFadeOut box 1; wait 1\n"},{"title": "LaTeX","url": "https://reanimate.clozecards.com/PXPuugoHzrR/181.svg","code": "env =\n addStatic (mkBackground \"white\") .\n mapA (withStrokeColor \"black\")\n\nanimation :: Animation\nanimation = env $\n sceneAnimation $ do\n drawLatex \"e^{i\\\\pi}+1=0\"\n drawLatex \"\\\\sum_{k=1}^\\\\infty {1 \\\\over k^2} = {\\\\pi^2 \\\\over 6}\"\n drawLatex \"\\\\sum_{k=1}^\\\\infty\"\n wait 1\n\ndrawLatex txt = do\n -- Draw outline\n fork $ do\n play $ animate $ \\t ->\n withFillOpacity 0 $\n partialSvg t svg\n -- Fade outline\n play $ animate $ \\t ->\n withFillOpacity 0 $\n withStrokeWidth (defaultStrokeWidth*(1-t)) $\n svg\n wait 0.7\n -- Fill in letters\n play $ animate $ \\t ->\n withFillOpacity t $ withStrokeWidth 0 $\n svg\n -- Hold static image and then fade out\n play $ staticFrame 2 (withStrokeWidth 0 svg)\n & applyE (overEnding 0.3 fadeOutE)\n where\n svg = scale 2 $ center $ latexAlign txt\n"}];
const playgroundVersion = "2020-08-23 (d4975)";