2020.html (3047B)
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 let min_size_factor = 1; 17 let max_size_factor = 100; 18 let current_size_factor_phase = 0.0; 19 let size_factor_phase_increment = 0.01; 20 function lerp(from, to, t) { 21 return to * t + from * (1 - t); 22 } 23 function saw(phase) { 24 let new_phase = phase % 1.0; 25 let signal = 0; 26 if (new_phase < 0.25) { 27 signal = lerp(0, 1, new_phase / 0.25); 28 } else if (new_phase < 0.75) { 29 signal = lerp(1, -1, (new_phase - 0.25) / 0.5); 30 } else { 31 signal = lerp(-1, 0, (new_phase - 0.75) / 0.25); 32 }; 33 return signal; 34 } 35 function unit_coordinate_to_canvas_coordinate(unit_x, canvas_length, margin) { 36 return lerp(canvas_length * margin, canvas_length * (1 - margin), (unit_x + 1)/2); 37 } 38 function index_to_unit_coordinate(i, points_on_edge, size_factor) { 39 return (2 * i / (points_on_edge - 1) - 1) * size_factor; 40 } 41 function main() { 42 let canvas = document.querySelector('#canvas'); 43 let c = canvas.getContext('2d'); 44 c.fillStyle = 'white'; 45 c.fillRect(0, 0, canvas.width, canvas.height); 46 let margin = 0.1; 47 48 let size_factor_signal = saw(current_size_factor_phase); 49 let current_size_factor = lerp(max_size_factor, min_size_factor, (size_factor_signal + 1) / 2); 50 51 c.beginPath(); 52 c.arc(canvas.width / 2, canvas.height / 2, 0.5 * canvas.width - margin * canvas.width, 0, 2 * Math.PI, false); 53 c.stroke(); 54 55 let points_on_edge = 100; 56 let number_of_points = 0; 57 let number_of_points_inside = 0; 58 for (let i = 0; i < points_on_edge; ++i) { 59 for (let j = 0; j < points_on_edge; ++j) { 60 let unit_x = index_to_unit_coordinate(i, points_on_edge, current_size_factor); 61 let unit_y = index_to_unit_coordinate(j, points_on_edge, current_size_factor); 62 if ((unit_x > 1) || (unit_y > 1) || (unit_x < -1) || (unit_y < -1)) { 63 continue; 64 } 65 66 let canvas_x = unit_coordinate_to_canvas_coordinate(unit_x, canvas.width, margin); 67 let canvas_y = unit_coordinate_to_canvas_coordinate(unit_y, canvas.height, margin); 68 69 number_of_points += 1 70 71 if ((unit_x * unit_x + unit_y * unit_y) < 1) { 72 c.fillStyle = 'red'; 73 number_of_points_inside += 1; 74 } else { 75 c.fillStyle = 'black'; 76 }; 77 c.beginPath(); 78 c.arc(canvas_x, canvas_y, 1, 0, 2 * Math.PI, false); 79 c.fill(); 80 } 81 }; 82 83 current_size_factor_phase = (current_size_factor_phase + size_factor_phase_increment) % 1.0; 84 85 c.fillStyle = 'blue'; 86 c.font = '10px helvetica'; 87 c.fillText(`τ (approx): ${8 * number_of_points_inside / number_of_points} #points: ${number_of_points} #inside: ${number_of_points_inside}`, 10, 10); 88 // window.requestAnimationFrame(main); 89 }; 90 window.setInterval(main, 1000); 91 92 window.addEventListener('load', main); 93 } 94 )(); 95 </script> 96 </head> 97 <body> 98 <canvas id="canvas" width="500" height="500"></canvas> 99 </body> 100 </html>