Monthly Archives: February 2015

Google Cardboard on Processing for Android

Today I worked on making stereoscopic images with Processing for the Android phone. The code below displays an image in two viewports – one for the left eye and one for the right eye. The result is that the image looks 3D when viewed from a Google Cardboard device. Accelerometer and gyroscope data are used to move the 3D image as the head is moved around. The only bug is that of Processing for Android in that Landscape mode makes the program crash if you do not start it in this mode. I am using Processing 2.0.3 and Android 4.3, so this problem may have been addressed in current versions. (Although I did see it was still an open issue in Processing-Bugs discussion on Github). The texture image is a 100 x 100 pixel image of a favorite cartoon character. You can use whatever you want – just store the image in the data folder. If you have suggestions for improvement, I’d love to hear it!

Update (3/1/15): I was able to fix the orientation problem by removing the orientation(LANDSCAPE) line and adding android:screenOrientation=”landscape” in the XML file as described here.


Here’s the code:

//Scott Little 2015, GPLv3
//pBoard is Processing for Cardboard

import android.os.Bundle; //for preventing sleep
import android.view.WindowManager;
import ketai.sensors.*; //ketai library for sensors
KetaiSensor sensor;

float ax,ay,az,mx,my,mz; //sensor variables
float eyex = 50; //camera variables
float eyey = 50;
float eyez = 0;
float panx = 0;
float pany = 0;
PGraphics lv; //left viewport
PGraphics rv; //right viewport
PShape s; //the object to be displayed

// The following code is required to prevent sleep.
void onCreate(Bundle savedInstanceState) {
// fix so screen doesn’t go to sleep when app is active

void setup() {
sensor = new KetaiSensor(this);

size(displayWidth,displayHeight,P3D); //used to set P3D renderer
orientation(LANDSCAPE); //causes crashing if not started in this orientation

lv = createGraphics(displayWidth/2,displayHeight,P3D); //size of left viewport
rv = createGraphics(displayWidth/2,displayHeight,P3D);

PImage img = loadImage(“jake.jpg”);
s = createShape();
TexturedCube(img, s, 50, 50);

void draw(){
//draw something fancy on every viewports
panx = panx-mx*10;
pany = 0;
eyex = 0;
eyey = -20*az;

ViewPort(lv, eyex, eyey, panx, pany, -15);
ViewPort(rv, eyex, eyey, panx, pany, 15);

//add the two viewports to your main panel
image(lv, 0, 0);
image(rv, displayWidth/2, 0);

void onAccelerometerEvent(float x, float y, float z){
ax = x;
ay = y;
az = z;

void onGyroscopeEvent(float x, float y, float z){
mx = x;
my = y;
mz = z;

void ViewPort(PGraphics v, float x, float y, float px, float py, int eyeoff){
v.pushMatrix();, y, 300, px, py, 0, 0.0, 1.0, 0.0);

void TexturedCube(PImage tex, PShape s, int a, int b) {

// +Z “front” face
s.vertex(-a, -a, a, 0, b);
s.vertex( a, -a, a, b, b);
s.vertex( a, a, a, b, 0);
s.vertex(-a, a, a, 0, 0);

// -Z “back” face
s.vertex( a, -a, -a, 0, 0);
s.vertex(-a, -a, -a, b, 0);
s.vertex(-a, a, -a, b, b);
s.vertex( a, a, -a, 0, b);

// +Y “bottom” face
s.vertex(-a, a, a, 0, 0);
s.vertex( a, a, a, b, 0);
s.vertex( a, a, -a, b, b);
s.vertex(-a, a, -a, 0, b);

// -Y “top” face
s.vertex(-a, -a, -a, 0, 0);
s.vertex( a, -a, -a, b, 0);
s.vertex( a, -a, a, b, b);
s.vertex(-a, -a, a, 0, b);

// +X “right” face
s.vertex( a, -a, a, 0, 0);
s.vertex( a, -a, -a, b, 0);
s.vertex( a, a, -a, b, b);
s.vertex( a, a, a, 0, b);

// -X “left” face
s.vertex(-a, -a, -a, 0, 0);
s.vertex(-a, -a, a, b, 0);
s.vertex(-a, a, a, b, b);
s.vertex(-a, a, -a, 0, b);