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

http://jdan.github.io/isomer/

by prezjordan • 12 years ago

181 23 12 years ago

jdan.github.io

pradn2• 12 years 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.

prezjordan5• 12 years 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/

pradn2• 12 years ago

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

moeamaya• 12 years 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• 12 years 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/

james33• 12 years ago

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!

eusonic• 12 years ago

What would it take to add animations?

prezjordan5• 12 years 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• 12 years 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.

prezjordan5• 12 years 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/ (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• 12 years 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/

PLenz• 12 years ago

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

eurleif• 12 years 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?

prezjordan5• 12 years 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• 12 years 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• 12 years 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?).

prezjordan5• 12 years 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• 12 years 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• 12 years ago

Looks very nice. Any plans to TypeScript-ify?

Gigablah• 12 years 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• 12 years ago

Very nice. It reminds me of OpenSCAD.

leeoniya• 12 years ago

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

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

Related Stories