Question

I’d like to change the coordinate system in a 2d processing sketch, putting (0,0) in the bottom-left rather than the top-left. The following code will move (0,0) to the bottom-left:

transform(0, height);
rotate(radians(-90));

However, it also makes the X-axis the vertical axis. Is there a simple way to move (0,0) to the bottom-left and keep the X-axis horizontal?

One option I’ve considered is using P3D with a combination of rotate and rotateY, but would prefer a solution for the 2d case.

Thanks for any help!

Answer 1

You could simply translate without rotating:

transform(0, height);

And handle your coordinates as flipped:
boolean useVFlip = true;

void setup(){
  size(400,400);
}
void draw(){
  background(255);

  if(useVFlip) translate(0,height);
  drawAxes(100);

  translate(width * .5, useVFlip ? (height-mouseY)*-1 : mouseY);
  triangle(0,0,100,0,100,100);
}
void keyPressed(){   useVFlip = !useVFlip; }
void drawAxes(int size){
  pushStyle();
  strokeWeight(10);
  stroke(192,0,0);
  line(0,0,size,0);
  stroke(0,192,0);
  line(0,0,0,size);
  popStyle();
}

If it makes it easier to get flipped coordinates, you could flip the whole coordinate system using the scale() method:
boolean useVFlip = true;

void setup(){
  size(400,400);
}
void draw(){
  background(255);

  if(useVFlip){
    scale(1,-1);
    translate(0,-height);
  }
  drawAxes(100);

  translate(width * .5, useVFlip ? height-mouseY : mouseY);
  triangle(0,0,100,0,100,100);
}
void keyPressed(){   useVFlip = !useVFlip; }
void drawAxes(int size){
  pushStyle();
  strokeWeight(10);
  stroke(192,0,0);
  line(0,0,size,0);
  stroke(0,192,0);
  line(0,0,0,size);
  popStyle();
}

You could do the same with a PMatrix2D, but not sure how familiar your are with them:
boolean useCustomCS = true;
PMatrix2D customCS;

void setup(){
  size(400,400);
  customCS = new PMatrix2D(  1,  0,  0,
                             0, -1,height);
  fill(0);
}
void draw(){
  background(255);

  if(useCustomCS) applyMatrix(customCS);
  drawAxes(100);

  translate(width * .5, useCustomCS ? height-mouseY : mouseY);
  text("real Y:" + mouseY + " flipped Y: " + (height-mouseY),0,0);
  triangle(0,0,100,0,100,100);
}
void keyPressed(){   useCustomCS = !useCustomCS; }
void drawAxes(int size){
  pushStyle();
  strokeWeight(10);
  stroke(192,0,0);
  line(0,0,size,0);
  stroke(0,192,0);
  line(0,0,0,size);
  popStyle();
}