
Show HN: Isomer – An isometric graphics library for HTML5 Canvas - prezjordan
http://jdan.github.io/isomer/
======
pradn
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
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
Wow, this game looks beautiful. Sure, work on it as you wish.

------
gavanwoolery
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
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.

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

------
rayshan
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.

------
eurleif
> 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
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 :)

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

------
buremba
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.

------
zura
Looks very nice. Any plans to TypeScript-ify?

------
eusonic
What would it take to add animations?

~~~
prezjordan
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
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
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.

------
jdiez17
Very nice. It reminds me of OpenSCAD.

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

------
akvlad
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/)

