Necker Tiler App

This is a javascript program written by Pat Hooper to draw variants of the Necker cube surface. It was inspired by the paper of the same name written jointly by Pat Hooper and Pavel Javornik.

Currently this program only works on a computer with a mouse. It seems to run well in at least firefox and chrome. Here are some tips for interacting with the App:

You can press Escape to close this and future popups.
When no popup is open, you can interact with the tiling by dragging. You can zoom in and out with the - and + keys.
Click the ☰ button on the top right of the window to open the menu. The math settings popup lets you define the surface and its projection into the plane.
The visual settings popup lets you adjust the colors used and how the surface is drawn.
The “Recompute” menu item will recompute the surface (which will return a different surface if you have commands like random() in your definitions.)
You should be able use the ☰ menu to download an svg of the tiling you create.
You can save the settings you use to a .json file. This file will then let you reload the surface you create into the app.

The polyhedral surfaces drawable by the app are embedded in ℝ³; and built out of rectangles, each parallel to one of the three coordinate planes. The surface is determined by three functions f,g,h: ℤ ⟶ ℝ_>0. How this works is explained by the following figure, which explains how several edge lengths are given by values of these functions. The remainder of the lengths of edges in this figure follow from the fact that all these polygons are rectangles, so opposite sides of each quadrilateral have the same length.

If you have questions, please send email to me.

Mathematical Settings

You need to define three vectors in \(\mathbb{R}^2\): \(\mathbf{u}\), \(\mathbf{v}\), and \(\mathbf{w}\). Every vector in \(\mathbb{R}^2\) should be representable as a positive linear combination of the vectors. These represent the linear ``projections'' of the standard basis vectors \((1,0,0)\), \((0,1,0)\) and \((0,0,1)\), respectively.

You also need to define three functions: \(f, g, h: \mathbb{N} \to \mathbb{R}\). These represent widths of rectangles in the three coordinate directions. See the about popup for more information.

Mathematical quantities should be defined using the syntax of the math.js javascript package. You can define auxiliary quanities if it is useful. Definitions should be on distinct lines. For example, a vector in \(\mathbb{R}^2\) can be defined via u = [1.1, sqrt(3)]. An example function is f(n) = abs(cos(n))*e^n.

After filling out the form, click the update button under the form.

Visual Settings

These settings effect the display of the tiling.

Tile limit: Maximum number of tiles to display.

Tile colors: Colors of tiles obtained by projecting squares parallel to the coordinate planes. Any color accepted by CSS should work.

yz tiles:
xz tiles:
xy tiles:

Edges: Configuration for edges of tiles. Note that thickness is measured in mathematical coordinates, so choose something small like “0.05px”.

color:
thickness:

Background: Color shown in regions not covered by tiles.

color:

Save

You can save the app settings and store them in a json file. This file can later be uploaded to the app. Before you do, please fill out the following:

Creator's name:
Title of work:

Description of save (optional):

Load

You can load settings from a previously downloaded json file.

Warning

You have pressed “H” on the main screen to hide the menu and other information. To show it again, press “H” again from the main screen.