p.draw = function() {

       if (mouseIsPressed) {
            p.background('#c3f2cf');

            p.push();
            p.translate(-60, 50, 35);
           if (second() % 2 == 0) {
                setInterval(function() {i = i + 1}, 500);
           } else {
               setInterval(function() {i = i - 1}, 500);
           }
            p.rotateX(i);
            p.texture(img2);
            p.scale(0.7);
            p.model(dearlove);
            p.pop();
        }
        else {
            p.background(255);
        }
    }

I am using instance mode here. Essentially I am trying to make an ascending and descending list of numbers that is passed to the p.rotateX for the p.model(dearlove). But the numbers should ascend to one value, then descend FROM that value. I can almost get the effect I want by

p.draw = function() {

if (second()%2 == 0) {
    i = 0.03;
} else {
    i = -0.03
}

 p.push();
 p.translate(-60, 50, 35);
                p.rotateX(p.frameCount * i);
                p.texture(img2);
                p.scale(0.7);
                p.model(dearlove);
                p.pop();

}

but the 3D text jumps orientations when switching the direction of rotation. I'm sure I'm over thinking this. Cannot figure out how to get around the lack of a sleep() function in javascript. Let me know if further clarification is needed. Thanks.

I created a box out of planes. I'm trying to find a way to click on each plane (creating like a cube navigation).

How do i do it while using translate for location? Thanks

`let moveX; let moveY; let varx; let vary; let varinc;

function setup() { createCanvas(windowWidth, windowHeight, WEBGL);

}

function moveCube(){ moveX= map(mouseX, 0,width, 0,360); moveY= map(mouseY,0,height,0,360); rot(); thebox();

}

function rot(){ rotateX(-moveY * 0.01); rotateY(-moveX * 0.01); rotateZ(frameCount*0.007); }

function cubeNoise(){ varx = map(noise(varinc),0,1,-150,150); vary = map(noise(varinc),0,1,-150,150);

varinc+=0.003;

}

function draw() { background(250); orbitControl();

//cubeNoise(); push(); //translate(varx,vary); moveCube(); pop(); }

function thebox(){ fill(250,0,0);//red plane(250);

push();
translate(-125,0,-125);
rotateY(radians(90));
fill(0,250,0);//green
plane(250);
pop();

push();
translate(125,0,-125);
rotateY(radians(90));
fill(0,0,250);//blue
plane(250);
pop();

push();
translate(0,-125,-125);
rotateX(radians(90));
fill(200,50,200);//pink
plane(250);
pop();

push();
translate(0,-125,-125);
rotateX(radians(90));
fill(200,50,200);//pink
plane(250);
pop();

push(); translate(0,125,-125); rotateX(radians(90)); fill(150,150,150);//gray plane(250); pop();

push(); translate(0,0,-250);

fill(0);//gray
plane(250);
pop();

}

function screens{ var trx; var try; translate(-width/2, -height/2); for (var i = 0; i<9; i++){ push(); translate(

`

int baris, kolom;
int kotak = 40;
int w = 2200;
int h = 800;

void setup() {
  fullScreen(P3D); // 1366 x 768
  baris = h / kotak;
  kolom = w / kotak;
}

void draw() {
  background(255);
  axisPlot();
  objek();
}

