commit 7f07aa5e1f8be7322c43fefc945397bd2557540c
parent 54fd5a3df8db56c92f7933c906020ffc37d5309f
Author: Yuval Langer <yuvallangerontheroad@gmail.com>
Date: Sun, 28 Jun 2020 15:01:48 +0300
Renaming html directory.
Diffstat:
4 files changed, 193 insertions(+), 1 deletion(-)
diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
@@ -6,6 +6,6 @@ pages:
- echo 'Nothing to do...'
artifacts:
paths:
- - html
+ - public
only:
- master
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ </head>
+ <body>
+ <a href="tau/2020-darts.html">τ Day 2020 darts</a>
+ </body>
+</html>
diff --git a/public/tau/2020-darts.html b/public/tau/2020-darts.html
@@ -0,0 +1,83 @@
+<!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() {
+ // COME ON ECMA!
+ // It is that easy!
+ // Get to it!
+ Math.TAU = 2 * Math.PI;
+
+ let number_of_points = 0;
+ let number_of_points_inside = 0;
+ function lerp(from, to, t) {
+ return to * t + from * (1 - t);
+ }
+ 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 main() {
+ let canvas = document.querySelector('#canvas');
+ let c = canvas.getContext('2d');
+ let margin = 0.1;
+
+ c.beginPath();
+ c.arc(canvas.width / 2, canvas.height / 2, 0.5 * canvas.width - margin * canvas.width, 0, Math.TAU, false);
+ c.stroke();
+ 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);
+
+ 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, Math.TAU, false);
+ c.fill();
+ let tau_approximation = 8 * number_of_points_inside / number_of_points;
+ let tau_error = Math.TAU - tau_approximation;
+ let tau_text = `τ approximation =
+= ${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(tau_error) < 0.001) {
+ tau_text = `${tau_text}
+HAPPY τ DAY!`;
+ tau_text_element.innerText = tau_text;
+ return;
+ }
+
+ window.requestAnimationFrame(main);
+ };
+
+ window.addEventListener('load', main);
+ }
+)();
+ </script>
+ </head>
+ <body>
+ <pre id="text"></pre>
+ <canvas id="canvas" width="500" height="500"></canvas>
+ </body>
+</html>
diff --git a/public/tau/2020.html b/public/tau/2020.html
@@ -0,0 +1,100 @@
+<!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 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;
+ for (let i = 0; i < points_on_edge; ++i) {
+ for (let j = 0; j < points_on_edge; ++j) {
+ let unit_x = index_to_unit_coordinate(i, points_on_edge, current_size_factor);
+ let unit_y = index_to_unit_coordinate(j, points_on_edge, current_size_factor);
+ 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.setInterval(main, 1000);
+
+ window.addEventListener('load', main);
+ }
+)();
+ </script>
+ </head>
+ <body>
+ <canvas id="canvas" width="500" height="500"></canvas>
+ </body>
+</html>
