​

​

function setup() {

   createCanvas(800, 600, WEBGL);

   addScreenPositionFunction();

   noFill();  // comment out for fill

} 

​

function draw(){

    background(204);

    scale(2);

    rotateX(phi);

    if (mouseIsPressed) { th = th + 0.01; }

    rotateY(th);

   stroke(150); line(0.,0.,0.,  0.,0.,-80); // y-axis aka -z gray

    stroke(150); line(0.,0.,0.,  80,0.,0.);  // x-axis aka +x gray

    stroke(0);   line(0.,0.,0.,  0.,-80,0.); // vertical axis aka -y white

    blockP5();

}

​

function blockP5() {

    face[0] = [10,0,0,        50,0,0,    50,0,25,    10,0,25];

    face[1] = [10,0,25,      50,0,25,  50,-25,25,  10,-25,25];

    face[2] = [50,0,25,       50,0,0,   50,-25,0,  50,-25,25];

    face[3] = [10,-25,25,  50,-25,25,   50,-25,0,   10,-25,0];

    face[4] = [10,-25,25,   10,-25,0,     10,0,0,    10,0,25];

    face[5] = [10,-25,0,    50,-25,0,     50,0,0,     10,0,0];

​

    for( i = 0; i < 6; i += 1) polyDraw(face[i]);

}

​

function polyDraw(xface) {

   // Draw 6 sides of block using world cooordinates

   stroke('magenta');

    beginShape();

        for (var i = 0; i < xface.length; i += 3) {

          vertex(xface[i], xface[i+1], xface[i+2]);

      }

    endShape(CLOSE);

​

   // Draw 6 sides of block using screen coordinates

   stroke(255);

    beginShape();

        for (var i = 0; i < xface.length; i += 3) {

          p1 = screenPosition(xface[i], xface[i+1], xface[i+2]);

          vertex(p1.x, p1.y);

        }

    endShape(CLOSE);

}

​