3D mode creating an offset

p5.js Coding Questions
1

Hello,

I’m wondering if anyone can let me know why the rectangle is offset from the mouse by about 300px in the x and y direction?

here’s the code:

var angle = 0;

function setup() {
  createCanvas(700, 700, WEBGL);  
}

function draw() {
  background(64); 
  translate(mouseX, mouseY);
  
  rotateY(angle);
  rectMode(CENTER);
  rect(0, 0, 50, 50);
  angle += 0.02;
}

in the 2D version it seems to work well:

var angle = 0;

function setup() {
  createCanvas(700, 700);
}

function draw() {
  background(64); 
    
  translate(mouseX, mouseY);
  rotate(angle);
  
  rectMode(CENTER);
  rect(0, 0, 100, 100);
  
  // animate!
  angle += 0.02;
}

My guess is that it has to do with translate() needing a third parameter for Z but that’s as close as I can get. I don’t know what to put in there.

1 Like
2

The p5js devs have decided that renderer WEBGL should have its coordinate origin at the center of canvas, in order to please those who come from the JS world, in detriment of those from Processing. :expressionless:

3 Likes
3

Ah! That helps a lot :slight_smile: Thank you. So the answer is:

translate(mouseX-width/2, mouseY-height/2);

Or is there a more elegant solution?

1 Like