jdan / isomer Goto Github PK

Instead of ordinary fill colors, it would be very useful to be able to place textures on faces.

Is there any way to draw textures on cubes? (cf Minecraft-like)
If not, this would be a highly appreciated feature! Else than that, great, very simple and easy to use library.

Also, it would be nice to have some more info on the more advanced uses as I had to look through the (very easily digestible) code to find answers, namely options when initiating a new Isomer, Object documentation (object properties & methods), extending Isomer, etc.

Nothing will work when the variables below are not declared globally:
I think most importantly Path and Point

var Shape = Isomer.Shape; 
var Path = Isomer.Path;
var Color = Isomer.Color;
var Point = Isomer.Point;
//these should be on global scope for Isomer to work

Check this fiddle for live example.
This will give the error of "Point is not defined" or "Path is not defined" in some cases.
This should be optional or it should be inside the build itself.

Used to be able to pass a value for transparency when defining the color after r,g,b.

It'd be nice if you put this up on Bower for easy installation and updating.

It will be nice to have shadows like on the image below

It's a really nifty engine you've written. It would be a great candidate for small turn-based games. For that, we'd need to be able to capture the shape instances and move them rather than cloning them each time.

Is there any chance of that happening? I know that you're hoping to keep the scope small.

I'd love to have the diamond-shape as a native shape like, preferably with the ability to set sides (much like cylinder objects).

Oh, and love your work <3

Is there a way to delete or modify a shape you just created
I did this:
tile = iso.add(new Path([Point(0,2,0),Point(1,2,0),Point(1,3,0),Point(0,3,0)]), new Color(50,160,60));

in hopes of being able to do stuf like this:
tile.remove();
iso.remove(tile);
iso.shapes.tile.x = 3;
tile.extrude(3, new Color(50,160,60));

Hi, I noticed that the version number in the dist folder is now v0.2.5, but the latest git tag is v0.2.4 😄

Created a issue to see if there is support to use the ES6/7 code style.

When using a compiler like Babel the generated bundle would not increase much.

I use PIXI as a speed-hack for canvas.
I would like to use Isomer over PIXI.Grapics.

Something like this:

....

var graphics = new PIXI.Graphics();
graphics.path = function(path, color) {
  var c = color.r * 256 * 256 + color.g * 256 + color.b
  this.beginFill(c, color.a);
  this.moveTo(points[0].x, points[0].y);

  for (var i = 1; i < points.length; i++) {
    this.lineTo(points[i].x, points[i].y);
  }

  this.endFill();
}
// width, height & clear made by PIXI.Graphics()

var iso = new Isomer(null, {customPathDrawer:graphics});

....

Is there any support or plan for supporting adding text labels/captions to the display? If not, what technique would be appropriate to super impose it?

Using for (var i in arr) seems to have a huge performance penalty. The benchmark: http://jsperf.com/for-in-vs-normal-array-iteration

And since loops are used in critical places of the framework (like adding objects to the scene) I think it will make a difference if we change them to normal loops.

I'd be happy to do it and send a pull request if you're okay with the idea.

I feel like this is the next shapes that we should implement.

Just a simple addition to handle iterating over arrays which have had prototype extended.

I suggest adding the following hasOwnProperty conditional.

File: isomer.js, (ln 262)

