# OrbitCam and RawMouse

**URL:** <https://discourse.processing.org/t/orbitcam-and-rawmouse/147>\
**Category:** Gallery\
**Created:** [May 20, 2018, 1:32am UTC](https://discourse.processing.org/t/orbitcam-and-rawmouse/147 "2018-05-20T01:32:37Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![rbrauer](https://avatars.discourse-cdn.com/v4/letter/r/838e76/32.png) [@rbrauer](https://discourse.processing.org/u/rbrauer)\
**Post date:** [May 20, 2018, 1:32am UTC](https://discourse.processing.org/t/orbitcam-and-rawmouse/147/1 "2018-05-20T01:32:37Z")

</div>

Hi new Processing forum. Here is an example of how to do raw mouse and a trackball type camera using matrices instead of using libraries / quaternions.

p5js version - [https://www.openprocessing.org/sketch/550998](https://www.openprocessing.org/sketch/550998)  
processingjs version - [https://www.openprocessing.org/sketch/550454](https://www.openprocessing.org/sketch/550454)

```auto
/*
trackball type camera controls without libraries or quaternions
uses two matrices instead
also includes raw mouse via JOGL
*/

import com.jogamp.newt.opengl.GLWindow;

PMatrix3D acc, delta;
PVector camEye, camUp, camPitch;
PVector eye, up;
float sensitivity = 0.01;

boolean pointerLock;

void setup() {
  size(1280,720,P3D);
  noFill();
  stroke(255);
  perspective(
    HALF_PI,
    (float)width/height,
    0.001, 100000
  );

  acc = new PMatrix3D();
  delta = new PMatrix3D();

  camEye = new PVector(0, 0, 500);
  eye = camEye.copy();
  camUp = new PVector(0, 1, 0);
  up = camUp.copy();
  camPitch = new PVector(1, 0, 0);
}

void mouseMoved() {
  if(!pointerLock) return;

  float xx = (mouseX - width * 0.5);
  float yy = (mouseY - height * 0.5);

  eye = acc.mult(camEye.copy(), null);
  up = acc.mult(camUp.copy(), null);
  PVector pitch = acc.mult(camPitch.copy(), null);

  delta.rotate(xx*sensitivity, up.x, up.y, up.z);
  delta.rotate(yy*sensitivity, pitch.x, pitch.y, pitch.z);
  acc.preApply(delta);
  delta.reset();

  ((GLWindow)getSurface().getNative())
    .warpPointer(width / 2, height / 2);
}

void mouseClicked() {
  pointerLock = !pointerLock;
  if(pointerLock) {
    noCursor();
  } else {
    cursor();
  }
}

void draw() {
  background(0);

  camera(
    eye.x, eye.y, eye.z,
    0, 0, 0,
    up.x, up.y, up.z
  );

  box(100);
  translate(110, 0, 0);
  box(100);
  translate(-110, -110, 0);
  box(100);
}

```

---

<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:** [May 21, 2018, 4:53pm UTC](https://discourse.processing.org/t/orbitcam-and-rawmouse/147/2 "2018-05-21T16:53:01Z")

</div>

Thank you for sharing this – and for providing both Processing(Java) and p5.js versions!

It is really useful that this simple code does not need a library dependency. Are you familiar with the [peasycam](http://mrfeinberg.com/peasycam/) library, and if so could you say how this code compares to its approach to implementing a “dead simple mouse driven camera”?

---

<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:** [May 21, 2018, 8:13pm UTC](https://discourse.processing.org/t/orbitcam-and-rawmouse/147/3 "2018-05-21T20:13:50Z")

</div>

There’s also this “Rotating Cube” using pure 3D math, for Java Mode & p5js:

> **[Rotating Cube - OpenProcessing](https://www.openprocessing.org/sketch/421281)**
>
> PeterCollingridge.AppSpot.com/3D-tutorial

  

> **[Rotating Cube](https://bl.ocks.org/GoSubRoutine/a117ecb16a8b0f939a190f87d3a13267)**
>
> GoSubRoutine’s Block a117ecb16a8b0f939a190f87d3a13267

Originally from Khan’s Pjs:  
[https://KhanAcademy.org/computer-programming/3d-tutorial-4/1648921303](https://KhanAcademy.org/computer-programming/3d-tutorial-4/1648921303)

Based on: [http://PeterCollingridge.AppSpot.com/3D-tutorial](http://PeterCollingridge.AppSpot.com/3D-tutorial)

---

<div class="post-metadata">

**Author:** ![rbrauer](https://avatars.discourse-cdn.com/v4/letter/r/838e76/32.png) [@rbrauer](https://discourse.processing.org/u/rbrauer)\
**Post date:** [May 23, 2018, 1:06am UTC](https://discourse.processing.org/t/orbitcam-and-rawmouse/147/4 "2018-05-23T01:06:43Z")

</div>

I think with this example it would still be possible to get gimbal lock – although it would probably be unlikely if you are only rotating it with the mouse – where with PeasyCam it is not.

Also PeasyCam does a bunch of stuff not included in this example like pan, zoom, rotate around look direction, lock rotation to one axis, reset position / zoom / rotation all automatically bound to mouse and keyboard controls.