Simple isometric stuff

redraw

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?

behreajj

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);
}

Chrisir

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();
}