maxbeutel/tri.html

## tri.html
<!DOCTYPE html>
<html><head>
<script type="text/javascript">
// https://github.com/mhwombat/grid/wiki/Triangular-tiles

function rectTriGrid(r, c) {
    var res = [];

    for (var y = 0; y <= 2*r-1; y++) {
        for(var x = xMin(y); x <= xMax(c, y); x++) {
            if ((x+y)%2 == 0) {
                res.push([x, y]);
            }

        }
    }

    //console.log(res);

    return res;
}

function xMin(y) {
    var w = -2*(Math.floor((y+1) / 4));

    if (y%2 == 0) {
        return w;
    }

    return w+1;
}

function xMax(c, y) {
    return xMin(y) + 2*(c-1);
}

 function draw() {
     var c = document.getElementById("myCanvas");
     var ctx = c.getContext("2d");

     let grid = rectTriGrid(1, 10);

     const w = 50;
     const h = 46;

     for (var i = 0; i < grid.length; i++) {
         let tri = grid[i];

         //         console.log(tri);


         if (tri[0] % 2 == 1) {
             console.log("draw upside down")
         } else {
             console.log("draw normal");

             var x_pos = w*tri[0]/2;
             var y_pos = h*(tri[1]+1);

             console.log(x_pos);

             ctx.beginPath();
             ctx.moveTo(x_pos, y_pos);

             ctx.lineTo(x_pos+w, y_pos);
             //ctx.lineTo(200, 100);
             ctx.stroke();
             ctx.closePath();
         }

         //break;
     }


     /* ctx.moveTo(0, 0);
      * ctx.lineTo(200, 100);
      * ctx.stroke();*/
 }

</script>
</head><body onload="draw();">
    <canvas id="myCanvas" width="800" height="100"></canvas>
</body>
</html>
	<!DOCTYPE html>
	<html><head>
	<script type="text/javascript">
	// https://github.com/mhwombat/grid/wiki/Triangular-tiles

	function rectTriGrid(r, c) {
	var res = [];

	for (var y = 0; y <= 2*r-1; y++) {
	for(var x = xMin(y); x <= xMax(c, y); x++) {
	if ((x+y)%2 == 0) {
	res.push([x, y]);
	}

	}
	}

	//console.log(res);

	return res;
	}

	function xMin(y) {
	var w = -2*(Math.floor((y+1) / 4));

	if (y%2 == 0) {
	return w;
	}

	return w+1;
	}

	function xMax(c, y) {
	return xMin(y) + 2*(c-1);
	}

	function draw() {
	var c = document.getElementById("myCanvas");
	var ctx = c.getContext("2d");

	let grid = rectTriGrid(1, 10);

	const w = 50;
	const h = 46;

	for (var i = 0; i < grid.length; i++) {
	let tri = grid[i];

	// console.log(tri);



	if (tri[0] % 2 == 1) {
	console.log("draw upside down")
	} else {
	console.log("draw normal");

	var x_pos = w*tri[0]/2;
	var y_pos = h*(tri[1]+1);

	console.log(x_pos);

	ctx.beginPath();
	ctx.moveTo(x_pos, y_pos);

	ctx.lineTo(x_pos+w, y_pos);
	//ctx.lineTo(200, 100);
	ctx.stroke();
	ctx.closePath();
	}

	//break;
	}


	/* ctx.moveTo(0, 0);
	* ctx.lineTo(200, 100);
	* ctx.stroke();*/
	}

	</script>
	</head><body onload="draw();">
	<canvas id="myCanvas" width="800" height="100"></canvas>
	</body>
	</html>