Test Rotations and Translations in WEBGL

The page shows some examples of rotations and translations that are OK. Any additional rotations messed up the examples.

This is the code to create the first canvas in the draw() method. The other canvases are created in a similar manner.

  can1 = createCanvasClass(100, 100, WEBGL);
  can1.parent("Example1");
  can1.noStroke();
  can1.normalMaterial();

The code in the draw() is shown below.

Example 1
Fixed rotation about z-axis

  can1.background(30);
  can1.rotateZ(PI/5);
  can1.box(40, 40);
  can1.rotateZ(-PI/5);

Example 2
In motion rotation about z-axis

  can2.background(60);
  can2.rotateZ(PI/100);
  can2.box(40, 40);

Example 3
Fixed rotation about all three axes

  can3.background(90);
  can3.rotateZ(PI/100);
  can3.rotateX(PI/3);
  can3.rotateY(PI/4);
  can3.box(40, 40);
  can3.rotateY(-PI/4);
  can3.rotateX(-PI/3);
  can3.rotateZ(-PI/100);

Example 4
In motion translations and fixed rotation about z-axis

  can4.background(120);
  let s = sin(frameCount/200);
  let c = cos(frameCount/150);
  can4.translate(50 * s, 50 * c);
  can4.rotateZ(PI/3);
  can4.box(40, 40);
  can4.rotate(-PI/3);
  can4.translate(-50 * s, -50 * c);

James Brink, 7/30/2020