https://drsb.f5.si/js/pi.js

1const monteCarlo = document.getElementById('monteCarlo');
2const monte = monteCarlo.getContext('2d');
3const serif = ' 30px "Times New Roman", Times, "Noto Serif", "DejaVu Serif", "Liberation Serif", Georgia, serif';
4let inside = 0;
5let outside = 0;
6let stopId = null;
7
8monte.fillStyle = '#fff';
9monte.fillRect(0, 0, 800, 900);
10monte.beginPath();
11monte.moveTo(0, 800);
12monte.arc(0, 800, 800, Math.PI * 3 / 2, 0);
13monte.fillStyle = '#f2ffff';
14monte.fill();
15
16function putDot() {
17  const x = Math.random() * 800;
18  const y = Math.random() * 800;
19  if (x ** 2 + (800 - y) ** 2 <= 640000) {
20    inside++;
21    monte.fillStyle = '#6bd0d2';
22  } else {
23    outside++;
24    monte.fillStyle = '#d26d6b';
25  }
26  monte.fillRect(x - 1, y - 1, 3, 3);
27  monte.fillStyle = '#fff';
28  monte.fillRect(0, 800, 800, 100);
29  monte.font = 'italic' + serif;
30  monte.fillStyle = '#555';
31  monte.fillText('π', 20, 830);
32  monte.font = serif;
33  monte.fillText('= ' + (4 * inside / (inside + outside)), 45, 830);
34  monte.fillText('i = ' + (inside + outside), 20, 880);
35  stopId = window.requestAnimationFrame(putDot);
36}
37
38document.getElementById('startMonteCarlo').addEventListener('click', putDot);
39document.getElementById('stopMonteCarlo').addEventListener('click', () => {window.cancelAnimationFrame(stopId);});