# Rotation testing

- Canvas 1: Normal p5js WEBGL canvas. The box was rotated by constants and drawn in `draw()`.
- Canvas 2: A CanvasClass WEBGL canvas.The box was rotated in `setup()`. But it was drawn in `draw()`.
- Canvas 3: A CanvasClass WEBGL canvas. The box was rotated by constants and drawn in `draw()`. But then then the canvas as rotated by negatives done in reverse order after the box is drawn to stabilize the box.

        can3.rotateZ(PI/4);
        can3.rotateX(PI/3);
        can3.rotateY(PI/4);
        can3.box(50);
        can3.rotateY(-PI/4);
        can3.rotateX(-PI/3);
        can3.rotateZ(-PI/4);

- Canvas 4: A CanvasClass WEBGL canvas.This canvas was inspired by the previous one in hopes that reversing the rotation would solve the problem. It was intended that the box would rotate. Here is the code:

        can4.rotateZ(frameCount * 0.01);
        can4.box(50);
        can4.rotateZ(-frameCount * 0.01);

  The box rotates smoothly as hoped. But if rotateX and/or rotateY are added as in canvas 3, the box is completely unstable.
- Canvas 5: A p5 canvas created in instance mode. The box is rotated about the x and y axes by `frameCount * 0.01`. This shows that WEBGL can be used in instance mode.

`normalMaterial()` was applied in all canvases in `setup()`

Canvas 1 | Canvas2 | Canvas 3 | Canvas 4 | Canvas 5

The p5js code: rotation.pjs

James Brink, 7/3/2020