Statistics
dark
light
auto

Demonstration of features

Download PDF View slides Pollen Source
===

With Pollen, we can define custom HTML and LaTeX environments for common setups.This is an optional sidenote—a great place to put non-essential information. On mobile devices where screen space is limited, sidenotes like these collapse out of view. Here are a few examples:

Warmup!

Find the line perpendicular to the line $y = \frac{2}{3}x - 7$ which passes through the point $(6,0)$.

===
Pythagorean Theorem

In a right triangle, the square of the length of the hypotenuse of a right triangle equals the sum of the squares of the lengths of the other two sides.

\begin{tikzpicture}[scale=1.25] \coordinate [label=left:$C$] (A) at (-1.5cm,-1.cm); \coordinate [label=right:$A$] (C) at (1.5cm,-1.0cm); \coordinate [label=above:$B$] (B) at (1.5cm,1.0cm); \draw (A) -- node[above] {$a$} (B) -- node[right] {$c$} (C) -- node[below] {$b$} (A); \draw (1.25cm,-1.0cm) rectangle (1.5cm,-0.75cm);\end{tikzpicture}

For this triangle, this means that $a^2 + b^2 = c^2$.

===
Example: Some boring problem

The bottom of a ladder must be placed 3 feet from a wall. The ladder is 10 feet long. How far above the ground does the ladder touch the wall?

Your turn!

A soccer field is a rectangle 100 meters wide and 130 meters long. The coach asks players to run from one corner to the other corner diagonally across. What is that distance?

===

A home for manimations

Manim is a python library for creating mathematical animations. Originally developed by Grant Sanderson (of 3Blue1Brown), the software is now maintained and actively developed by the Manim Community.

I’ve incorporated Manim animations in my lessons before, but I’ve notived that pausing the animations to narrate can be a little tricky to time correctly. Wouldn’t it be nice if the video somehow knew where to pause?

It turns out that in Manim, you can set splitting points within a scene and render that scene into multiple separate animations. If we were making a PowerPoint, we would then manually drag every individual animation over to our presentation. But with Pollen, we can define our own custom markup that does the heavy lifting for us. The command ◊manim[“name-of-scene”] grabs all of individual animations for a given scene and lays them out in a carousel for us.

===

An animation illustrating the sampling distribution of a proportion. Users can click the auto-play button or navigate the animations manually.

===

Widescreen animations work also. And in the slides version of this lesson, the animation flows perfectly with the rest of the content.

===

Powerpoint figures: You can have it all

I appreciate how quick and easy figure-making can be with Powerpoint, so I want to have some way of incorporating Powerpoint-generated figures into these lessons. But because I am allergic to rasterization, the vector graphics need to be preserved (as SVG in HTML, and as PDF in LaTeX). The command ◊pptfig[“fig-name”] grabs fig-name.pdf, converts it to SVG, and inserts the appropriately-scaled image into the page—for LaTeX, it inserts the PDF.

===

PDF figures can include captions too!

===

LaTeX: No more MathJax

MathJax is the defacto standard for typesetting mathematics on the web. But there are some downsides:

  1. Like anything rendered on the client’s side with JavaScript, there’s a start-up time tax. As of MathJax 3.0, that wait is brief (and with KaTeX, even briefer) but the more math on the page, the more noticeable the wait.

  2. There are only a subset of LaTeX commands and environments to choose from. That’s not a failing of MathJax—it was only ever meant to handle inline and display math. But I want it all.

  3. Limited fonts (with MathJax 3.0, only one). I don’t have major problems with the default font, but like most things in life, I like to have options. More importantly, I incorporate text in my math equations all the time and prefer it to match the body text:

    \[\text{$z$-score} = \frac{\text{“data”} - \text{“mean”}}{\text{“standard deviation”}} = \frac{y - \mu}{\sigma}\]

===

With Pollen, we don’t have to compromise—we can write markup for whatever the heck we want. In this case, I’ve written some custom markup that takes in LaTeX code, spits out a PDF, converts that PDF to SVG, and throws that image into our document.

Let’s try it out. For display LaTeX, wrap your equation around ◊$${ ... }:

◊$${\mathcal{L}_{\mathcal{T}}(\vec{\lambda}) = \sum_{\mathbf{x},\mathbf{s}\in\mathcal{T}} \log P(\mathbf{x}|\mathbf{S}) - \sum_{i=1}^m \frac{\lambda_i^2}{2\sigma^2}}

\[\mathcal{L}_{\mathcal{T}}(\vec{\lambda}) = \sum_{\mathbf{x},\mathbf{s}\in\mathcal{T}} \log P(\mathbf{x}|\mathbf{S}) - \sum_{i=1}^m \frac{\lambda_i^2}{2\sigma^2}\]
===

Or do whatever you want with the more general ◊latex command. Here’s a TikZ figureFigure courtesy of Charles Staats just because we can:

