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>