In Processing.JS, how does one go about rotating an image about the y-axis?

I was wondering if one is able to rotate an image a开发者_如何学运维bout 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)?

Essentially, I am trying to achieve the effect achieved in this page.

Using the following code, my image fails to even render in my canvas element.

/* @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);
}

Also, I am not required to make this cross browser compatible - this is meant for a personal project.

As jonbro suggested, first make sure you have WebGL enabled: http://www.DoesMyBrowserSupportWebGL.com

Next, make sure your browser can read local files if your files are not on a server. In Chrome, you need to start it with --allow-file-access-from-files On Firefox, go to about:config and turn off security.fileuri.strict_origin_policy

I updated your sketch so the image rotates about the center, just like the demo:

/* @pjs preload="img/batman.jpg"; */

PImage[] images = new PImage[1];
void setup()
{
    size(600,400,P3D);
    images[0] = loadImage("img/batman.jpg");
}

void draw(){
    background(204);

    pushMatrix();
    // Move the coordinate system to the center of the screen
    translate(width/2.0, height/2.0);
    // Rotate the coordinate system a bit more each frame
    rotateY(frameCount/1000.0);    
    // Draw the image in the center
    image(images[0],-images[0].width/2.0, -images[0].height/2.0);
    popMatrix();
}

Hope that helps!

This post describes how to make a rotating billboard effect with css3. It has all the component parts of what you want.

I took a stab at getting your image rotation working with processing js, and it seems like there might be an issue with loading images while in the 3d mode. Did you manage to get any demos on this page working: http://matrix.senecac.on.ca/~asalga/pjswebide/index.php

If you did not, you might not have webGL working on your browser yet.