Code and Demos by Heribert Schütz

A partly unfolded icosphere with an earth-map texture

Rendering Spheres

You know how to render a sphere. Or you don't even care because your graphics library provides an API for creating a sphere.

Nevertheless, here are some ideas about rendering spheres that may be helpful for you (or for the developers of your favorite graphics lib). Some of these ideas are probably new. At least I have not found them elsewhere.

In addition to the math/geometry aspects, with this code I also explored

the BabylonJS 3D engine and
using MobX (without React) for state management.

Octaspheres

README, presentation (Source), experimentation lab (Source)

This project investigates the rendering of an "octasphere", a sphere based on an octahedron. It suggests and compares several approaches for placing the auxiliary vertices of the sphere triangulation.

Texturing

README, presentation (Source), experimentation lab (Source)

This project investigates ways to prepare and apply textures for a sphere. In particular it shows how to replace heavily distorted equirectangular maps with less distorted maps based on octaspheres and icospheres. It also provides memory-efficient sprite-sheet layouts.

A UI for matching a sound wave with a delayed copy

Performance Study Based on the Fast Fourier Transformation (FFT)

Demo, Source

With this project I investigated high-performance-computing capabilities of the Web platform. The Fast Fourier Transformation was chosen as a number-crunching example with non-trivial complexity, but which is still simple enough to implement various versions.

The FFT implementations vary in several aspects:

home-grown and third-party implementations
from very naive to quite refined algorithms
programming languages: TypeScript, C++, Rust, and even a small home-grown language
runtime technologies: JavaScript, Web Assembly (WASM), native code (for comparison, not in the browser demo)

The performance tests can take quite a while. Therefore they run in a Web Worker, avoiding a frozen UI and allowing to interrupt the tests.

The project includes two application demos, which might be more entertaining than mere tests and benchmarks:

An animated graphical demo (using SVG or the Canvas API) following a popular way to illustrate the FFT with complex values.
An audio demo using FFT to analyze sound input captured with the Web Audio API. This demo interactively explains the maths used for the analysis, following a paper by P. McLeod and G. Wyvill.

Four musical notes as played on four guitar strings.

Guitar Simulation

Demo (keyboard required), Source

While the audio demo in the FFT project analyzes incoming audio, this project uses the Web Audio API to synthesize outgoing audio.

TodoMVC with MobX, Custom Elements and JSX

Demo, Source

(The demo is just a clone of the standard TodoMVC demo, which you may have seen many times. Inspecting the DOM for its custom elements is more interesting.)

In this project I have explored an approach for building web applications based on a reactive state (provided by MobX and mobx-keystone). The idea was that the reactive state can be mapped to a UI dynamically so that a powerful framework such as React is no more needed.

I do, however, use a light-weight home-grown JSX implementation to achieve succinct and readable application code.

Custom elements (one of the technologies for Web Components, supported directly by browsers) help to structure the application.

The experiment was actually quite successful. The approach should be suitable for projects that require (or benefit from) reactive state management anyway. A typical example for this would be the configuration of complex products.

A star-shaped polygon with marks for folding edges

Folding a Star to a Polyhedron

Demo, Source

Visualization of a geometric construction transforming between two- and three-dimensional objects.

Implemented with Preact and BabylonJS. Preact signals turned out to be very handy for communicating between the Preact-based UI and the BabylonJS-based 3D graphics.

Partial graph of the 2-parameter standard normal distribution
and a cylinder fitting below it

The Scaling Factor in the Gaussian Distribution

Demo (keyboard recommended), Source

This project had two goals:

Explaining the scaling factor $\frac{1}{\sqrt{2 π}}$ in the formula for the Gaussian distribution (also called "normal" distribution).
Experimenting with various web technologies, in particular
- three.js and related tools for (dynamic) 3D graphics and
- rendering (dynamic) TeX formulas in HTML
to see whether something like Manim (see here and here) could also be built on top of web technologies.

Goal #1 actually became obsolete when 3Blue1Brown published his video series on that same topic when I was about to get my presentation completed.

But I think goal #2 was achieved. While my web-based tools still have limited functionality and would benefit from some polishing, I see no major obstacles against getting on a par with Manim.

The web-based approach has its own advantages:

Live interaction with the slides is possible.
Slides can be published easily for the audience to play with.

Fifteen Puzzle

Demo, Source

An experimental/demo app from 2015 using React and Redux.

In 2023 I have modernized the dev/build tools from webpack to vite. Furthermore I have added an explanation how to play the game.

But the core implementation and libraries are still the historic ones from 2015.

A sphere with colored spots with a uniform random distribution

A Small Contribution to BabylonJS's PointsCloudSystem

This is a small example of "getting the maths right". I have provided fixes ensuring that random points are actually distributed uniformly over a given surface.

Forum Discussion

(Notice that meanwhile the two playground examples here and here show the new corrected behavior by default. To see the old behavior, select version 5.x in the version menu.)

Commits/pull requests:

The Utah teapot with some construction lines

Graphics Sketchbook

Demo (keyboard recommended), Source

Early experiments with three.js and react-three-fiber.

Features the Stanford Bunny, the Utah Teapot, and some ports of these Manim demos.

Masonry Layout

Source

If you view the current page in a sufficiently wide window (or if you reduce your browser's font size so that the window appears wide enough to the document), it will be displayed with multiple columns and a "masonry" layout. That is, tiles are traversed in order and each tile is appended to the column that is shortest at the time.

As of mid 2024 a masonry layout can only be approximated by CSS. Solutions with correct ordering of the tiles require JavaScript code. Browser vendors are working on CSS support for masonry but currently do not agree on the architecture. Once standardized CSS support is widely available, the corresponding JavaScript code for this page can be replaced with a simple CSS declaration.