hello_3d

Transformations:

• P3D -> WEBGL
• For 3D sketches, p5.js origin is at the center of screen, instead of the upper left corner. Insert at beginning of draw():
  • translate(-width/2, -height/2);

Converted p5.js:

//
// hello_3d
//
function setup() {
    createCanvas(400, 400, WEBGL);
}
function draw() {
    translate(-width / 2, -height / 2);
    background(0);
    lights();
    fill(0, 255, 0);
    stroke(0);
    push();
    translate(100, 100, 0);
    rotateZ(frameCount * 0.01);
    rotateX(frameCount * 0.01);
    rotateY(frameCount * 0.01);
    box(70, 70, 70);
    pop();
    while (true) {
        push();
        translate(300, 300, 0);
        rotateZ(frameCount * 0.01);
        rotateX(frameCount * 0.01);
        rotateY(frameCount * 0.01);
        sphere(70);
        pop();
        break;
    }
}

Original Processing:

//
// hello_3d
//


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


void draw()
{
    background(0);
    lights();

    fill(0, 255, 0);
    stroke(0);

    pushMatrix();
    translate(100, 100, 0);
    rotateZ(frameCount * 0.01);
    rotateX(frameCount * 0.01);
    rotateY(frameCount * 0.01);
    box(70, 70, 70);
    popMatrix();

    while (true) {
    pushMatrix();
    translate(300, 300, 0);
    rotateZ(frameCount * 0.01);
    rotateX(frameCount * 0.01);
    rotateY(frameCount * 0.01);
    sphere(70);
    popMatrix();
    break;
    }
}