\begin{tikzpicture}[xscale=8,yscale=3.5] \newcommand{\xmin}{-.4} \newcommand{\xmax}{.5} \newcommand{\deltaX}{.65} \begin{scope} \draw[black,->] (-.6,-.7) -- (.5,-.7) node[right] {$x$}; \draw[black,->] (-.5,-.8) -- (-.5,0.5) node[above] {$y$}; \path[fill=black!30,draw=black!30] (-.33,-.33*1.65) -- (-.33,-.33*.35) -- (.33,.33*.35) -- (.33,.33*1.65) -- cycle; \draw[thick,densely dotted] (.33,-.72) node[below] (delta3) {$x_0+\delta\strut$} -- (.33,.33*1.65); \draw[thick,densely dotted] (-.33,-.72) node[below] (mdelta3) {$x_0-\delta\strut$} -- (-.33,-.33*.35); \fill[black!50] (-.25,-.25*3/2) -- (-.25,-.25/2) -- (.25,.25/2) -- (.25,.25*3/2) -- cycle; \path[fill=black!70] (-.15,-.15*1.25) -- (-.15,-.15*.75) -- (.15,.15*.75) -- (.15,.15*1.25) -- cycle; \node[circle,draw=black,inner sep=0pt,minimum size=3pt,fill=black] (x0y0) at (0,0) {}; \draw[black,domain=\xmin:\xmax,samples=2] plot(\x,\x) node[right] {$\Delta y = f'(x_0) \Delta x$}; \draw[very thick,black,smooth,domain=\xmin:\xmax,samples=30] plot (\x,{1-1/(\x+1)}) node[right] {$y=f(x)$}; \draw[black,very thin] (x0y0) -- (0,{-.72}) node[below] (x0) {$x_0\strut$}; \draw[black,very thin] (x0y0) -- (-.52,0) node[left]{$y_0$}; \end{scope} \draw[decorate,decoration={brace,amplitude=5pt,mirror,raise=1pt}] (.33,.33*.35) -- node[right]{\hspace{6pt}$\epsilon \Delta x$} (.33,.33); \draw[decorate,decoration={brace,amplitude=5pt}] (delta3.south) -- node[below] {$\rule{0pt}{14pt}\abs{\Delta x} < \delta$} (mdelta3.south); \end{tikzpicture}

To be clear, this figure wasn’t generated externally and dropped into the document—the source code is right inline with everything else. If you are concerned that these figures will be compiling every time the document is updated, then you will be pleased to know that’s not a problem. A ◊latex command is only sent to get rendered if the content has changed (or if you set the POLLEN environment variable to TEX). Is this as cool as I think it is?

===

Surprisingly, inline math was the most involved part. Since our equations get rendered as SVG, there’s nothing telling the browser how to position the image vertically relative to the surrounding text.

My solution: slip a microscopic hot-pink-colored period into the beginning of every inline equation, have Pollen search the SVG for that pink dot, grab its height, and throw in some CSS that shifts the equation into place. Is it hacky? Yes. But it works perfectly.Until I encounter an inline equation in which I must use the exact color #FF0FF0, I think this solution is safe.

Wanna know the coolest part? On most browsers, text-selecting an image actually selects the alt-text. By setting the alt-text as the LaTeX code, selecting and copying text on this page will also copy the LaTeX code (yes, even the TiKZ figure). Go ahead, try it out on this next paragraph.

Let $A\in M_n$. Then $x^*Ax = 0$ for all $x\in\mathbb{C}^n$ implies that $A = 0$, and if $\int_A^B x^*Ax = 0$ for all $x\in\mathbb{C}^n$, then $\sigma(A) = \{0\}$. Furthermore, if $A$ is nondefective then $A = 0$.

===

One last cool LaTeX thing: tables. Tables in HTML suck, and tables in LaTeX suck a little less. With Pollen, we can make them awesome. The markup is similar to that of markdown, with hyphens (---) and pipes (|) to create rows and columns, but with an extension to allow for multicolumn headers and custom spacing.I still need to figure out how to align decimals. That’s coming.

\begin{tabular}{cc@{\hskip 2em}rrr@{\hskip 2em}rr} & & \multicolumn{3}{c}{\MakeLowercase{\scshape ALPHA}} & \multicolumn{2}{c}{\MakeLowercase{\scshape BRAVO}}\\ & & $a_1$ & $a_2$ & $a_3$ & $b_2$ & $b_3$\\[0.5em] \multirow{2}{*}{\MakeLowercase{\scshape CHARLIE}} & $c_1$ & 1902 & 1290 & 293 & 12 & 234\\ & $c_2$ & 213 & 345 & 23 & 234 & 456\\ \multirow{2}{*}{\MakeLowercase{\scshape DAVID}} & $d_1$ & 34 & 4356 & 98 & 23 & 435\\ & $d_2$ & 892 & 283 & 108 & 890 & 523\\\end{tabular}
===

Geogebra embedding

===

Miscellaneous features

===

Coming features