Rotating Cube

.block

height: 400

index.html

<script async src=https://cdn.JsDelivr.net/npm/p5></script>
<script defer src=sketch.js></script>

sketch.js

/*****************************************************************
 * Rotating Cube (v1.0.5)
 * PeterCollingridge.AppSpot.com/3D-tutorial
 * Mod: GoToLoop (2017-Apr-19)
 *
 * Forum.Processing.org/two/discussion/22047/
 * draw-static-rect-filling-the-screen-infront-of-peasycam#Item_4
 *
 * Bl.ocks.org/GoSubRoutine/a117ecb16a8b0f939a190f87d3a13267
 * OpenProcessing.org/sketch/421281
 * KhanAcademy.org/computer-programming/3d-tutorial-4/1648921303
 *****************************************************************/

"use strict";

const NODE_DIAM = 8, INIT_DEGREE = 30, BOLD = 1.5,
      BG = 0o350, NODE_COL = '#28A86B', EDGE_COL = '#2244CC';

let bg, edgeCol;

const EDGES = Uint8Array.of(
  0, 1, 1, 3, 3, 2, 2, 0,
  4, 5, 5, 7, 7, 6, 6, 4,
  0, 4, 1, 5, 2, 6, 3, 7
);

EDGES.forEach((val, idx, arr) => arr[idx] = 3 * val);

const nodes = Float32Array.of(
  -100, -100, -100,
  -100, -100, +100,
  -100, +100, -100,
  -100, +100, +100,
  +100, -100, -100,
  +100, -100, +100,
  +100, +100, -100,
  +100, +100, +100
);

function setup() {
  createCanvas(400, 400).mouseMoved(rotateCube);

  ellipseMode(CENTER).angleMode(DEGREES);
  strokeWeight(BOLD).strokeCap(SQUARE);
  fill(NODE_COL).noLoop();

  bg = color(BG), edgeCol = color(EDGE_COL);

  rotateZ3D(INIT_DEGREE, nodes);
  rotateY3D(INIT_DEGREE, nodes);
  rotateX3D(INIT_DEGREE, nodes);
}

function draw() {
  background(bg).translate(width>>1, height>>1);

  stroke(edgeCol);
  for (let i = 0, len = EDGES.length; i < len; i += 2) {
    const indA = EDGES[i], indB = EDGES[i+1],
          x1 = nodes[indA], y1 = nodes[indA+1],
          x2 = nodes[indB], y2 = nodes[indB+1];
    line(x1, y1, x2, y2);
  }

  noStroke();
  for (let i = 0, len = nodes.length; i < len; i += 3)
    ellipse(nodes[i], nodes[i+1], NODE_DIAM);
}

function rotateCube() {
  if (mouseIsPressed) {
    rotateY3D(mouseX - pmouseX, nodes);
    rotateX3D(mouseY - pmouseY, nodes);
    redraw();
  }

  //pmouseX = mouseX, pmouseY = mouseY;
  ({ mouseX: pmouseX, mouseY: pmouseY } = window);
}

function rotateZ3D(t, xyz) {
  const c = cos(t), s = sin(t), len = xyz.length;
  for (let i = 0; i < len; i += 3) {
    const x = xyz[i], y = xyz[i+1];
    xyz[i]   = x*c - y*s;
    xyz[i+1] = y*c + x*s;
  }
}

function rotateY3D(t, xyz) {
  const c = cos(t), s = sin(t), len = xyz.length;
  for (let i = 0; i < len; i += 3) {
    const x = xyz[i], z = xyz[i+2];
    xyz[i]   = x*c - z*s;
    xyz[i+2] = z*c + x*s;
  }
}

function rotateX3D(t, xyz) {
  const c = cos(t), s = sin(t), len = xyz.length;
  for (let i = 1; i < len; i += 3) {
    const y = xyz[i], z = xyz[i+1];
    xyz[i]   = y*c - z*s;
    xyz[i+1] = z*c + y*s;
  }
}