untitled

cell0.js

class Vertex {
  constructor(x, y, z) {
    this.x = x;
    this.y = y;
    this.z = z;
  }

  static transform(vertex, matrix) {
    return Vertex.fromVec3(matrix.multiply(Vertex.toVec3(vertex)));
  }

  static toVec3(vertex) {
    return new Vec3([vertex.x, vertex.y, vertex.z]);
  }

  static fromVec3(vector) {
    return new Vertex(vector.element(0), vector.element(1), vector.element(2));
  }
}

function Polygon(vertices) {
  this.count = function () {
    return vertices.length;
  };
  this.vertex = function (i) {
    if (i < 0) {
      throw new Error("Vertex index must be a positive integer");
    }
    if (i >= vertices.length) {
      throw new Error("Vertex index out of bounds");
    }
    return vertices[i];
  };
}

function drawPolygon(context, polygon, fx, fy) {
  context.beginPath();

  // The -1 * is used to flip the y coordinate as y value increases
  // as you move down the canvas.
  context.moveTo(fx(polygon.vertex(0)), -1 * fy(polygon.vertex(0)));
  for (var i = 1; i < polygon.count(); ++i) {
    context.lineTo(fx(polygon.vertex(i)), -1 * fy(polygon.vertex(i)));
  }
  context.closePath();
  context.stroke();
}

const orthogonal = {
  gx: (scale) => (vertex) => vertex.x * scale,
  gy: (scale) => (vertex) => vertex.y * scale
};

const oblique = {
  gx: (scale, zc) => (vertex) => (vertex.x + vertex.z * zc) * scale,
  gy: (scale, zc) => (vertex) => (vertex.y + vertex.z * zc) * scale
};

var canvas = require("canvas");
/**
 * @type {CanvasRenderingContext2D}
 */
var ctx = canvas.getContext("2d");

const vertices = [
  new Vertex(-1.0, -1.0, -1.0), // Front-Bottom-Left
  new Vertex(1.0, -1.0, -1.0), // Front-Bottom-Right
  new Vertex(-1.0, -1.0, 1.0), // Rear-Bottom-Left
  new Vertex(1.0, -1.0, 1.0), // Rear-Bottom-Right
  new Vertex(-1.0, 1.0, -1.0), // Front-Top-Left
  new Vertex(1.0, 1.0, -1.0), // Front-Top-Right
  new Vertex(-1.0, 1.0, 1.0), // Rear-Top-Left
  new Vertex(1.0, 1.0, 1.0) // Rear-Top-Right
];

const faces = [
  new Polygon([vertices[0], vertices[1], vertices[5], vertices[4]]), // Front
  new Polygon([vertices[2], vertices[3], vertices[7], vertices[6]]), // Rear
  new Polygon([vertices[0], vertices[1], vertices[3], vertices[2]]), // Bottom
  new Polygon([vertices[4], vertices[5], vertices[7], vertices[6]]), // Top
  new Polygon([vertices[0], vertices[2], vertices[6], vertices[4]]), // Left
  new Polygon([vertices[1], vertices[3], vertices[7], vertices[5]]) // Right
];

ctx.translate(canvas.width / 2, canvas.height / 2); // 0 should be in the centre
ctx.strokeStyle = "#222222";

var modelSize = canvas.width / 2;
var scale = modelSize / 2;
var c = 0.2;
var fx = oblique.gx(scale, c);
var fy = oblique.gy(scale, c);

for (var i = 0; i < faces.length; ++i) {
  drawPolygon(ctx, faces[i], fx, fy);
}

untitled.carbide.md

undefined

This Gist was automatically created by Carbide, a free online programming environment.

You can view a live, interactive version of this Gist here.