kaka.farm

Unnamed repository; edit this file 'description' to name the repository.
git clone https://kaka.farm/~git/kaka.farm
Log | Files | Refs | README

commit cfa2304372b13a9bdc7a3c1d061ac05b31bf6edc
parent f83b7bf23b770df998d0f9b40abceac45f0b7a76
Author: Yuval Langer <yuvallangerontheroad@gmail.com>
Date:   Sat, 27 Jun 2020 20:05:36 +0300

Add the random dart algorithm.

Diffstat:
Ahtml/tau/2020-darts.html | 99+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 99 insertions(+), 0 deletions(-)

diff --git a/html/tau/2020-darts.html b/html/tau/2020-darts.html @@ -0,0 +1,99 @@ +<!doctype html> +<html> + <head> + <meta charset="utf-8" /> + <title>Tau Day 2020</title> + <style tyle="text/css"> +canvas { + border: 5px dotted red; +} + </style> + <script type="text/javascript"> +'use strict'; + +( + function() { + let points = []; + let min_size_factor = 1; + let max_size_factor = 100; + let current_size_factor_phase = 0.0; + let size_factor_phase_increment = 0.01; + function lerp(from, to, t) { + return to * t + from * (1 - t); + } + function saw(phase) { + let new_phase = phase % 1.0; + let signal = 0; + if (new_phase < 0.25) { + signal = lerp(0, 1, new_phase / 0.25); + } else if (new_phase < 0.75) { + signal = lerp(1, -1, (new_phase - 0.25) / 0.5); + } else { + signal = lerp(-1, 0, (new_phase - 0.75) / 0.25); + }; + return signal; + } + function unit_coordinate_to_canvas_coordinate(unit_x, canvas_length, margin) { + return lerp(canvas_length * margin, canvas_length * (1 - margin), (unit_x + 1)/2); + } + function index_to_unit_coordinate(i, points_on_edge, size_factor) { + return (2 * i / (points_on_edge - 1) - 1) * size_factor; + } + 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; + + let size_factor_signal = saw(current_size_factor_phase); + let current_size_factor = lerp(max_size_factor, min_size_factor, (size_factor_signal + 1) / 2); + + 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 points_on_edge = 100; + 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 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 + + 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(); + }; + + current_size_factor_phase = (current_size_factor_phase + size_factor_phase_increment) % 1.0; + + c.fillStyle = 'blue'; + c.font = '10px helvetica'; + c.fillText(`τ (approx): ${8 * number_of_points_inside / number_of_points} #points: ${number_of_points} #inside: ${number_of_points_inside}`, 10, 10); + window.requestAnimationFrame(main); + }; + + window.addEventListener('load', main); + } +)(); + </script> + </head> + <body> + <canvas id="canvas" width="500" height="500"></canvas> + </body> +</html>