Geometry, Loop

Think outside the tesseract… what’s a tesseract?

My new game, loop, is almost here! Loop features an interesting mathematical concept called the “tesseract,” and today I wanted to share what that’s all about. It’s math, but certainly not the most technical post I’ve written on this blog.

A tesseract is simply a special name for a 4-dimensional cube. Just as when you take a square and “pull” it upward to produce a cube, you could “pull” a cube along an axis that we can’t see to produce a tesseract. But a problem arises when you try to visualize these shapes. When you look at a cube top-down, all you might see is a square, right? Similarly, if you were to look at a tesseract in the 3-D world, all you would see was a cube. There has to be some way to project the rest of the tesseract into the world we can see.

Carl Sagan has a great video explaining how to understand shapes in another dimension. Essentially the crux of the matter is that although you can’t see the tesseract in its full 4-dimensional glory, you can calculate what its “shadow” on the 3-dimensional world would look like.

tesseract projection
A simple projection of the tesseract into 3-D space (and a lot of fun to calculate!).

As you can see, the tesseract looks like two nested, connected cubes. Why is one cube smaller than the other? Well, it appears smaller because the other end of the tesseract is far away on the axis we can’t see—just as an object farther away in a picture appears smaller. And in animations of a tesseract rotating, which you can see briefly in the preview video for loop, the cubes appear to change size with respect to each other as the “ends” of the tesseract move closer to and farther from the camera.

Of course, loop is a video game, not a math lesson—so the mathematical rules of the tesseract may be a bit warped as they make their way into the animations. After all, a tesseract is simply a cubelike shape, nothing more. But in the game, the tesseract is more than a geometric object; it is a vehicle for transportation across the levels. That idea was impressed upon me by Madeleine L’Engle’s classic 1963 novel A Wrinkle in Time, with which I have been fascinated since elementary school.

Scannable Document on Aug 10, 2016, 4_32_29 PM
The diagram from A Wrinkle in Time explaining travel through the tesseract.

According to A Wrinkle in Time, the tesseract is actually a 5-dimensional entity that allows you to jump across the fourth dimension, which is often said to be time. Based on the conventional definition of a tesseract above, L’Engle seems to have been taking some liberties with the math—but of course, that’s the nature of science fiction.

Regardless of its factual blips, the notion of using another dimension to travel through space is inspiring. The tesseract in loop draws from that idea, which is especially appropriate since (spoiler alert) the Institute within the game exists in another dimension. As an analogy, think of a multistory building: at any given point, you only know the floor you’re on—the x-axis. But when you get on an elevator, that transports you across the y-axis, taking you to another floor. The tesseract is basically a multidimensional elevator.

elevator diagram
The tesseract transports you through another dimension, just like an elevator.

Loop has two kinds of tesseracts—strictly speaking, 4-dimensional polytopes—that you’ll see in the various levels. One is the hypercube, which is mathematically classified as a tesseract. The other is a 16-cell, or hexadecachoron if you’re feeling pretentious; it’s like an octahedron translated into four dimensions. To read more about the different types of 4-D shapes (regular 4-polytopes), check out Wikipedia if you dare.

I find these multidimensional ideas really interesting! Let me know what you think in the comments.

Apps, Geometry, Isosceles

Isosceles for Mac is now available!

I am so excited to announce that Isosceles, the flagship app for Base 12 Innovations, is now available on your Mac!

The time is ripe for your favorite geometry app to come to OS X: 100,000 people around the world have now downloaded Isosceles on their iPhones and iPads. But especially when it comes to the classroom, many people rely on the Mac to create and absorb educational content. That’s why over several months of development, I’ve brought all the features you love from the iOS version into an elegant Mac user interface. Check it out:

Screen Shot 2016-01-10 at 11.34.29 AM.png

Isosceles integrates seamlessly with iCloud, so you can instantly begin editing all the sketches you’ve created on your iOS devices. You’ll be instantly familiar with the sketch interface, and pan and zoom gestures work on your trackpad just as they do on your iPad.

When you draw a figure in Isosceles, it’ll be a breeze to export it into your Keynote presentation or your note-taking app of choice. You may even enjoy creating art with Isosceles on your Mac!

Isosceles is available on the Mac App Store for $9.99 USD. From now until January 19, get it at 50% off as an introductory sale.

Do you like Isosceles? Let me know what you think in the comments!

Apps, Geometry, Isosceles

Isosceles Tip: Isometry

One little-known feature of Isosceles+ is its ability to create 3-dimensional sketches with the Isometric geometry system. If you have paid for the premium features pack, you can use this system by tapping the gear icon, then checking Isometric. You can use this feature to make 3D graphs, like this:


You can also make cool optical illusions and designs, like this one:


Some of the other features in Isosceles that facilitate these drawings:

  • To shade the graph, I used the Link tool, then added a fill to the resulting polygon. To link lines together and create a polygon, select the individual lines by tapping and holding on each one separately. Then, if a menu isn’t already showing, tap one of the blue lines to show the menu. If the lines form a closed polygon, the option will be available to link them together.
  • For the 3D cross, I had to use the Polygon tool to draw two 12-gons, which represent the two shaded crosses. Then I used the Points tool to move each vertex to its proper location.
  • To fill the polygons, select all the polygons which should have the same fill color by tapping and holding on their sides. In the menu that appears, tap Info. Choose Fill Color to change the color.
  • For this kind of drawing, it’s important to turn Snaps to Grid, Snaps to Points, etc. This ensures that your sketch will look precise, which is key for a drawing of this type.

