Looks pretty wonderful. I can see a lot more usecases if you had support for mouse-events. Being able to select objects will enable tons of games and such.
Thanks! I'm not totally sure how far I'd like to take this. The original intent was to make some art with it, since I played a lot of Monument Valley [1] a few weeks ago. I'd like to learn a lot more about graphics and see how well I can optimize draw performance, then maybe I can focus on animations and input.
i've not used it myself, but Isogenic is an isometric engine that is intended for games so i'm sure it supports this kind of functionality. http://www.isogenicengine.com/
We've been using the Isogenic Engine for over 2 years (just launched http://casinorpg.com last week with it). It is a great engine, though it's purpose is very different from this. Both look great!
Looks great! Is the depth sorting inherent or manually specified? I notice that there is one Escher-esque shape (maybe this shape is defined as a whole then sorted?).
Both - but my depth sorting technique is incredibly naive.
"Shapes" consist of many "Paths" (paths = faces). If you draw a shape, it will attempt to order its faces. Instead, you can draw an array of paths in whatever order you'd like.
When drawing multiple shapes, the ordering is completely manual (unfortunately). This is currently my top priority.
Looks awesome, would definitely make something cool looking with this.
I googled and saw that there are a few isometric game engines out there already. This would be pretty unique if more geared towards art/graphics and focused on ease-of-use.
You can actually leave out new for Points, and Shape.Prism just returns a new Shape. Prism itself is not actually an object (or constructor for an object), it's just a function.
I'm not sure whether it's possible yet but using CSS perspective and transition features for creating a isometric graphics library would be super cool.
There's currently no concept of a "scene" (you essentially add shapes which are immediately drawn to the canvas, never saved) so animating a given shape involves changing it slightly and redrawing everything manually.
As for a next step for the project, I'd like to keep track of the objects added to the scene, and draw them intelligently.
A simple way to get there is to store each function and arguments in an object, as a list of draw operations, instead of executing the functions. Add in an object id (list index) to return to the caller, and then the caller can modify parsmter values between frames.
Do you know of any resources or examples that demonstrate basic animation techniques like this? The canvas examples I've found so far seem to be for fluid animations or games, rather than interactive scenes or visualisations that can be stopped or stepped through.
I'm redrawing the entire structure each time, though. You could optimize it manually by only redrawing surrounding polygons. Performance seems pretty good on my end, decent on mobile.
I've been working on something similar, it's a lightweight HTML5 Canvas library, easily add/remove objects on the canvas. It also has event handling for the objects. http://vladakilov.github.io/imagine/
