supernovaplus/sierpinski.html

## sierpinski.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
    body {
      background-color: rgb(27, 24, 24);
      overflow: hidden;
    }
  </style>
  <body>
    <script>
      const canvas = document.body.appendChild(
        document.createElement('canvas')
      );
      //   canvas.style = 'border: 1px solid #000000';
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
      const ctx = canvas.getContext('2d');
      ctx.fillStyle = 'white';
      ctx.textAlign = 'center';

      ctx.font = '20px arial';
      ctx.fillText(
        'Click anywhere on the screeen',
        canvas.width / 2,
        canvas.height / 2
      );

      const pointsMargin = 10;
      const points = [
        { x: canvas.width / 2, y: pointsMargin },
        { x: pointsMargin, y: canvas.height - pointsMargin },
        { x: canvas.width - pointsMargin, y: canvas.height - pointsMargin },
      ];
      // console.log(points);

      const pointSize = 2;

      const drawPoint = (x, y) => {
        ctx.beginPath();
        ctx.arc(x, y, pointSize, 0, 2 * Math.PI);
        ctx.stroke();
        ctx.fill();
      };

      const clearCanvas = () => {
        ctx.fillStyle = 'rgb(27, 24, 24)';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
      };

      const selectRandomPoint = () =>
        points[Math.floor(Math.random() * points.length)];

      const getCoordsFromEvent = (event) => {
        const rect = canvas.getBoundingClientRect();
        const x = event.clientX - rect.left;
        const y = event.clientY - rect.top;
        return { x, y };
        // console.log('x: ' + x + ' y: ' + y);

      };

      canvas.addEventListener('click', (event) => {
        const { x, y } = getCoordsFromEvent(event);
        start(x, y);
      });

      canvas.addEventListener('contextmenu', (event) => {
        event.preventDefault();
        const { x, y } = getCoordsFromEvent(event);
        points.push({x, y});
        drawPoint(x, y)
      });

      const start = (x, y) => {
        clearCanvas();
        ctx.fillStyle = 'white';
        points.forEach((pos) => drawPoint(pos.x, pos.y));

        let lastPoint = { x, y };
        drawPoint(lastPoint.x, lastPoint.y);

        for (let i = 0; i <= 30000; i++) {
          const newSelectedPoint = selectRandomPoint();
          const newPoint = {
            x: (lastPoint.x + newSelectedPoint.x) / 2,
            y: (lastPoint.y + newSelectedPoint.y) / 2,
          };

          //   points.push(newPoint);
          drawPoint(newPoint.x, newPoint.y);

          lastPoint = newPoint;
        }
      };
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	</head>
	<style>
	* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	}
	body {
	background-color: rgb(27, 24, 24);
	overflow: hidden;
	}
	</style>
	<body>
	<script>
	const canvas = document.body.appendChild(
	document.createElement('canvas')
	);
	// canvas.style = 'border: 1px solid #000000';
	canvas.width = window.innerWidth;
	canvas.height = window.innerHeight;
	const ctx = canvas.getContext('2d');
	ctx.fillStyle = 'white';
	ctx.textAlign = 'center';

	ctx.font = '20px arial';
	ctx.fillText(
	'Click anywhere on the screeen',
	canvas.width / 2,
	canvas.height / 2
	);

	const pointsMargin = 10;
	const points = [
	{ x: canvas.width / 2, y: pointsMargin },
	{ x: pointsMargin, y: canvas.height - pointsMargin },
	{ x: canvas.width - pointsMargin, y: canvas.height - pointsMargin },
	];
	// console.log(points);

	const pointSize = 2;

	const drawPoint = (x, y) => {
	ctx.beginPath();
	ctx.arc(x, y, pointSize, 0, 2 * Math.PI);
	ctx.stroke();
	ctx.fill();
	};

	const clearCanvas = () => {
	ctx.fillStyle = 'rgb(27, 24, 24)';
	ctx.fillRect(0, 0, canvas.width, canvas.height);
	};

	const selectRandomPoint = () =>
	points[Math.floor(Math.random() * points.length)];

	const getCoordsFromEvent = (event) => {
	const rect = canvas.getBoundingClientRect();
	const x = event.clientX - rect.left;
	const y = event.clientY - rect.top;
	return { x, y };
	// console.log('x: ' + x + ' y: ' + y);

	};

	canvas.addEventListener('click', (event) => {
	const { x, y } = getCoordsFromEvent(event);
	start(x, y);
	});

	canvas.addEventListener('contextmenu', (event) => {
	event.preventDefault();
	const { x, y } = getCoordsFromEvent(event);
	points.push({x, y});
	drawPoint(x, y)
	});

	const start = (x, y) => {
	clearCanvas();
	ctx.fillStyle = 'white';
	points.forEach((pos) => drawPoint(pos.x, pos.y));

	let lastPoint = { x, y };
	drawPoint(lastPoint.x, lastPoint.y);

	for (let i = 0; i <= 30000; i++) {
	const newSelectedPoint = selectRandomPoint();
	const newPoint = {
	x: (lastPoint.x + newSelectedPoint.x) / 2,
	y: (lastPoint.y + newSelectedPoint.y) / 2,
	};

	// points.push(newPoint);
	drawPoint(newPoint.x, newPoint.y);

	lastPoint = newPoint;
	}
	};
	</script>
	</body>
	</html>