massivelines
12/4/2017 - 8:56 PM

VrqjrJ

VrqjrJ

#triangleContainer {
	background: grey;
}
var canvas = document.getElementById("triangleContainer");

// canvas.width = window.innerWidth;
// canvas.height = window.innerHeight;
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

var ctx = canvas.getContext("2d");



var colorArray = ["#50514F", "#F25F5C", "#FFE066", "#247BA0", "#70C1B3"];

// event listener for window resizer
window.addEventListener("resize", function() {
	canvas.width = window.innerWidth;
	canvas.height = window.innerHeight;

	// 	calls init function when window resizes
	// init();
});

// todo: change bool to a case
function Triangle(firstX, firstY, secondX, secondY, bool) {
	if (bool == 0) {
		this.ax = firstX;
		this.ay = firstY;
		this.bx = secondX;
		this.by = secondY;
		this.cx = firstX + triangleSize * 2;
		this.cy = firstY;
	} else if (bool == 1) {
		//xy coordinates for three points
		this.ax = firstX;
		this.ay = firstY;
		this.bx = firstX + triangleSize;
		this.by = firstY - triangleSize;
		this.cx = firstX + triangleSize * 2;
		this.cy = firstY;
	} else if (bool == 2) {
		//xy coordinates for three points
		this.ax = firstX;
		this.ay = firstY;
		this.bx = secondX;
		this.by = secondY;
		this.cx = firstX + triangleSize * 2;
		this.cy = firstY;
	}

	// 	set color
	this.color = colorArray[Math.floor(Math.random() * colorArray.length)];

	// 	draw the triangle
	this.draw = function() {
		ctx.beginPath();
		ctx.moveTo(this.ax, this.ay);
		ctx.lineTo(this.bx, this.by);
		ctx.lineTo(this.cx, this.cy);
		ctx.fillStyle = this.color;
		ctx.fill();
		ctx.stroke();
	};

	this.draw();
}

var trianlgeArray = [];

var triangleSize = 100;
var triangleStartingX = 50;
var triangleStartingY = 150;

trianlgeArray.push(new Triangle(triangleStartingX, triangleStartingY, triangleStartingX+triangleSize, triangleStartingY-triangleSize, 0));

for (var i = 0; i < 10; i++) {
	if (i % 2 == 0) {
		var firstX = trianlgeArray[i].bx;
		var firstY = trianlgeArray[i].by;
		var secondX = trianlgeArray[i].cx;
		var secondY = trianlgeArray[i].cy;
		trianlgeArray.push(new Triangle(firstX, firstY, secondX, secondY, 2));
	} else {
		var firstX = trianlgeArray[i].bx;
		var firstY = trianlgeArray[i].by;
		var secondX = trianlgeArray[i].cx;
		var secondY = trianlgeArray[i].cy;
		trianlgeArray.push(new Triangle(firstX, firstY, secondX, secondY, 1));
	}
}
<canvas id='triangleContainer'></canvas>