Show HN: Isomer – An isometric graphics library for HTML5 Canvas | Hacker News Reader

Show HN: Isomer – An isometric graphics library for HTML5 Canvas

jdan.github.io

181 pointsprezjordan23 comments

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.

[1]: http://www.monumentvalleygame.com/

Wow, this game looks beautiful. Sure, work on it as you wish.

I agree, click and drag along orthogonal paths and dropping objects in a new place would allow interesting game mechanics to ensue.

Also it would be alter the conceptual understanding to transform from 2D planimetric view to isometric.

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.

I've been looking for a way to generate those fancy isometric architecture diagrams like the ones by AWS... this looks really promising :D

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.

> iso.add(Shape.Prism(new Point(0, 0, 0)));

How come the constructor for Point uses new, but the constructors for shapes are just called as regular functions?

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.

It could use a little consistency :)

Nice - I've been looking for something exactly like this lately. I have some weekend hack to do now!

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.

Looks very nice. Any plans to TypeScript-ify?

What would it take to add animations?

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.

Too late to edit my original comment - but I added a subtle animation to the landing page to show that it's possible.

http://jdan.github.io/isomer/ (at the top)

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.

Very nice. It reminds me of OpenSCAD.

thought the same thing and found myself looking for boolean operations (subtract, revolve, extrude, etc) heh.

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/

Reply on news.ycombinator.com