3D in Processing for Android   7 comments

During the recent symposium “Processing.Android: Open Source for Mobile Innovation”, organized by Daniel Sauter from UIC, I had the chance to be the instructor in a workshop about 3D graphics in Processing for Android. The event was very successful, and among the speakers there were Casey Reas, Ben Fry, Jer Thorpe, and other artists, researchers and educators deeply involved in art, code and open source. This was a good opportunity to introduce the recent developments in the Android port of Processing, which include the work in the 3D renderer I’m doing myself, as well as the Ketai in Motion library for simplified access to sensor data, developed by Daniel Sauter and Jesus Duran. In the rest of this post I’ll describe in more detail the new 3D renderer in Processing for Android, A3D.

The A3D renderer allows to generate 3D graphics on Android devices supporting OpenGL ES 1.1. One of the main features of A3D is that it follows as closely as possible all the preexisting 3D API, available in the P3D/OPENGL renderers for the PC/Mac versions of Processing. Processing for Android is still in the pre-release stage, meaning that many features are being implemented and might not work as expected. However, the pre-release version 191 is quite usable in general and also for 3D coding. You can grab the package corresponding to your platform from here.

In order to get started with Processing for Android, online tutorials by Peter Kirn and Jer Thorpe provide useful step-by-step guides. Once the basic setup is worked out, the use of A3D is quite easy, it just involves setting the renderer in the size function to either A3D or P3D. Although P3D refers to the 3D software renderer in PC, Processing will automatically translate P3D into A3D when running in Android mode:

void setup() {
  size(480, 800, P3D);
  noStroke();
}  

void draw() {
  background(0);
  lights();
  translate(width/2, height/2);
  rotateY(frameCount*PI/200);
  box(200);
}

The result of this simple sketch should be a grey shaded rotating cube:

A3DCube

Most of the drawing functions inherited from PGraphics are implemented, including beginShape/endShape, lights, textures, and fonts. Things can get very interesting when combining 3D drawing with data coming from the sensors in the device, such as the accelerometer. The following code, originally written by Daniel Sauter and Jesus Duran, shows how to use the (x,y,z) acceleration values, read with the help of the Ketai library (which you can download from here), in order to control the motion of a rolling sphere:

import edu.uic.ketai.inputService.*; 

PFont font;
KetaiSensorManager sensorManager;
PVector accelerometer;

float x, y, z;
float smoothx, smoothy, smoothz;

void setup() {
  size(480, 800, A3D);
  orientation(PORTRAIT);   

  String[] fonts = PFont.list();
  font = createFont(fonts[0], 24);
  textFont(font, 24);

  sensorManager = new KetaiSensorManager(this);
  sensorManager.start(); 

  accelerometer = new PVector(); 

  noStroke();
}

void draw() {
  background(200);
  fill(0);
  text("Accelerometer data:\n" + nfp(accelerometer.x, 2, 2) + "\n" +
                                 nfp(accelerometer.y, 2, 2) + "\n" +
                                 nfp(accelerometer.z, 2, 2) + "\n" +
       "Framerate:" + nf(frameRate, 2, 2) + "fps", 30, 50); 

  translate(width/2, height/2, 0);
  scale(height/2); 

  // Spotlight from top.
  spotLight(155, 180, 230, 0, 0, 0.6, 0, 0, -1, THIRD_PI, 1);

  PVector up = new PVector(0, 1, 0); 

  // dir vector
  PVector N = new PVector(-accelerometer.x, -accelerometer.y, -accelerometer.z);
  N.normalize(); 

  // up vector
  PVector U = up.cross(N);
  U.normalize(); 

  // right vector
  PVector V = N.cross(U);
  V.normalize(); 

  applyMatrix(U.x, U.y, U.z, 0, V.x, V.y, V.z, 0, N.x, N.y, N.z, 0, 0, 0, 0, 1); 

  // Updating sphere position
  if (z <= 0.5) x += accelerometer.x / 20;
  if (z <= 0.5) y += accelerometer.y / 20;
  if (abs(x) > 0.51 || abs(y) > 0.51) z += abs(accelerometer.z - 9.81);
  if (abs(z) > 5) {
    x = y = z = 0;
  }  

  fill(150, 150, 230);
  pushMatrix();
  translate(x, y, z - 0.08);
  sphere(0.08);
  popMatrix();  

  fill(200);
  translate(0, 0, 0.1);
  box(1, 1, 0.2);
}

void onAccelerometerSensorEvent(long time, int accuracy, float x, float y, float z) {
  smoothx += 0.1 * (x - smoothx);
  smoothy += 0.1 * (y - smoothy);
  smoothz += 0.1 * (z - smoothz);
  accelerometer.set(smoothx, smoothy, smoothz);
}

The following video shows the result of running this code:

Well, this was just a quick overview of some of the things that can be done with A3D. Many improvements and bugfixes are coming along for the next pre-releases, so stay tuned. Hopefully this will serve as the starting point for new exciting projects using Processing on Android devices.

About these ads

Posted October 10, 2010 by ac in Conferences, Programming, Workshops

Tagged with , , , , , ,

7 responses to “3D in Processing for Android

Subscribe to comments with RSS.

  1. I try to compile the rolling sphere example but don’t work.

    When compile in Android mode return vaious erros.

    I have installed the Ketai libs.

  2. Hi, you need to add file Ketai.jar since the menu sketch otherwise you will have an error message about the fact processing don’t find the library. You will find it in the library folder of Ketai

  3. your cube app becomes even cooler after adding:

    rotateX(-frameCount*PI/200);

    thank you for this page :)

    • yes, it is true, thanks for the tip!

      Make sure you check the latest OpenGL examples included with Processing 1.5.1 in Android mode. Lots of additions and improvements since the time I wrote this post :)

  4. can i get a code to draw 3d pie chart in android? please can any1 help me..

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 55 other followers

%d bloggers like this: