Talk: Puzzle Fonts About Puzzles

This repository contains slides for a talk “Puzzle Fonts About Puzzles” (originally titled “New Adventures in Puzzle Fonts”), presented (remotely) at the 14th Gathering 4 Gardner Conference (G4G14) held April 6–10, 2022 in Atlanta, Georgia.

The slides demonstrate the following five interactive mathematical puzzle fonts about puzzles:

1. Tetris Font (GitHub repo)
2. Sudoku Font (GitHub repo)
3. Yin-Yang Font (GitHub repo)
4. Path Puzzles Font (GitHub repo)
5. Tatamibari Font (GitHub repo)

Watch Video

Here's a recording of the live talk.

View Slides

Technology: reveal.js + KaTeX + Pug + Stylus + CoffeeScript

This repository uses the reveal-pug-talk template to make slides by combining the following technology (all free and open source):

• reveal.js: a flexible HTML presentation framework, extendable by plugins and themes. Here we use:
  • Chalkboard: enables live drawing annotation on the slides (using pen or touch or mouse)
  • Merriweather font
  • KaTeX: a library for translating LaTeX math into HTML
• Pug: a concise indentation-based notation for HTML, which makes it easier to express reveal.js slides, and to mix together other languages, such as the following
• Stylus: a concise indentation-based notation for CSS (styling of HTML)
• CoffeeScript: an indentation-based language that compiles to JavaScript

• Gulp: a tool that builds the Pug code into HTML

Structure

Here's an overview of the individual files and what they do:

• gulpfile.coffee: Definitions of build and watch rules that run Pug on index.pug and compile other .coffee files to .js.
• index.pug: Top-level Pug file that calls all other files. Defines the top-level structure of the document, but has no slides.
• slides.pug: Slides and specific animations are defined here.
• index.styl: Custom reveal.js styling, and specific styling for the slides.

Build Instructions

To build the slides HTML (index.html) from the source files:

1. Install NodeJS if you haven't already.

2. Clone the repository

3. Run the following:

   npm install
   npm run build

If you're live-editing source files and want index.html to continually build and update, use the following command:

npm run watch

To assemble just the needed files into a dist directory (as defined by deploySet in gulpfile.coffee), use the following command:

npm run dist

To deploy these files to GitHub Pages, use the following command:

npm run deploy