Gimbal Lock Problem

'use strict';

​

// Three thetas (angles).

let tx = 0.0;

let ty = 0.0;

let tz = 0.0;

let incr = 0.02;

​

function setup() {

  createCanvas(640, 420, WEBGL);

  pixelDensity(displayDensity());

  background(64);

  ortho();

}

​

function draw() {

​

  // Increment thetas.

  tx -= incr;

  ty += incr;

  tz -= incr;

​

  // Positioning and dimensions of geometry.

  const w0_5 = width * 0.5;

  const h0_5 = height * 0.5;

  const w0_325 = width * 0.325;

  const h0_325 = height * 0.325;

  const h0_15 = height * 0.15;

  const h0_125 = height * 0.125;

  const h0_1 = height * 0.1;

  const h0_09 = height * 0.09;

  const h0_08 = height * 0.08;

​

  orbitControl();

  background(32);

  directionalLight(255, 255, 255, 0, 1, 0);

​

  // Post point lights in the sketch's four corners.

  pointLight(127, 54, 0, 255, w0_5, h0_5, 0);

  pointLight(0, 54, 127, 255, -w0_5, h0_5, 0);

  pointLight(54, 0, 127, 255, w0_5, -h0_5, 0);

  pointLight(0, 127, 54, 255, -w0_5, -h0_5, 0);

​

  // 1. Top-Left

  push();

  translate(-w0_325, -h0_325);

  rotateX(tx);

  ring(255, 0, 0, h0_15);

  rotateY(ty);

  ring(0, 255, 0, h0_125);

  rotateZ(tz);

  ring(0, 0, 255, h0_1);

  specularMaterial(255, 255, 255);

  box(h0_1, h0_09, h0_08);

  pop();

​

  // 2. Top-Middle

  push();

  translate(0, -h0_325);

  rotateY(ty);

  ring(0, 255, 0, h0_15);

  rotateZ(tz);

  ring(0, 0, 255, h0_125);

  rotateX(tx);

  ring(255, 0, 0, h0_1);

  specularMaterial(255, 255, 255);

  box(h0_1, h0_09, h0_08);

  pop();

​

  // 3. Top-Right

  push();

  translate(w0_325, -h0_325);

  rotateZ(tz);

  ring(0, 0, 255, h0_15);

  rotateX(tx);

  ring(255, 0, 0, h0_125);

  rotateY(ty);

  ring(0, 255, 0, h0_1);

  specularMaterial(255, 255, 255);

  box(h0_1, h0_09, h0_08);

  pop();

​

  // 4. Bottom-Left

  push();

  translate(-w0_325, h0_325);

  rotateX(tx);

  ring(255, 0, 0, h0_15);

  rotateZ(tz);

  ring(0, 0, 255, h0_125);

  rotateY(ty);

  ring(0, 255, 0, h0_1);

  specularMaterial(255, 255, 255);

  box(h0_1, h0_09, h0_08);

  pop();

​

  // 5. Bottom-Middle

  push();

  translate(0, h0_325);

  rotateY(ty);

  ring(0, 255, 0, h0_15);

  rotateX(tx);

  ring(255, 0, 0, h0_125);

  rotateZ(tz);

  ring(0, 0, 255, h0_1);

  specularMaterial(255, 255, 255);

  box(h0_1, h0_09, h0_08);

  pop();

​

  // 6. Bottom-Right

  push();

  translate(w0_325, h0_325);

  rotateZ(tz);

  ring(0, 0, 255, h0_15);

  rotateY(ty);

  ring(0, 255, 0, h0_125);

  rotateX(tx);

  ring(255, 0, 0, h0_1);

  specularMaterial(255, 255, 255);

  box(h0_1, h0_09, h0_08);

  pop();

}

​

function ring(rd, bl, gr, rds) {

  push();

  ambientMaterial(rd, bl, gr);

  torus(rds, 1.5);

  translate(rds, 0, 0);

  sphere(3.5);

  pop();

}