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):
-
size(800, 600, GLConstants.GLGRAPHICS);
-
// use OPENGL instead of GLConstants.GLGRAPHICS here if you're
-
// not using GlGraphics
-
background(20);
-
frameRate(30);
-
}
Now we move on and get down to business. We need to set up a few global variables.
-
int x = 0;
-
int y = 0;
-
int z = 400;
-
// camera
-
Camera camera1;
Next, we modify our setup function to initialise the camera at it’s starting point.
-
size(800, 600, GLConstants.GLGRAPHICS);
-
// use OPENGL instead of GLConstants.GLGRAPHICS here if you're
-
// not using GlGraphics
-
background(20);
-
frameRate(30);
-
camera1 = new Camera(this, x, y, z);
-
}
And finally, we need to set up this camera as our active camera feed in our draw function.
-
background(20);
-
camera1.feed();
-
// draw stuff!
-
}
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.
-
void mouseDragged()
-
{
-
if (mouseButton == CENTER)
-
{
-
// Look around
-
camera1.truck(mouseX – pmouseX);
-
camera1.boom(mouseY – pmouseY);
-
}
-
else if (mouseButton == LEFT) {
-
camera1.tilt(radians(mouseY – pmouseY) / 2.0);
-
camera1.pan(radians(mouseX – pmouseX) / 2.0);
-
}
-
else {
-
camera1.dolly((pmouseX-mouseX)+(pmouseY-mouseY)/2);
-
}
-
}
-
// One more to handle the keyboard
-
void keyPressed() {
-
switch(key) {
-
case 'r':
-
// Reset camera position and orientation
-
camera1.jump(x,y,z);
-
camera1.aim(0,0,0);
-
break;
-
case 'w':
-
// dolly forwards
-
camera1.dolly(-10);
-
break;
-
case 's':
-
// dolly backwards
-
camera1.dolly(10);
-
break;
-
case 'a':
-
// truck left
-
camera1.truck(-10);
-
break;
-
case 'd':
-
// truck right
-
camera1.truck(10);
-
break;
-
case ' ':
-
// boom up
-
camera1.boom(-10);
-
case CODED:
-
if (keyCode == CONTROL) {
-
// boom down
-
camera1.boom(10);
-
}
-
break;
-
}
-
}
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!
Great!