After I finished my last blog post,Permutohedron, in which I answer a math challenge posed by@anniek_p, I began browsing more of her tweets, in particular her tweets about the#mathartchallenge. I came acrossDay 15's challenge: Isometric illusions, in which she challenged people to take advantage of isometric qualities to create illusions, on paper. From that moment on I, and my two roommates, Conor and OisÃn became obsessed with programmatically creating and hopefully generating isometric illusions.
Isometric projection is a method for visually representing three-dimensional objects in two dimensions in technical and engineering drawings. The three coordinate axes appear equally foreshortened and the angle between any two of them is 120 degrees. As in the example below.
Isometric illusions are types of optical illusions in which allows you to draw impossible shapes because the lines in the shapes do not indicate relative direction between its components. This can clearly be seen in the example below where the path looks like it is flat until there is a column bringing the path back down to the beginning. This shape can only exist in the isometric world, and if it were to be built, it would only look like this from one very specific angle.
We discoveredIsomer.js, a JavaScript library for drawing isometric shapes on the HTML canvas. Immediately this made our challenge much much easier as it had done all of the heavy lifting of drawing, shading, positioning, translating, rotating and everything else we could want. Through this we could drawprisms and paths, and through mastery of the isometric grid we could quickly create some very basic isometric illusions.
However, keeping track of the where you needed to draw blocks became cumbersome for difficult illusions, and we very quickly realised that for true illusions, the drawing order of the blocks was super important. In fact the order in which blocks were draw could completely redefine how you understand the image, one of the reasons why isometric projection allows you to draw interesting illusions.
Consider the simple example below, the blocks on the left are drawn in the order they were created while the blocks on the right are drawn in the correct order, respecting their true depth and positions.
To solve both of the above problems; keeping track of positional state, and drawing blocks in the right order, I createdisomer-route, an extension of isomer which provides an easy API to build isometric routes. For more information and the full API reference checkout theisomer-route project page
Heavily inspired by the solution provided by @shaunlebron inDrawing isometric boxes in the correct order, isomer-route splits each block component into individual blocks, then sorts them topologically. In brief; if a given block overlaps with another block, the block which is in behind must be drawn before the block which is in front. And to determine whether blocks overlap, and then which is in front, their isometric coordinates needed to be mapped to screen coordinates. I won't go into too much detail here because of how well its articulated in the above article.
The real test for whether or not I had figured out the ordering problem was the conundrum defined in the above article. Where groups of blocks, if left as groups, would create a cyclic-dependency, where part of block A is behind block B, and part of block B is behind block C and part of block C is behind block A. As mentioned in the article, the solution is to simply draw blocks of groups as independent individual blocks. The final product is below
As I figured out how to correctly draw the shapes, and how to build the API to properly support it I began to experiment with more advanced examples, getting back to the original task at hand; drawing isometric illusions. Myself and my roommates had also since downloaded both versions ofMonument Valley, a beautiful mobile game in whichthe player leads the princess Ida through mazes of optical illusions and impossible objects while manipulating the world around her to reach various platforms.The game uses incredible isometric illusions to do this, and as such, inspired me to create some of my own, and helped me figure out how the best are done.
Below is the simple illusion you saw in the beginning, it looks quite like a rotated version of thePenrose Triangle, but it's not as good because the vertical column doesn't line up as nicely with the front path, although the illusion is still effective, it's not as good, at least compared to the example on the right, where the vertical column connects perfectly to the front path.
If you press the button on the right, the shapes above will rotate to show you how this effect is achieved, and how you would need to position them to build them in real life.
From now on you can press the above button or use Cmd/Ctrl+Right to rotate the various shapes
Inspired by Monument Valley, I quickly decided to make a game of it. Albeit a game with no real objective. Using your arrow keys on your keyboard you can move the red block throughout the route. Rotating the world will open up more paths as shapes which previously didn't touch, now do.
The below is a route that's very similar to the first level in Monument Valley. Which demonstrates that it's not always the world that needs to rotate in order to create paths which previously don't look possible, but instead various elements can rotate, such as the dark green blocks.Note: there are still some bugs in figuring out where the red block can and can't move to
Another example inspired by Monument Valley, showing rotation in the other direction allowing you to get to various different heights