2to3

2to3.js

const sc = document.createElement('script');
sc.src = 'https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/3.4.2/gl-matrix-min.js';
document.body.appendChild(sc);
sc.onload = () => {
  const width = 512;
  const height = 512;
  const cvs = document.createElement('canvas');
  cvs.width = width;
  cvs.height = height;
  document.body.appendChild(cvs);
  const ctx = cvs.getContext('2d');
  setup(ctx);
  const mat4 = glMatrix.mat4;
  const vec4 = glMatrix.vec4;
  const fieldOfView = 60 * Math.PI / 180;
  const aspect = width / height;
  const zNear = 0.1;
  const zFar = 100.0;
  const projectionMatrix = mat4.create();
  mat4.perspective(projectionMatrix, fieldOfView, aspect, zNear, zFar);
  const modelViewMatrix = mat4.create();
  mat4.translate(modelViewMatrix,     // destination matrix
                 modelViewMatrix,     // matrix to translate
                 [0.0, 0.0, -5.0]);  // amount to translate

  function setup(ctx, lineWidth=1) {
    const width = ctx.canvas.width;
    const height = ctx.canvas.height;
    ctx.setTransform(width / 2, 0, 0, height / -2, width / 2, height / 2);
    ctx.lineWidth = lineWidth * 4 / (Math.sqrt(width**2 + height**2));
  }

  function draw_line(ctx, x, y, tx, ty) {
    ctx.beginPath();
    ctx.moveTo(x, y);
    ctx.lineTo(tx, ty);
    ctx.stroke();
    ctx.closePath();
  }

  function draw_line_3d(ctx, mvp, p0, p1) {
    const p0_n = vec4.create();
    const p1_n = vec4.create();
    vec4.transformMat4(p0_n, p0, mvp);
    vec4.transformMat4(p1_n, p1, mvp);
    const x = p0_n[0] / p0_n[3];
    const y = p0_n[1] / p0_n[3];
    const tx = p1_n[0] / p1_n[3];
    const ty = p1_n[1] / p1_n[3];
    draw_line(ctx, x, y, tx, ty);
  }

  function draw_line_strip_3d(ctx, mvp, points, strip) {
    const points_n = points.map(v => {
      const p = vec4.create();
      vec4.transformMat4(p, v, mvp);
      p[0] /= p[3];
      p[1] /= p[3];
      return p;
    });
    for (let i = 1; i < strip.length; i++) {
      draw_line(ctx, points_n[strip[i-1]][0], points_n[strip[i-1]][1], points_n[strip[i]][0], points_n[strip[i]][1]);
    }
  }

  let count = 0;
  const k = 0.03;
  const period = 180;
  let rx = 0;
  let ry = 0;
  let rz = 0;
  function animation(modelViewMatrix) {
    ctx.clearRect(-1, -1, 2, 2);
    const mvp = mat4.create();
    mat4.mul(mvp, projectionMatrix, modelViewMatrix);
    draw_line_strip_3d(ctx, mvp,
      [
        vec4.fromValues(1, 1, -1, 1),
        vec4.fromValues(1, 1, 1, 1),
        vec4.fromValues(-1, 1, -1, 1),
        vec4.fromValues(-1, 1, 1, 1),

        vec4.fromValues(1, -1, -1, 1),
        vec4.fromValues(1, -1, 1, 1),
        vec4.fromValues(-1, -1, -1, 1),
        vec4.fromValues(-1, -1, 1, 1),
      ],
      [0, 4, 7, 6, 5, 7, 3, 2, 6, 4, 5, 1, 3, 0, 2, 1, 0]
    );
    requestAnimationFrame(() => {
      if (count % period === 0) {
        rx = (Math.random() - 0.5) * k;
        ry = (Math.random() - 0.5) * k;
        rz = (Math.random() - 0.5) * k;
      }
      mat4.rotateY(modelViewMatrix, modelViewMatrix, rx);
      mat4.rotateX(modelViewMatrix, modelViewMatrix, ry);
      mat4.rotateZ(modelViewMatrix, modelViewMatrix, rz);
      animation(modelViewMatrix);
      count += 1;
    });
  }
  animation(modelViewMatrix);
}