triangles
body {
padding:0;
margin:0;
}
/* #myCanvas{
margin-left: 25%;
border: solid thin black;
} */
// ctx.beginPath();
// ctx.moveTo(0, 100);
// ctx.lineTo(50, 0);
// ctx.lineTo(100, 100);
// ctx.closePath();
// ctx.stroke();
// ctx.beginPath();
// ctx.moveTo(100, 100);
// ctx.lineTo(150, 0);
// ctx.lineTo(200, 100);
// ctx.closePath();
// ctx.stroke();
// ctx.beginPath();
// ctx.moveTo(200, 100);
// ctx.lineTo(250, 0);
// ctx.lineTo(300, 100);
// ctx.closePath();
// ctx.stroke();
// ctx.beginPath();
// ctx.moveTo(200+100, 100);
// ctx.lineTo(250+100, 0);
// ctx.lineTo(300+100, 100);
// ctx.closePath();
// ctx.stroke();
// ctx.beginPath();
// ctx.moveTo(0+itt, 100);
// ctx.lineTo(50+itt, 0);
// ctx.lineTo(100+itt, 100);
// ctx.closePath();
// ctx.stroke();
//------------------------------------------------------
//get the vanvas and context and store in vars
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
//set canvas dims to windows height and width
// var w = 600;
// var h = 500;
var w = window.innerWidth;
var h = window.innerHeight;
canvas.width = w;
canvas.height = h;
var triangleSize=200;
//max triangles
var mwt= 2+w/triangleSize;
var mht = 1+h/triangleSize;
var triangles = [];
var test = [];
var ittX=0;
var ittY;
var first=1;
var hold1;
var hold2;
function random(x){
rand = Math.floor(Math.random() * ((triangleSize/3) - -(triangleSize/3))) + -(triangleSize/3);
return rand;
}
test.push([]);
for (var i = 0; i < mwt; i++) {
if(i==0){
test[0].push({
11:0+ittX+random(),
12:triangleSize+random(0),
21:(triangleSize/2)+ittX+random(0),
22:0+random(),
31:triangleSize+ittX+random(),
32:triangleSize+random(0)
});
} else {
hold1=test[0][i-1][31];
hold2=test[0][i-1][32];
test[0].push({
11:hold1,
12:hold2,
21:(triangleSize/2)+ittX+random(0),
22:0+random(),
31:triangleSize+ittX+random(),
32:triangleSize+random(0)
})}
ittX+=triangleSize;
}
//for loop push([]) then add numbers
//top xy equles bottem corer row above
var ittX2=0;
var ittY2=triangleSize*2;
for (var k=1; k<mht; k++) {
test.push([]);
for (var j=0; j<mwt; j++) {
if (j==0){
test[k].push({
11:-triangleSize+ittX2+random(),
12:ittY2+random(),
21:test[k-1][j][11],
22:test[k-1][j][12],
31:(triangleSize/2)+ittX2+random(),
32:ittY2+random()
});
} else {
hold1=test[k][j-1][31];
hold2=test[k][j-1][32];
test[k].push({
11:hold1,
12:hold2,
21:test[k-1][j][11],
22:test[k-1][j][12],
31:(triangleSize/2)+ittX2+random(),
32:ittY2+random()
});
}
ittX2+=triangleSize;
}
ittX2=-50;
ittY2+=triangleSize;
}
for (var i = 0; i < test.length; i++) {
for (var k = 0; k < test[i].length; k++) {
ctx.beginPath();
ctx.moveTo(test[i][k][11], test[i][k][12]);
ctx.lineTo(test[i][k][21], test[i][k][22]);
ctx.lineTo(test[i][k][31], test[i][k][32]);
ctx.closePath();
ctx.stroke();
}
}
// console.log(test);
<canvas id="myCanvas"></canvas>