You are here: Home / 2008 / October / Processing – Obsessive Camera Direction

Processing – Obsessive Camera Direction

By James Harrison on October 23, 2008

Processing is awesome, and what better way to improve a sketch like a map viewer than to give it some juicy mouse/keyboard controls?

The Obsessive Camera Direction library for Processing lets you do just that quite easily. Simply install the library and follow the guide for easy, awesome controls.

You need to be using some form of 3D rendering on your sketch already, be it OpenGL or P3D. You can do this by using the third argument to size- I use the GlGraphics renderer (an extension of the OpenGL renderer), so my setup function looks like this (more or less):

void setup() {
  1.   size(800, 600, GLConstants.GLGRAPHICS);
  2.   // use OPENGL instead of GLConstants.GLGRAPHICS here if you're
  3.   // not using GlGraphics
  4.   background(20);
  5.   frameRate(30);
  6. }

Now we move on and get down to business. We need to set up a few global variables.

// starting camera position
  1.   int x = 0;
  2.   int y = 0;
  3.   int z = 400;
  4.   // camera
  5.   Camera camera1;

Next, we modify our setup function to initialise the camera at it’s starting point.

void setup() {
  1.   size(800, 600, GLConstants.GLGRAPHICS);
  2.   // use OPENGL instead of GLConstants.GLGRAPHICS here if you're
  3.   // not using GlGraphics
  4.   background(20);
  5.   frameRate(30);
  6.   camera1 = new Camera(this, x, y, z);
  7. }

And finally, we need to set up this camera as our active camera feed in our draw function.

void draw() {
  1.   background(20);
  2.   camera1.feed();
  3.   // draw stuff!
  4. }

And there you have it- almost! So far we’ve just added a camera. Now we need a lengthy function to map keyboard and mouse to the camera movement controls.

// Function to manage mouse movement
  1. void mouseDragged()
  2. {
  3.   if (mouseButton == CENTER)
  4.   {
  5.     // Look around
  6.     camera1.truck(mouseX – pmouseX);
  7.     camera1.boom(mouseY – pmouseY);
  8.   }
  9.   else if (mouseButton == LEFT) {
  10.     camera1.tilt(radians(mouseY – pmouseY) / 2.0);
  11.     camera1.pan(radians(mouseX – pmouseX) / 2.0);
  12.   }
  13.   else {
  14.     camera1.dolly((pmouseX-mouseX)+(pmouseY-mouseY)/2);
  15.   }
  16. }
  17. // One more to handle the keyboard
  18. void keyPressed() {
  19.   switch(key) {
  20.   case 'r':
  21.     // Reset camera position and orientation
  22.     camera1.jump(x,y,z);
  23.     camera1.aim(0,0,0);
  24.     break;
  25.   case 'w':
  26.     // dolly forwards
  27.     camera1.dolly(-10);
  28.     break;
  29.   case 's':
  30.     // dolly backwards
  31.     camera1.dolly(10);
  32.     break;
  33.   case 'a':
  34.     // truck left
  35.     camera1.truck(-10);
  36.     break;
  37.   case 'd':
  38.     // truck right
  39.     camera1.truck(10);
  40.     break;
  41.   case ' ':
  42.     // boom up
  43.     camera1.boom(-10);
  44.   case CODED:
  45.     if (keyCode == CONTROL) {
  46.       // boom down
  47.       camera1.boom(10);
  48.     }
  49.     break;
  50.   }
  51. }

Right, finally done. This will map your mouse as follows:

  • Left mouse button looks around
  • Right mouse button moves backwards/forwards
  • Centre mouse button (wheel click down on most mice) is left/right movement

Your keyboard also gets some controls:

  • r – Resets view to the default position
  • w – Moves view forwards
  • s – Moves view backwards
  • a – Moves view left
  • d – Moves view right
  • Control – Moves view down
  • Space – Moves view up

All up/down/left/right is relative to the view axis.

Hope this helps someone else trying to achieve the same thing with Processing!

Posted in | Tagged , ,

One Response

  1. alba
    alba November 15, 2008 at 04:31 |

    Great!

Comments are closed.