2020-darts.html (2183B)
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>Tau Day 2020</title> 6 <style tyle="text/css"> 7 canvas { 8 border: 5px dotted red; 9 } 10 </style> 11 <script type="text/javascript"> 12 'use strict'; 13 14 ( 15 function() { 16 // COME ON ECMA! 17 // It is that easy! 18 // Get to it! 19 Math.TAU = 2 * Math.PI; 20 21 let number_of_points = 0; 22 let number_of_points_inside = 0; 23 function lerp(from, to, t) { 24 return to * t + from * (1 - t); 25 } 26 function unit_coordinate_to_canvas_coordinate(unit_x, canvas_length, margin) { 27 return lerp(canvas_length * margin, canvas_length * (1 - margin), (unit_x + 1)/2); 28 } 29 function main() { 30 let canvas = document.querySelector('#canvas'); 31 let c = canvas.getContext('2d'); 32 let margin = 0.1; 33 34 c.beginPath(); 35 c.arc(canvas.width / 2, canvas.height / 2, 0.5 * canvas.width - margin * canvas.width, 0, Math.TAU, false); 36 c.stroke(); 37 let unit_x = lerp(-1, 1, Math.random()); 38 let unit_y = lerp(-1, 1, Math.random()); 39 let canvas_x = unit_coordinate_to_canvas_coordinate(unit_x, canvas.width, margin); 40 let canvas_y = unit_coordinate_to_canvas_coordinate(unit_y, canvas.height, margin); 41 42 number_of_points += 1 43 44 if ((unit_x * unit_x + unit_y * unit_y) < 1) { 45 c.fillStyle = 'red'; 46 number_of_points_inside += 1; 47 } else { 48 c.fillStyle = 'black'; 49 }; 50 c.beginPath(); 51 c.arc(canvas_x, canvas_y, 1, 0, Math.TAU, false); 52 c.fill(); 53 let tau_approximation = 8 * number_of_points_inside / number_of_points; 54 let tau_error = Math.TAU - tau_approximation; 55 let tau_text = `τ approximation = 56 = ${Math.floor(tau_approximation * 100) / 100} 57 ${number_of_points_inside} 58 = 8 * ------ 59 ${number_of_points} 60 61 error = ${tau_error}`; 62 let tau_text_element = document.querySelector('#text'); 63 tau_text_element.innerText = tau_text; 64 if (Math.abs(tau_error) < 0.001) { 65 tau_text = `${tau_text} 66 HAPPY τ DAY!`; 67 tau_text_element.innerText = tau_text; 68 return; 69 } 70 71 window.requestAnimationFrame(main); 72 }; 73 74 window.addEventListener('load', main); 75 } 76 )(); 77 </script> 78 </head> 79 <body> 80 <pre id="text"></pre> 81 <canvas id="canvas" width="500" height="500"></canvas> 82 </body> 83 </html>