# Text that is not affected by rotations

**URL:** https://discourse.processing.org/t/text-that-is-not-affected-by-rotations/14800
**Category:** Coding Questions
**Created:** [October 19, 2019, 1:49pm UTC](https://discourse.processing.org/t/text-that-is-not-affected-by-rotations/14800 "2019-10-19T13:49:16Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![biran4454](https://avatars.discourse-cdn.com/v4/letter/b/9dc877/32.png) [@biran4454](https://discourse.processing.org/u/biran4454)
#### Post date: [October 19, 2019, 1:49pm UTC](https://discourse.processing.org/t/text-that-is-not-affected-by-rotations/14800/1 "2019-10-19T13:49:16Z")

</div>

I am writing a piece of code that draws 3D objects onto the canvas using P3D render.  
I have coded it such that one can rotate the camera and pan and zoom, etc.

I want to write some info text onto the screen, but when I move the camera, the text moves as though it were a real object getting displayed; I want the text to move with the camera, so as to stay in the same place (relative to the screen, not the objects).

Is there a function or way to stop the text being an object?  
This is not a bug, just a limit if mu knowledge `:)`  
Thanks!

---

<div class="post-metadata">

### Author: ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)
#### Post date: [October 19, 2019, 3:33pm UTC](https://discourse.processing.org/t/text-that-is-not-affected-by-rotations/14800/2 "2019-10-19T15:33:50Z")

</div>

if you have installed the library  
[PeasyCam](http://mrfeinberg.com/peasycam/) 302 [Jonathan Feinberg](http://mrfeinberg.com/)  
can use example  
HeadUpDisplay  
like:

```auto
import peasy.PeasyCam;

PeasyCam cam;

public void setup() {
  size(800, 600, P3D);
  cam = new PeasyCam(this, 400);
}

public void draw() {
  myView();
  myHUD();
}

void myView() {
  rotateX(-.5f);
  rotateY(-.5f);
  lights();
  scale(10);
  strokeWeight(1 / 10f);
  background(0);
  fill(96, 255, 0);
  box(30);
  pushMatrix();
  translate(0, 0, 17.5);
  fill(0, 96, 255);
  box(5);
  popMatrix();
}

void myHUD() {
  cam.beginHUD();
  fill(0, 128);
  rect(0, 0, 70, 30);
  fill(255);
  text(nfc(frameRate, 2)+" FPS", 10, 18);
  cam.endHUD();
}

```

---

<div class="post-metadata">

### Author: ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)
#### Post date: [October 19, 2019, 6:03pm UTC](https://discourse.processing.org/t/text-that-is-not-affected-by-rotations/14800/3 "2019-10-19T18:03:30Z")

</div>

Hello,

This is an example that rotates the text back with the movement of the camera.  
It will require more work if adding additional rotations along the other axis.

```auto
float rotation = 0;
float theta = 0;

void setup() 
  {
  size(500, 500, P3D);
  background(255);
  textSize(48);
  hint(ENABLE_DEPTH_SORT); //Comment this to see what it does!
  }

void draw() 
  {
  background(0);
  lights();
  
  pushMatrix();
  float radius = 250;
  float ypos = 0;
  float xpos = cos(theta)*radius;
  float zpos = sin(theta)*radius; 
  camera(xpos, ypos, zpos, 0, 0, 0, 0, 1, 0);

  translate(0, -50, 0);
  fill(128);
  noStroke();
  float s = 1.5;
  box(s*90, s*40, s*10);
  
  fill(255);
  textAlign(CENTER);
  textSize(48);
  text("Monolith", 0, 100, 0);
  
  pushMatrix();
  rotateY(TAU/4);
  pushMatrix();
  rotateY(-theta);
  textSize(48);
  text("Monolith", 0, 100, 0);
  popMatrix();
  popMatrix();
  
  theta += TAU/500;
  popMatrix();
  }

```

I used hint(ENABLE\_DEPTH\_SORT) so the text would overlap nicely.

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/086d5dba7784fd6132f76ea2fa656bbcc1e3774f.png)

I rotated text back in this example:

[![](https://img.youtube.com/vi/69t6ZC3HJ-8/maxresdefault.jpg "Rotating Axes") ](https://www.youtube.com/watch?v=69t6ZC3HJ-8)

🙂

---

<div class="post-metadata">

### Author: ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [October 20, 2019, 7:18am UTC](https://discourse.processing.org/t/text-that-is-not-affected-by-rotations/14800/4 "2019-10-20T07:18:49Z")

</div>

Specifically Peasycam has a HUD

it’s

```auto
cam.beginHUD();

Then your text buttons etc

Then

cam.endHUD();

```

[http://mrfeinberg.com/peasycam/](http://mrfeinberg.com/peasycam/)

---

<div class="post-metadata">

### Author: ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)
#### Post date: [October 21, 2019, 3:43am UTC](https://discourse.processing.org/t/text-that-is-not-affected-by-rotations/14800/5 "2019-10-21T03:43:40Z")

</div>

Another method is:

```auto
void draw() {
  pushMatrix();
  // 3d camera here
  // 3d draw here
  popMatrix();
  text("foo", x, y);
}

```

Another approach is to render your text onto a PGraphics pg, then composite it with image(pg, 0, 0) at the end of draw. Note that it can be a 2D even if the main sketch is P3D – this can give you better baseline text quality.
