FSOSS 2010/processing.js/texture1

/*
  FSOSS 2010
  Andor Salga
  Example of texture
*/
import processing.opengl.*;

// Preload the image using a Pjs directive
/* @pjs preload="processing.png"; */

PImage crateImage;
 
void setup()
{
  size(400, 400, OPENGL);
  crateImage = loadImage("processing.png");

  // We're going to specify our texture coordinates using
  // normalized values (0..1) rather than image coordinates
  textureMode(NORMALIZED);
}

/*
  Draw a box using a specific Pimage
*/
void drawBox(PImage img){
  background(200);

  beginShape(QUADS);
 
  texture(img);
 
  // -Z "back" face
  vertex( 1, -1, -1, 0, 0);
  vertex(-1, -1, -1, 1, 0);
  vertex(-1,  1, -1, 1, 1);
  vertex( 1,  1, -1, 0, 1);
 
  // +Z "front" face
  vertex(-1, -1,  1, 0, 0);
  vertex( 1, -1,  1, 1, 0);
  vertex( 1,  1,  1, 1, 1);
  vertex(-1,  1,  1, 0, 1);
 
  // +Y "bottom" face
  vertex(-1,  1,  1, 0, 0);
  vertex( 1,  1,  1, 1, 0);
  vertex( 1,  1, -1, 1, 1);
  vertex(-1,  1, -1, 0, 1);
 
  // -Y "top" face
  vertex(-1, -1, -1, 0, 0);
  vertex( 1, -1, -1, 1, 0);
  vertex( 1, -1,  1, 1, 1);
  vertex(-1, -1,  1, 0, 1);
 
  // +X "right" face
  vertex( 1, -1,  1, 0, 0);
  vertex( 1, -1, -1, 1, 0);
  vertex( 1,  1, -1, 1, 1);
  vertex( 1,  1,  1, 0, 1);
 
  // -X "left" face
  vertex(-1, -1, -1, 0, 0);
  vertex(-1, -1,  1, 1, 0);
  vertex(-1,  1,  1, 1, 1);
  vertex(-1,  1, -1, 0, 1);
 
  endShape();
}
 
void draw()
{
  background(0);
  stroke(255);

  // center in the canvas, bring towards the camera
  translate(width/2, height/2, 150);
 
  // convert 45 degrees into radians and
  // rotate by that amount
  rotateY(radians(45));
 
  rotateX( frameCount/250.0f );
 
  // make the box a bit larger
  scale(50);
 
  drawBox(crateImage);
}

Run me