In this recipe, we'll take a look at the third dimension. Processing.js can be used to display 3D content, so everything that you've learned in Chapter 3, Drawing in 3D–Lights, Camera, and Action, can be used on the web.
This is the full code for our 3D sketch. You need to import the OpenGL
library and add the OPENGL
parameter to the size()
function. This sketch will render a yellow box in the middle of the screen. You can manipulate the rotation in the direction of the Y axis by moving your mouse.
import processing.opengl.*; void setup() { size( 640, 480, OPENGL ); smooth(); noStroke(); } void draw() { background( 255 ); lights(); translate( width/2, height/2 ); rotateX( radians( frameCount ) ); rotateY( map( mouseX, 0, width, -PI, PI ) ); fill( 255, 225, 23 ); box( 200 ); }
The sketch looks like the following screenshot when it runs in your browser: