Default to imgur instead of B2.

.gitignore

@@ -1 +1,2 @@
 .stack-work
+.b2

docs/glue_tut.md

@@ -24,8 +24,9 @@ SVG features, as demonstrated in the below animation:
   </code></pre>
 </details>
 <br/>
-<video style="width:100%" muted autoplay loop>
+<video style="width:100%;max-width:640px" muted autoplay loop>
   <source src="https://i.imgur.com/KjLoVZf.mp4">
+  <source src="https://f002.backblazeb2.com/file/reanimate/tut_glue_svg.mp4">
 </video>
 
 ## Animation = Time ➞ SVG
@@ -39,8 +40,9 @@ Animations can be defined as SVG images over time (plus a bit of bookkeeping suc
   </code></pre>
 </details>
 <br/>
-<video style="width:100%" muted autoplay loop>
+<video style="width:100%;max-width:640px" muted autoplay loop>
   <source src="https://i.imgur.com/qVNDt43.mp4">
+  <source src="https://f002.backblazeb2.com/file/reanimate/tut_glue_animate.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.
@@ -52,8 +54,9 @@ Reanimate is not an opinionated framework, though, and also offers a more tradit
   </code></pre>
 </details>
 <br/>
-<video style="width:100%" muted autoplay loop>
+<video style="width:100%;max-width:640px" muted autoplay loop>
   <source src="https://i.imgur.com/jdEtt4b.mp4">
+  <source src="https://f002.backblazeb2.com/file/reanimate/tut_glue_keyframe.mp4">
 </video>
 
 ## Pillar I: Haskell
@@ -73,8 +76,9 @@ The following examples shows how something as seemingly complicated as fourier s
   </code></pre>
 </details>
 <br/>
-<video style="width:100%" muted autoplay loop>
+<video style="width:100%;max-width:640px" muted autoplay loop>
   <source src="https://i.imgur.com/lvVhMXn.mp4">
+  <source src="https://f002.backblazeb2.com/file/reanimate/tut_glue_fourier.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.
@@ -86,8 +90,9 @@ Scripting in Haskell also gives access to the extensive body of code libraries.
   </code></pre>
 </details>
 <br/>
-<video style="width:100%" muted autoplay loop>
+<video style="width:100%;max-width:640px" muted autoplay loop>
   <source src="https://i.imgur.com/S6xfCl9.mp4">
+  <source src="https://f002.backblazeb2.com/file/reanimate/tut_glue_physics.mp4">
 </video>
 
 
@@ -107,8 +112,9 @@ The resulting SVGs can be manipulated just like any other. The below examples il
   </code></pre>
 </details>
 <br/>
-<video style="width:100%" muted autoplay loop>
+<video style="width:100%;max-width:640px" muted autoplay loop>
   <source src="https://i.imgur.com/uZns44f.mp4">
+  <source src="https://f002.backblazeb2.com/file/reanimate/tut_glue_latex.mp4">
 </video>
 
 ## Pillar III: povray
@@ -122,8 +128,9 @@ Although incredibly expressive, SVGs are strictly limited to 2D graphics. This l
   </code></pre>
 </details>
 <br/>
-<video style="width:100%" muted autoplay loop>
+<video style="width:100%;max-width:640px" muted autoplay loop>
   <source src="https://i.imgur.com/7nty7c5.mp4">
+  <source src="https://f002.backblazeb2.com/file/reanimate/tut_glue_povray.mp4">
 </video>
 
 
@@ -136,8 +143,9 @@ The video above uses a perspective camera, ie. objects further away appears to b
   </code></pre>
 </details>
 <br/>
-<video style="width:100%" muted autoplay loop>
+<video style="width:100%;max-width:640px" muted autoplay loop>
   <source src="https://i.imgur.com/uTrsxvm.mp4">
+  <source src="https://f002.backblazeb2.com/file/reanimate/tut_glue_povray_ortho.mp4">
 </video>
 
 
@@ -154,8 +162,9 @@ The example below uses built-in modifiers to bend a plane into a sphere and is r
   </code></pre>
 </details>
 <br/>
-<video style="width:100%" muted autoplay loop>
+<video style="width:100%;max-width:640px" muted autoplay loop>
   <source src="https://i.imgur.com/i1xtZgl.mp4">
+  <source src="https://f002.backblazeb2.com/file/reanimate/tut_glue_blender.mp4">
 </video>
 
 ## Pillar V: potrace
@@ -169,6 +178,7 @@ The example below uses built-in modifiers to bend a plane into a sphere and is r
   </code></pre>
 </details>
 <br/>
-<video style="width:100%" muted autoplay loop>
+<video style="width:100%;max-width:640px" muted autoplay loop>
   <source src="https://i.imgur.com/6C3pMvc.mp4">
+  <source src="https://f002.backblazeb2.com/file/reanimate/tut_glue_potrace.mp4">
 </video>

docs/sync_b2.sh

@@ -0,0 +1,36 @@
+#!/usr/bin/env bash
+ROOT=`stack path --project-root`
+
+RENDER_OPTIONS='--compile --fps 60 --width 640'
+ANIMATIONS='tut_glue_svg
+  tut_glue_latex
+  tut_glue_animate
+  tut_glue_keyframe
+  tut_glue_blender
+  tut_glue_fourier
+  tut_glue_physics
+  tut_glue_potrace
+  tut_glue_povray
+  tut_glue_povray_ortho'
+
+B2_DIR=$ROOT/.b2
+B2_LISTING=$B2_DIR/directory.json
+mkdir --parents $B2_DIR
+
+b2 ls --json --long reanimate > $B2_LISTING
+cd $ROOT/examples/
+for BASE in $ANIMATIONS; do
+  SRC=$ROOT/examples/$BASE.hs
+  DST=$B2_DIR/$BASE.mp4
+  echo $DST $SRC
+  if [[ "$SRC" -nt "$DST" ]]; then
+    #echo "stack $src render -o $DST $RENDER_OPTIONS"
+    stack $SRC render -o $DST $RENDER_OPTIONS
+  fi
+  SHA=($(sha1sum $DST))
+  FILE_INFO=$(jq '.[] | select(.contentSha1=="'$SHA'") | .fileName' $B2_LISTING)
+  if [ -z "$FILE_INFO" ]; then
+    echo "Uploading $BASE..."
+    b2 upload-file --quiet --sha1 $SHA reanimate $DST $BASE.mp4
+  fi
+done

examples/tut_glue_potrace.hs

@@ -78,7 +78,7 @@ sphere {
   <0,0,0>, 3
   texture {
     uv_mapping pigment{
-      image_map{ png ${png_} }
+      image_map{ png "${png_}" }
     }
   }
   rotate <0,${rotY_},0>

examples/tut_glue_povray.hs

@@ -75,7 +75,7 @@ polygon {
   <0, 0>, <0, 1>, <1, 1>, <1, 0>
   texture {
     pigment{
-      image_map{ png ${png_} }
+      image_map{ png "${png_}" }
     }
   }
   translate <-1/2,-1/2>

examples/tut_glue_povray_ortho.hs

@@ -88,7 +88,7 @@ sphere {
   <0,0,0>, 4
   texture {
     uv_mapping pigment{
-      image_map{ png ${png_} }
+      image_map{ png "${png_}" }
     }
   }
   rotate <0,${rotY_},${rotZ_}>

src/Reanimate/Render.hs

@@ -85,15 +85,17 @@ mp4Arguments fps progress template target =
   , show fps
   , "-i"
   , template
+  , "-preset"
+  , "veryslow"
   , "-y"
   , "-c:v"
   , "libx264"
+  , "-tune"
+  , "animation"
   , "-vf"
   , "fps=" ++ show fps
-  , "-preset"
-  , "slow"
   , "-crf"
-  , "18"
+  , "23"
   , "-movflags"
   , "+faststart"
   , "-progress"