From fe1a2e9ee907bddb37ecc822fda91839880b1f45 Mon Sep 17 00:00:00 2001
From: David Himmelstrup <lemmih@gmail.com>
Date: Mon, 15 Jun 2020 14:23:35 +0800
Subject: [PATCH] Move glue tutorial to imgur.

Former-commit-id: c67a532677c00d7ce65727abc2898db5448d2a96
---
 docs/glue_tut.md                  | 51 ++++++++++++-------------------
 examples/tut_glue_blender.hs      | 23 +++++++-------
 examples/tut_glue_keyframe.hs     |  2 +-
 examples/tut_glue_povray_ortho.hs | 10 +++---
 examples/tut_glue_svg.hs          |  2 +-
 5 files changed, 38 insertions(+), 50 deletions(-)

diff --git a/docs/glue_tut.md b/docs/glue_tut.md
index c8382d9..a166391 100644
--- a/docs/glue_tut.md
+++ b/docs/glue_tut.md
@@ -24,9 +24,8 @@ SVG features, as demonstrated in the below animation:
   </code></pre>
 </details>
 <br/>
-<video width="640" height="360" muted autoplay loop>
-  <source src="../rendered/tut_glue_svg.mp4">
-  <source src="https://github.com/Lemmih/reanimate/raw/master/docs/rendered/tut_glue_svg.mp4">
+<video style="width:100%" muted autoplay loop>
+  <source src="https://i.imgur.com/KjLoVZf.mp4">
 </video>
 
 ## Animation = Time ➞ SVG
