/*
 * Slightly more convenient way of representing a point or width/height.
 */
function Vector(x, y) {
  this.x = x
  this.y = y
}

/*
 * Contains three points of the triangle and various helper functions.
 */
function Triangle(p1, p2, p3) {
  // Quick conversions.
  if (p1.constructor == Array) {
    p1 = new Vector(p1[0], p1[1])
  }
  if (p2.constructor == Array) {
    p2 = new Vector(p2[0], p2[1])
  }
  if (p3.constructor == Array) {
    p3 = new Vector(p3[0], p3[1])
  }

  this.points = [p1, p2, p3]

  // Calculate the lengths of the lines opposite each point
  this.lines = [
    Math.sqrt(Math.pow(p2.x - p3.x, 2) +
      Math.pow(p2.y - p3.y, 2)),

    Math.sqrt(Math.pow(p1.x - p3.x, 2) +
      Math.pow(p1.y - p3.y, 2)),

    Math.sqrt(Math.pow(p2.x - p1.x, 2) +
      Math.pow(p2.y - p1.y, 2))
  ]

  // Calculate the angle at each point
  this.angles = [
    Math.acos((Math.pow(this.lines[1], 2) +
        Math.pow(this.lines[2], 2) -
        Math.pow(this.lines[0], 2)) /
      (2 * this.lines[1] * this.lines[2])),

    Math.acos((Math.pow(this.lines[2], 2) +
        Math.pow(this.lines[0], 2) -
        Math.pow(this.lines[1], 2)) /
      (2 * this.lines[2] * this.lines[0])),

    Math.acos((Math.pow(this.lines[0], 2) +
        Math.pow(this.lines[1], 2) -
        Math.pow(this.lines[2], 2)) /
      (2 * this.lines[0] * this.lines[1]))
  ]
}
Triangle.prototype.draw = function(ctx) {
  // Draw the triangle shape
  ctx.moveTo(this.points[0].x, this.points[0].y)
  ctx.beginPath()
  ctx.lineTo(this.points[1].x, this.points[1].y)
  ctx.lineTo(this.points[2].x, this.points[2].y)
  ctx.lineTo(this.points[0].x, this.points[0].y)
  ctx.closePath()

  // COLORS!
  var r = Math.floor(Math.random() * 7 * 32)
  var g = Math.floor(Math.random() * 7 * 32)
  ctx.fillStyle = 'rgb(' + r + ',' + g + ',' + 255 + ')'
  ctx.fill()
}
Triangle.prototype.split = function() {
  // Create two new triangles split along the largest angle
  var a = maxi(this.angles)
  var b = (a + 1) % 3
  var c = (a + 2) % 3
  var midpoint = new Vector(
    (this.points[b].x + this.points[c].x) / 2,
    (this.points[b].y + this.points[c].y) / 2
  )

  return [
    new Triangle(midpoint, this.points[a], this.points[b]),
    new Triangle(midpoint, this.points[a], this.points[c])
  ]
}

/*
 * Get the index of the largest item in an array.
 */
function maxi(arr) {
  var res = null;
  for (var i = 0; i < arr.length; i++) {
    if (res == null || arr[i] > arr[res]) {
      res = i
    }
  }
  return res
}

// Create a canvas
var c = document.getElementById("canvas")
var ctx = c.getContext("2d")

// Create the two basic triangles to start off with
var tris = []
tris.push(new Triangle([0, 0], [0, c.height], [c.width, c.height]))
tris.push(new Triangle([0, 0], [c.width, 0], [c.width, c.height]))

// Split random triangles lots of times
for (var i = 0; i < 100; i++) {
  var rtri = Math.floor(Math.random() * tris.length)
  var both = tris[rtri].split()
  tris.splice(rtri, 1)
  tris.push(both[0])
  tris.push(both[1])
}

// Draw the triangles
for (var i = 0; i < tris.length; i++) {
  tris[i].draw(ctx)
}