commit c263d918e2b0c98be2312bacda5f358ceddd3efa
parent 00fc7b0259fee017a10715588dfd2176a9bf0d84
Author: Yuval Langer <yuvallangerontheroad@gmail.com>
Date: Sun, 28 Jun 2020 13:40:07 +0300
Move text to `<pre>` element and draw each point only once.
Diffstat:
1 file changed, 29 insertions(+), 31 deletions(-)
diff --git a/html/tau/2020-darts.html b/html/tau/2020-darts.html
@@ -13,7 +13,8 @@ canvas {
(
function() {
- let points = [];
+ let number_of_points = 0;
+ let number_of_points_inside = 0;
function lerp(from, to, t) {
return to * t + from * (1 - t);
}
@@ -23,49 +24,45 @@ canvas {
function main() {
let canvas = document.querySelector('#canvas');
let c = canvas.getContext('2d');
- c.fillStyle = 'white';
- c.fillRect(0, 0, canvas.width, canvas.height);
let margin = 0.1;
c.beginPath();
c.arc(canvas.width / 2, canvas.height / 2, 0.5 * canvas.width - margin * canvas.width, 0, 2 * Math.PI, false);
c.stroke();
- let number_of_points = 0;
- let number_of_points_inside = 0;
- points.push(lerp(-1, 1, Math.random()));
- points.push(lerp(-1, 1, Math.random()));
- for (let i = 0; i < points.length - 2; i+=2) {
- let unit_x = points[i];
- let unit_y = points[i + 1];
- if ((unit_x > 1) || (unit_y > 1) || (unit_x < -1) || (unit_y < -1)) {
- continue;
- }
+ let unit_x = lerp(-1, 1, Math.random());
+ let unit_y = lerp(-1, 1, Math.random());
+ let canvas_x = unit_coordinate_to_canvas_coordinate(unit_x, canvas.width, margin);
+ let canvas_y = unit_coordinate_to_canvas_coordinate(unit_y, canvas.height, margin);
- let canvas_x = unit_coordinate_to_canvas_coordinate(unit_x, canvas.width, margin);
- let canvas_y = unit_coordinate_to_canvas_coordinate(unit_y, canvas.height, margin);
+ number_of_points += 1
- number_of_points += 1
-
- if ((unit_x * unit_x + unit_y * unit_y) < 1) {
- c.fillStyle = 'red';
- number_of_points_inside += 1;
- } else {
- c.fillStyle = 'black';
- };
- c.beginPath();
- c.arc(canvas_x, canvas_y, 1, 0, 2 * Math.PI, false);
- c.fill();
+ if ((unit_x * unit_x + unit_y * unit_y) < 1) {
+ c.fillStyle = 'red';
+ number_of_points_inside += 1;
+ } else {
+ c.fillStyle = 'black';
};
+ c.beginPath();
+ c.arc(canvas_x, canvas_y, 1, 0, 2 * Math.PI, false);
+ c.fill();
- c.fillStyle = 'blue';
- c.font = '10px serif';
let tau_approximation = 8 * number_of_points_inside / number_of_points;
- c.fillText(`τ: ${Math.floor(tau_approximation * 100) / 100} = (8 * ${number_of_points_inside} / ${number_of_points}) error: ${Math.abs(Math.PI * 2 - tau_approximation)}`, 10, 10);
+ let tau_error = Math.abs(Math.PI * 2 - tau_approximation);
+ let tau_text = `τ: ${Math.floor(tau_approximation * 100) / 100}
+ ${number_of_points_inside}
+= 8 * ------
+ ${number_of_points}
+
+error: ${tau_error}`;
+ let tau_text_element = document.querySelector('#text');
+ tau_text_element.innerText = tau_text;
if (Math.abs(2 * Math.PI - tau_approximation) < 0.001) {
- c.font = '40px serif';
- c.fillText('HAPPY τ DAY!', 20, 50);
+ tau_text = `${tau_text}
+HAPPY τ DAY!`;
+ tau_text_element.innerText = tau_text;
return;
}
+
window.requestAnimationFrame(main);
};
@@ -75,6 +72,7 @@ canvas {
</script>
</head>
<body>
+ <pre id="text"></pre>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>
