How-To article about the LaTeX font catalogue (#174)

Dockerfile.playground

@@ -14,7 +14,8 @@ RUN apt-get update && \
       curl blender povray texlive texlive-latex-base texlive-latex-extra \
       texlive-fonts-extra texlive-science texlive-xetex \
       texlive-latex-recommended texlive-lang-english \
-      texlive-lang-chinese texlive-plain-generic
+      texlive-lang-chinese texlive-plain-generic \
+      unzip
 
 WORKDIR /src
 

docs/font_catalogue.md

@@ -0,0 +1,101 @@
+# Font Catalogue
+
+The [$\LaTeX$ font catalogue](https://tug.org/FontCatalogue/) is a listing of a wide variety of fonts with examples. Let's explore how to use those fonts in Reanimate.
+
+## Fetamont
+
+Go to <https://tug.org/FontCatalogue/fetamont/> and look under the `Usage` section. There you can find $\LaTeX$ preamble code and style selector code. The preamble looks like this:
+```
+\usepackage{fetamont}
+\usepackage[T1]{fontenc}
+```
+And the style selector looks like this: `\ffmfamily`
+
+Armed with this information, we can create a TeX configuration in Reanimate:
+
+<pre class="interactive">
+fetamont = TexConfig LaTeX
+  ["\\usepackage{fetamont}"
+  ,"\\usepackage[T1]{fontenc}"]
+  ["\\ffmfamily"]
+
+animation :: Animation
+animation = scene $
+  showCfg "Fetamont" fetamont
+
+{!docs/font_script.hs!}
+</pre>
+
+<br/>
+
+## Inconsolata
+
+Configuration code for Inconsolata can be found here: <https://tug.org/FontCatalogue/inconsolata/>
+
+<pre class="interactive">
+inconsolata = TexConfig LaTeX
+  ["\\usepackage{inconsolata}"
+  ,"\\renewcommand*\\familydefault{\\ttdefault}"
+  ,"\\usepackage[T1]{fontenc}"]
+  ["\\normalfont"]
+
+animation :: Animation
+animation = scene $
+  showCfg "Inconsolata" inconsolata
+
+{!docs/font_script.hs!}
+</pre>
+
+<br/>
+
+## Computer Modern
+
+[Computer modern](https://tug.org/FontCatalogue/computermodern/) is the default font. It's presented here as a reference and as a point of comparison.
+
+<pre class="interactive">
+-- Default font so no need to do anything.
+computerModern = TexConfig LaTeX
+  []
+  []
+
+animation :: Animation
+animation = scene $
+  showCfg "Computer Modern" computerModern
+
+{!docs/font_script.hs!}
+</pre>
+
+<br/>
+
+## Missing fonts
+
+Fonts only work if they are installed in your TeX setup. If a font is missing, you'll get a cryptic error message like this:
+
+<pre class="interactive">
+clayTablet = TexConfig LaTeX
+  ["\\usepackage{fontspec}"
+  ,"\\setmainfont{QTClaytablet}"]
+  ["\\normalfont"]
+
+animation :: Animation
+animation = scene $
+  showCfg "Claytablet" clayTablet
+
+{!docs/font_script.hs!}
+</pre>
+
+<br/>
+
+<script>
+  setTimeout(function () {
+    const pres = document.querySelectorAll(".interactive");
+    var delay=0;
+    for(var i=0; i<pres.length; i++) {
+      const elt = pres[i];
+      setTimeout(function() {
+        embedPlayground(elt);
+      },delay);
+      delay += 0;
+    }
+  },0);
+</script>

docs/font_script.hs

@@ -0,0 +1,33 @@
+showCfg :: T.Text -> TexConfig -> Scene s ()
+showCfg name cfg = do
+  let title = scale 2 $ center $
+        latexCfg cfg name
+      line1 = center $ latexCfg cfg
+        "Pack My Box"
+      line2 = center $ latexCfg cfg
+        "With Five Dozen"
+      line3 = center $ latexCfg cfg
+        "Liquour Jugs"
+
+  header <- oNew title
+  oModify header $
+    oTopY .~ screenTop
+  oShow header
+
+  l1 <- oNew line1
+  l1 `oBelow` header
+  oShow l1
+
+  l2 <- oNew line2
+  l2 `oBelow` l1
+  oShow l2
+
+  l3 <- oNew line3
+  l3 `oBelow` l2
+  oShow l3
+  wait 1
+
+oBelow a b = do
+  aBot <- oRead b oBottomY
+  oModify a $
+    oTopY .~ aBot

examples/tut_eq_final.hs

@@ -0,0 +1,114 @@
+{-# LANGUAGE OverloadedStrings #-}
+
+module Main where
+
+import Control.Lens
+import Control.Monad
+import Reanimate
+import Reanimate.Scene
+
+main :: IO ()
+main = reanimate animation
+
+animation :: Animation
+animation = env $
+  scene $ do
+    symbols <-
+      mapM
+        oNew
+        [symb_e, symb_eq, symb_m, symb_c2]
+    mapM_ oShow symbols
+    wait 1
+
+    forM_ (zip symbols yPositions) $
+      \(obj, yPos) -> do
+        fork $
+          oTweenS obj 1 $ \t -> do
+            oScale %= \origin -> fromToS origin scaleFactor t
+            oLeftX %= \origin -> fromToS origin screenLeft t
+            oCenterY %= \origin -> fromToS origin yPos t
+        wait 0.3
+
+    wait 1
+
+    ls <- mapM oNew [energy, equals, mass, speedOfLight]
+
+    -- Maybe show lines with the same center as the symbols.
+    -- Then show how to align the baselines.
+    forM_ (zip ls yPositions) $
+      \(obj, nth) -> do
+        --bot <- oRead (symbols!!nth) oBottomY
+        --margin <- oRead (symbols!!nth) oMarginBottom
+        oModifyS obj $ do
+          oLeftX .= -4
+          --oTranslateY .= bot+margin
+          oCenterY .= nth
+        oShowWith obj oDraw
+
+    wait 2
+
+    forM_ ls $ \obj ->
+      fork $ oHideWith obj oFadeOut
+
+    forM_ (reverse symbols) $ \obj -> do
+      fork $
+        oTweenS obj 1 $ \t -> do
+          oScale %= \origin -> fromToS origin 1 t
+          (oTranslate . _1) %= \pos -> fromToS pos 0 t
+          (oTranslate . _2) %= \pos -> fromToS pos 0 t
+      wait 0.3
+    wait 2
+
+scaleFactor :: Double
+scaleFactor = 0.7
+
+symb_e :: SVG
+symb_e = snd $ splitGlyphs [0] svg
+
+symb_eq :: SVG
+symb_eq = snd $ splitGlyphs [1] svg
+
+symb_m :: SVG
+symb_m = snd $ splitGlyphs [2] svg
+
+symb_c2 :: SVG
+symb_c2 = snd $ splitGlyphs [3, 4] svg
+
+svg :: SVG
+svg =
+  scale 3 $
+    center $
+      latexAlign "E = mc^2"
+
+energy :: SVG
+energy =
+  scale 1.5 $
+    centerX $
+      latex "Energy"
+
+equals :: SVG
+equals =
+  scale 1.5 $
+    centerX $
+      latex "equals"
+
+mass :: SVG
+mass =
+  scale 1.5 $
+    centerX $
+      latex "mass times"
+
+speedOfLight :: SVG
+speedOfLight =
+  scale 1.5 $
+    centerX $
+      latex "speed of light$^2$"
+
+yPositions :: [Double]
+yPositions = [3, 1, -1, -3]
+
+env :: Animation -> Animation
+env =
+  addStatic (mkBackground "lightblue")
+    . mapA (withStrokeWidth defaultStrokeWidth)
+    . mapA (withStrokeColor "black")

mkdocs.yml

@@ -26,6 +26,8 @@ nav:
 #    - Use fonts (incomplete): fonts.md
   - Tutorials:
     - Animating an Equation: tut_equation.md
+  - How To:
+    - Use the LaTeX Font Catalogue: font_catalogue.md
   - Concepts:
     - Core concepts: introduction.md
     - Gluing together animations: glue_tut.md

playground/src/Main.hs

@@ -377,6 +377,7 @@ withHaskellFile m action = withSystemTempFile "playground.hs" $ \target h -> do
       \import Reanimate.Morph.Common\n\
       \import Reanimate.Morph.Linear\n\
       \import Reanimate.Scene\n\
+      \import Reanimate.LaTeX\n\
       \import qualified Graphics.SvgTree as SVG\n\
       \import Control.Lens\n\
       \import Control.Monad\n\