Sierpinski triangle

index.html

<style>
  body {
  background: #202020;
  margin: 0px;
  padding: 0px;
}

p {
  position: absolute;
  font-family: Open Sans, sans-serif;
  font-size: 24px;
  color: white;
  margin: 20px;
}
</style>

<p id="instruction1">Click or press three times to create a triangle</p>
<p id="instruction2">Now choose a starting point</p>
<canvas id="canvas"></canvas>

<script>
var canvas = document.getElementById("canvas");

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

var ctx = canvas.getContext("2d");

var numClicks = 0;
var points = [];

document.getElementById("instruction2").style.display = "none";

canvas.addEventListener(
  "mousedown",
  function(event) {
    var x = event.x;
    var y = event.y;

    if (numClicks < 3) {
      ctx.fillStyle = 'rgba(247, 183, 51, 1)';
      drawPoint(x, y, 5);
      points[numClicks] = [x, y];
      if (numClicks === 2) {
        document.getElementById("instruction1").style.display = "none";
        document.getElementById("instruction2").style.display = "block";
      }
      numClicks++;
    } else {
      document.getElementById("instruction2").style.display = "none";
      ctx.fillStyle = 'rgba(252, 74, 26, 1)';
      drawPoint(x, y, 5);
      ctx.fillStyle = "rgba(74, 189, 172, 0.7)";
      draw(x, y);
    }
  },
  false
);

ctx.fillStyle = "deepskyblue";

function draw(x, y) {
  var point = points[Math.floor(Math.random() * 3)];

  var newPoint = [x + (point[0] - x) / 2, y + (point[1] - y) / 2];

  drawPoint(newPoint[0], newPoint[1]);

  requestAnimationFrame(function() {
    draw(newPoint[0], newPoint[1]);
  });
}

function drawPoint(x, y, r = 2) {
  ctx.beginPath();
  ctx.arc(x, y, r, 0, 2 * Math.PI);
  ctx.fill();
}
</script>

thumbnail.png