# 3D mode creating an offset

**URL:** <https://discourse.processing.org/t/3d-mode-creating-an-offset/13042>\
**Category:** Coding Questions\
**Created:** [July 29, 2019, 4:03pm UTC](https://discourse.processing.org/t/3d-mode-creating-an-offset/13042 "2019-07-29T16:03:12Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![SheCurvesMobius](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/shecurvesmobius/32/7054_2.png) [@SheCurvesMobius](https://discourse.processing.org/u/SheCurvesMobius)\
**Post date:** [July 29, 2019, 4:03pm UTC](https://discourse.processing.org/t/3d-mode-creating-an-offset/13042/1 "2019-07-29T16:03:12Z")

</div>

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:

```auto
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:

```auto
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.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [July 29, 2019, 4:30pm UTC](https://discourse.processing.org/t/3d-mode-creating-an-offset/13042/2 "2019-07-29T16:30:19Z")

</div>

> [@SheCurvesMobius](#):
>
> 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?

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. 😑

---

<div class="post-metadata">

**Author:** ![SheCurvesMobius](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/shecurvesmobius/32/7054_2.png) [@SheCurvesMobius](https://discourse.processing.org/u/SheCurvesMobius)\
**Post date:** [July 29, 2019, 5:24pm UTC](https://discourse.processing.org/t/3d-mode-creating-an-offset/13042/3 "2019-07-29T17:24:00Z")

</div>

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

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

```

Or is there a more elegant solution?