Sign in to follow this  

Isometric Cubes in Canvas

This topic is 1448 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

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

This topic is 1448 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

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