Isomer.prototype.add = function (item, baseColor) {

...

for (var i in paths) {
     if (paths.hasOwnProperty(i)) {
         this._addPath(paths[i], baseColor);
     }
 }

Hi there,

I just started using isomer and I'm glad that this sort of geometry is finally brought to the canvas.

I'm not sure if it's only visible on my computer, but I noticed that when translations are added, the shapes leave a trail. I looked at other pens that used rotation and the same artifacts don't occur.

Does anyone else notice artifacts when animating shapes? I tried adjusting the frame rate but no luck. Feedback is welcome.

Here's a pen I forked just to get started. Very crude, but you can see clearly how the blue pyramid on the bottom leaves a trail, while the pink pyramid rotates and leaves a circle at its base.

Thanks!

I'll make an issue about this - I'd like to hear everyone's thoughts. Don't hold back!

I've spent a few hours on a new threejs branch for Isomer, for a number of reasons. Mainly, WebGL does a few things very well

• Depth ordering
• Lighting, shadows, etc
• Textures
• Performance
• Community support

Some downsides?

• Code size. isomer.min.js is currently 9KB. With threejs that shoots up to almost a 1MB.
• As such, this takes time to load!
• What exactly is Isomer if we just offload everything to a WebGL library? Are we just a simple wrapper? Why Isometric at all?

There's a certain novelty in having Isomer so small, and translating lots of complicated 3D things into simple 2D canvas operations. I think those are some of the more attractive bits of this library, and by attempting to bring in WebGL I'm going against that.

So what do I actually want to do with Isomer?

I don't know! The original intent was to make cute little pictures, and I think that still holds true. But does the library need to be small to do that?

If we attempt to make Isomer this super powerful thing with an awesome foundation, are we encouraging a different use-case than what we originally intended? Is that okay?

So - I'm perplexed. I want Isomer to be small, but I want it to be correct. That is, I want Isomer to have these great features that come for free with a WebGL backing, but I don't want all the other stuff that I don't need. This isn't an attack at Three.js specifically, but WebGL in general!

In an ideal world? We would be using WebGL without compromising our small code size and speed. Does something like stack.gl make that possible? I remain skeptical.

I want to implement something like http://tfpsoft.com/about/gallery/mountainswireframe.html.

What is the best practice implementing this? Is it one Shape with just many Paths?

They aren't prisms, are they? They look like boxes to me.

Anyway, this is a good start and I might be able to use this soon. Thanks.

Say I draw a triangle using a Path and 3 Points the triangle ends up filled.

How to have the triangle with no fill, just the wireframe?

This looks really great, and would love to build a simple game with this.
Altough it would need more than just the plotting functionality.

Is there anyone who have build games using Isomer? Or are there alternatives that have same look and feel but provide some basic mechanisms for collission detection for example?

I believe this is not a game engine but a plotting library but if one wants to create games it should be hooked up with one, thoughts /suggestions?

Anyone has build a basic foundation for a level builder?

The Pyramid is upside down when using 400000 as the height. With 40000, it works correctly.

var Point  = Isomer.Point;
var Shape  = Isomer.Shape;

var iso = new Isomer(document.getElementById("canvas"));
iso.add(Shape.Prism(Point.ORIGIN, 1, 1, 400000));

Also there is a bug when setting the third argument of a Prism to 400. With 40 and 4000, it works fine.

In case it matters: I found this bug using the playground.

In the file js/isomer.js on line 112, you are using a global/window/self scope for color. I pretty sure you meant local. Because of that it fails in strict mode, throwing that color is not defined.

Current code:

var brightness = Vector.dotProduct(normal, this.lightAngle);
color = baseColor.lighten(brightness * this.colorDifference, this.lightColor);

Proposed fixes:

1. precede with 'var ', fe:
   var brightness = Vector.dotProduct(normal, this.lightAngle);
   var color = baseColor.lighten(brightness * this.colorDifference, this.lightColor);

OR

2. precede with comma, fe:
   var brightness = Vector.dotProduct(normal, this.lightAngle),
   color = baseColor.lighten(brightness * this.colorDifference, this.lightColor);

• Ability to specify direction - options.lightPosition
• Ability to specify light color - options.lightColor

@jdan you mentioned adding in backwards compatibility in your new branch. I'm just posing the question, why? Are there any projects that are big and you have to support?

It would be very cool to be able to import an existing 3D model, or even a list of coordinates.

Hi

Going through the wish list of things on #72 I think most folks want as compact an isometric library as possible, followed by depth sorting,shadows,etc with the ultimate goal of having the foundations of an isometric game engine.

At the base of these features, there is a coordinate/object system that I am not sure exists already, i.e to get to a shapes origin this is the closest I can get (and it doesn't change)...

block1.paths[0].points[0].x

In the end something like shape.X shape.Y Shape.Z is what I am after or/and a way of manipulating a shape or Object position after initiation.

Would this be a reasonable worthwhile thing to pursue while keeping the library small?

Thanks

My current depth sorting implementation is incredibly naive. Essentially, when Isomer.prototype.add is given a shape, it first orders its faces, then draws them.

Ordering the faces currently involves sorting them by the average distance of their points to the arbitrary point:

var observer = new Point(-10, -10, 10);

This fails for a number of reasons. Most notably, points located to the extreme left and right edges of the canvas (+x, -y) and (-x, +y) respectively, will be calculated to be further away than something close to the origin. Drawing shapes at these locations will cause their faces to be out of order.

Because of this limitation, drawing shapes with convex polygons as sides does not currently work, as you can see in the "star" example on the test page.

So, we need to implement some form of proper depth sorting. I imagine there are many neat tricks we can do with an isometric projection.

Here is an example:

Black line is outline.

I noticed that only circles with a 'z' axis of symmetry could be constructed, and similarly could only be rotated about that axis.

I forked and made some minor changes if you would like to use them. I ensured that that will not change the invocations at all so any old scripts should render as they do now.

node-canvas is a module that allows you to draw to a virtual canvas and export your drawing as a PNG. I'd like to make it easy to generate isomer drawings with node-canvas.

Doing this means we might need to rearrange some of the files to use a more traditional module pattern - at which point we can probably make it very easy to install isomer from NPM, Bower, and Component.

I read about that Textures planning support, but I think it 's useful to have support Sprites/Images too, because much people use standard painted art and do not use 3D models.

How do you think?

Sorry for my bad English language, thanks.

I think it's a good idea for Isomer to adapt a specific code style guide. Since Gulp is already used as a build tool, we can maybe add a JS linter stream, along with a config file that defines what's allowed and what's not. I notice the code that people write in their forks of Isomer is not styled in the same way as master.

It's probably useful to have some kind of visual editor to sketch things out before hand.

This SVG template to start making consistent Isometric illustrations. Included are two ways people might make an illustration, layered and flat. http://cl.ly/0c2I093j0x1L

Just open it in illustrator and use the live paint tool (one of the options after the k short cut) http://tv.adobe.com/watch/learn-illustrator-cc/live-paint-2/

I will note a problem with this method of making illustrations is that large illustrations get unmanageable quickly because of the computing power required to change the fill of each triangle (in illustrator). SVGs also become very large because of points within solid color areas.

e.g. if you do npm install isomer and then browserify -r isomer it won't work because https://github.com/jdan/isomer/blob/master/package.json#L18 points at a file that doesn't exist

In order to permit user interaction with the scene I'm trying to compute the inverse of the _translatePoint() utility function so that I can draw elements on the scene where the mouse is (at least with respect to the z=0 plane).

I think I'm trying to determine what input point.x and point.y might have resulted in the output that _translatePoint gives, if that makes sense.

I've actually come up with a solution by plugging the system of simultaneous equations into Wolfram Alpha:

det = (tx[0][1] * tx[1][0]) - (tx[0][0] * tx[1][1])
px = ((ox * tx[1][1]) + (oy * tx[1][0]) - (tx[1][0] * y) - (tx[1][1] * x)) / det
py = ((-(ox * tx[0][1])) - (ox * tx[0][0]) + (tx[0][0] * y) + (tx[0][1] * x)) / det

Where ox, oy is the origin and tx is your transformation matrix. This actually works, and is only off by constant

The version of Isomer on npm is one patch version behind:

$ npm view isomer version
0.2.3

I was wondering if it would be possible to have an alpha channel added to the color constructor. It'd be cool to have a transparent jell-o effect, or windows/water.

HI there,
Is there any CDN link I can point to in order to get a minified version of Isomer for a project?

Thanks

Is there any support for click/mouseover/hit detection, or is there any planned?

The reason is this:

Shape.Prism = function (origin, dx, dy, dz) {
    dx = dx || 1;
    dy = dy || 1;
    dz = dz || 1;

    ...
}

I found these functions in the source and I need to use them, but I'm a little confused. It would also be nice if they were on the homepage.

If you look at the drawing on the project page closely, you'll see the following:

There's a small "hairline" crack in the shape - essentially a discolored edge. This occurs when a portion of a hidden face creeps up. Might be due to floating point coordinates.

I've noticed there haven't been many changes in the last months, and I'm worried the project has come to a halt.

My game will revolve heavily around an isometric map and the objects placed on it, and isomer seems like the lightweight engine I'm looking for, but I'm afraid to put my hands on a deprecated project. Should I?

First of all: Thanks, great job!

According to this schema: http://www.sastgroup.com/images/iso-angles.gif adding a parameter in Isomer initialization the "real" iso angle or "best for pixel representation" iso angle could be selected, e.g.:

if ( options.isotype == 'pixelperfect' )
  this.angle = Math.atan(0.5);
else
  this.angle = Math.pi/6;

... or something like this.

I'm getting this error when I try to build isomer.
I have never used gulp before but I'm guessing this isn't suppose to happen?
I installed the npm package then ran gulp.

I'm going to create and immediately close this issue - using it as a temporary board for people to show off their creations.

I'm building a gallery site, and would like to showcase the cool stuff you're all making. Please make a codepen and paste it here :)