Sign in to follow this  
jeremythuff

Isometric Cubes in Canvas

Recommended Posts

Hello,

 

I am trying draw cubes in canvas. I want to call the function cube(x,y) and have a cube draw at that spot. In the function cube I am looping over an array of matrices that are being passed into .setTransform(). the issue is that once I dial in the x and y offset at an x and y of 0,0 that offset need does not work for x,y 100,100.

 

I need a formula for the x and y offset that will allow it to be accurate no mater what x and y value has been passed into my function. I guess i need some sort of constant or something to tame the shift of x and y. 

 

I have a fiddle here that illustrates my issue: http://jsfiddle.net/jeremythuff/S9TGU/324/

 

and here is my function:

function cube(x,y){
    var faces = [
        [1,-0.5,1,0.5,x,y],
        [1,-0.5,0,1,x+w,y+(h/2)],
        [1,0.5,0,-1,x,y+h]
    ];
   
    $(faces).each(function() {
        var matrix = this;
        ctx.save();
        ctx.setTransform(
            matrix[0],
            matrix[1],
            matrix[2],
            matrix[3],
            matrix[4],
            matrix[5]
        );
        ctx.strokeRect(x, y, w, h);    
        ctx.restore();
    });
     } 

any guidance will be appreciated. 

Share this post


Link to post
Share on other sites
ctx.setTransform(
  matrix[0],
  matrix[1],
  matrix[2],
  matrix[3],
  matrix[4],
  matrix[5]
);
//ctx.strokeRect(x, y, w, h);
ctx.strokeRect(0,0,w,h);

You're applying the transforms two times thats why the "planes" are shifted.

The last two indices of your matrix (4,5) are already a translation in space, using strokeRect with with x, y arguments

causes the translation to be applied again. 

 

I've adjusted your fiddle accordingly, take a look at MDN Transforms article for further information.

 

EDIT:

I added some colors to make it look more isometric.

http://jsfiddle.net/jeremythuff/S9TGU/324/

 

Merry X-Mas smile.png

Edited by LJ_1102

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this