​

var font;

var tracking = [];

const faceMe = true;

​

var sketch = function(p) {

  p.preload = function() {

    font = p.loadFont('CourierStd.otf');

  }

  p.setup = function() {

    p.createCanvas(600, 400, p.WEBGL);

    p.textFont(font);

    p.textSize(16);

  }

​

  p.draw = function() {

    p.background(220);

​

    let hour = p.frameCount*0.03;

        tracking = [];

​

    p.translate(0, 0, 200);

    p.rotateY( hour * 0.14142);

    tracking.push( ['rot', 'Y', hour * 0.14142]);

​

    p.rotateX( hour * 0.1732);

    tracking.push( ['rot', 'X', hour * 0.1732]);

    p.rotateY( hour  );

    tracking.push(['rot', 'Y', hour] );

    text3D(p, "A",  25, 25, 25)

    text3D(p, "B",  -25, 25, 25)

    text3D(p, "C",  -25, -25, 25)

    text3D(p, "D",  25, -25, 25)

    text3D(p, "a",  25, 25, -25)

    text3D(p, "b",  -25, 25, -25)

    text3D(p, "c",  -25, -25, -25)

    text3D(p, "d",  25, -25, -25)

    p.noFill();

    p.box();

  }

}

​

function text3D(p, str, x, y, z){

  p.fill(255,0,0);

  p.push();

​

  p.translate( x,y,z);

  if(faceMe){

    for(let idx=tracking.length-1; idx>=0; idx--){

      if(tracking[idx][0] === 'scale'){

        p.scale(1/tracking[idx][1], 1/tracking[idx][2], 1/tracking[idx][3]);

      }

      if(tracking[idx][0] === 'rot'){

        if(tracking[idx][1] === 'X'){

                    p.rotateX( -tracking[idx][2]);

        }

        if(tracking[idx][1] === 'Y'){

                  p.rotateY( -tracking[idx][2]);

        }

        if(tracking[idx][1] === 'Z'){

                  p.rotateZ( -tracking[idx][2]);

        }

      }

    }

  }  

  p.text(str,0,0);

  p.pop();

}

​

var myp5 = new p5(sketch);

​