Processing 3D Navigation

Introduction

In this simple tutorial you will learn to navigate in a 3D processing sketch. The library to enable this navigation options we will discuss is not by default installed with processing. The name of this library is PeasyCam and is developed by Jonathan Feinberg. PeasyCam enables a intuitive mouse based navigation option for processing sketches.

How to install a library in processing

The installation of a library in processing is very simple. In case of PeasyCam, you first you need to download the library from Feinberg's website: http://mrfeinberg.com/peasycam/. After you unzipped the file put the PeasyCam folder in the libraries folder of processing. If there is not any library folder, make one your self.

Be sure your processing sketchbook location is set properly: press CTR+comma when you have processing open. The preference menu is now opened, check if the sketchbook location is set like the image below.

Simple PeasyCam example

Now we will build a quick example to demonstrate PeasyCam. You will make a 3D orbiting sphere to test the navigation abilities of PeasyCam. First we need to import the PeasyCam library:

import peasy.*;

Now we declare a PeasyCam object:

PeasyCam cam;

Then you need to declare the following variables: angle, offset, scalar and speed.

float angle = 0.0;

float offset = 60;

float scalar = 350;

float speed = 0.02;

In the setup we first define the screen size, then initialize the PeasyCam object then set the minimum and maximum clipping distance of the camera:

void setup() {

size(600,600,P3D);

cam = new PeasyCam(this, 100);

cam.setMinimumDistance(50);

cam.setMaximumDistance(5000);

}

In draw we will write the code that makes a sphere spinning.

void draw(){

Make a white background

background(255);

The function that will calculate the x,y,z coordinates of the sphere.

float x = offset + cos(angle) * scalar;

float y = offset + sin(angle) * scalar;

float z = offset + sin(angle) * scalar;

The following will update the angle variable and makes the sphere move for every frame.

angle += speed;

Now define the style of the sphere. In this case we use no fill and only a wireframe of the sphere. First the weight of the strokes:

strokeWeight(2);

Now the color of the stroke and no fill of the sphere:

stroke(120, 90);

noFill();

And at last use translate to move the sphere according the x,y,z variables and create a sphere of radius 60.

translate(x, y, z);

sphere(60);

End the Draw Function with }

}

Press play.

You will see a orbiting sphere in your screen. You can zoom with PeasyCam by scrolling your mouse. Press the left mouse button and move your mouse to rotate the camera. Press the middle mouse button and move the mouse to strafe. As an exercise try to use PeasyCam to follow the sphere.