massivelines
6/9/2017 - 5:36 PM

triangles

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>