What good are aesthetics?

I’ve always found that my aesthetic sense provides a strong motivation for my work. Whether I’m diving into a mathematical formula, writing a paper, or creating software, I find that it’s the ineffable beauty that makes it worth undertaking.

I’m not going to claim that the design or packaging is more important than the content. But the look and feel of a product is an inextricable part of the product; the way I construct and present my work is guided by my sense of interacting with it. When I write code, I see beauty and rhythm in the syntax highlighting, line breaks, bracket location. I find it painful to engage with ugly, yet beauty will literally appear in my dreams, whether code, the sound a smoothly clasping latch, or the smell of a flower.

In the technical disciplines, beauty may not be visible to the uninitiated, but we all know it’s there. You can have a beautiful man page, a gorgeous excel spreadsheet, and an elegant gear interface. I’ve seen all of these, and the opposite. I find that letting my aesthetic sense drive my projects, both personal and professional, leads to an increase in happiness and satisfaction, both during my creation of the work, and during its lifecycle.

With that said, I’ll say a few words about how I’ve thought about this blog, and why. I started with a very spartan Hugo theme, namely PaperMod that gets me most of my core requirements, with a largely minimal design.

From this, I thought about my day-to-day aesthetic, things that bring me daily joy and that regularly crop up in my visual art. I journal in green moleskine gridded notebooks with a dark blue Muji gel pen. I painted my office with green walls and cream trim, with lots of dark wood and brass tones. I’m into warm colors and what might be called anachronistic futurism, combining warm LEDs into old objects, for example. I covet writing mathematical ideas on my slate chalkboard with Hagoromo chalk.

From this, I made a few choices. A grid ‘desk’ in the background. Off-white tones like good paper, with dark blue ink in the light mode, and a slate+chalk dark mode. Notably, I’m using Kimberly Geswein’s excellent Nothing You Could Do handwriting font for the headings. It’s messy but legible, like taking fast notes. The main font is the very readable serifed Lora, which to my eye works nicely with the math fonts, for which I’ve stuck with defaults to keep loads faster there.

I hope you’ll appreciate some of the details I’ve put into this blog as much as I do. I’ve found that LLMs do help make some design tweaks easier, but it still requires a keen sense of taste to make it hold together, to see what’s good and what’s not. While it’s my hope that most readers will like my choices, I have no doubt that some of you will find it distasteful, ugly even. That’s good, in my view. You also have a strong aesthetic sense, and I’d love to see what you are making.

-Mike

Design showcase

Now, let’s exercise every feature the blog supports so I can see the design at a glance. In contrast to the introduction above, basically everything below here was written by an LLM. (Thanks, Claude!) The goal is to exercise the look of the blog, not to give you something to think about.

Typography

Body text is set in Lora, a serif with enough warmth to feel handwritten without sacrificing legibility. Here is a paragraph of running prose to see how it reads at length. The quick brown fox jumps over the lazy dog. We hold these truths to be self-evident, that all men are created equal. In the beginning was the Word, and the Word was with God, and the Word was God.

Bold text for emphasis. Italic text for titles and asides. Bold italic when you really mean it. Strikethrough for things you’ve changed your mind about.

Heading Three

Heading Four

Heading Five

Here’s a link to my GitHub. And here’s one to Euler’s identity below. Links in running text should be distinguishable but not distracting — a sage green underline, like the spine of a Moleskine.

Lists

Unordered:

  • Graph paper, blue ink, green Moleskine
  • A salvaged chalkboard from MIT
  • An antique radio with brass labels reading Fire and Brimstone
  • Books stacked on walnut shelves

Ordered:

  1. Register mbmccoy.dev
  2. Set up Hugo with PaperMod
  3. Customize everything until it feels right
  4. Write something worth reading

Nested:

  • Math
    • Analysis
    • Probability
    • Convex geometry
  • Engineering
    • Robotics
    • Embedded systems
  • Other obsessions
    • Ukulele
    • Fermentation

Blockquotes

The mathematician does not study pure mathematics because it is useful; he studies it because he delights in it and he delights in it because it is beautiful.

