Skip to content

Developer Docs

Omar Shehata edited this page Dec 15, 2017 · 7 revisions

Below are some notes about the basic structure of the app. We also have a draft of an academic paper describing the main challenges we faced and how we solved them here.

Overall Structure

  • index.html is the main entry point where we include all the files and set up the title screen.

The following files are all under src/:

  • 2d.js, 3d.js & 4d.js run the logic for each mode.
  • Slicing.js contains all the functions for computing & rendering slices of shapes.
  • Projecting.js contains all the functions for rendering n-dimensional shapes on the screen.
  • util/ includes various utility functions, such as gui.js for managing the interface and grid.js for creating axes and grids in Threejs, etc.

The 4D Geometry Viewer is a single-page application that moves between 4 different states. These states are a menu and 3 different graphing modes.

Menu

This is the viewer's landing page and is housed in index.html. The user can choose between the 3 different graphing modes on this page.

Since the 4D Geometry Viewer is a single-page application, index.html is also what the rest of the project builds upon.

Graphing Modes

Structure wise, the different graphing modes are all very similar. When a mode is selected, a mode specific GUI instance is created and the mode's init function is called. This function sets up the two different scenes (left for the graphed object and right for its slices) and draws the initial built-in example of a cartesian equation shape.

After the initial setup, everything else is handled via callbacks linked to changes in dat.GUI options. A change to gui parameters will call multiple functions to recalculate and render the shape and its slices.

This file defines all of the logic for the 2D graphing mode, including cartesian, parametric, and convex hull graphing options.

This file defines all of the logic for the 3D graphing mode, including cartesian, parametric, and convex hull graphing options.

This file defines all of the logic for the 4D graphing mode, including cartesian and convex hull graphing options.

Utilities and Libraries

The 4D Geometry Viewer also uses several utility functions and open source libraries.

This is the 4D convex hull algorithm.

Just like the normal geometry, but its vertices are 4 dimensional.

For creating a catersian grid based on the requested number of dimensions.

Initializes the dat.GUI parameters and stores built-in examples.

Implementation of the marching squares/cubes algorithm.

Contains useful functions that did not fit anywhere else.

Libraries

Found in src/lib.

This folder contains all that is relate to our use of the Three.js library, including a version of Three.js and an alternative to the built-in Three.js lines.

The libraries for the UI controls.

A polygon triangulation library.

Mathematical expression evaluator in JavaScript.

Modification of parser.js that produces glsl code.