# Is there any way to update the camera, rather than create a new one?

**URL:** <https://discourse.processing.org/t/is-there-any-way-to-update-the-camera-rather-than-create-a-new-one/10031>\
**Category:** Coding Questions\
**Created:** [April 6, 2019, 3:40pm UTC](https://discourse.processing.org/t/is-there-any-way-to-update-the-camera-rather-than-create-a-new-one/10031 "2019-04-06T15:40:23Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Bluu](https://avatars.discourse-cdn.com/v4/letter/b/a88e4f/32.png) [@Bluu](https://discourse.processing.org/u/Bluu)\
**Post date:** [April 6, 2019, 3:40pm UTC](https://discourse.processing.org/t/is-there-any-way-to-update-the-camera-rather-than-create-a-new-one/10031/1 "2019-04-06T15:40:23Z")

</div>

I was creating a 3-d modeling program and was working on camera controls, when I realized that I couldn’t make a camera system that would just update the camera’s position and other values, rather than just creating a new camera. Is there any better way to do this so camera movements are preserved when another operation is used?

```auto
float mouseW;
void mouseWheel(MouseEvent event) {
  mouseW = event.getCount();
  println(mouseW);
}
void op() {
  if (name!=null) {
    if (name=="Save") {
    } else if (name=="Import") {
      selectInput("Please select an object(.obj) file for import.", "importobj");
      name=null;
    } else if (name=="Shapes") {
    } else if (name=="Pencil") {
    } else if (name=="Clay") {
    } else if (name=="Camera") {
      if (mouseButton==LEFT) {
        //rot
        camera(mouseX, mouseY, (height/2) / tan(PI/6), width/2, height/2, 0, 0, 1, 0);
      } else if (mouseW!=0.0) {
        if (mouseW>0) {
          camera(0, 10, 0, 0, 0, 0, 0, 1, 0);//add+sub rather than change?
        } else if (mouseW<0) {
          camera(0, -10, 0, 0, 0, 0, 0, 1, 0);
        }
      } else if (mouseButton==RIGHT) {
        //lrud
        camera(mouseX, 0, mouseY, 0, 0, 0, 0, 1, 0);
      }
    }
  }
}

```

P.s. If I’m being too vague, ask for the info I missed.

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [April 6, 2019, 5:05pm UTC](https://discourse.processing.org/t/is-there-any-way-to-update-the-camera-rather-than-create-a-new-one/10031/2 "2019-04-06T17:05:30Z")

</div>

Create a camera class like this

```auto
public class Camera {

	float eyeX, eyeY, eyeZ;
	float targetX, targetY, targetZ;
	float upX, upY, upZ;

	public Camera(float eyeX, float eyeY, float eyeZ, float targetX, float targetY, float targetZ) {
		this(eyeX, eyeY, eyeZ, targetX, targetY, targetZ, 0, 1, 0);
	}

	public Camera(float eyeX, float eyeY, float eyeZ, float targetX, float targetY, float targetZ, float upX, float upY,
			float upZ) {
		super();
		this.eyeX = eyeX;
		this.eyeY = eyeY;
		this.eyeZ = eyeZ;
		this.targetX = targetX;
		this.targetY = targetY;
		this.targetZ = targetZ;
		this.upX = upX;
		this.upY = upY;
		this.upZ = upZ;
	}

	public void applyTo(PGraphics pg) {
		pg.camera(eyeX, eyeY, eyeZ, targetX, targetY, targetZ, upX, upY, upZ);
	}

	public void applyTo(PApplet papp) {
		applyTo(papp.getGraphics());
	}
        // Leave you to add getters and setters :-)
}

```

You can create several cameras and `appyTo` any PApplet of PGraphics instance.

---

<div class="post-metadata">

**Author:** ![Bluu](https://avatars.discourse-cdn.com/v4/letter/b/a88e4f/32.png) [@Bluu](https://discourse.processing.org/u/Bluu)\
**Post date:** [April 6, 2019, 8:29pm UTC](https://discourse.processing.org/t/is-there-any-way-to-update-the-camera-rather-than-create-a-new-one/10031/3 "2019-04-06T20:29:58Z")

</div>

Thank you so much for the great answer! I was just wondering one last thing, if I wanted to create a UI overlay for the camera class, where in the code you gave me could I put it so it would stay in the same part of the screen the whole time?

```auto
void menu() {
  rect(0, 0, width/20, height);
  rect(width/20, 0, width/20, height);
  for (int i=0; i<menunames.length; i++) {
    PImage g=loadImage(menunames[i]+".png");
    g.resize(width/20, width/20);
    image(g, 0, 0+i*(width/20));
    if (mousePressed&&mouseX<width/20&&mouseX>0&&mouseY>i*(width/20)&&mouseY<(i+1)*(width/20)) {
      name=menunames[i];
    }
  }
}

```

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [April 6, 2019, 8:52pm UTC](https://discourse.processing.org/t/is-there-any-way-to-update-the-camera-rather-than-create-a-new-one/10031/4 "2019-04-06T20:52:00Z")

</div>

Yes. The draw method would look something like this

```auto
void draw(){
  backround(0); // or whatever colour you want
  pushMatrix();

  // In this part of draw do all your 3D camera and rendering stuff
  
  popMatrix();
  hint(DISABLE_DEPTH_TEST);
  // Normal 2D pixel coordinate space prevails lol
  // Draw any 2D stuff here e.g. menus
  hint(ENABLE_DEPTH_TEST);
  // End of draw method
}

```

---

<div class="post-metadata">

**Author:** ![Bluu](https://avatars.discourse-cdn.com/v4/letter/b/a88e4f/32.png) [@Bluu](https://discourse.processing.org/u/Bluu)\
**Post date:** [April 8, 2019, 4:48pm UTC](https://discourse.processing.org/t/is-there-any-way-to-update-the-camera-rather-than-create-a-new-one/10031/5 "2019-04-08T16:48:42Z")

</div>

I’m sorry to waste your time, but I’m curious how to actually define and use the camera class. I have something along the lines of this in my draw loop:

```auto
Camera cam=new Camera(0, 0, 0, 0, 0, 0);
void draw() {
  pushMatrix();
  cam.applyTo(???);

```

But I’m not sure what to put in the cam.applyto field(I tried googling, but for some reason nothing in the docs worked for me). This will be the last question, thanks in advance.

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [April 8, 2019, 9:50pm UTC](https://discourse.processing.org/t/is-there-any-way-to-update-the-camera-rather-than-create-a-new-one/10031/6 "2019-04-08T21:50:16Z")

</div>

In your example the third line would be

```auto
cam.apply(this);

```

> [@Bluu](#):
>
> ```auto
> Camera cam=new Camera(0, 0, 0, 0, 0, 0);
> 
> ```

Also you can’t do this. This first three values represent the XYZ coordinates for the eye, the second three the XYZ coordinates of where you are looking at.  
They can’t be the same position in 3D space. Review the reference for the `camera(...)` method.