Simple isometric stuff

edited June 2017 in Questions about Code

I've been using ortho() function for isometric projection. It's great. Now I wonder what's the best approach for a simple game.

I have this example,

void setup() {
  size(400, 400, P3D);
  ortho(0, width, 0, height); // same as ortho()
  stroke(255);
  noFill();
}

void draw() {
  //lights();
  background(0);
  translate(width/2, height/2, 0);
  rotateX(-PI/6);
  rotateY(map(mouseX, 0, width, 0, 2*PI));  
  box(width/3);
}

However, I am rotating the whole canvas. Should I rotate the camera instead? Is there any little advice on how to make an isometric room, considering walls in a future?

You know, when making a 2d grid, you start from the top left generally, so you're attached to that point when rotating for example. would it be convenient to make everything relative to the center of the grid?

Answers

  • edited June 2017

    Hi redraw, I found this article on How to position the camera for isometric assets to be helpful on the first question. Hopefully I got the maths right below, not every dev environment has the same + and - poles for y and z axes.

    float posx, posy, posz, 
      lookatx, lookaty, lookatz, 
      boxScale;
    
    void setup() {
      size(400, 400, P3D);
      boxScale = width / 3;
      float halfw = width * 0.5;
      float halfh = height * 0.5;
      float oneOverSqrt = 1 / sqrt(2);
      float m = boxScale * 0.5 + dist(0, 0, halfw, halfh);
      lookatx = -halfw;
      lookaty = halfh;
      lookatz = 0;
      posx = m * oneOverSqrt + lookatx;
      //posy = m * tan(asin(tan(radians(45 / 2)))) - lookaty;
      posy = m * oneOverSqrt - lookaty;
      posz = m * oneOverSqrt + lookatz;
    }
    
    void draw() {
      background(0);
      lights();
      ortho(0, width, 0, height, 0, 2000);
      fill(255, 127, 0, 204);
      camera(posx, posy, posz, 
        lookatx, lookaty, lookatz, 
        0, 1, 0);
      //rotateY(frameCount * 0.01);
      box(boxScale);
    }
    
  • you can isolate two boxes with pushMatrix / popMatrix

    it is advisable to draw everything over the origin 0,0, e.g. from -30 to 30 - box does this aitomatically.

    void setup() {
      size(400, 400, P3D);
      //  ortho(0, width, 0, height); // same as ortho()
      stroke(255);
      noFill();
    }
    
    void draw() {
      //
      background(0);
      lights();
    
      pushMatrix();
      fill(255, 2, 2);
      translate(width/2, height/2, 0);
      rotateX(-PI/6);
      rotateY(map(mouseX, 0, width, 0, 2*PI));  
      box(width/3);
      popMatrix(); 
    
    
      pushMatrix();
      fill(2, 2, 255);
      translate(width/4, 44, 0);
      rotateY(-PI/6);
      rotateX(map(mouseY, 0, width, 0, 2*PI));  
      box(width/5);
      popMatrix();
    }
    
Sign In or Register to comment.