void axisPlot() {
  pushMatrix();
  stroke(255);
  fill(#D6D6D6);
  translate(width/2, height/2);
  rotateX(PI/3);
  translate(-w/2, -height/2);
  for (int y = 0; y < baris; y++) {
    beginShape(TRIANGLE_STRIP);
    for (int x = 0; x < kolom; x++) {
      vertex(x * kotak, y * kotak);
      vertex(x * kotak, (y+1) * kotak);
    }
    endShape();
  }
  popMatrix();
}

void objek() {
  pushMatrix();
  lights();
  noStroke();
  fill(246, 225, 65);
  translate(mouseX, mouseY);
  rotateX(-PI/6);
  box(100, 50, 150);
  popMatrix();
}

Both ellipse and rectangle plane have same rotation, and ellipse's z index is 1 higher than rectangle's. The wired thing is when the mouse position is below the rectangle's y position, the ellipse will be hidden behind the rectangle.

This trobules me a lot, anyone has a good idea?

Here is the code.

void setup() {
  frameRate(60);
  size(1000, 1000, P3D);
  smooth(6);
}

void draw() {
  background(120);

  pushMatrix();
  pushStyle();
  noStroke();
  translate(width/2, height/2, 0);
  rotateX(1);
  rectMode(CENTER);
  rect(0, 0, 800, 800);
  fill(0);
  textAlign(CENTER, CENTER);
  textSize(120);
  text("TEST", 0, 0, 1);
  popStyle();
  popMatrix();

  pushMatrix();
  pushStyle();
  translate(mouseX, mouseY, 1);
  rotateX(1);
  fill(0);
  ellipse(0, 0, 50, 50);
  popStyle();
  popMatrix();

}

Thanks

I'm getting foiled by P3D and translating/rotating and how they work with camera(), but I'm learning a bit about how they work. So far I've learned that calling camera() with the specified values AFTER using translate/rotate earlier in the program causes undesirable results, I'm guessing because once compiled it is run first as actual translate/rotate. This can get messy when trying to take snapshots of a 3D scene. I've since started looking into beginCamera() and endCamera(), and boy are those interesting. One thing that I've learned about the camera using beginCamera() and endCamera() is that changes to the camera (matrix?) are ADDED instead of set. This is fine, but I'm still finding that the changes to the camera aren't happening when the changes are called. I've created this little sketch to try and showcase my headache, comment in and out each box(150) to see different results:

void setup(){
  size(500,500,P3D);
}
void draw(){
  background(0);
  stroke(150);
  noFill();

  sphere(60);
  line(0,0,0,0,-100,0);

  //box(150);          //Enable/disable these one by one

  beginCamera();
  camera();
  translate(width/2,height/2);
  endCamera();

  box(150);          //Enable/disable these one by one

  beginCamera();
  rotateX(radians(mouseX));
  rotateY(radians(45));
  endCamera();

  //box(150);          //Enable/disable these one by one
  box(20);
  line(0,0,0,0,-100,0);
}

I'm wondering if anyone has a better explanation (through code examples preferably) regarding rotating and translating within a 3D space, and how the camera function alters the prior translates and rotates. I have some experience with using push/popMatrix() and translate/rotate in 2D land, but I'm not sure how push/popMatrix() affect the camera matrix, and finally how this all plays with the main window pixels.

Finally, I will talk briefly about what I'm actually trying to do. I'm using processing to create a 3D robot simulation environment (for line following algorithm testing) and I would like this sketch to output a 2D image of the robot's perspective. The problem I am running into is when I call translate/rotate to move about the scene and place the robot/floor etc, I still have to call camera() with the appropriate values given to me by the position of the robot to look at the world from the perspective of the robot. I was having lots of trouble doing it this way when I realized that camera() stuff must be done first before moving about and drawing. The way that I was trying to grab the 2D image was by reorienting the camera to the desired position, grabbing the window pixels and giving them to a PImage, then reorienting the camera to a top-down perspective. The problem with this was the the Image only showed the final position of the camera, not any of the intermediary steps. Here's the actual sketch that I'm working on, comment in/out the image at the end of main to see what the current image output would be (use arrow keys to drive around)(I attached TestCourseLine.png I think):

//  Simulation environment for testing line following

int windowWidth = 1000;
int windowHeight = 700;

PImage course;
PImage robotCam;
PImage roomCam;
int robotCamWidth = 600;
int robotCamHeight = 400;
int window[][];
int robotCamArray[][];

//Camera (independent of translations)
float cameraX = 500;
float cameraY = 350;
float cameraZ = 606;
float cameraCenterX = 500;
float cameraCenterY = 350;
float cameraCenterZ = 0;
float targetDistance = 0;

int robotStep = 5;
float robotTurn = .1;

//Robot Position/orientation relative to center origin
float robotX = -170;
float robotY = 290;
float robotZ = 25;
float robotRotZ = 4.7;

//RobotCam position/orientation relative to robot
int robotCamX = 20;
int robotCamY = 0;
int robotCamZ = 30;
float robotCamRotX = 0;
float robotCamRotZ = 0;
float robotCamRotY = 0.4;

boolean adjustRobotCam = false;
boolean moveRobot = true;
boolean adjustWindowCam = false;

boolean chaseCam = false;

void setup(){

  size(windowWidth,windowHeight,P3D);

  frameRate(10);

  window = new int[windowWidth][windowHeight];
  robotCamArray = new int[robotCamWidth][robotCamHeight];

  course = loadImage("TestCourseLine.png");

  robotCam = createImage(robotCamWidth,robotCamHeight, RGB);

}
void draw(){

  pushMatrix();
 //Move the window camera to the robot's camera (Must be done before other translations/rotates)
  cameraX = cos(robotCamRotZ+robotRotZ)*0+(robotX+width/2);
  cameraY = sin(robotCamRotZ+robotRotZ)*0+(robotY+height/2);
  cameraZ = robotCamZ+robotZ;
  targetDistance = (robotZ+robotCamZ)/sin(robotCamRotY);
  cameraCenterX = cos(robotCamRotZ+robotRotZ)*targetDistance+(robotX+width/2);
  cameraCenterY = sin(robotCamRotZ+robotRotZ)*targetDistance+(robotY+height/2);
  camera(cameraX, cameraY, cameraZ, cameraCenterX, cameraCenterY, cameraCenterZ, 0,0,-1);



  background(0);

  fill(100);
  stroke(200);
  noFill();

  pushMatrix();
  //Center origin to scene
  translate(width/2,height/2);

  box(500);

  //Create Floor
  beginShape();
  texture(course);
  vertex(-250,-250,0,0,0);
  vertex(250,-250,0,500,0);
  vertex(250,250,0,500,500);
  vertex(-250,250,0,0,500);
  endShape(CLOSE);

  //Draw Robot and camera
  pushMatrix();
  translate(robotX, robotY, robotZ);
  rotateZ(robotRotZ);
  box(50);
  //line(0,0,0,100,0,0);
  translate(robotCamX,robotCamY,robotCamZ);
  rotateX(robotCamRotX);
  rotateZ(robotCamRotZ);
  rotateY(robotCamRotY);
  fill(100);
  box(20);
  line(0,0,0,30,0,0);
  popMatrix();

  //Load the pixels of the last camera perspective and the new image
  loadPixels();
  robotCam.loadPixels();

  //Load the window pixels into an array for easy access
  for (int i = 0; i < pixels.length; i++){
    window[i-((i/windowWidth)*windowWidth)][i/windowWidth] = int(brightness(pixels[i]));
  }

  //Give the new image the pixel data from the last camera perspective
  for (int y = 0; y < robotCamHeight; y++){
    for (int x = 0; x < robotCamWidth; x++){
      robotCamArray[x][y] = window[x+(windowWidth-robotCamWidth)/2][y+(windowHeight-robotCamHeight)];
    }
  }

  //Load the robotCamArray data into robotCam pixels
  for (int i = 0; i < robotCam.pixels.length; i++){
    robotCam.pixels[i] = color(robotCamArray[i-((i/robotCamWidth)*robotCamWidth)][i/robotCamWidth]);
  }
  updatePixels();
  robotCam.updatePixels();
  popMatrix();
  //popMatrix();



  popMatrix();

  //background(0);

  translate(width/2,height/2,100);

  //image(robotCam,-robotCamWidth/2,-robotCamHeight/2,robotCamWidth,robotCamHeight);


}

void keyPressed(){

  if (key == 'm'){
    moveRobot = true;
    adjustRobotCam = false;
    adjustWindowCam = false;
  } else if (key == 'c'){
    moveRobot = false;
    adjustRobotCam = true;
    adjustWindowCam = false;
  } else if (key == 'w'){
    adjustWindowCam = true;
    moveRobot = false;
    adjustRobotCam = false;
  }

  if (moveRobot == true){
    if (key == CODED){
      switch(keyCode){
        case UP:
          robotX += cos(robotRotZ)*robotStep;
          robotY += sin(robotRotZ)*robotStep;
          break;
        case DOWN:
          robotX += cos(robotRotZ)*-robotStep;
          robotY += sin(robotRotZ)*-robotStep;
          break;
        case LEFT:
          robotRotZ -= robotTurn;
          break;
        case RIGHT:
          robotRotZ += robotTurn;
          break;
      }
    }
  } else if (adjustRobotCam == true){
    if (key == CODED){
      switch(keyCode){
        case UP:
          robotCamRotY -= robotTurn;
          break;
        case DOWN:
          robotCamRotY += robotTurn;
          break;
        case LEFT:
          robotCamRotZ -= robotTurn;
          break;
        case RIGHT:
          robotCamRotZ += robotTurn;
          break;
      }
    }
  } else if (adjustWindowCam == true){
    if (key == CODED){
      switch(keyCode){
        case UP:
          //camera -= robotTurn;
          break;
        case DOWN:
          robotCamRotY += robotTurn;
          break;
        case LEFT:
          robotCamRotZ -= robotTurn;
          break;
        case RIGHT:
          robotCamRotZ += robotTurn;
          break;
      }
    }
  }
}

1. Display a grid of dots. Grid points only. No lines (ex. 90x90)
2. Allow the user to switch between a 2d and "3D View"
3. Allow the user to spin, pivot, tilt, rotate the cube using the mouse. (Ex. http://visjs.org/graph3d_examples.html)
4. Allow the user to zoom in/out using the mouse scroll button. (Ex. http://visjs.org/graph3d_examples.html)
5. Allow the user to select a dot within in the cube.
6. Allow the user to left-click on a dot highlighting it (the dot becomes bigger/bold)

7. Allow the user to select a second dot in the same plane connecting a straight line between them. Allow the user to go on creating lines in a plane until:

8. The user right-clicks a dot in the selected plane and chooses (perhaps from a pop-up/drop-down menu) "degrees of arc" (45, 90, 135).

9. Once chosen a straight "arc line" is created between the "arc point" and a landing point in the adjacent plane determined by the angle chosen (i.e 90 degree arc creates a line running along the z axis (perpendicular to the plane) connecting the "arc dot" to the corresponding dot in the above plane (closer to the user). If 45, or 135 degrees the "arc line" will end at one of two points in-between visible grid dots in the above plane.)

10. The new plane is automatically selected and any further points (left) clicked will create a line similar to step 7 above (snapping to the nearest grid point (45, 90, 135).

Optional:

A control panel may be displayed (perhaps at the bottom of the screen) Where: The user can view/edit the number/color of the highlighted plane. The user can highlight the 45/135 grid points within the cube (smaller than initial 90 degree grid dots) The user can "take back" previous line creation/dot selections.

I have copied code from two examples I found in the forums here and managed the stitch them together to sort of do the job.

Ive managed to get LINES (not dots) drawn and rotate the shape in 3d however it seems like the grid is made up of separate

boxes all being rotated individually. See code below:

// Below - (Added from rotating cube script) 
float rotx = PI/4;
float roty = PI/4;
float rotz = PI/4;
// Above - (Added from rotating cube script) 

void setup() {
  size(500, 500, P3D);
  strokeWeight(.5);
  stroke(0, 0, 0);
}
void draw() {

  background(152);


  for (int x = 0; x <= height/2; x += 50) {
    for (int y = 0; y <= height/2; y += 50) {
      for (int z = 0; z <= height/2; z += 50) {
        pushMatrix();
        translate(height/4 + x, height/4 + y, -125);

        // Below - (Added from rotating cube script) 
        rotateX(rotx);
        rotateY(roty);
        //scale(90);
        // Above - (Added from rotating cube script) 

        fill(255);
        box(150, 150, 150);
        popMatrix();
      }
    }
  }
}
// Below - (Added from rotating cube script) 
void mouseDragged() {
  float rate = 0.01;
  rotx += (pmouseY-mouseY) * rate;
  roty += (mouseX-pmouseX) * rate;
}
// Above - (Added from rotating cube script) 

Any help would be appreciated.

void figure() { if(key=='1') {
background(103,105,111); PFont font=loadFont("AnonymousPro-30.vlw"); fill(255); text("H20",100,80); drawSphere1(); var="one"; } if(key=='2') { background(103,105,111); PFont font=loadFont("AnonymousPro-30.vlw"); fill(255); text("H2SO4",100,80); drawSphere2(); var="two"; } }

void drawSphere1() { transforms(); fill(255,0,0); sphere(60); fill(255); translate(40,40,30); sphere(60); translate(-80,0,-30); sphere(60); }

void transforms() { translate(tx,ty,tz); noStroke(); rotateX(radians(rotationX)); rotateY(radians(rotationY)); rotateZ(radians(rotationZ)); scale(zoom); rotationX=rotationX+velocityX; rotationY=rotationX+velocityY; rotationZ=rotationX+velocityZ; velocityX =0.9; velocityY *=0.9; velocityZ *=0.9;
if(mousePressed) { if(mouseButton==LEFT) { velocityX=velocityX+(mouseY-pmouseY)0.05; velocityY=velocityY-(mouseX-pmouseX)0.05; velocityZ=velocityZ-(mouseX-pmouseX)0.05; } if(mouseButton==RIGHT) { tx=tx+(mouseX-pmouseX); ty=ty+(mouseY-pmouseY); tz=tz+(mouseY-pmouseY); } } }

void keyPressed() { background(103,105,111); if(key=='i') { if(var=="one") drawSphere1(); else if(var=="two") drawSphere2(); zoom=zoom+0.2;
} if(key=='o') { if(var=="one") drawSphere1(); else if(var=="two") drawSphere2(); zoom=zoom-0.2; } }

(Time)   (X-axis)         (Y-axis)      (Z-axis)
0        -0.00478796     -0.017262705  -0.002968556
1.7      -0.006942641    -0.020502579  -0.004041603
...

Now, the box is rotating with the data in the first row, but I want to add each data like this.

step1 X += -0.00478796
step2 X += -0.006942641
...

Could you give me an advice? And thank you!

int tsvWidth = 0;
int LENGTH;
String [][] tsv;
float t, rotX, rotY, rotZ, X, Y, Z;

void setup() {
  size(800, 800, P3D);
  frameRate(20);
  smooth();

  String lines [] = loadStrings("Satelite_time_Axis_1_Axis_2_Axis_3.txt");

  //calculate max width of tsv file
  for (int i=0; i < lines.length; i++) {
    String [] chars  =  split(lines[i], TAB); //split by TAB, not comma
    if (chars.length > tsvWidth) {
      tsvWidth = chars.length;
    }
  }

  //create tsv array based on # of rows and columns in csv file
  tsv    = new String [lines.length][tsvWidth];
  LENGTH = lines.length; 
  println(LENGTH);
  //parse values into 2d array
  for (int i = 0; i < lines.length; i++) {
    String [] temp = new String [lines.length];
    temp = split(lines[i], TAB);
    for (int j = 0; j < temp.length; j++) {
      tsv[i][j] = temp[j];
    }
  }
}


void draw() {
  background(0);
  println(X, Y, Z);
  renderBox();
  X += Float.parseFloat(tsv[0][1]);
  Y += Float.parseFloat(tsv[0][2]);
  Z += Float.parseFloat(tsv[0][3]);
}

void renderBox() {
  pushMatrix();
  translate(width/2, height/2, 0.0);
  rotateX(X); 
  rotateY(Y); 
  rotateZ(Z);
  fill(128);
  box(400);
  popMatrix();
}

import shapes3d.*;
import shapes3d.animation.*;
import shapes3d.utils.*;

import processing.video.*;

Movie mov;

Shape3D[] shapes; 
Box box;

int shapesNumTot = 1;
float angleX, angleY, angleZ;

void setup() {
  size(800, 600, P3D);

  mov = new Movie(this, "video.mp4");
  mov.loop();
  textureMode(NORMAL);

  shapes = new Shape3D[shapesNumTot];

  box = new Box(this);
  //box.setTexture(mov, Box.FRONT); // if I try this instead it blocks my PC.
  box.setTexture(mov); // this works as expected..
  box.setSize(100, 200, 400);
  box.drawMode(S3D.TEXTURE); 
  shapes[0] = box;
}

void draw() {
  background(100);
  pushMatrix();
  camera(0, 0, 300, 0, 0, 0, 0, 1, 0);
  angleX += radians(0.913f);
  angleY += radians(0.799f);
  angleZ += radians(1.213f);
  rotateX(angleX);
  rotateY(angleY);
  rotateZ(angleZ);
  for (int i = 0; i < shapesNumTot; i++) {
    shapes[i].draw();
  }
  popMatrix();
}

void movieEvent(Movie m) {
  m.read();
}

Thanks, Davide.

i'm rotating ellipses around a circle, but each ellipse seems to face the same direction...

but i want them all to face uniformly around the sphere...

i've tried a bunch of stuff... nothing seems to work without throwing things into chaos.

i imagine its something like... divide the amount of objects by their angle around the sphere, rotating each by that much... but i just can't get it...

i've commented out the rotation line where I think i should, but uncomment and you'll see what i mean... the ellipse kind've rotate in a non-uniform fashion...

what i'm trying to do is have every ellipse angle at the right angle to the centre of the sphere... if that makes sense... like rays of sunshine or something... or if i had a piece of string going out to each ellipse, the ellipse rotates on the angle of that piece of string...

hope someone can help...

int radius = 150;
float d = 0.0;
void setup() {
  size(1000, 1000, P3D);
  noStroke();
}

void draw() { 
  background(0);
  translate(width/2, height/2);
  lights();
  sphereDetail(50);
  stroke(100, 100, 255);
  rotate(radians(d*5));
  sphere(100);
 d = d + radians(1);
  for (int deg = 0; deg < 360; deg += 10) {
    float angle = radians(deg); 
    float x = (cos(angle) * radius);
    float z = (sin(angle) * radius);
    pushMatrix();
    translate(x, z, 0);
    fill(50, 200, 255);
    pushMatrix();
    //rotateY(90);
    ellipse(0, 0, 20, 20);
    popMatrix();
    popMatrix();
  }
}

I tried with the map function, but I feel the same. */

float p=0; // angle 1 float d=180; // ange 2 float w=180; // angle 3 float topRadius=10; float bottomRadius=10; float tall=100; float sides=100; float cpx, cpy,angle = 0,angle1,angle2; int e; float rx = 0; float ry =0; int gridSize=40; float angulo=0; void setup() { size(1080, 660, P3D); } void draw() { background(0); fill(255, 255, 255);

lights(); translate(width / 2, height / 2,0);

fill(255,0,0); sphere(15);

 noStroke();

fill(255, 255, 255); translate(0, 0, 0); angle = radians(p) ; beginShape(QUAD_STRIP); for (int i = 0; i < sides + 1; ++i) { vertex(topRadiuscos(angle), 0, topRadiussin(angle)); vertex(bottomRadiuscos(angle), tall0.8,bottomRadiussin(angle)); angle += TWO_PI / sides; rotateX(angle); } endShape(); translate(0,tall0.8,0); fill(255,0,0); sphere(15); fill(255, 255, 255); angle1 = radians(d); beginShape(QUAD_STRIP); for (int i = 0; i < sides + 1; ++i) {
vertex(topRadiuscos(angle1), 0, topRadiussin(angle1)); vertex(bottomRadiuscos(angle1), tall0.6,bottomRadius*sin(angle1)); angle1 += TWO_PI / sides; rotateX(angle1); } endShape();

translate(0,tall0.6,0); fill(255,0,0); sphere(13); fill(255, 255, 255); angle2 = radians(w); beginShape(QUAD_STRIP); for (int i = 0; i < sides + 1; ++i) {
vertex(topRadiuscos(angle2), 0, topRadiussin(angle2)); vertex(bottomRadiuscos(angle2), tall0.5,bottomRadiussin(angle2)); angle2 += TWO_PI / sides; rotateX(angle2); } endShape(); translate(0,tall*0.5,0); fill(255,0,0); sphere(10); println(angle, angle1, angle2); }

i have a sketch in 3d which uses the OCD library

if you use the method camera1.aim(x, y, z) - you can point to a specific location in 3d space...

i have a box at (0,0, 150) which the camera is pointed at

but, if i start rotating the scene, the camera stays locked on that spot, but the object goes off on its own orbit.

does anyone know how i might keep the camera locked on the target, while rotating?

if by rotating the world then the boxes location of (0,0,150) is now something else, then I guess I need to have the camera track a variable that store that location, but I dont know what that value is, because the whole world is rotating (as I understand it) with the translate function.

If you uncomment the rotation code, you can see what I mean

import damkjer.ocd.*;
Camera camera1;
float rot = 0.0;
float a = 0;
float x, y, z;
float cx, cy, cz;
void setup() {

  size(1000, 1000, P3D);
  smooth(8);

  camera1 = new Camera(this, 1, -300);  


  camera1.aim(0, 0, 150);
}


  void draw() {
  camera1.feed();

  background(0, a);


  colorMode(HSB, 360); // colorMode must be in the PGraphics

  rot = rot + 0.1;

  pushMatrix();
  rotateX(radians(-rot*5));
  rotateY(radians(-rot*5));
  stroke(360, 350, 360, 360);
  fill(255, 360);
  sphereDetail(20);
  sphere(100);
  popMatrix();

  pushMatrix();

//  rotateX(radians(rot*10));

  pushMatrix();
  translate(0, 0, 150);
  stroke(120, 360);
  box(5);
  popMatrix();

  popMatrix();
}

void colorCuboid(float x, float y, float z, float w, float h, float l, float rotX, float rotY, float rotZ, color left, color right, color top, color bottom, color front, color back) { //centered on (x, y, z)
  float halfW = w / 2;
  float halfH = h / 2;
  float halfL = l / 2;

  pushMatrix();
  translate(x, y, z);
  rotateX(rotX);
  rotateY(rotY);
  rotateZ(rotZ);

  fill(back);
  beginShape(); //back

  vertex(-halfW, -halfH, -halfL);
  vertex(halfW, -halfH, -halfL);
  vertex(halfW, halfH, -halfL);
  vertex(-halfW, halfH, -halfL);
  vertex(-halfW, -halfH, -halfL);

  endShape();

  fill(top);
  beginShape(); //top

  vertex(-halfW, -halfH, -halfL);
  vertex(halfW, -halfH, -halfL);
  vertex(halfW, -halfH, halfL);
  vertex(-halfW, -halfH, halfL);
  vertex(-halfW, -halfH, -halfL);

  endShape();

  fill(left);
  beginShape(); //left

  vertex(-halfW, -halfH, -halfL);
  vertex(-halfW, halfH, -halfL);
  vertex(-halfW, halfH, halfL);
  vertex(-halfW, -halfH, halfL);
  vertex(-halfW, -halfH, -halfL);

  endShape();

  fill(front);
  beginShape(); //front

  vertex(halfW, halfH, halfL);
  vertex(-halfW, halfH, halfL);
  vertex(-halfW, -halfH, halfL);
  vertex(halfW, -halfH, halfL);
  vertex(halfW, halfH, halfL);

  endShape();

  fill(bottom);
  beginShape(); //bottom

  vertex(halfW, halfH, halfL);
  vertex(-halfW, halfH, halfL);
  vertex(-halfW, halfH, -halfL);
  vertex(halfW, halfH, -halfL);
  vertex(halfW, halfH, halfL);

  endShape();

  fill(right);
  beginShape(); //right

  vertex(halfW, halfH, halfL);
  vertex(halfW, -halfH, halfL);
  vertex(halfW, -halfH, -halfL);
  vertex(halfW, halfH, -halfL);
  vertex(halfW, halfH, halfL);

  endShape();

  popMatrix();
}

And you can test it by using this code:

color red = color(255, 0, 0);
color yellow = color(255, 255, 0);
color green = color(0, 255, 0);
color cyan = color(0, 255, 255);
color blue = color(0, 0, 255);
color purple = color(255, 0, 255);

void setup() {
  size(500, 500, P3D);
}

void draw() {
  background(255);
  colorCuboid(width / 2, height / 2, 0, 200, 200, 200, (float(mouseY) / width) * TWO_PI, (float(mouseX) / height) * TWO_PI, 0, red, cyan, green, purple, blue, yellow);
}

But I've noticed that it's rotation behaves really unexpectedly. One such way, in the colorCuboid function, if you change

rotateX(rotX);
rotateY(rotY);
rotateZ(rotZ);

to the locigally equivilant

rotateZ(rotZ);
rotateY(rotY);
rotateX(rotX);

it behaves so much differently in that example sketch.

In addition, if yRot is TWO_PI / 4, xRot and zRot both rotate along the same axis, which is the relative z axis of the cube. (around the axis perpendicular to the blue and yellow faces)

Can anyone give me some insight as to what is happening? Also, can anyone help me get my colorCuboid function to rotate correctly?