— Henri Poincaré

A blockquote with a nested quote:

We can only see a short distance ahead, but we can see plenty there that needs to be done.

The question of whether a computer can think is no more interesting than the question of whether a submarine can swim.

— Dijkstra

Math

It might surprise you that $\mathrm{e}^{i\pi} = -1$. But if you are truly nerdy, you’ll rearrange it to get all five fundamental constants in one equation:

$$ \mathrm{e}^{i \pi} + 1 = 0 $$

The Gaussian integral, beloved of physicists and statisticians alike:

$$ \int_{-\infty}^{\infty} e^{-x^2} \, dx = \sqrt{\pi} $$

And Bayes’ theorem, the engine of inference:

$$ P(H \mid E) = \frac{P(E \mid H) \, P(H)}{P(E)} $$

Inline math works too: the golden ratio $\varphi = \frac{1 + \sqrt{5}}{2} \approx 1.618$ shows up in everything from pinecones to the Parthenon. A matrix for good measure: $A = \begin{pmatrix} a & b \\ c & d \end{pmatrix}$.

Code

Python

A Monte Carlo estimate of $\pi$:

import random

def estimate_pi(n: int = 1_000_000) -> float:
    """Estimate π by throwing darts at a unit square."""
    inside = 0
    for _ in range(n):
        x, y = random.random(), random.random()
        if x**2 + y**2 <= 1.0:
            inside += 1
    return 4 * inside / n

if __name__ == "__main__":
    pi_hat = estimate_pi()
    print(f"π ≈ {pi_hat:.6f}")

Rust

The same idea, but faster:

use rand::Rng;

fn estimate_pi(n: u64) -> f64 {
    let mut rng = rand::thread_rng();
    let inside: u64 = (0..n)
        .filter(|_| {
            let x: f64 = rng.gen();
            let y: f64 = rng.gen();
            x * x + y * y <= 1.0
        })
        .count() as u64;
    4.0 * inside as f64 / n as f64
}

fn main() {
    println!("π ≈ {:.6}", estimate_pi(1_000_000));
}

Bash

#!/usr/bin/env bash
# Deploy the blog
hugo --minify && rsync -avz public/ server:/var/www/mbmccoy.dev/
echo "Deployed at $(date -Iseconds)"

Inline code

Use hugo server -D to preview drafts locally. The --minify flag strips whitespace in production. The struct JointMap maps URDF joints to MuJoCo addresses.

Tables

ConstantSymbolValue
Euler’s number$e$2.71828…
Pi$\pi$3.14159…
Golden ratio$\varphi$1.61803…
Imaginary unit$i$$\sqrt{-1}$
Speed of light$c$299,792,458 m/s

Images

A still life — ukulele, dahlia, tambourine, and a stack of books including PiHKAL and The Idiot:

Still life with ukulele and books

If you are reading here, I’d like you to know that this image is not AI generated. It’s a still life I took in my living room.

Horizontal Rule


Everything Together

Consider the heat equation on a rod of length $L$:

$$ \frac{\partial u}{\partial t} = \alpha \frac{\partial^2 u}{\partial x^2}, \quad 0 < x < L, \quad t > 0 $$

We can solve it numerically:

import numpy as np

def solve_heat(L=1.0, alpha=0.01, nx=50, nt=1000, dt=0.001):
    """Solve the 1D heat equation with Dirichlet BCs."""
    dx = L / (nx - 1)
    u = np.sin(np.pi * np.linspace(0, L, nx))  # initial condition

    for _ in range(nt):
        u_new = u.copy()
        for i in range(1, nx - 1):
            u_new[i] = u[i] + alpha * dt / dx**2 * (u[i+1] - 2*u[i] + u[i-1])
        u_new[0], u_new[-1] = 0.0, 0.0  # boundary conditions
        u = u_new

    return u

There is no branch of mathematics, however abstract, which may not some day be applied to phenomena of the real world.

— Lobachevsky

The exact solution is $u(x, t) = e^{-\alpha \pi^2 t} \sin(\pi x)$, which decays exponentially. Beautiful.