@@ -40,9 +39,8 @@ Animations can be defined as SVG images over time (plus a bit of bookkeeping suc
   </code></pre>
 </details>
 <br/>
-<video width="640" height="360" muted autoplay loop>
-  <source src="../rendered/tut_glue_animate.mp4">
-  <source src="https://github.com/Lemmih/reanimate/raw/master/docs/rendered/tut_glue_animate.mp4">
+<video style="width:100%" muted autoplay loop>
+  <source src="https://i.imgur.com/qVNDt43.mp4">
 </video>
 
 Reanimate is not an opinionated framework, though, and also offers a more traditional keyframing tools. The example below uses an imperative API to schedule the various sub animations, transitions, and effects.
@@ -54,12 +52,10 @@ Reanimate is not an opinionated framework, though, and also offers a more tradit
   </code></pre>
 </details>
 <br/>
-<video width="640" height="360" muted autoplay loop>
-  <source src="../rendered/tut_glue_keyframe.mp4">
-  <source src="https://github.com/Lemmih/reanimate/raw/master/docs/rendered/tut_glue_keyframe.mp4">
+<video style="width:100%" muted autoplay loop>
+  <source src="https://i.imgur.com/jdEtt4b.mp4">
 </video>
 
-
 ## Pillar I: Haskell
 
 A large part of Reanimate's expressive power comes from using Haskell as the scripting language. Haskell tends to favor expressiveness and correctness over raw performance and that is exactly what is needed from a glue language. All the heavy-lifting of rendering frames and encoding videos is handled by external tools and Reanimate merely needs to concern itself with finding intuitive ways of describing animations.
@@ -77,9 +73,8 @@ The following examples shows how something as seemingly complicated as fourier s
   </code></pre>
 </details>
 <br/>
-<video width="640" height="360" muted autoplay loop>
-  <source src="../rendered/tut_glue_fourier.mp4">
-  <source src="https://github.com/Lemmih/reanimate/raw/master/docs/rendered/tut_glue_fourier.mp4">
+<video style="width:100%" muted autoplay loop>
+  <source src="https://i.imgur.com/lvVhMXn.mp4">
 </video>
 
 Scripting in Haskell also gives access to the extensive body of code libraries. There are Haskell libraries for syntax highlighting, font manipulation, and much, much more. In the spirit of being a batteries-included framework, Reanimate ships with a built-in 2D physics library, called [Chipmunk2D](https://chipmunk-physics.net/). The example below demonstrates how SVG shapes can be used nearly effortlessly in a physics simulation.
@@ -91,9 +86,8 @@ Scripting in Haskell also gives access to the extensive body of code libraries.
   </code></pre>
 </details>
 <br/>
-<video width="640" height="360" muted autoplay loop>
-  <source src="../rendered/tut_glue_physics.mp4">
-  <source src="https://github.com/Lemmih/reanimate/raw/master/docs/rendered/tut_glue_physics.mp4">
+<video style="width:100%" muted autoplay loop>
+  <source src="https://i.imgur.com/S6xfCl9.mp4">
 </video>
 
 
@@ -113,9 +107,8 @@ The resulting SVGs can be manipulated just like any other. The below examples il
   </code></pre>
 </details>
 <br/>
-<video width="640" height="360" muted autoplay loop>
-  <source src="../rendered/tut_glue_latex.mp4">
-  <source src="https://github.com/Lemmih/reanimate/raw/master/docs/rendered/tut_glue_latex.mp4">
+<video style="width:100%" muted autoplay loop>
+  <source src="https://i.imgur.com/uZns44f.mp4">
 </video>
 
 ## Pillar III: povray
@@ -129,9 +122,8 @@ Although incredibly expressive, SVGs are strictly limited to 2D graphics. This l
   </code></pre>
 </details>
 <br/>
-<video width="640" height="360" muted autoplay loop>
-  <source src="../rendered/tut_glue_povray.mp4">
-  <source src="https://github.com/Lemmih/reanimate/raw/master/docs/rendered/tut_glue_povray.mp4">
+<video style="width:100%" muted autoplay loop>
+  <source src="https://i.imgur.com/7nty7c5.mp4">
 </video>
 
 
@@ -144,9 +136,8 @@ The video above uses a perspective camera, ie. objects further away appears to b
   </code></pre>
 </details>
 <br/>
-<video width="640" height="360" muted autoplay loop>
-  <source src="../rendered/tut_glue_povray_ortho.mp4">
-  <source src="https://github.com/Lemmih/reanimate/raw/master/docs/rendered/tut_glue_povray_ortho.mp4">
+<video style="width:100%" muted autoplay loop>
+  <source src="https://i.imgur.com/uTrsxvm.mp4">
 </video>
 
 
@@ -163,9 +154,8 @@ The example below uses built-in modifiers to bend a plane into a sphere and is r
   </code></pre>
 </details>
 <br/>
-<video width="640" height="360" muted autoplay loop>
-  <source src="../rendered/tut_glue_blender.mp4">
-  <source src="https://github.com/Lemmih/reanimate/raw/master/docs/rendered/tut_glue_blender.mp4">
+<video style="width:100%" muted autoplay loop>
+  <source src="https://i.imgur.com/i1xtZgl.mp4">
 </video>
 
 ## Pillar V: potrace
@@ -179,7 +169,6 @@ The example below uses built-in modifiers to bend a plane into a sphere and is r
   </code></pre>
 </details>
 <br/>
-<video width="640" height="360" muted autoplay loop>
-  <source src="../rendered/tut_glue_potrace.mp4">
-  <source src="https://github.com/Lemmih/reanimate/raw/master/docs/rendered/tut_glue_potrace.mp4">
+<video style="width:100%" muted autoplay loop>
+  <source src="https://i.imgur.com/6C3pMvc.mp4">
 </video>
diff --git a/examples/tut_glue_blender.hs b/examples/tut_glue_blender.hs
index aaf09c8..dacf9bb 100755
--- a/examples/tut_glue_blender.hs
+++ b/examples/tut_glue_blender.hs
@@ -1,5 +1,5 @@
 #!/usr/bin/env stack
--- stack runghc --package reanimate
+-- stack runghc --package reanimate --package here
 {-# LANGUAGE OverloadedStrings #-}
 {-# LANGUAGE QuasiQuotes       #-}
 {-# LANGUAGE ApplicativeDo     #-}
@@ -25,7 +25,7 @@ main = seq texture $ reanimate $ pauseAtEnd 1 $ parA bg $ sceneAnimation $ do
     trans <- newVar 0
     rotX <- newVar 0
     rotY <- newVar 0
-    _ <- newSprite $ do
+    newSprite_ $ do
       getBend <- unVar bend
       getTrans <- unVar trans
       getRotX <- unVar rotX
@@ -35,17 +35,16 @@ main = seq texture $ reanimate $ pauseAtEnd 1 $ parA bg $ sceneAnimation $ do
       return $ seq (texture (t/dur)) $
         blender (script (texture (t/dur)) getBend getTrans getRotX getRotY)
     wait 2
-    tweenVar trans 5 (\t v -> fromToS v (-2) $ curveS 2 t)
-    tweenVar bend 5 (\t v -> fromToS v 1 $ curveS 2 t)
-    tweenVar rotY 15 (\t v -> fromToS v (pi*2*2) $ curveS 2 t)
+    fork $ tweenVar trans 5 $ \v -> fromToS v (-2) .  curveS 2
+    fork $ tweenVar bend 5 $ \v -> fromToS v 1 . curveS 2
+    fork $ tweenVar rotY 15 $ \v -> fromToS v (pi*2*2) . curveS 2
     fork $ do
-      tweenVar rotX 5 (\t v -> fromToS v (-pi/5) $ curveS 2 t)
-      wait 5
-      tweenVar rotX 5 (\t v -> fromToS v (pi/5) $ curveS 2 t)
+      tweenVar rotX 5 $ \v -> fromToS v (-pi/5) . curveS 2
+      tweenVar rotX 5 $ \v -> fromToS v (pi/5) . curveS 2
     wait (15-5)
-    tweenVar bend 5 (\t v -> fromToS v 0 $ curveS 2 t)
-    tweenVar rotX 5 (\t v -> fromToS v 0 $ curveS 2 t)
-    tweenVar trans 5 (\t v -> fromToS v 0 $ curveS 2 t)
+    fork $ tweenVar bend 5 $ \v -> fromToS v 0 . curveS 2
+    fork $ tweenVar rotX 5 $ \v -> fromToS v 0 . curveS 2
+    fork $ tweenVar trans 5 $ \v -> fromToS v 0 . curveS 2
     wait 4
     -- tweenVar trans 1 (\t v -> fromToS v 0 $ curveS 2 t)
     wait 1
@@ -180,7 +179,7 @@ latexExample = sceneAnimation $ do
     -- Draw equation
     play $ drawAnimation strokedSvg
     sprites <- forM glyphs $ \(fn, _, elt) ->
-      newSpriteA $ animate $ const $ fn elt
+      newSpriteSVG $ fn elt
     -- Yoink each glyph
     forM_ (reverse sprites) $ \sprite -> do
       spriteE sprite (overBeginning 1 $ aroundCenterE $ highlightE)
diff --git a/examples/tut_glue_keyframe.hs b/examples/tut_glue_keyframe.hs
index a2f9215..5612573 100755
--- a/examples/tut_glue_keyframe.hs
+++ b/examples/tut_glue_keyframe.hs
@@ -51,7 +51,7 @@ mainScene = sceneAnimation $ mdo
     svgCAF = center $ latex "\\LaTeX"
     getNth n = snd (splitGlyphs [n] svgCAF)
     svgs = [
-        withStrokeWidth 0.01 $
+        withStrokeWidth defaultStrokeWidth $
         scale 2 $
         translate 0 (tickLength*2) $
         withStrokeColor "black" $
diff --git a/examples/tut_glue_povray_ortho.hs b/examples/tut_glue_povray_ortho.hs
index 48eb0f7..bfa1abb 100755
--- a/examples/tut_glue_povray_ortho.hs
+++ b/examples/tut_glue_povray_ortho.hs
@@ -25,7 +25,7 @@ main = reanimate $ parA bg $ sceneAnimation $ do
     xRot <- newVar (-30)
     yRot <- newVar 180
     zRot <- newVar 0
-    _ <- newSprite $ do
+    newSprite_ $ do
       getX <- unVar xRot
       getY <- unVar yRot
       getZ <- unVar zRot
@@ -36,11 +36,11 @@ main = reanimate $ parA bg $ sceneAnimation $ do
         script (svgAsPngFile (texture (t/dur))) getX getY getZ
     wait 2
     let tDuration = 10
-    tweenVar yRot tDuration (\t v -> fromToS v (v+180) $ curveS 2 (t/tDuration))
-    tweenVar xRot (tDuration/2) (\t v -> fromToS v (v+60) $ curveS 2 (t/(tDuration/2)))
+    fork $ tweenVar yRot tDuration $ \v -> fromToS v (v+180) . curveS 2
+    fork $ tweenVar xRot (tDuration/2) $ \v -> fromToS v (v+60) . curveS 2
     fork $ do
       wait (tDuration/2)
-      tweenVar xRot (tDuration/2) (\t v -> fromToS v (v-60) $ curveS 2 (t/(tDuration/2)))
+      tweenVar xRot (tDuration/2) $ \v -> fromToS v (v-60) . curveS 2
     wait tDuration
     wait 2
   where
@@ -128,7 +128,7 @@ latexExample = sceneAnimation $ do
     -- Draw equation
     play $ drawAnimation strokedSvg
     sprites <- forM glyphs $ \(fn, _, elt) ->
-      newSpriteA $ animate $ const $ fn elt
+      newSpriteSVG $ fn elt
     -- Yoink each glyph
     forM_ (reverse sprites) $ \sprite -> do
       spriteE sprite (overBeginning 1 $ aroundCenterE $ highlightE)
diff --git a/examples/tut_glue_svg.hs b/examples/tut_glue_svg.hs
index 7103397..7fe55a3 100755
--- a/examples/tut_glue_svg.hs
+++ b/examples/tut_glue_svg.hs
@@ -32,7 +32,7 @@ main = reanimate $ bg `parA` chainT (overlapT transitionTime fadeT)
     comp4 = svgComponent "Images" (scale 0.5 svgLogo)
     comp5 = svgComponent "Paths" $
       withFillOpacity 0 $
-      scale 8 $ withStrokeWidth (defaultStrokeWidth*0.3) $
+      scale 8 $ withStrokeWidth defaultStrokeWidth $
       center $ latex "$\\pi$"
     comp6 = svgComponent "Blurs" mkBlur
     comp7 = svgComponent "Blobs" mkBlob