gasket4.js

"use strict";

var canvas;
var gl;

var points = [];
var colors = [];

let modelViewMatrixLoc;

function init() {
  canvas = document.getElementById("gl-canvas");

  gl = WebGLUtils.setupWebGL(canvas);
  if (!gl) {
    alert("WebGL isn't available");
  }

  //
  //  Initialize our data for the Sierpinski Gasket
  //

  // First, initialize the vertices of our 3D gasket
  // Four vertices on unit circle
  // Initial tetrahedron with equal length sides

  var vertices = [
    vec3(0.0, 0.0, -1.0),
    vec3(0.0, 0.9428, 0.3333),
    vec3(-0.8165, -0.4714, 0.3333),
    vec3(0.8165, -0.4714, 0.3333),
  ];

  divideTetra(
    vertices[0],
    vertices[1],
    vertices[2],
    vertices[3],
    configurations.subdivisions
  );

  //
  //  Configure WebGL
  //
  gl.viewport(0, 0, canvas.width, canvas.height);

  // enable hidden-surface removal

  gl.enable(gl.DEPTH_TEST);

  //  Load shaders and initialize attribute buffers

  var program = initShaders(gl, "vertex-shader", "fragment-shader");
  gl.useProgram(program);

  // Create a buffer object, initialize it, and associate it with the
  //  associated attribute variable in our vertex shader

  var cBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, cBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, flatten(colors), gl.STATIC_DRAW);

  var vColor = gl.getAttribLocation(program, "vColor");
  gl.vertexAttribPointer(vColor, 4, gl.FLOAT, false, 0, 0);
  gl.enableVertexAttribArray(vColor);

  var vBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, vBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, flatten(points), gl.STATIC_DRAW);

  var vPosition = gl.getAttribLocation(program, "vPosition");
  gl.vertexAttribPointer(vPosition, 3, gl.FLOAT, false, 0, 0);
  gl.enableVertexAttribArray(vPosition);

  modelViewMatrixLoc = gl.getUniformLocation(program, "modelViewMatrix");

  const recalculateTriangle = () => {
    let config = {};

    if (animation) {
      config = animationData;
    } else {
      config = configurations;
    }

    points = [];
    colors = [];

    divideTetra(
      vertices[0],
      vertices[1],
      vertices[2],
      vertices[3],
      config.subdivisions
    );

    gl.bindBuffer(gl.ARRAY_BUFFER, cBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, flatten(colors), gl.STATIC_DRAW);
    gl.bindBuffer(gl.ARRAY_BUFFER, vBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, flatten(points), gl.STATIC_DRAW);
  };

  const inputs = [
    "subdivisions",
    "colour-face-1-rgb",
    "colour-face-1-a",
    "colour-face-2-rgb",
    "colour-face-2-a",
    "colour-face-3-rgb",
    "colour-face-3-a",
    "colour-face-4-rgb",
    "colour-face-4-a",
  ];

  for (const input of inputs) {
    const element = document.getElementById(input);
    element.addEventListener("input", recalculateTriangle);
  }

  document.addEventListener("subdivision", recalculateTriangle);

  const recalculateBackgroundColour = () => {
    const { colour_solid: colours } = configurations;

    const hex = colours.background[0];
    const alpha = colours.background[1];

    const RGBA = [
      Number.parseInt(hex.slice(1, 3), 16) / 255,
      Number.parseInt(hex.slice(3, 5), 16) / 255,
      Number.parseInt(hex.slice(5, 7), 16) / 255,
      alpha,
    ];

    gl.clearColor(...RGBA);
  };

  recalculateBackgroundColour();

  const backgroundInputs = ["colour-background-rgb", "colour-background-a"];
  for (const input of backgroundInputs) {
    const element = document.getElementById(input);

    element.addEventListener("input", recalculateBackgroundColour);
  }

  render();
}

function triangle(a, b, c, color) {
  // add colors and vertices for one triangle

  // var baseColors = [
  //   vec3(1.0, 0.0, 0.0),
  //   vec3(0.0, 1.0, 0.0),
  //   vec3(0.0, 0.0, 1.0),
  //   vec3(0.0, 0.0, 0.0),
  // ];
  let baseColors = [];

  const { colour_solid: colours } = configurations;
  const faces = ["face_1", "face_2", "face_3", "face_4"];

  for (const face of faces) {
    const hex = colours[face][0];
    const alpha = colours[face][1];

    const RGBA = [
      Number.parseInt(hex.slice(1, 3), 16) / 255,
      Number.parseInt(hex.slice(3, 5), 16) / 255,
      Number.parseInt(hex.slice(5, 7), 16) / 255,
      alpha,
    ];

    baseColors.push(vec4(...RGBA));
  }

  colors.push(baseColors[color]);
  points.push(a);
  colors.push(baseColors[color]);
  points.push(b);
  colors.push(baseColors[color]);
  points.push(c);
}

function tetra(a, b, c, d) {
  // tetrahedron with each side using
  // a different color

  triangle(a, c, b, 0);
  triangle(a, c, d, 1);
  triangle(a, b, d, 2);
  triangle(b, c, d, 3);
}

function divideTetra(a, b, c, d, count) {
  // check for end of recursion

  if (count === 0) {
    tetra(a, b, c, d);
  }

  // find midpoints of sides
  // divide four smaller tetrahedra
  else {
    var ab = mix(a, b, 0.5);
    var ac = mix(a, c, 0.5);
    var ad = mix(a, d, 0.5);
    var bc = mix(b, c, 0.5);
    var bd = mix(b, d, 0.5);
    var cd = mix(c, d, 0.5);

    --count;

    divideTetra(a, ab, ac, ad, count);
    divideTetra(ab, b, bc, bd, count);
    divideTetra(ac, bc, c, cd, count);
    divideTetra(ad, bd, cd, d, count);
  }
}

function render() {
  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

  let config = {};

  if (animation) {
    config = animationData;
  } else {
    config = configurations;
  }

  const { x: scaleX, y: scaleY, z: scaleZ } = config.scaling_factor;
  const scaleW = 2;

  const theta = config.rotation_angle;

  const {
    x: translateX,
    y: translateY,
    z: translateZ,
  } = config.translation_magnitude;

  // prettier-ignore
  let scaleFactor = mat4(
    scaleX, 0, 0, 0,
    0, scaleY, 0, 0,
    0, 0, scaleZ, 0,
    0, 0, 0, scaleW
  );

  let modelViewMatrix = rotateX(theta.x);
  modelViewMatrix = mult(modelViewMatrix, rotateY(theta.y));
  modelViewMatrix = mult(modelViewMatrix, rotateZ(theta.z));
  modelViewMatrix = mult(modelViewMatrix, scaleFactor);
  modelViewMatrix = mult(
    modelViewMatrix,
    translate(translateX, translateY, translateZ)
  );

  gl.uniformMatrix4fv(modelViewMatrixLoc, false, flatten(modelViewMatrix));

  gl.drawArrays(gl.TRIANGLES, 0, points.length);
  requestAnimFrame(render);
}