As you can guess, an isometric grid feature has applications in engineering, construction, and other practical fields. Let me know how you use the Isometric geometry system in the comments!

Apps, Geometry, Isosceles

Isosceles Tip for v1.3/1.4: Architecture

I’ve just released a new version of Isosceles, version 1.3 for isosceles and 1.4 for isosceles+. The new version adds some more cool stuff:

  • You can now make text annotations bold, italic, underline, and strikethrough (device permitting).
  • Add a name to a line.
  • You can easily move a point to the nearest integer coordinates or key in a custom location in the point’s Info menu.
  • Isosceles premium users can now edit background colors, grid colors, and default pencil colors for individual sketches.
  • Many bug fixes which allow Isosceles users to create and maintain more complex designs than before (see below).

To celebrate the new addition, this tip will illustrate some of the amazing things Isosceles 1.4 can do. Take a look at this floor plan made with Isosceles:


Some of the features I used to create this drawing:

  • To create the background color, go to Settings (the gear icon), tap Canvas, then choose Background Color and customize the color as desired.
  • To set the default pencil color to white, follow the above instructions but choose Heavy Pencil Color and/or Light Pencil Color. (You can toggle between these in your sketch by tapping the green pencil button.)
  • To create the doors, draw a line to represent the open door. Then choose the compass tool, move the center handle to the place where the hinges would go and drag the outer handle along the blue line to show the door’s path.
  • To draw the piano, simply follow the steps above to draw several consecutive arcs. The largest arc would have a center inside the piano, the next one outside, and the last one on the edge of the piano.

What makes this so easy in Isosceles is that you can zoom in as far as you need to without losing accuracy and snap points easily to gridlines. Version 1.4 allows you to style the sketch however you want very quickly. The compass tool also opens up new and innovative designs that simply can’t be done in most analytic geometry programs. And to top it all off, you can export any sketch into a crisp PDF document for print or web.

Please let me know in the comments how Isosceles 1.4 is working for you!

Apps, Geometry, Isosceles

Isosceles Tip: Optics

In my Physical Science class, we are currently learning about mirrors, virtual and real images, etc. I realized that this is actually a great application for Isosceles, my geometry application. Here’s a diagram I drew to represent the reflection of an arrow in a concave mirror:


The colored lines represent individual light rays from the object, the arrow. Each of the rays intersects at a point under the axis. Some of the techniques I used to create the diagram follow:

  • To create the mirror, use the compass tool and position the center handle on the desired center point. Drag the outer handle around the blue circle to draw the mirror.
  • To create the axis, open the mirror’s Info menu by tapping and holding on it, then pressing Info. Choose Construct Midpoint and Construct Center Point, then tap the Line tool and connect these two points. To extend the line, open its Info menu, then change the Extends switch to On.
  • To construct a parallel ray, use the method described here.
  • To add an arrow to a line, open its Info menu by tapping and holding on it, then pressing Info. Change the Start Arrow or End Arrow switch to On.

This is just one of the many ways you can use Isosceles’s versatile geometry engine. Leave a comment and tell us how you use Isosceles!

Apps, Geometry, Isosceles

Isosceles Tutorial: Constructing Perpendicular Lines

In Isosceles, you can construct a line perpendicular to another line by turning on Snaps to Angles in the Snapping settings and drawing a line from a point on the original line that looks close to 90°. However, in some cases you may need to construct a perpendicular line using classical methods. First make sure you have Shows Intersections turned on in the Canvas pane of the settings.

1. We are given a line AB and a point C through which the perpendicular line must pass.


2. Choose the Arc tool, then drag the center handle of the compass to point C. Draw an arc (I used the light pencil) across line AB like this:


3. Move the compass center to one intersection of the arc and line AB and draw two arcs as shown. This method essentially resembles the method of constructing a perpendicular bisector.


4. Repeat the process with the other intersection.


5. Choose the Line tool and draw a line through point C and the two intersections we just created. This line is perpendicular to line AB.


Please leave a response if you have a question!

Apps, Geometry, Isosceles

Isosceles Tutorial: Constructing Parallel Lines

A common task in geometry is to construct a line through a point that is parallel to a given line. Before starting this tutorial, make sure you have Shows Intersections turned on the Canvas section of Settings.

1. We are given a line (AB), and a point C.


2. Draw a line from C that passes through line AB. This is called a transversal.


3. Tap the Arc tool. The compass should appear in the center of the screen.


4. Drag the center handle of the compass to move it to the intersection of the two lines. Drag the compass arm to rotate it to the position shown.


5. Draw an arc across line AB, then move the compass handle to point C.


6. Draw a similar arc that would intersect the transversal. The arcs should now look like this with a different tool selected to hide the compass:


7. Now we need the intersection of the transversal and this last arc. Tap and hold on the transversal to select it, then tap it to open the menu if it isn’t already. Choose Info, then turn on Extends.


8. Move the compass to the intersection of the transversal and the first arc. Drag the outer handle to resize it. The outer handle should be at the intersection of line AB and the arc.


9. Move the compass to the intersection of the transversal and the second arc. Now draw a third arc across the second arc. This marks the second point of the parallel line.


10. Draw a line with the Line tool between point C and this latest point. If you follow the steps above to extend the line, the diagram will finally look like this:


Please leave a comment if you have any questions!