title: In Processing.JS, how does one go about rotating an image about the y-axis?
body: <p>I was wondering if one is able to rotate an image about the y-axis in Processing.js? I saw that there is a rotateY() method, but it fails to load my images in the draw() method when I call it...is there an alternative method to doing this (either using Processing.js, straight canvas APIs, or CSS3)?</p>
  
  <p>Essentially, I am trying to achieve the effect <a href="http://www.craftymind.com/factory/html5video/CanvasVideo3D.html" rel="nofollow">achieved in this page</a>.</p>
  
  <p>Using the following code, my image fails to even render in my canvas element. </p>
  
  <pre><code>/* @pjs preload="img/batman.jpg"; */
  
  PImage[] images = new PImage[1];  
  
  void setup()
  {
      size(600,400,P3D); //The rotateY docs require that P3D or OPENGL be defined here
      background(125);
      fill(255);
      images[0] = loadImage("img/batman.jpg");
  }
  
  void draw(){  
      background(204);
  
      rotateY(PI/3.0);    
      image(images[0],300, 200);
  }
  </code></pre>
  
  <p>Also, I am not required to make this cross browser compatible - this is meant for a personal project.</p>