sabha/recursiveSquareFractal.html

## recursiveSquareFractal.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Square</title>
    <style>
      canvas {
        border: solid 1px;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas" width="400" height="400"></canvas>
    <script>
      window.onload = function () {
        const canvas = document.getElementById("canvas");
        const ctx = canvas.getContext("2d");
        let r = false;
        let c = 0;
        const line = (p1, p2) => {
          if (r) {
            // var color = (16777215 / s.length) * i;
            // var r = (color >> 16) & 255;
            // var g = (color >> 8) & 255;
            // var b = color & 255;

            // var alpha = 0.0;

            // ctx.strokeStyle =
            //   "rgba(" + r + "," + g + "," + b + "," + alpha + ")";
            ctx.globalAlpha = 0.9;
            ctx.strokeStyle = "white";
            const plusOrMinus = Math.random() < 0.5 ? -1 : 1;
            c = Math.random() * 10 * plusOrMinus;
            ctx.beginPath();
            ctx.moveTo(p1.x, p1.y + c);
            ctx.lineTo(p2.x + c, p2.y);
            ctx.stroke();
            return;
          }
          ctx.beginPath();
          ctx.moveTo(p1.x, p1.y);
          ctx.lineTo(p2.x, p2.y);
          ctx.stroke();
        };

        const mid = (v1, v2) => ({
          x: (v1.x + v2.x) / 2,
          y: (v1.y + v2.y) / 2,
        });

        const third = (v1, v2) => {
          const a = v1.x - v2.x;
          const b = v1.y - v2.y;
          const distance = Math.sqrt(a * a + b * b);
          return distance / 3;
        };

        const tringle = (v1, v2, v3) => {
          line(v1, v2);
          line(v2, v3);
          line(v3, v1);
        };

        const square = (v1, v2, v3, v4) => {
          line(v1, v2);
          line(v2, v3);
          line(v3, v4);
          line(v4, v1);
        };

        function rec(n, v1, v2, v3, v4, squares = [], path = "") {
          if (n >= 5) {
            return;
          }
          //   console.log(n, path);
          if (n === 4) squares.push({ v1, v2, v3, v4 });
          square(v1, v2, v3, v4);
          //   console.log(v1, v2, v3, v4);
          const t1 = third(v1, v2);
          const t2 = third(v2, v3);
          const t3 = third(v3, v4);
          const t4 = third(v4, v1);
          //   console.log(t1, t2, t3, t4);
          rec(
            n + 1,
            v1,
            { x: v1.x + t1, y: v1.y },
            { x: v1.x + t1, y: v1.y - t1 },
            { x: v1.x, y: v1.y - t1 },
            squares,
            path + "-" + n
          );
          rec(
            n + 1,
            { x: v1.x + t1, y: v1.y },
            { x: v1.x + t1 * 2, y: v1.y },
            { x: v1.x + t1 * 2, y: v1.y - t1 },
            { x: v1.x + t1, y: v1.y - t1 },
            squares,
            path + "-" + n
          );
          rec(
            n + 1,
            { x: v1.x + t1 * 2, y: v1.y },
            v2,
            { x: v2.x, y: v2.y - t1 },
            { x: v2.x - t1, y: v1.y - t1 },
            squares,
            path + "-" + n
          );
          rec(
            n + 1,
            { x: v1.x + t1 * 2, y: v1.y - t1 },
            { x: v2.x, y: v2.y - t1 },
            { x: v2.x, y: v2.y - t1 * 2 },
            { x: v2.x - t1, y: v1.y - t1 * 2 },
            squares,
            path + "-" + n
          );
          rec(
            n + 1,
            { x: v4.x, y: v4.y + t1 },
            { x: v4.x + t1, y: v4.y + t1 },
            { x: v4.x + t1, y: v4.y },
            v4,
            squares,
            path + "-" + n
          );

          rec(
            n + 1,
            { x: v4.x, y: v4.y + t1 * 2 },
            { x: v4.x + t1, y: v4.y + t1 * 2 },
            { x: v4.x + t1, y: v4.y + t1 },
            { x: v4.x, y: v4.y + t1 },
            squares,
            path + "-" + n
          );
          rec(
            n + 1,
            { x: v4.x + t1, y: v4.y + t1 },
            { x: v4.x + t1 * 2, y: v4.y + t1 },
            { x: v4.x + t1 * 2, y: v4.y },
            { x: v4.x + t1, y: v4.y },
            squares,
            path + "-" + n
          );
          rec(
            n + 1,
            { x: v4.x + t1 * 2, y: v4.y + t1 },
            { x: v3.x, y: v4.y + t1 },
            { x: v3.x, y: v4.y },
            { x: v4.x + t1 * 2, y: v4.y },
            squares,
            path + "-" + n
          );
          //   rec(n + 1, m1, m2, v2, squares, path + "-" + n);
          //   rec(n + 1, m2, v3, m3, squares, path + "-" + n);

          return squares;
        }

        const v1 = { x: 50, y: canvas.height - 50 };
        const v2 = { x: canvas.width - 50, y: canvas.width - 50 };
        const v3 = { x: canvas.height - 50, y: 50 };
        const v4 = { x: 50, y: 50 };
        const Squares = rec(0, v1, v2, v3, v4, [], "START");

        let index = 0;

        r = true;

        [1].forEach((i) => {
          Squares.forEach(({ v1, v2, v3, v4 }) => {
            square(v1, v2, v3, v4);
          });
        });
        // r = false;
        // ctx.globalAlpha = 1;
        // ctx.strokeStyle = "black";
        // rec(0, v1, v2, v3, v4, [], "START");
      };
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Square</title>
	<style>
	canvas {
	border: solid 1px;
	}
	</style>
	</head>
	<body>
	<canvas id="canvas" width="400" height="400"></canvas>
	<script>
	window.onload = function () {
	const canvas = document.getElementById("canvas");
	const ctx = canvas.getContext("2d");
	let r = false;
	let c = 0;
	const line = (p1, p2) => {
	if (r) {
	// var color = (16777215 / s.length) * i;
	// var r = (color >> 16) & 255;
	// var g = (color >> 8) & 255;
	// var b = color & 255;

	// var alpha = 0.0;

	// ctx.strokeStyle =
	// "rgba(" + r + "," + g + "," + b + "," + alpha + ")";
	ctx.globalAlpha = 0.9;
	ctx.strokeStyle = "white";
	const plusOrMinus = Math.random() < 0.5 ? -1 : 1;
	c = Math.random() * 10 * plusOrMinus;
	ctx.beginPath();
	ctx.moveTo(p1.x, p1.y + c);
	ctx.lineTo(p2.x + c, p2.y);
	ctx.stroke();
	return;
	}
	ctx.beginPath();
	ctx.moveTo(p1.x, p1.y);
	ctx.lineTo(p2.x, p2.y);
	ctx.stroke();
	};

	const mid = (v1, v2) => ({
	x: (v1.x + v2.x) / 2,
	y: (v1.y + v2.y) / 2,
	});

	const third = (v1, v2) => {
	const a = v1.x - v2.x;
	const b = v1.y - v2.y;
	const distance = Math.sqrt(a * a + b * b);
	return distance / 3;
	};

	const tringle = (v1, v2, v3) => {
	line(v1, v2);
	line(v2, v3);
	line(v3, v1);
	};

	const square = (v1, v2, v3, v4) => {
	line(v1, v2);
	line(v2, v3);
	line(v3, v4);
	line(v4, v1);
	};

	function rec(n, v1, v2, v3, v4, squares = [], path = "") {
	if (n >= 5) {
	return;
	}
	// console.log(n, path);
	if (n === 4) squares.push({ v1, v2, v3, v4 });
	square(v1, v2, v3, v4);
	// console.log(v1, v2, v3, v4);
	const t1 = third(v1, v2);
	const t2 = third(v2, v3);
	const t3 = third(v3, v4);
	const t4 = third(v4, v1);
	// console.log(t1, t2, t3, t4);
	rec(
	n + 1,
	v1,
	{ x: v1.x + t1, y: v1.y },
	{ x: v1.x + t1, y: v1.y - t1 },
	{ x: v1.x, y: v1.y - t1 },
	squares,
	path + "-" + n
	);
	rec(
	n + 1,
	{ x: v1.x + t1, y: v1.y },
	{ x: v1.x + t1 * 2, y: v1.y },
	{ x: v1.x + t1 * 2, y: v1.y - t1 },
	{ x: v1.x + t1, y: v1.y - t1 },
	squares,
	path + "-" + n
	);
	rec(
	n + 1,
	{ x: v1.x + t1 * 2, y: v1.y },
	v2,
	{ x: v2.x, y: v2.y - t1 },
	{ x: v2.x - t1, y: v1.y - t1 },
	squares,
	path + "-" + n
	);
	rec(
	n + 1,
	{ x: v1.x + t1 * 2, y: v1.y - t1 },
	{ x: v2.x, y: v2.y - t1 },
	{ x: v2.x, y: v2.y - t1 * 2 },
	{ x: v2.x - t1, y: v1.y - t1 * 2 },
	squares,
	path + "-" + n
	);
	rec(
	n + 1,
	{ x: v4.x, y: v4.y + t1 },
	{ x: v4.x + t1, y: v4.y + t1 },
	{ x: v4.x + t1, y: v4.y },
	v4,
	squares,
	path + "-" + n
	);

	rec(
	n + 1,
	{ x: v4.x, y: v4.y + t1 * 2 },
	{ x: v4.x + t1, y: v4.y + t1 * 2 },
	{ x: v4.x + t1, y: v4.y + t1 },
	{ x: v4.x, y: v4.y + t1 },
	squares,
	path + "-" + n
	);
	rec(
	n + 1,
	{ x: v4.x + t1, y: v4.y + t1 },
	{ x: v4.x + t1 * 2, y: v4.y + t1 },
	{ x: v4.x + t1 * 2, y: v4.y },
	{ x: v4.x + t1, y: v4.y },
	squares,
	path + "-" + n
	);
	rec(
	n + 1,
	{ x: v4.x + t1 * 2, y: v4.y + t1 },
	{ x: v3.x, y: v4.y + t1 },
	{ x: v3.x, y: v4.y },
	{ x: v4.x + t1 * 2, y: v4.y },
	squares,
	path + "-" + n
	);
	// rec(n + 1, m1, m2, v2, squares, path + "-" + n);
	// rec(n + 1, m2, v3, m3, squares, path + "-" + n);

	return squares;
	}

	const v1 = { x: 50, y: canvas.height - 50 };
	const v2 = { x: canvas.width - 50, y: canvas.width - 50 };
	const v3 = { x: canvas.height - 50, y: 50 };
	const v4 = { x: 50, y: 50 };
	const Squares = rec(0, v1, v2, v3, v4, [], "START");

	let index = 0;

	r = true;

	[1].forEach((i) => {
	Squares.forEach(({ v1, v2, v3, v4 }) => {
	square(v1, v2, v3, v4);
	});
	});
	// r = false;
	// ctx.globalAlpha = 1;
	// ctx.strokeStyle = "black";
	// rec(0, v1, v2, v3, v4, [], "START");
	};
	</script>
	</body>
	</html>