7 ms·

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

181 points by prezjordan 13y ago

pradn 13y ago
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.
- prezjordan 13y ago
  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/ http://www.monumentvalleygame.com/
  - pradn 13y ago
    Wow, this game looks beautiful. Sure, work on it as you wish.
- moeamaya 13y ago
  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.
- catshirt 13y ago
  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/ http://www.isogenicengine.com/
  - james33 13y ago
    We've been using the Isogenic Engine for over 2 years (just launched http://casinorpg.com http://casinorpg.com last week with it). It is a great engine, though it's purpose is very different from this. Both look great!
eusonic 13y ago
What would it take to add animations?
- prezjordan 13y ago
  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.
  - judk 13y ago
    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.
    - jimeuxx 13y ago
      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.
- prezjordan 13y ago
  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/ 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.
akvlad 13y ago
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/ http://vladakilov.github.io/imagine/
PLenz 13y ago
Nice - I've been looking for something exactly like this lately. I have some weekend hack to do now!
eurleif 13y ago
> 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?
- prezjordan 13y ago
  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 :)
buremba 13y ago
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.
gavanwoolery 13y ago
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?).
- prezjordan 13y ago
  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.
rayshan 13y ago
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.
zura 13y ago
Looks very nice. Any plans to TypeScript-ify?
Gigablah 13y ago
I've been looking for a way to generate those fancy isometric architecture diagrams like the ones by AWS... this looks really promising :D
jdiez17 13y ago
Very nice. It reminds me of OpenSCAD.
- leeoniya 13y ago
  thought the same thing and found myself looking for boolean operations (subtract, revolve, extrude, etc) heh.

181 points by prezjordan 13y ago

pradn 13y ago

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.

prezjordan 13y ago
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/ http://www.monumentvalleygame.com/
- pradn 13y ago
  Wow, this game looks beautiful. Sure, work on it as you wish.
moeamaya 13y ago
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.
catshirt 13y ago
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/ http://www.isogenicengine.com/
- james33 13y ago
  We've been using the Isogenic Engine for over 2 years (just launched http://casinorpg.com http://casinorpg.com last week with it). It is a great engine, though it's purpose is very different from this. Both look great!

eusonic 13y ago

What would it take to add animations?

prezjordan 13y ago
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.
- judk 13y ago
  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.
  - jimeuxx 13y ago
    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.
prezjordan 13y ago
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/ 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.

akvlad 13y ago

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/ http://vladakilov.github.io/imagine/

PLenz 13y ago

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

eurleif 13y ago

> 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?

prezjordan 13y ago
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 :)

buremba 13y ago

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.

gavanwoolery 13y ago

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?).

prezjordan 13y ago
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.

rayshan 13y ago

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.

zura 13y ago

Looks very nice. Any plans to TypeScript-ify?

Gigablah 13y ago

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

jdiez17 13y ago

Very nice. It reminds me of OpenSCAD.

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