sponrad/fun_grid.html

## fun_grid.html
<html>
  <body>
    <canvas id="myCanvas" width="1000" height="1000">
    </canvas>
    <script>
     var c = document.getElementById("myCanvas");
     var ctx = c.getContext("2d");

     // canvas 0,0 is top left

     function drawLine(x1, y1, x2, y2) {
         ctx.moveTo(x1, y1);
         ctx.lineTo(x2, y2);
         ctx.stroke();
     }

     // drawLine(0, 0, 500, 500);
     // drawLine(500, 0, 0, 500);

     drawLine(0, 0, 100, 500);
     drawLine(0, 100, 200, 500);
     drawLine(0, 200, 300, 500);
     drawLine(0, 300, 400, 500);
     drawLine(0, 400, 500, 500);

     function drawFunGrid(point1, center, point2, count) {
         // point1, point2, and center are [x, y] arrays
         // count is number of lines

         var l1XStep = (center[0] - point1[0]) / count;
         var l1YStep = (center[1] - point1[1]) / count;
         var l2XStep = (point2[0] - center[0]) / count;
         var l2YStep = (point2[1] - center[1]) / count;

         for (var i = 0; i <= count; i++) {
             drawLine(
                 point1[0] + (l1XStep * i),
                 point1[1] + (l1YStep * i),
                 center[0] + (l2XStep * i),
                 center[1] + (l2YStep * i),
             );
         }
     }

     function redraw(count) {
         ctx.clearRect(0, 0, 1000, 1000);
         ctx.beginPath();

         drawFunGrid(
             [500, 0],
             [500, 500],
             [1000, 500],
             count
         );

         drawFunGrid(
             [500, 0],
             [500, 500],
             [0, 500],
             count
         );

         drawFunGrid(
             [0, 500],
             [500, 500],
             [500, 1000],
             count
         );

         drawFunGrid(
             [1000, 500],
             [500, 500],
             [500, 1000],
             count
         );
     }

     var i = 10;
     var step = 1;

     // redraw(i);

     function doRedraw() {
         redraw(i);
         if (i > 30 && step === 1) step = -1;
         if (i < 10 && step === -1) step = 1;
         i = i + step;
     }

     // setInterval(doRedraw, 100);

    </script>
  </body>
</html>
	<html>
	<body>
	<canvas id="myCanvas" width="1000" height="1000">
	</canvas>
	<script>
	var c = document.getElementById("myCanvas");
	var ctx = c.getContext("2d");

	// canvas 0,0 is top left

	function drawLine(x1, y1, x2, y2) {
	ctx.moveTo(x1, y1);
	ctx.lineTo(x2, y2);
	ctx.stroke();
	}

	// drawLine(0, 0, 500, 500);
	// drawLine(500, 0, 0, 500);

	drawLine(0, 0, 100, 500);
	drawLine(0, 100, 200, 500);
	drawLine(0, 200, 300, 500);
	drawLine(0, 300, 400, 500);
	drawLine(0, 400, 500, 500);

	function drawFunGrid(point1, center, point2, count) {
	// point1, point2, and center are [x, y] arrays
	// count is number of lines

	var l1XStep = (center[0] - point1[0]) / count;
	var l1YStep = (center[1] - point1[1]) / count;
	var l2XStep = (point2[0] - center[0]) / count;
	var l2YStep = (point2[1] - center[1]) / count;

	for (var i = 0; i <= count; i++) {
	drawLine(
	point1[0] + (l1XStep * i),
	point1[1] + (l1YStep * i),
	center[0] + (l2XStep * i),
	center[1] + (l2YStep * i),
	);
	}
	}

	function redraw(count) {
	ctx.clearRect(0, 0, 1000, 1000);
	ctx.beginPath();

	drawFunGrid(
	[500, 0],
	[500, 500],
	[1000, 500],
	count
	);

	drawFunGrid(
	[500, 0],
	[500, 500],
	[0, 500],
	count
	);

	drawFunGrid(
	[0, 500],
	[500, 500],
	[500, 1000],
	count
	);

	drawFunGrid(
	[1000, 500],
	[500, 500],
	[500, 1000],
	count
	);
	}

	var i = 10;
	var step = 1;

	// redraw(i);

	function doRedraw() {
	redraw(i);
	if (i > 30 && step === 1) step = -1;
	if (i < 10 && step === -1) step = 1;
	i = i + step;
	}

	// setInterval(doRedraw, 100);

	</script>
	</body>
	</html>