Usage
Our approach to understanding 4D geometry is inspired by Edwin Abbot's Flatland. We've set up the app so that you can view 1D slices of 2D objects, as well as 2D slices of 3D objects, in the hopes that students will be able to make sense of the 3D slices they see of 4D objects.
We're going to show you how to view and slice a 3D object and explain the basic features of the app in the process.
To do this:
- Access the app at https://stodevx.github.io/humke-4d-geometry/
- Click on 3D to go into the 3D world
- Open up the Viewing Controls folder on the top right.
- Drag the orange slider to move the plane of intersection.
In every mode, the left view is a full projection view of the object. So in 3D, you're seeing a 3D object projected onto a 2D screen. In 4D you would see a 4D object, projected onto a 3D screen, which is then projected onto a 2D screen.
The right view is always one dimension less, and shows you the resulting slice of the plane of intersection with the object.
In any mode, you can choose which axis to fix via the drop down. If you pick Y in 3D, then you'll see the XZ plane (which covers a 10x10 area spanning the whole space) with no thickness along the Y. You can then move this plane along the Y.
In 3D, this is the equivalent of being able to see what the inhabitants of flatland would see if you passed a 3D sphere through their world. First they would see a dot come into existence out of thin air, then it grows into a circle, before shrinking back down and disappearing. It's a very bizarre phenomenon to 2D beings, but we know it's just a higher dimensional shape passing through a lower dimensional plane.
Another fun one to look at is the twisted ribbon (how to input this is explained in the section below).
Notice that a twisted structure in a higher dimension can be seen as a rotation in a lower dimension!
- You can collapse either the left or right view via the checkboxes under viewing controls.
- Mouse wheel can be used to zoom in
- Hold left click and move the mouse to rotate the camera (only works in 3 or more dimensions)
- Hold right click and move to pan the camera
- Hit the G key to toggle hiding the grid & axes
There is an additional option in 2D called Whole Shape Slicing which allows you to see the rest of the shape you're slicing with lower opacity:
In general, you can input objects in three ways:
- Cartesian Equations
- Parametric Functions
- Convex Hull of a given set of points
Click on Shape Properties to expand this folder and change the input.
You can enter any kind of equation in as many variables as you have dimensions (x and y up to z and w).
In 2D, you can enter inequalities to define regions:
In 3D & 4D, only equality works. But you don't have to use all the variables. For example, x^2+y^2 = 10 in 3D makes a tube.
In 4D, you can't see the actual four-dimensional cartesian surface, but you can see its 3D slices.
Since what you're seeing in 3D and 4D is an approximation of the surface defined by the function, you can use the resolution drop down to increase the number of samples.
- Low Resolution - good for when you're changing things up a lot. Might contain a lot of inaccuracies.
- Medium Resolution - better quality than low, but things might be slower.
- High Resolution - very slow. Only use when you've reached a shape you just want to visually inspect without changing.
You get to define functions for your x, y, z etc.. in terms of the parameters a and b.
In 2D, a is the main parameter. b is used as a way to fill in a region. The app will take the minimum and maximum values of b and draw the equation at those values. Checking the Fill Shape box will attempt to fill in the area between them. (Currently does not work when the shape has more than one hole).
In 3D, a and b are the main parameters used to define the surface. c is supposed to do the same thing in 2D, where it defines the upper and lower bound of a solid volume, but it currently is NOT used.
For every mode, you'll always find a set of available built in examples. If you click on the Builtin Examples folder, then select any of the examples, it will populate the input fields for you. This is a great way not just to see specific shapes, but to see what's possible in the app, and modify them yourself.
Both 2D and 3D modes support 3 ways of input:
- Cartesian equation
- Parametric equation
- Convex hull
In 4D, only convex hull is currently fully supported. Cartesian equations are possible to view but only as slices.
All input is controlled in the control box in the top right.
[TODO: Insert image of the control box?]
All modes also have a set of built in examples you can access in this controls menu.
The default object in 2D is a circle, defined by its cartesian equation x^2+y^2 = 10. On the left, is the full 2D object. On the right, is a 1 dimensional slice. The orange line is the 1-dimensional "plane" of intersection. You can move that using the viewing controls:
[TODO: Insert gif of slicing a circle]
You can also switch the slicing axis using the drop down.
Now try changing the equation to something like x^2+y^2 < 10. Now you should see a whole region filled in. You can also choose to see the full shape when slicing by ticking the [TODO: Insert name of checkbox when we know what it is] box.
**[TODO: Insert gif of slicing filled in circle, with whole shape slicing] **
Any cartesian function works here, including something as crazy as cos(x)=sin(y).
In 2D, we allow you to draw parametric functions in 2 variables so that you can draw filled in shapes. The a variable describes the shape, while the b variable fills it in.
Points are entered as a list of pairs. The default square is (5,5),(5,-5),(-5,-5),(-5,5). You can change any of these points and the shape will update. If you don't see anything, you're likely missing a comma, or a parenthesis. The app needs at least four points to draw a shape.
Currently, only cartesian equations with an equal sign are supported (as opposed to being able to define regions with < and > in 2D). You don't need to use all the variables. For example, you can just draw y=5 as a plane.
The slices will treat it as if the shape was filled in. So despite the fact that this tube is open, the slice is rendered as a filled in region:
This is the same as the 2D equivalent, except you only get 2 parameters to define the surface of the shape. Parametric volumes using the 3rd parameter are a work in progress.
The left view on this mode might take some getting used to. What you're seeing there is a 3D projection of a 4D object on a 2D screen.
The right view is a regular 3D visualization, it just represents one slice of a hyperplane in 4D.
You can enter any 4D cartesian equation. You can't see it projected, but you can see its slices along any of the 4 axes.
Entering enough 4 dimensional points to get a solid shape can be tedious, so try the built in examples. The tesseract will populate the field with 16 points to build a 4D cube. You can slide the hyperplane along any of the axes to see its intersection.
[TODO: Insert gif of slicing tesseract]
You can also zoom in on any of the views by using the mouse wheel. You can toggle the coordinate axes in the left view by hitting the B key on your keyboard.
You can rotate the shape along any of the W rotation planes using the keyboard:
- Q & E to rotate along
WZ - W & S to rotate along
WY - A & D to rotate along
WX
Rotating like this does NOT affect the slicing view. It only changes the projection.
TODO: Talk about some examples of things you can see in the app as a way of understanding higher dimensions. Maybe try the ribbon rotation example?
If things start to break, try refreshing the page, and also please let us know what broke by opening an issue on this repo!