Side by Side Processing Demonstration

sbs.pde

////
//
// This single-file no-dependency Processing 3 sketch demonstrates 
// how you can livecode side-by-side VR content in Processing and
// render it in realtime!
// 
// All comments exist to help the reader understand the approach.
//
// Youtube render of this sketch:
// https://www.youtube.com/watch?v=E3d7d8XR4Y0&feature=youtu.be

// render the left eye by this offset from the right eye
float left_eye_offset = 12f;

// one PGraphics buffer per eye
PGraphics pg_left, pg_right;


int box_count = 18;
float size = 50f;


void setup() {
  // match desktop res; fullScreen() is also possible
  size(1920,1080,P3D);  
  background(0);
  
  // hide the mouse cursor, which is not handled
  // well in SBS.
  noCursor();  
  
  // match headset framerate
  frameRate(90);
  pg_left = createGraphics(width/2,height,P3D);
  pg_right = createGraphics(width/2,height,P3D);
  
  // not SBS-specific; needed for this sketch
  pg_left.hint(DISABLE_DEPTH_SORT);
  pg_right.hint(DISABLE_DEPTH_SORT);
}


void drawOnce(PGraphics pg, int left) {
  pg.background(0);
  pg.stroke(255);
  pg.fill(192);
  pg.lights();
  

  // set up a perspective projection matrix, calculating
  // the aspect ratio from the *window width*, not the
  // framebuffer width.  This has the effect of a horizontal
  // squish of 50%.
  float fov = PI/3.0;
  float cameraZ = (height/2.0) / tan(fov/2.0);
  float aspect = (float)width / (float)height;
  pg.perspective(fov, aspect, cameraZ/10.0, cameraZ*10.0);
  
  // translate the entire scene by left_eye_offset when rendering
  // it for the left eye.  This shifts the left rendering
  // to the left.
  if (left == 1) {    
    pg.translate(left_eye_offset, 0.0, 0.0);
  }
  
  // Draw the cubes! -- nothing SBS-specific below here
  // in this function.
  pg.background(0,0,(sin(frameCount*0.1)*8.5)+30);  
  pg.colorMode(HSB, 360,100,100);  
  float step = 360.0/(box_count*box_count);  
  float c = frameCount%360;
  
  int whiteOne = (int)(frameCount*0.01) %(box_count*box_count);
  
  pg.lights();
  pg.ambientLight((frameCount+90)%360, 100,
                  sin(frameCount*0.1)*100,                    
                  sin(frameCount)*100,
                  0,0);
  
  int x, y;
  for (y = 0; y < box_count; y++) {
    for (x = 0; x < box_count; x++) {
      if ((x+y)%2==0)continue;
      pg.pushMatrix();
      
      float offZ;
      if ((x%2)==0)
        offZ = sin(frameCount*0.025) * 550.0f;
      else
        offZ = cos(frameCount*0.025) * 550.0f;
        
      pg.translate(x*size, (y+2)*size, offZ);
      pg.rotate(frameCount*0.05, 0.8, 0.5, 0.0);
      
      if (whiteOne==x*y) {
        pg.fill(255);
        pg.noStroke();        
      }
      else {
        pg.fill(c,100,40);
        pg.stroke(c,100,100);
      }
      
      pg.box(size);
      pg.popMatrix();
      
      c += step;
      c %= 360;
    }
  }
  
 
}


void draw() { 
  // render left eye
  pg_left.beginDraw();
  drawOnce(pg_left, 1);
  pg_left.endDraw();    
  
  // render right eye
  pg_right.beginDraw();
  drawOnce(pg_right, 0);  
  pg_right.endDraw();
  
  // blit render buffers
  image(pg_left, 0, 0);
  image(pg_right, width/2, 0);  
}